宝宝健康成长网首页刘易桉宝宝健康成长 林林微博 育儿护理知识 宝宝网址导航
当前位置: 首页 >> 宝宝建站 >> WordPress 自定义域给页面加载JS和CSS

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 代码。

custom-fields-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 即可。

敬请留言当前共有 1 条评论

  1. [...] 2. 按需加载JS和CSS文件,主要针对附加组件,每一页加载特定的文件。具体方法:WordPress 自定义域给页面加载JS和CSS [...]

发表评论

^留言没头像?教你设置头像!
我的应用 Follow@cnbabyup 宝宝问答>  0-1岁  1-3岁  3-6岁 手气不错