• 开启全站HTTPS。2017-04-29
  • 本站为非盈利性站点,所得收入全部用于网站服务器及其他费用。2015-10-15
  •    2年前 (2016-01-31)  WordPress教程 |   抢沙发  11 
    文章评分 0 次,平均分 0.0

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

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

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

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

    什么时需要先注册css/js
    即何时需要使用wp_register_script()和wp_register_style()函数。

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

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

    在WordPress登录页面加载
    将action替换为login_enqueue_scripts即可,例如

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

    在后台全局加载
    同理,将action改为admin_enqueue_scripts

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

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

    1. $hook_suffix

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

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

    2. $typenow

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

    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。

     

    除特别注明外,本站所有文章均为小浩博客原创,转载请注明出处来自https://www.xhsay.com/summary-of-the-introduction-of-css-js-method.html

    关于
    小浩博客(www.xhsay.com)是由Tovey建立的个人站点,主要致力于整合并分享各种互联网及网站建设的资源。

    发表评论

    表情 格式

    暂无评论

    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册