• WordPress引入css/js两种方法


    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpress官方最新的twentysixteen主题来学习总结一下WordPress引入css/js各种常用方法,以及最优化的加载方法。

    其实网上的N种方法总结起来就两种:
    一、模板文件header.php中直接引入文件
    二、在主题的functions.php中通过WP自带的函数wp_enqueue_scripts来加载JS文件,通过wp_enqueue_style来加载Css样式。

    一、模板文件header.php中直接引入文件

    1、最好懂,最直白,最不好的方法在模板文件header.php中直接引入文件

    1. <script type='text/javascript' src='http://www.jquery.com/js/jquery/1.10.2/jquery-1.10.2.min.js'></script>
    2. <script type='text/javascript' src='http://www.511yj.com/css/bootstrapwp.js'></script>
    3. <link rel="stylesheet" href="http://www.511yj.com/css/bootstrapwp.css">

    你觉得这样很无聊的话,还可以这样

    1. <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
    2. <script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.js"></script>

    通过函数get_template_directory_uri()获得主题目录 通过echo输出。

    注意啦以下方法虽然放在了functions.php中,表面感觉好了点......

    1. <?php
    2.  function add_stylesheet_to_head() {
    3.     echo "<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>";
    4. }
    5.  add_action( 'wp_head', 'add_stylesheet_to_head' );
    6.  ?>

    但是WordPress 不能确定是否在在页面加载了JS,Css文件,如果另一个插件使用相同的JS,Css文件,就无法检查JS,Css文件是否已经被包含在页面中。然后插件第二次加载同一个文件,造成重复的代码,响应速度变慢。

    二、引入WordPress优化解决方案:注册和排队

    1、注册
    wp_register_style() 函数进行注册:

    1. <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>

    参数:
    $handle(字符串,必需)是你的样式表唯一名称。其他函数将使用这个“handle”来排队并打印样式表。
    $src(字符串,必需)指的是样式表的URL。您可以使用函数,如 get_template_directory_uri() 来获取主题目录中的样式文件。永远不要去想硬编码了!
    $deps (数组,可选)处理相关样式的名称。如果丢失某些其他样式文件将导致你的样式表将无法正常工作,你可以使用该参数设置“依赖关系”。
    $ver (字符串或布尔型,可选)版本号。你可以使用你的主题的版本号或任何一个你想要的。如果您不希望使用一个版本号,将其设置为null。默认为false,这使得WordPress的添加自己的版本号。
    $media (字符串,可选)是指CSS的媒体类型,比如“screen”或“handheld”或“print”。如果你不知道是否需要使用这个,那就不使用它。默认为“all”。
    例子:

    1. wp_register_style(
    2.     'my-bootstrap-extension', // 名称
    3.     get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 样式表的路径
    4.     array( 'bootstrap-main' ), // 依存的其他样式表
    5.     '1.2', // 版本号
    6.     'screen', // CSS 媒体类型
    7. );

    wp_register_style() 函数进行注册:

    1. <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

    参数
    $handle(字符串)(必需)脚本名称。小写字符串。默认值:None
    $src(字符串)(可选)WordPress根目录下的脚本路径示例:"/wp-includes/js/scriptaculous/scriptaculous.js"。该参数只在WordPress不了解脚本情况时使用。默认值:None
    $deps(数组)(可选)脚本所依靠的句柄组成的数组;加载该脚本前需要加载的其它脚本。若没有依赖关系,返回false。该参数只在WordPress不了解脚本情况时使用。默认值:array()
    $ver(字符串)(可选)指明脚本版本号的字符串(若存在版本号)。默认为false。该参数可确保即使在启用缓存的状态下,发送给客户端的仍然是正确版本,因此如果版本号可用且对脚本有意义,包含该版本号。默认值:false
    $in_footer(布尔型)(可选)通常情况下脚本会被放置在区块中。如果该函数为true,脚本则会出现在区块的最下方。要求主题在适当的位置中包含有wp_footer()钩子。(WordPress新功能)默认值:false

    例子:

    1. <?php
    2. function my_enqueue_scripts() {
    3. if( !is_admin ) { // 前台加载的脚本与样式表
    4. // 去除已注册的 jquery 脚本
    5. wp_deregister_script( 'jquery' );
    6. // 注册 jquery 脚本
    7. wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.0', false );
    8. // 提交加载 jquery 脚本
    9. wp_enqueue_script( 'jquery' );
    10.  } 
    11. } 
    12. // 添加回调函数到 init 动作上
    13. add_action( 'init', 'my_enqueue_scripts' );
    14. ?>

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

    1. // 在init action处注册脚本,可以与其它逻辑代码放在一起
    2. function my_init(){
    3.     $url = get_template_directory_uri();
    4.     // 注册样式表
    5.     $styles = array(
    6.         'style1' => $url . '/css/style1.css',
    7.         'style2' => $url . '/css/style2.css',
    8.         'style3' => $url . '/css/style3.css'
    9.     );
    10.      foreach( $styles as $k => $v ){
    11.         wp_register_style( $k, $v, false );
    12.     } 
    13.     // 注册脚本     
    14.     // 其它需要在init action处运行的脚本
    15. }
    16. add_action( 'init', 'my_init' );

    注册脚本时需要运行$wp_scripts->add( $handle, $src, $deps, $ver );,若脚本没有注册直接使用wp_enqueue_script,需要先调用add方法,也就是说重复enqueue一个脚本就会运行多次add方法,降低了程序的效率。
    在WordPress中,注册样式是“可选的”。如果你的样式不会被其他插件使用,或者你不打算使用任何代码来再次加载它,你可以自由地排队样式而不需要注册它。继续看看它是如何实现的。
    2、排队 
    wp_register_style() 函数是不强制使用的,我要告诉你,你可以用两种不同的方式使用 wp_enqueue_style():

    1. <?php
    2.  // 如果我们之前已经注册过样式
    3. wp_enqueue_style( 'my-bootstrap-extension' ); 
    4. // 如果我们之前没有注册,我们不得不设置 $src 参数!
    5. wp_enqueue_style(
    6.     'my-bootstrap-extension',
    7.     get_template_directory_uri() . '/css/my-bootstrap-extension.css',
    8.     array( 'bootstrap-main' ),
    9.     null, // 举例不适用版本号
    10.     // ...并且没有指定CSS媒体类型
    11. ); 
    12. ?>

    切记:如果一个插件将要用到你的样式表,或者你打算将在你的主题的不同地方进行加载,你绝对应该先注册。
    3、加载样式到我们的网站
    我们不能在主题中随便找个地方使用 wp_enqueue_style() 函数 - 我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子:
    wp_enqueue_scripts 用来在网站前台加载脚本和CSS
    admin_enqueue_scripts 用来在后台加载脚本和CSS
    login_enqueue_scripts 用来在WP登录页面加载脚本和CSS
    以下是这些钩子的示例:

    1. <?php
    2.  // 在网站前台加载css
    3. function mytheme_enqueue_style() {
    4.     wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
    5. }
    6. add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
    7.  
    8. // 在后台加载css
    9. function mytheme_enqueue_options_style() {
    10.     wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
    11. }
    12. add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
    13.  
    14. // 在登录页面加载css
    15. function mytheme_enqueue_login_style() {
    16.     wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
    17. }
    18. add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
    19.  ?>

    4、另外一个函数:wp_print_scripts()
    虽然将 JavaScript 文件都放到页面末尾加载对于页面加载速度很有帮助,但是请注意,所谓页面末尾指的是在 WordPress 的 wp_footer() 函数中调用,这个函数通常刚好位于页面的 标签前面(当然是末尾了)。
    有时候我们可能会在 wp_footer 函数出现之前就需要用到某些 JavaScript,比如 jquery.js 文件。
    这样的情况也是很常见的。比如我单独创建了一个链接页面,在这个页面中我使用了 jQuery 方法来获取链接网站的 favicon。很显然,我只需要在这唯一一个页面使用这部分代码,所以将这段代码直接放在这个页面模板中是最好的做法。
    问题来了:这部分内容显然是在 wp_footer 之前出现的,那么这段代码就在 jquery.js 文件之前出现了,导致该代码段实际上无法工作,因为调用 jQuery 方法的代码段必须比 jquery.js 文件后加载。
    那么如何处理这种特殊情况呢?其实也很简单。以上面的情景为例,既然我们需要先调用 jquery.js 文件,那我们就在该代码段之前直接输出需要的 jquery.js 文件,不使用 wp_enqueue_script() 函数,而改用wp_print_scripts() 函数。
    wp_enqueue_script() 与 wp_print_scripts() 的区别是:wp_enqueue_script() 是告诉 WordPress “我在这个页面上需要用到某个 JavaScript 文件,你可要记得加载啊”。WordPress 默认在 wp_head() 中处理,而我们改为在 wp_footer() 中处理。wp_print_scripts() 则直接在你使用此方法的位置输出需要的 JavaScript 文件,而不是加入到 WordPress 的处理任务中。
    如果我们在页面的中间使用,

    1.  <?php wp_print_scripts('jquery'); ?>

    直接输出了 jquery.js 文件(通常是其压缩版本 jquery.min.js),那么即使其它的插件或者什么东西使用,

    1.  <?php wp_enqueue_script('jquery'); ?>

    告诉 WordPress 需要加载 jquery.js,WordPress 在 wp_footer() 中处理的时候也会先检查前面是不是已经有了,如果有了就不会再重新加载一次。
    5、一些额外的函数
    WordPress 有一些关于 CSS 非常有用的函数:他们允许我们打印内嵌样式,查看样式文件的排队状态,添加元数据以及注销样式。
    添加动态内联样式:wp_add_inline_style()
    如果你的主题有选项可自定义主题的样式,你可以使用 wp_add_inline_style() 函数来打印内置的样式:

    1. function mytheme_custom_styles() {
    2.     wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
    3.     $bold_headlines = get_theme_mod( 'headline-font-weight' ); // 比方说,它的值是粗体“bold”
    4.     $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
    5.     wp_add_inline_style( 'custom-style', $custom_inline_style );
    6. }
    7. add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

    方便快捷。但请记住:你必须使用与后面要添加的内联样式样式表相同的hadle名称。

    添加元数据到样式表:wp_style_add_data()

    wp_style_add_data() 是一个非常棒的函数,它可以让你添加元数据到你的样式中,包括条件注释、RTL的支持和更多!

    1. <?php
    2. // wp_style_add_data() 示例
    3. function mytheme_extra_styles() {
    4.     wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
    5.     wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
    6.     /*
    7.      * alternate usage:
    8.      * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
    9.      * wp_style_add_data() is cleaner, though.
    10.      */
    11. }
    12.  
    13. add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );
    14.  
    15. ?>
  • 相关阅读:
    祝各位博友新年快乐,全家幸福,大展宏图,财源滚滚!
    Android中级第五讲GPRS定位的实现
    Android高级开发第二讲Android中API翻译之Activity
    Android 图标、音频、颜色RGB工具集
    Android初级开发第八讲之startActivityForResult方法讲解
    Android高级开发第三讲应用程序基础
    Android高级开发第四讲API之Service
    Android高级开发第五讲API之Content Providers
    物联网操作系统是否需要基于Java和虚拟机进行构筑
    Android高级开发第四讲API之Intents and Intent Filters
  • 原文地址:https://www.cnblogs.com/kenshinobiy/p/7470617.html
Copyright © 2020-2023  润新知