WordPress引入css和js的方法

建站教程 2020-11-29

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。

相关阅读

WordPress免插件去除腾讯视频广告

作为一个使用小水管服务器的站点,为了给网站添加在线视频通常的操作都会把视频上传至优酷、土豆或者腾讯视频等专业的视频网站中,然后在使用iframe的方式把视频放入自己的站点,这种方法在理想状态下是可行的,可事实却往往与理想存在太大差距,这类视频网站引用过来的视频开头或结束会带上对方推广的广告,试想一下一个本来就几十秒的短视频带上了一个超过1分钟的广告,体验让人真的很糟心。 这里便向大家推荐一个不使用…

建站教程 2020-06-22
WordPress免插件去除腾讯视频广告

最有效的wordpress禁止生成缩略图教程

之前给公司使用wordpress做了FAQ网站,[email protected],这主题好是好,但默认没有禁止生成缩略图,而我们公司的FAQ上面基本上全是GIF动图,哪么问题来了,GIF动图被缩略后是没有动画效果的,在大屏电脑上访问确实没有异常,但在小屏幕或者说分辨率低一点的电脑上访问是存在问题的,网站上面的图片都不动了,全是静态图片,这可咋整,好在领导不知道,刚好前段时间公司平台上U…

建站教程 2020-03-12
最有效的wordpress禁止生成缩略图教程

WordPress删除重复文章

有很多小伙伴使用WordPress做采集站,不断的采集网络上的文章自动发布到自己的网站上。但采集站最大的问题就是会采集到很多重复文章。此时,我们需要对采集到的重复文章进行去重处理。 本着一惯的原则,我们一般不使用任何第三方工具或插件,此处我们推荐三段SQL来进行文章去重处理。 1、去除重复文章,只保留一篇 2、去除重复文章,一篇都不保留 3、另一种去除所有重复文章的方法 操作方法很简单,只需将上面…

建站教程 2021-11-02
WordPress删除重复文章

WordPress调用不同样式的分类列表

一个强大的WordPress主题应该满足各种自定义需求的设置,比如不同分类使用不同的分类列表样式,今天就和大家分享一下WordPress不同分类使用不同分类列表样式的设置思路。 方法一:创建独立ID或别名的样式文件 WordPress默认的分类是查找对应ID的主题文件,找不到就会指向archive.php文件,如果archive.php文件不存在,就会默认使用index.php文件。到网站后台查看…

建站教程 2021-07-07
WordPress调用不同样式的分类列表
回到顶部