WordPress添加前端代码演示功能详解–无须插件

如果用Wordpress来写技术博客，尤其是写关于前端部分的，我相信会有不少博主希望能在博客里添加演示功能。这样读者对文章所说的代码效果会有个直观的感受，也能知晓其效果是否为自己所需的。另外一方面，添加演示也意味着文中的代码是没有问题的，增加文章可读性与可信性。

添加演示代码功能的方法有很多种，可以直接添加在博客文章里面，也可以利用Wordpress 页面，为演示代码单独创建一个新的页面出来等等。而本文所介绍的这种方式(本博客正在使用)则采用Wordpress自带的 自定义栏目 来实现。因为如果直接写在文章里面，那演示代码比较少的情况还说的过去，如果演示的是一个完整页面的效果，那使用写在文章里的这种办法不仅仅容易造成css冲突，而且也不利于后期维护修改。另外，受主题限制，可能演示出来的效果不会很理想；而采用新建演示页面的方法虽然不会受到主题限制，也可以避免css冲突，但笔者总觉得杀鸡焉用宰牛刀，而且演示的内容多了，页面也多了，以后后台翻阅起来很麻烦。至于有没有这方面的插件，笔者没有去搜，毕竟不喜欢装太多的插件，小功能的实现还是自己动手解决的好。

某天写文章的时候在后台看到这么一句话 自定义栏目用来向文章添加额外的属性 ，天生程序员通病，看到 属性 就跟看到亲人一样，这东西好啊，既然可以给文章添加属性，那何不把演示代码整个作为一个属性 直接添加给文章呢。这样如果可以实现的话，那使用和维护起来就太方便了，不需要新建多少东西，演示的内容跟着对应的文章走，以后要维护什么的，只要找到对应的文章就好了。下面就从 自定义栏目 开始：

1、如果以前没有使用过 自定义栏目 的话，那在编辑文章时可能看不到 自定义栏目 ，这时需要点击右上角 显示选项 把 自定义栏目 选中，这样在编辑文章的时候就可以看到 自定义栏目了；

2、点击添加自定义栏目下面的 输入新栏目 我们在这里要创建一个新的栏目，命名为code_demo；

如果此时只填写名称，不填写值的话，则会出现下图提示，添加失败

为了能成功添加code_demo栏目，值就先随意填一下

3、在functions.php里添加获取code_demo栏目信息的代码，此段代码可以加在wordpress的wp-includes目录下的functions.php里，亦可放在要使用演示功能的主题根目录下的functions.php里面。

functions.php

PHP

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文件，内容如下：

code_demo.php

PHP

<?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

<?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栏目的 值 里去，然后正常发布文章就可以看到效果了。