!
也想出现在这里? 联系我们
全球五大数据中心,CYUN提供海外优质服务器,CN2优化线路,为您的业务推进提供强大助力

怎么加载 CSS 和JS? - wordpress开发

这将确保网站保持高效并且不存在不兼容问题。

在开发wordpress主题时,如果还在用写网页时的方法进行加载,就不太符合官方建议了,其实官方提供了一系列的函数,帮助我们更好的加载这些文件,这一次的wordpress开发教大家怎么加载 CSS 和JS。

主题

/**
 * 加载CSS
 */
wp_enqueue_style( 'index', get_template_directory_uri() . '/css/index.css',false,'1.0','all');

正确加载 CSS 到 WordPress的例子(放于主题根目录的functions.php文件内的

//加载额外的css到wordpress
function my_new_css(){
	wp_register_style('comments',get_template_directory_uri().'/css/comments.css');
	wp_enqueue_style('comments', get_template_directory_uri().'/css/comments.css');
}
add_action('wp_enqueue_scripts','my_new_css');

加载JS:

/**
 * 将脚本和样式排队。
 */
function lifet_scripts() {

	wp_enqueue_script( 'lifet-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

	wp_enqueue_script( 'lifet-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
	//简繁切换
	wp_enqueue_script( 'zh-cn-tw', get_template_directory_uri() . '/js/zh-cn-tw.js', array(), '20200506', true );

}
add_action( 'wp_enqueue_scripts', 'lifet_scripts' );

子主题

加载css

//加载子主题的css到主题中
function my_theme_enqueue_styles(){
  wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri().'/css/n.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

加载PHP

require_once( get_stylesheet_directory(). '/inc/n_xunzhang.php' );

判断加载css:

肯定有更好的办法,欢迎在评论区交流。

// 在网站head加载css
if ( ! function_exists( 'lifet_css_head' ) ) :
   function lifet_css_head() {
      $link_head = "    <link rel='stylesheet' href='";
      $link_footer = "' type='text/css' media='all' />";
      $css_url = get_template_directory_uri();

      //是否为首页
      if( is_home() ){echo "$link_head$css_url/css/index.css$link_footer";}
   
      //是否为日志页
      if( is_single() ){echo "$link_head$css_url/css/single.css$link_footer";}
   
      //是否为一般页面
      if( is_page() ){echo "$link_head$css_url/css/page.css$link_footer";}
   }
  endif;
add_action('wp_head', 'lifet_css_head');

怎么引入jquery.js?

怎么加载 CSS 和JS? - wordpress开发-Npcink
怎么加载 CSS 和JS? - wordpress开发-Npcink

怎么引入jquery.js? - wordpress开发

当下紧跟潮流的wordpress已经集成了全套的jquery库与其他子库,方便我们开发主题或是插件时可以方便的调用wordpress自带的jquery库

css/js方法总结

WordPress引入css/js方法很多,条件很多。如何全局加载,或仅在某些页面精准加载,什么时候需要先注册脚本再加载,本文希望找到最简单的方式,并给出探索更多方法的途径。

在前台加载css/js

wp_enqueue_script()函数加载js,用wp_enqueue_style()加载css,加载资源的位置(action)只有一个——wp_enqueue_scripts

用wp_enqueue_系列函数可以更好的处理脚本样式表的依赖关系,防止重复加载,以twentyfifteen主题为例。

function twentyfifteen_scripts() {
     
    //全局加载一般的样式表
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );
 
    //全局加载主样式表
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
 
    //全局加载仅用于IE的样式表
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
 
    //全局加载js脚本
    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
     
    //给js脚本传递变量,解决脚本中不能调用php的问题
    wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
        'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
        'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
    ) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

若仅在某些页面加载,利用WordPress的Conditional Tags即可。

什么时需要先注册css/js

即何时需要使用wp_register_script()wp_register_style()函数。

当css/js很多,并且要分情况加载时,使用wp_register_script()可以更好的管理资源,避免重复劳动。下面的示例代码中,先在init action上把所有需要用到样式表都注册一遍,之后不管想在哪里引入,都可以简单的用wp_enqueue_style( $handle )来加载。

// 在init action处注册脚本,可以与其它逻辑代码放在一起
function my_init(){
    $url = get_template_directory_uri();
    // 注册样式表
    $styles = array(
        'style1' => $url . '/css/style1.css',
        'style2' => $url . '/css/style2.css',
        'style3' => $url . '/css/style3.css'
    );
 
    foreach( $styles as $k => $v ){
        wp_register_style( $k, $v, false );
    }
 
    // 注册脚本
     
    // 其它需要在init action处运行的脚本
}
add_action( 'init', 'my_init' );

注册脚本时需要运行$wp_scripts->add( $handle, $src, $deps, $ver );,若脚本没有注册直接使用wp_enqueue_script,需要先调用add方法,也就是说重复enqueue一个脚本就会运行多次add方法,降低了程序的效率。

在WordPress登录页面加载

将action替换为login_enqueue_scripts即可,例如

function enqueue_for_login(){
    wp_enqueue_style( 'core', 'style.css', false );
    wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'login_enqueue_scripts', 'enqueue_for_login' );

如果想了解其它方式,可以仔细阅读wp-login.php。

在后台全局加载

同理,将action改为admin_enqueue_scripts

function my_enqueue() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

想了解更多方法,请阅读wp-admin/admin-header.php。

后台按需加载

仅用于后台某些页面的资源只在这些页面加载就好,不要到处使用,可以减少不必要的冲突。

1. $hook_suffix

首先我们可以根据admin_enqueue_scripts这个action传递的$hook_suffix参数来判断所处的页面,例如仅在edit.php加载,代码如下

function my_enqueue( $hook_suffix ) {
    if ( 'edit.php' == $hook_suffix ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }   
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

edit.php就是post、page或者custom post type的列表页面,编辑页面是post.php,新建页面是post-new.php,可以在不同页面打印$hook_suffix来了解它的使用方法。但由此也可看出它不能区分现在是在哪种post页面,需要借助更多的全局变量来判断。

2. $typenow

全局变量$typenow可以告诉我们当前的post type,例如仅在post的列表页面加载可以这样来判断

function my_enqueue( $hook_suffix ) {
    global $typenow;
    if ( 'edit.php' == $hook_suffix && $typenow == 'post' ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }   
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

3. get_current_screen()

上述两个全局变量可以区分大多数情况,若区分不了,可以试试使用get_current_screen()函数,该函数返回当前页面的post type、ID、base等信息,只能在admin_init之后使用,具体可以参考官方文档。

4. $pagenow

全局变量$pagenow的返回值与$hook_suffix类似,只是它在前台后台都可以访问,定义的更早,例如前三者在admin_init处没有值,但$pagenow却有。

它定义在wp-includes/vars.php中,该文件还定义了浏览器、服务器全局变量,例如$is_winIE、$is_apache,wp_is_mobile()函数也在这里出现。

上述全局变量和函数能区分大多数情况,但依然有无力的时候,这时可以借助$_REQUEST来判断。上述变量的值也是从$_REQUEST获取,但多一层值是否存在的检查,所以能用它们解决的就不要用$_REQUEST或者$_GET。

补充


在创建主题时,您可能希望创建其他样式表或JavaScript文件。但是,请记住,WordPress网站不仅会激活您的主题,还会使用许多不同的插件。因此,一切都和谐地工作,主题和插件使用标准的WordPress方法加载脚本和样式表是很重要的。这将确保网站保持高效并且不存在不兼容问题。

WordPress是目前世界上最受欢迎的内容管理系统,拥有数千万用户。这就是为什么,为了制作一个成功的主题,我们需要像每个WordPress用户一样思考,并尝试按照本书的说法正确加载我们的主题中的CSS文件。

幸运的是,WordPress可以很容易地解决这样的问题:注册和排队样式表。

在WordPress中加载CSS的正确方法

正如我们之前所说,WordPress多年来发展很快,我们必须考虑世界上每一个WordPress用户。 

除此之外,我们还需要考虑数千个WordPress插件。但是不要让这些大数字吓到你:WordPress为我们提供了非常有用的功能,可以将CSS样式正确加载到WordPress中。 

我们来看一下。

注册CSS文件

如果您要加载CSS样式表,则应首先使用该wp_register_style()函数注册它们:

wp_register_style( $handle, $src, $deps, $ver, $media );
?>
  • $handle(字符串,必需)是样式表的唯一名称。其他函数将使用此“句柄”来排队和打印样式表。
  • $src(string,required)是指样式表的URL。您可以使用函数get_template_directory_uri()来获取主题目录中的样式文件。永远不要考虑硬编码!
  • $deps(array,optional)处理依赖样式的名称。如果缺少某些其他样式文件,样式表将无效,请使用此参数设置“依赖项”。
  • $ver(string或boolean,optional)是版本号。如果需要,您可以使用主题的版本号或组成一个。如果您不想使用版本号,请将其设置为null。它默认为false,这使得WordPress添加自己的版本号。
  • $media(字符串,可选)是  CSS媒体类型,如“屏幕”或“手持”或“打印”。如果您不确定是否需要使用它,请不要使用它。它默认为“全部”。

这是wp_register_style()函数的一个例子:

// wp_register_style() 示例
wp_register_style('my-bootstrap-extension', // 名称
    get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 样式表的路径array( 'bootstrap-main' ), // 依存的其他样式表'1.2', // 版本号'screen', // CSS 媒体类型
);
?>

在WordPress中,注册样式是“可选的”。如果你的样式不会被其他插件使用,或者你不打算使用任何代码来再次加载它,你可以自由地排队样式而不需要注册它。继续看看它是如何实现的。

排队 CSS 文件

注册我们的风格文件后,我们需要“排队”它,使其准备好在我们主题的部分加载。

我们使用 wp_enqueue_style() 函数来实现:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

该函数的参数和上面的 wp_register_style() 函数是一样的,就不再重复。

请记住,如果一个插件将要用到你的样式表,或者你打算将在你的主题的不同地方进行加载,你绝对应该先注册。

加载样式到网站

我们不能在主题中随便找个地方使用 wp_enqueue_style() 函数 – 我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子:

以下是这些钩子的示例:

// 在网站前台加载css
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
 
// 在后台加载css
function mytheme_enqueue_options_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
 
// 在登录页面加载css
function mytheme_enqueue_login_style() {
    wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
 
?>

WordPress 有一个重要的公告:“使用 wp_enqueue_scripts() ,不要用 wp_print_styles() ”,它会告诉你一个与 WordPress3.3版本可能的不兼容错误。

额外函数

WordPress 有一些关于 CSS 非常有用的函数:他们允许我们打印内嵌样式,查看样式文件的排队状态,添加元数据以及注销样式。

添加动态内联样式:wp_add_inline_style()

如果你的主题有选项可自定义主题的样式,你可以使用 wp_add_inline_style() 函数来打印内置的样式。

检查样式表的排队状态:wp_style_is()

相关介绍

怎么加载 CSS 和JS? - wordpress开发-Npcink
怎么加载 CSS 和JS? - wordpress开发-Npcink

怎么让插件加载css和js? - wordpress开发

这是在开发wordpress插件时常用的一个例子,可供大家参考

人已赞赏
WP开发

如何为你的wordpress主题添加整站SEO功能

2019-1-13 4:31:12

WP开发

WordPress-常用函数wp_head()详细解读及原理

2019-1-13 23:29:24

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索