如何在WordPress主题和插件中正确加载CSS和JS

在开发wordpress主题或是插件时,引用JavaScript和CSS的问题经常困扰开发者,因此从现在开始,我现在可以为您提供本教程。 老实说,我没有找到关于此问题的任何新颖的好教程。

elements-envato 如何在WordPress主题和插件中正确加载CSS和JS

在继续阅读本指南之前,我想让您知道,您绝对不要将外部CSS和JS直接添加到WordPress模板文件(例如header.php,footer.php等)中。在某些情况下,可以使用< style>和<script>标记,但也不建议使用。

code-1-e1526674246391 如何在WordPress主题和插件中正确加载CSS和JS

内部CSS和JavaScript文件

在这里需要详细说明-内部CSS是直接使用在HTML中<style>标记之间,内部JS是使用在<script>标记之间。WordPress有4个action hook,可用于内部CSS和JavaScript:

  • wp_head –使用此hook,您可以在</head>结束标记之前添加内部CSS/JS或所需的任何内容,
  • admin_head –同上,但仅适用于WordPress管理仪表盘,
  • wp_footer –使用此hook,您可以在</body>标记之前添加内部CSS/JS或所需的任何内容,
  • admin_footer –同上,但仅适用于WordPress管理仪表盘;

1.使用admin_head动作hook将自定义CSS添加到管理仪表盘

让我给你看一个简单的例子:

add_action( 'admin_head', 'ietheme_custom_internal_css' );
function ietheme_custom_internal_css(){
    echo '<style>
        #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
            background: #a73fe0;
        }
    </style>';
}

把上面的代码放在您主题的functions.php里面保存。刷新后可以得到下面的效果:

custom-css-wordpress-admin 如何在WordPress主题和插件中正确加载CSS和JS

2.使用admin_footer将JavaScript添加到管理仪表盘

这段代码与前面的示例非常相似,唯一的变化是我们使用JavaScript而不是CSS:

