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

如何在特定的页面,添加 jscss 代码。本文主要采取修改主题 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' );

在特定页面加载 css 和 js 实例:

/** 
* 指定页面加载脚本样式 
* 实例:别名为[contact]的联系页面加载百度地图 
*/
function page_contact_scripts() {    
    if ( is_page('contact') ) {        
        wp_enqueue_script( 'baidu-map-js', get_template_directory_uri() . '/assets/js/map.js');
        wp_enqueue_script( 'baidu-map-http','//http://api.map.baidu.com/api?v=2.0&ak=9GdEKDqPrIHxtq9tkirHGEaZ2ruGzp16');
}}
add_action( 'wp_enqueue_scripts', 'page_contact_scripts' );

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()

相关推荐

以文件修改时间戳做 CSS、JS 等文件的版本号,减少主动清理更新缓存的次数

以文件修改时间戳做 CSS、JS 等文件的版本号,减少主动清理更新缓存的次数

每次修改 WordPress 的 css 和 js 文件,都要主动清理文件的缓存才能生效,尤其是采用了 oss 和 cdn 回源。使用函数 filemtime() 获取文件修改时间戳,并以此做版本号,比如 my.js?ver=1639757946141 就不用再去手动刷新缓存了。 注意文件必须是 相对路径,使用绝对路径会报错。 使用函数 filemtime() 所用函数为 filemtime ...

WordPress 通过模板文件和自带的函数引入 css/js 的两种方法

WordPress 通过模板文件和自带的函数引入 css/js 的两种方法

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

WordPress 函数:wp_enqueue_script() 安全引入 JS

WordPress 函数:wp_enqueue_script() 安全引入 JS

WordPress 主题最佳引用 js 文件的方法是使用 WordPress 内置的 wp_enqueue_script() 函数,通过该函数可以安全地将javascript 代码加入到 WordPress 创建的页面中,不仅可以最大限度地保证兼容性,还是提高 WordPress 性能效率的一个方法。 语法结构 参数 通过 wp_enqueue_script 函数加载 js 文件时,应该将它分配给一个 ...

国内和国外常用的前端 CDN 静态资源库

国内和国外常用的前端 CDN 静态资源库

国内静态文件公共库 BootCDN: 七牛云存储开放静态文件CDN: 360前端资源库 字节跳动静态资源库: 腾讯网静态资源库: 新浪云计算CDN公共库: 又拍云JS库CDN服务: 国外静态文件公共库 Google Hosted Libraries: Google出品,必属精品了,谷歌的公共CDN公共库应该是 最强大的了,像其中的前卫的各种代码类库和Google Web F ...

微信扫一扫,分享到朋友圈

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