关闭

在 WordPress 指定页面加载指定 JavaScript 或 CSS 代码

1395人阅读 评论(0) 收藏 举报
分类:

转载至:http://loo2k.com/blog/wordpress-page-javascript-css-code/

在做 WordPress 的主题的时候,我一直在想:如果我有一段特定的 JavaScript 或者 CSS 代码要出现在 WordPress 某一特定的页面,而且只会用到一次。那该把那段代码放哪去? style.css 或者 base.js ?但是这样做成本确实有点大了。

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

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

其实,我们可以利用 WordPress 强大的自定义字段的功能来实现不同的文章页面载入自定义的 JavaScript 或者 CSS 文件

这篇文章将介绍你如何通过使用自定义字段实现在 WordPress 上自定义页面的 JavaScript 或者 CSS 文件,如果你能弄明白的话,自定义字段的价值就不是一个 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,在值处输入你要在你所添加位置输出的代码;

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

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

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

或者

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

来输出代码。

WordPress 自定义字段的一点小结

明白了上面的原理之后,你会发现:WordPress 自定义字段不仅仅能实现自定义页面的自定义 JavaScript 或 CSS,还有很多的功能都可以通过自定义字段来实现,类似于:给文章添加缩略图、文章小提示 etc...

至于实现什么功能,或者怎么实现,用自定义字段试试。


0
0
查看评论

WordPress引入css/js两种方法

WordPress引入css/js两种方法 WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpress官方最新的twentysixteen...
  • csnewdn
  • csnewdn
  • 2017-01-04 16:56
  • 8211

wordpress 后台添加 JS 代码

1.首先利用wordpress的hook(钩子)来添加 add_action(‘admin_hear’,’function_name’); 2.举例说明:向后台添加JS控制表单提交,当Cat为空时,不进行任何操作。首先,利用JQuery找到表单form,表单name为post。 $(‘for...
  • houzhiwen_yy
  • houzhiwen_yy
  • 2016-03-24 22:09
  • 1773

在 WordPress 指定页面加载指定 JavaScript 或 CSS 代码

在 WordPress 指定页面加载指定 JavaScript 或 CSS 代码 网站(48)  转载至:http://loo2k.com/blog/wordpress-page-javascript-css-code/ 在做 WordPress 的主题的时候...
  • csnewdn
  • csnewdn
  • 2017-01-11 19:19
  • 731

在 WordPress 指定页面加载指定 JavaScript 或 CSS 代码

转载至:http://loo2k.com/blog/wordpress-page-javascript-css-code/ 在做 WordPress 的主题的时候,我一直在想:如果我有一段特定的 JavaScript 或者 CSS 代码要出现在 WordPress 某一特定的页面,而且只会用到...
  • robertsong2004
  • robertsong2004
  • 2015-07-09 13:54
  • 1395

WordPress添加自定义小工具

今天想在wang
  • u013376539
  • u013376539
  • 2014-08-18 22:29
  • 1309

wordpress调用指定分类文章

<?php $args=array( 'cat' => 1, // 分类ID 'posts_per_page' => 10, // 显示篇数 ); query_posts($args); ...
  • hanshileiai
  • hanshileiai
  • 2014-08-08 20:54
  • 6514

WordPress调用指定分类下的文章

直接上代码: <?php $args=array( 'cat' => 1, // 分类ID 'posts_per_page' => 10, // 显示篇数 ); que...
  • a3025056
  • a3025056
  • 2017-02-10 09:55
  • 1080

在WordPress调用jQuery的方法及注意事项

1.最直接的: /js/jquery.js"> 2.调用谷歌 Google 的 API库: 最好再加上以下代码,一边在连接google的API库是失效时调用本地的jQuery文件: !window.jQuery && document.write('...
  • HJJ1006340261
  • HJJ1006340261
  • 2013-11-05 13:27
  • 2366

CSS和js自动添加版本号

昨天去winy那里咨询他网站里css和js后面版本号的问题,我之所以想加这个功能是因为每次在A电脑修改的样式或者js到了B电脑上就看不到效果,还得ctrl+f5才能看到,我承认我缓存了网站的样式和js,虽然可以让用户把一些常用的很少改动的样式和js缓存到本地,蛋似当我修改了样式或者js后用户看到的还...
  • a137268431
  • a137268431
  • 2015-03-19 18:41
  • 5133

外网访问WordPress时无法加载样式表CSS

情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题。重要的参考: https://www.douban.com/note/522413044/
  • qq_18995513
  • qq_18995513
  • 2017-06-11 02:26
  • 994
    个人资料
    • 访问:2735728次
    • 积分:30981
    • 等级:
    • 排名:第186名
    • 原创:433篇
    • 转载:1011篇
    • 译文:147篇
    • 评论:101条
    技术链接
    最新评论