将样式表添加到WordPress的最佳方法

时间:2013-08-31 作者:Zach Russell

我正在将一个移动响应页面(目前内置于Bootstrap)转换为WordPress。

使用wp_register_style()wp_enqueue_style() 将向所有页面添加样式表,包括wp管理员。我知道我可以通过使用if ( ! is_admin() ) 条件语句。

使用条件语句更好,还是只使用:

<link rel="stylesheet" type="text/css" href="<?php bloginfo(\'template_directory\'); ?>/bootstrap.css" media="screen" />
在主题的标题中。php?

3 个回复
最合适的回答,由SO网友:cybmeta 整理而成

要仅在前端页面中加载scrpits,请使用:

 add_action( \'wp_enqueue_scripts\', \'my_front_end_scripts\' );
 function my_front_end_scripts(){
     wp_enqueue_script(\'script_handle\');
     wp_enqueue_style(\'style_handle\');
 }
要仅在登录时加载脚本,请使用:

 add_action( \'login_enqueue_scripts\', \'my_login_scripts\');
 function my_login_scripts(){
     wp_enqueue_script(\'script_handle\');
     wp_enqueue_style(\'style_handle\');
 }
要仅在admin中加载脚本,请使用:

 add_action(\'admin_enqueue_scripts\',\'my_admin_scripts\');
 function my_admin_scripts(){
     wp_enqueue_script(\'script_handle\');
     wp_enqueue_style(\'style_handle\');
 }

SO网友:shea

您应该始终使用wp_enqueue_style()wp_enqueue_script() 如果可能,除非是特殊情况,如HTML5 Shiv脚本,它需要IE条件注释。

如果使用适当的挂钩将样式排队,则只应在前端加载。在您的实例中使用的正确钩子是wp_enqueue_scripts, 适用于脚本和样式on the front-end only.

function theme_name_styles() {

    /* Enqueue the stylesheet. See the Codex for more options */
    wp_enqueue_style( \'theme-name-bootstrap\', get_template_directory_uri() . \'/boostrap.css\' );
}

add_action( \'wp_enqueue_scripts\', \'theme_name_styles\' );
如果要在登录页面或管理区域加载样式或脚本,请使用login_enqueue_scriptsadmin_enqueue_scripts, 分别地

我建议您阅读Codex页面中的函数wp_enqueue_style()wp_enqueue_script(), 以及动作挂钩的页面wp_enqueue_scripts, login_enqueue_scripts, 和admin_enqueue_scripts.

SO网友:Dan Ștefancu

只是一个便条login_enqueue_scripts: 在此挂钩上排队的脚本和样式将在您的页面源代码中呈现</body> (自WordPress 3.6.1起)。在此处查看有关正文中样式链接的说明-https://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag

如果需要将登录页面的脚本和样式放在<head> 你最好使用login_head 钩住并回应您的链接:

add_action( \'login_head\', \'wp240913_login_head\' );
function wp240913_login_head() {
    echo \'<link rel="stylesheet" type="text/css" href="\' . get_bloginfo(\'stylesheet_directory\') . \'/some.css" />\';
    echo \'<script type="text/javascript" src="\' . get_bloginfo(\'stylesheet_directory\') . \'/some.js"></script>\';
}

结束

相关推荐