WordPress 单独加载指定 JavaScript 或 CSS 代码

我们可以通过 WordPress 自定义字段来给某篇的日志单独加载 Javascript 脚本和 CSS 样式表。假设我们给日志单独加载 Javascript 脚本的自定义字段是 custom_head

<?php
/*
Plugin Name: Custom Head
Plugin URI: http://blog.wpjam.com/m/custom-head/
Description: 使用自定义字段给某篇的日志单独加载 Javascript 脚本,使用的自定义字段是 custom_head。
Version: 0.1
Author: Denis
Author URI: http://wpjam.com/
*/
add_action("wp_head","custom_head");
function custom_head(){
    if (is_single() || is_page()) {
        global $post;
        $custom_head = get_post_meta($post->ID, 'custom_head', true);
        echo $custom_head;
    }
}
?>

那么你首先需要把上面这段代码复制到你主题的 functions.php 文件中,也可以直接当作一个插件,上传到插件目录中,然后在后台激活。

然后在编辑日志的时候,在自定义字段区域,创建一个新的自定义字段,名字为:"custom_head",输入你要单独为这篇日志加载的 Javascript 代码或者 CSS 样式表即可。

相关推荐

自动切换无法加载的静态资源,预防 CDN 挂掉后网站故障

自动切换无法加载的静态资源,预防 CDN 挂掉后网站故障

使用静态的 CDN 引入 jQuery 等一些 js 包,可以会提升网页性能。一旦引入的 CDN 地址挂掉,项目则会同样挂掉,因此我们需要在引入时,添加一个判断。 示例一: 示例二: 这段代码第一行很简单就是你正常引入 cdn 的地址,下面一行的话就是首先判断 Windows.jQuery 是否存在。也就是说判断一下这个 CDN 是不是挂掉了,如果 ...

以文件修改时间戳做 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 指定页面按需加载 JavaScript

WordPress 指定页面按需加载 JavaScript

只在使用了某个页面模板的页面上加载指定的 JavaScript 文件吗,在下面的代码中,首页我们加载了每个页面都需要的 jQuery 和 Main.js 文件,然后判断当前页面是否使用了指定的页面模板,然后根据判断结果加载指定页面模板需要的 JavaScript 文件。 //注册加载函数到 hook 上 add_action('wp_enqueue_scripts', 'my_theme_lo ...

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

WordPress 单独加载指定 JavaScript 或 CSS 代码