WordPress 自定义域给页面加载JS和CSS
有时候,我们需要在WordPress 特定页面上加载特定 JavaScript 或者 CSS 代码。但由于wordPress 会过滤日志页面的Javascript或CSS代码内容,所以我们无法直接把JS和CSS写进日志。当然可以通过把JS或者CSS的内容添加到header.php
以及style.css
文件中,但那样,网站所有的页面都会加载这些内容,这样势必会造成整个网站打开速度下降。这就需要请出WordPress 自定义域(也叫自定义字段)。其实,利用WordPress 自定义字段不仅可以美化页面,而且更可以用作内容管理系统。
通过使用自定义字段实现在 WordPress 指定页面加载 JavaScript 或者 CSS 文件,有两种途径实现:
第一种:修改WordPress 当前主题的 header.php
文件,找到<?php wp_head(); ?>
这句代码,在其后面添加上:
<?php if (is_single() || is_page()) {
$head = get_post_meta($post->ID, 'head', true);
if (!empty($head)) { ?>
<?php echo $head; ?>
<?php }
} ?>
其中,代码中的head
是自定义字段的名称,可以自定义。
在 WordPress 后台编辑文章的页面,有一个“自定义域”的小窗口,在“名称”输入head
,在“值”输入你要在你要添加的JavaScript 或者 CSS 代码。
可以看一下演示页面>>
第二种:修改WordPress 当前主题的 functions.php
文件,假设我们给日志单独加载JS、CSS的自定义域名称是 head_JS_CSS。
function head_JS_CSS(){
if (is_single() || is_page()) {
global $post;
$head_JS_CSS = get_post_meta($post->ID, 'head_JS_CSS', true);
echo $head_JS_CSS;
}
}
add_action("wp_head","head_JS_CSS");
然后的步骤同上,在WordPress自定义域区域,创建一个名称为:"head_JS_CSS"自定义字段,在“值”输入 Javascript 或者 CSS 即可。
相关阅读: