如果用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栏目的 值 里去,然后正常发布文章就可以看到效果了。
标签:插件,code,演示,demo,代码,详解,WordPress,文章,php From: https://blog.51cto.com/u_15967457/6170392