现在的位置:首页>wordpress>正文

WordPress只在指定文章里加载对应的 JS或 CSS文件

2017年03月25日 ⁄ 共 3036字 暂无评论

这种情况,其实是很难用得上的,通常情况下,我们的wordpress网站中,基本上所有的css文件或者js文件,都是需要加载的,但有时候,我们可能要为某一篇文章展示一下特效,或者作为特别的用途,这时,这个功能就可以用上了,在指定文章里加载对应的 JS或 CSS文件,而不是全站加载,可以有效地加快网站的打开速度了,不至于拖累到整个网站.

可能有的朋友会问,那么这一段代码应该放到什么位置呢?好像也没有什么地方可以放啊?

如果您经常关注福利老幺网站中的wordpress部分,那么相信您应该还记得wordpress给文章和分页,标签等页面设置关健词和描述增强板这篇文章,是的,方法基本一样.

网上查了一下,像的网站,图片少的,会有这种情况:

就像前段时间我一直在想要不要把 Highslide 的 JavaScript 效果弄到博客上来,但是一般要加 Highslide 的只有部分由加图片或者需要的页面才用到,在没用到的页面加载一个 50多KB的 JavaScript 未免成本太大了点。

另外,还有一些特殊情况:

我在页面里面放了一个 Flash,普通兼容的方法是用<embed>标签插入,但是插入的<embed>标签将会让你的页面不能通过 W3C 验证。有个好办法是用SWFObject 这个 JavaScript 生成能通过 W3C 验证的代码,但是问题又来了:在 WordPress 每个页面都载入SWFObject 是不是太浪费了,又不是每个页面都用到这个 JavaScript 文件。

WordPress只在指定文章里加载对应的 JS或 CSS文件

说到这里,相信不少朋友已经知道方法了,那就是利用wp的自定义字段的功能.下面一起来看看操作过程:

1.在您当前主题的 header.php文件,找到< ?php wp_head(); ?>这句代码,在其上面添加上:

  1. // 在指定文章里加载对应的 JS或 CSS文件 from www.fuli121.com
  2. <?php if (is_single() || is_page()) {
  3.     $head = get_post_meta($post->ID, 'head', true);
  4.     if (!emptyempty($head)) { ?>
  5.         <?php echo $head; ?>
  6. <?php } } ?>

在 WordPress 后台编辑文章的页面的编辑器下面,有一个“自定义域”的小窗口,在名称处输入head,在值处输入你要在你所添加位置输出的代码,如下图:

WordPress只在指定文章里加载对应的 JS或 CSS文件

接下来,我们点击了添加自定义域之后,更新你的文章就可以在你主题放置代码的地方输入这些自定义域的值了;

由于只是输出“值”里面的所有内容,所以需要自己在“值”里面输入您的css代码:

  1. <style type="text/css">...</style>

如果是js代码,同样直接输入即可:

  1. <script type="text/javascript">...</script>

中间省略的就是Js的内容.

其实之前早有网友分享了实现编写文章时自定义css的方法,用到了functions.php文件,在主体< ?php ?>里加入:

  1. /*   
  2. 为特定文章添加特定css最简单的方式. from www.fuli121.com  
  3. */     
  4. /*添加自定义CSS的meta box*/     
  5. add_action('admin_menu', 'cwp_add_my_custom_css_meta_box');     
  6. /*保存自定义CSS的内容*/     
  7. add_action('save_post', 'cwp_save_my_custom_css');     
  8. /*将自定义CSS添加到特定文章(适用于Wordpress中文章、页面、自定义文章类型等)的头部*/     
  9. add_action('wp_head','cwp_insert_my_custom_css');     
  10. function cwp_add_my_custom_css_meta_box() {     
  11.     add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'post', 'normal', 'high');     
  12.     add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'page', 'normal', 'high');     
  13. }     
  14. function cwp_output_my_custom_css_input_fields() {     
  15.     global $post;     
  16.     echo '<input type="hidden" name="my_custom_css_noncename" id="my_custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';     
  17.     echo '<textarea name="my_custom_css" id="my_custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_my_custom_css',true).'</textarea>';     
  18. }     
  19. function cwp_save_my_custom_css($post_id) {     
  20.     if (!wp_verify_nonce($_POST['my_custom_css_noncename'], 'custom-css')) return $post_id;     
  21.     if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;     
  22.     $my_custom_css = $_POST['my_custom_css'];     
  23.     update_post_meta($post_id, '_my_custom_css', $my_custom_css);     
  24. }     
  25. function cwp_insert_my_custom_css() {     
  26.     if (is_page() || is_single()) {     
  27.         if (have_posts()) : while (have_posts()) : the_post();     
  28.         echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_my_custom_css', true).'</style>';     
  29.         endwhileendif;     
  30.         rewind_posts();     
  31.     }     
  32. }  

这个方法的话,就更灵活了.

小结

文章中的方法来源自网络,由福利老幺整理发布.

实际上,我们可以通过这个来实现更多的功能,比如某个文章的提示,比如某个页面上插入一段指定的广告联盟代码这些,都是可以来实现的,而且很方便.

给我留言