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

在wordpress中,如何在特定的页面,添加js或css代码。本文主要采取修改主题function.php文件的方式,而非网上广泛抄袭的添加head自定义代码方式。

部分脚本代码或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()

woocommerce的产品页,则用is_product()

相关文档

https://developer.wordpress.org/reference/functions/is_page/

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

https://developer.wordpress.org/reference/functions/wp_enqueue_style/

https://docs.woocommerce.com/document/conditional-tags/

解决:WordPress自定义js后报TypeError: $ is not a function

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

解决方法,需要将$替换为Jquery,即:

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

可参考讨论:

https://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function

给TA买糖
共{{data.count}}人
人已赞赏
未分类

烟花爆竹安全管控公益宣传

2021-12-7 16:34:47

苹果Cms

苹果CMSv10自适应高权重模板源码

2021-11-29 4:03:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索