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

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

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

部分脚本代码或css样式

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

function custom_script() {

    if (is_page('page-slug')) {
        ?>
        <script type="text/javascript">
            $(document).ready(function(){
                ....
            });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'custom_script' );

JS脚本文件或css样式文件

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

function custom_js() {
    // child theme: use get_stylesheet_directory_uri() instead of get_template_directory_uri()
    wp_register_script('scrollTo', get_stylesheet_directory_uri() . '/jquery.scrollTo.min.js', array('bootstrap'), '01', true);
    if (is_page('publications')) {
        wp_enqueue_script('scrollTo');
    }
}
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,即:

jQuery(document).ready(function($){
  $("#buttonName").onclick ....
})
jQuery('#btn').click(function() {
  console.log('ok');
});

相关文档

国内主题

Gohan N07.1 - 极简三栏wordpress博客主题

2020-6-15 23:30:00

教程

Wordpress如何进行版本升级?

2020-1-7 20:17:50

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索