在指定页面添加 js/css 代码 - WordPress 开发

一些代码需要添加到一个指定的页面，而不是全局。这时，可以使用一个 wp_footer 钩子，再结合 is_page 进行页面判断，将指定代码写到页面底部

最后更新于 2025-06-04

本页目录5 节

很多时候，我们需要在一些特定的页面添加 js/css，这一次试试用 wp_footer 钩子的方法吧。

部分脚本代码或 css 样式

有时候，一些代码需要添加到一个指定的页面，而不是全局。这时，可以使用一个 wp_footer 钩子，再结合 is_page 进行页面判断，将指定代码写到页面底部。

1
function custom_script() {
2

3
    if (is_page('page-slug')) {
4
        ?>
5
        <script type="text/javascript">
6
            $(document).ready(function(){
7
                ....
8
            });
9
        </script>
10
        <?php
11
    }
12
}
13
add_action( 'wp_footer', 'custom_script' );

JS 脚本文件或 css 样式文件

如果要在一个指定页面中，引用一个指定的脚本文件，可以这么写：

1
function custom_js() {
2
    // child theme: use get_stylesheet_directory_uri() instead of get_template_directory_uri()
3
    wp_register_script('scrollTo', get_stylesheet_directory_uri() . '/jquery.scrollTo.min.js', array('bootstrap'), '01', true);
4
    if (is_page('publications')) {
5
        wp_enqueue_script('scrollTo');
6
    }
7
}
8
add_action( 'wp_enqueue_scripts', 'custom_js' );

如果是样式文件，则使用 wp_enqueue_style 函数。

其它

页面用 is_page()
文章用 is_single()
oocommerce 的产品页，则用 is_product()

相关：

通过 enqueue 或其它方式在 WordPress 中添加一些 js 代码后，控制台报错”TypeError: $ is not a function” 。这是一个很常见的问题。

解决方法，需要将$替换为 Jquery，即：

1
jQuery(document).ready(function($){
2
  $("#buttonName").onclick ....
3
})

1
jQuery('#btn').click(function() {
2
  console.log('ok');
3
});

相关讨论：详情

相关文档