add_action( 'admin_footer', 'ietheme_custom_internal_javascript' );
function ietheme_custom_internal_javascript(){
    echo '<script>
        jQuery( function( $ ) {
            alert( \'hello\' );
        } );
    </script>';
}

需要说明的是,这种内部加入css或是js的方法已经过时了。如果你非要用。当然也可以。

外部CSS和JavaScript文件

外部CSS/JS是当文件.js或.css且不一定在您的域上时,它可以在您的域上,也可以是其它cdn上。

当必须引用一些外部CSS或JavaScript文件时,必须始终使用以下操作hook:

  • wp_enqueue_scripts
  • admin_enqueue_scripts–用于WordPress管理仪表盘

但这并不是全部! 您不仅可以在这些hook中打印<script>或<link>标记,还必须使用特殊功能,这是大多数开发者经常使用的列表:

  • wp_register_script() / wp_register_style()
  • wp_deregister_script() / wp_deregister_style()
  • wp_enqueue_script() / wp_enqueue_style()
  • wp_localize_script()
  • wp_add_inline_script()

还有更多功能。 但是使用这些功能通常绰绰有余! 我将在以下示例中向您展示如何处理它们:

但是如何将文件添加到主题的HTML模板中? 当然,它将通过wp_head()和()函数自动完成,它们必须在模板文件中,然后相应地关闭</head>和</body>标记。

1.引用主要主题style.css

add_action( 'wp_enqueue_scripts', 'ietheme_main_theme_css' );
function ietheme_main_theme_css() {
    wp_enqueue_script( 'ietheme-css', get_stylesheet_uri() );
}

实际上,您可以通过3种方式获取主题的style.css网址:

  • get_stylesheet_uri(),
  • get_stylesheet_directory_uri() . '/style.css',
  • get_template_directory_uri() . '/style.css'

2.使用预注册的脚本

请打开wp-includes/js目录。 您看到那里有很多文件吗? 您可以在此处找到jQuery和一些常用的JS插件。 那是什么意思?这意味着大多数脚本已被注册,如果要使用它们,可以通过以下方式进行操作:

add_action( 'wp_enqueue_scripts', 'ietheme_include_jquery' );
function ietheme_include_jquery() {
    wp_enqueue_script( 'jquery' ); // you just have to know a script handle
 
}

您还可以预先注册自己的脚本和样式,例如在某些主题或插件中,您可以找到此方法来实现:

add_action( 'wp_enqueue_scripts', 'ietheme_register_and_enqueue' );
function ietheme_register_and_enqueue() {
    wp_register_script( 'some-script', $url );
    wp_enqueue_script( 'some-script' );
 
}

3.依存关系

您知道样式,尤其是脚本的顺序很重要吗?因此,如果您使用的是jQuery库,则必须在其后包含.js文件。 有时CSS文件的顺序也很重要。

如果仅使用hook wp_enqueue_scripts并且所有脚本均在此处列出,则可以跳过依赖关系参数。 但是,如果您创建一个自定义插件,并且此插件需要jQuery库,则必须这样做。

add_action( 'wp_enqueue_scripts', 'ietheme_custom_js_with_dependency' );
function ietheme_custom_js_with_dependency() {
    wp_enqueue_script( 
        'script-2', 
        plugin_dir_url( __FILE__ ) . 'assets/script.js',
        array( 'jquery', 'script-1' )
    );
 
}

因此,hook优先级是什么,在插件或主题文件中使用此代码都没有关系–在所有情况下,只有在jquery和script-1之后,script-2才会添加到HTML文档中。

4.防止缓存CSS和JavaScript文件

add_action( 'wp_enqueue_scripts', 'ietheme_main_theme_css_cache_refresh' );
function ietheme_main_theme_css_cache_refresh() {
    wp_enqueue_style( 
        'ietheme-css',
        get_stylesheet_uri(),
        array(),
        filemtime( dirname( __FILE__ ) . '/style.css' )
    );
 
}
add_action( 'wp_enqueue_scripts', 'ietheme_plugin_javascript_cache_refresh' );
function ietheme_plugin_javascript_cache_refresh() {
    wp_enqueue_script( 
        'ietheme-plugin-js',
        plugin_dir_url( __FILE__ ) . 'assets/script.js', // no slashes
        array( 'jquery' ),
        filemtime( dirname( __FILE__ ) . '/assets/script.js )
    );
 
}

我们有两种方法可以防止永远永久地缓存包含的CSS和JavaScript文件:

  • time()–返回自1970年以来的当前时间(以秒为单位)。因此,每一秒都有一个不同的值,
  • filemtime()–返回上次修改该文件的时间(以秒为单位)。

我们可以将此参数设置为null以完全删除查询字符串,因为默认情况下它将显示WordPress安装的当前版本!

5.将jQuery从页眉移动到页脚

如果您曾经使用Google PageSpeed扫描过您的网站,您就会知道,它始终建议您在关闭</body>标记之前将所有JavaScript甚至CSS文件移动到网站页脚。 以我的经验,我可以说,这对网站性能而言并不重要。 但是有时将jQuery和您自定义的.js文件移动到网站页脚可能是个好办法,只是你可以获得高分的谷歌测速。

add_action( 'wp_enqueue_scripts', 'ietheme_jquery_in_footer' ); 
function ietheme_jquery_in_footer() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 
        'jquery', 
        includes_url( '/js/jquery/jquery.js' ), 
        false, // no dependencies
        NULL, // no version to show
        true // in footer? yes
    );
    wp_enqueue_script( 'jquery' );
 
}

具体使用方法请看上面代码片段的注释。

6.如何仅在特定页面上添加脚本

使用条件标签为ON。 您可以在此处找到官方WordPress文档中的标签列表。

add_action( 'wp_enqueue_scripts', 'ietheme_js_for_homepage_only' );
function ietheme_js_for_homepage_only() {
    if( is_front_page() ) { // if on a website homepage
        wp_enqueue_script( 'homepage-js', $url, 'jquery', null, true );
    }
 
}

这就是基本教程的全部内容,如有任何疑问,欢迎在下面发表评论。

本文已在Ie主题99839发布

文章来源:https://ietheme.com/include-css-and-javascript.html


发表评论

撰写评论

电子邮件地址不会被公开。 必填项已用*标注

加入我们

注册完成!

密码重置

请输入您的邮箱地址。 您将收到一个链接来创建新密码。

检查你的邮件中的确认链接。