如果用Wordpress来写技术博客，尤其是写关于前端部分的，我相信会有不少博主希望能在博客里添加演示功能。这样读者对文章所说的代码效果会有个直观的感受，也能知晓其效果是否为自己所需的。另外一方面，添加演示也意味着文中的代码是没有问题的，增加文章可读性与可信性。
添加演示代码功能的方法有很多种，可以直接添加在博客文章里面，也可以利用Wordpress 页面，为演示代码单独创建一个新的页面出来等等。而本文所介绍的这种方式(本博客正在使用)则采用Wordpress自带的 自定义栏目 来实现。因为如果直接写在文章里面，那演示代码比较少的情况还说的过去，如果演示的是一个完整页面的效果，那使用写在文章里的这种办法不仅仅容易造成css冲突，而且也不利于后期维护修改。另外，受主题限制，可能演示出来的效果不会很理想；而采用新建演示页面的方法虽然不会受到主题限制，也可以避免css冲突，但笔者总觉得杀鸡焉用宰牛刀，而且演示的内容多了，页面也多了，以后后台翻阅起来很麻烦。至于有没有这方面的插件，笔者没有去搜，毕竟不喜欢装太多的插件，小功能的实现还是自己动手解决的好。
某天写文章的时候在后台看到这么一句话 自定义栏目用来向文章添加额外的属性 ，天生程序员通病，看到 属性 就跟看到亲人一样，这东西好啊，既然可以给文章添加属性，那何不把演示代码整个作为一个属性 直接添加给文章呢。这样如果可以实现的话，那使用和维护起来就太方便了，不需要新建多少东西，演示的内容跟着对应的文章走，以后要维护什么的，只要找到对应的文章就好了。下面就从 自定义栏目 开始：
1、如果以前没有使用过 自定义栏目 的话，那在编辑文章时可能看不到 自定义栏目 ，这时需要点击右上角 显示选项 把 自定义栏目 选中，这样在编辑文章的时候就可以看到 自定义栏目了；
2、点击添加自定义栏目下面的 输入新栏目 我们在这里要创建一个新的栏目，命名为code_demo；
如果此时只填写名称，不填写值的话，则会出现下图提示，添加失败
为了能成功添加code_demo栏目，值就先随意填一下
3、在functions.php里添加获取code_demo栏目信息的代码，此段代码可以加在wordpress的wp-includes目录下的functions.php里，亦可放在要使用演示功能的主题根目录下的functions.php里面。
|
0
1
2
3
4
5
|
function get_code_demo_value($article_id, $szKey, $bPrint = false,$falsemsg) {
$szValue = get_post_meta($article_id, $szKey, true);
if ( $bPrint == false ) return $szValue;
else echo $szValue;
if($falsemsg !=“” && $szValue==“”) echo $falsemsg;
}
|
因我们要把演示代码作为文章属性添加进来，可想而知，每个文章都可以有属于自己的code_demo属性。因此我们这里通过$article_id，也就是每篇文章的ID来区别所要获取的文章的code_demo。
4、在主题根目录下创建code_demo.php文件，内容如下：
|
0
1
2
3
4
5
|
<?php
require_once($_SERVER[‘DOCUMENT_ROOT’]. ‘/wp-load.php’);
$post_id = $_GET[id];
$queried_post = get_post($post_id);
echo get_code_demo_value($_GET[id], ‘code_demo’,“Cavyff’ Blog提示您此处演示内容不存在或已经被删除”,“”);
?>
|
code_demo.php实际上就是用来显示演示内容的页面，但这个页面是动态的，它要根据获取到的文章ID来显示相应文章的code_demo属性内容。这里要注意下，因为code_demo.php是我们自己创建的文件，’require_once($_SERVER[‘DOCUMENT_ROOT’]. ‘/wp-load.php’);’不能少，因为我们要使用wordpress自带的方法。
5、在要演示代码的地方加入如下代码：PHP
|
0
1
2
3
4
|
<?php if( get_post_custom_values(‘code_demo’) != ”) {?>
<div class=“article_foot”>
<a target=“_blank” class=“button blue medium” href=“<?php bloginfo(‘template_directory’);?>/code_demo.php?id=<?php the_ID()?>“>点击查看本文演示内容</a>
</div>
<?php } ?>
|
本段代码其实就是一个按钮，按钮会将文章ID传递给code_demo.php，然后code_demo.php则会将该文章code_demo属性读取出来，这也就实现了我们想要的演示功能。当然，不会每篇文章都需要演示的，所以通过代码第一步判断，如果code_demo属性为空，则不会显示出按钮。这段代码加入的位置可以根据需要自行调整，有代码基础的童鞋可以直接把代码加入到主题模板里去，这样就不用每次需要演示的时候都添加一遍这段代码了。
6、在发布需要演示的文章时，把演示的代码复制到code_demo栏目的 值 里去，然后正常发布文章就可以看到效果了。
