wordpress添加代码演示

一直就想用Wordpress来写技术博客,难免会涉及到前端部分,这时候就需要在博客里添加演示功能了。这样才能对文章中所说的代码效果有个直观感受,也能知道其效果是否为自己所需的。同时,添加演示功能也意味着文中的代码是没有问题的,增加文章可信性。

添加演示代码功能的方法有很多种,可以直接添加在博客文章里面,也可以利用Wordpress页面,还可以采用插件方式等等。本文所介绍的这种方式采用Wordpress自带的《自定义栏目》来实现。如果直接写在文章里面,演示代码比较少的情况还凑合,但如果演示的是一个完整页面的效果,那使用写在文章里的办法不仅容易造成css冲突,也不利于后期维护修改。另外,受主题限制,可能演示出来的效果不会很理想;而采用新建演示页面的方法虽然不会受到主题限制,也可以避免css冲突,但实在是大材小用,而且演示的内容多了,页面也就多了,以后后台翻阅起来很麻烦。至于插件嘛,能不用则不用!

在后台看到这么一句话《自定义栏目》用来向文章添加额外的属性,既然可以给文章添加属性,那正好可以把整个演示代码作为一个属性直接添加给文章。这样使用和维护起来就方便多了,不需要新建多少东西,演示的内容跟着对应的文章走,以后维护什么的,只要找到对应的文章就好。下面就从《自定义栏目》开始:

显示wordpress《自定义栏目》

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

创建新栏目

点击添加自定义栏目下面的《输入新栏目》在这里要创建一个新的栏目,命名为code_demo;值先随便填一个demo,如果不填是增加不了新栏目的!

获取code_demo栏目信息代码

在functions.php里添加获取code_demo栏目信息的代码,此段代码可以加在wordpress的wp-includes目录下的functions.php里,亦可放在要使用演示功能的主题根目录下的functions.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。

创建code_demo.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自带的方法。

在要演示代码的地方加入如下代码:

<?php if( get_post_custom_values('code_demo') != '') {?>
<div class="article_foot">
<a target="_blank" class="codedemo" href="<?php bloginfo('template_directory');?>/code_demo.php?id=<?php the_ID()?>">点击查看本文演示内容</a>
</div>
?>

本段代码其实就是一个按钮,按钮会将文章ID传递给code_demo.php,然后code_demo.php则会将该文章code_demo属性读取出来,这也就实现了想要的演示功能。当然,不会每篇文章都需要演示的,所以通过代码第一步判断,如果code_demo属性为空,则不会显示出按钮。这段代码加入的位置可以根据需要自行调整。

添加演示代码

在发布需要演示的文章时,把演示的代码复制到code_demo栏目的《值》里去,然后正常发布文章就可以看到效果了。

制作点击按钮

提供我的点击按钮样式,它是由一个纯css代码生成的,将如下代码放入你的主题css文件夹里即可:
按钮的演示效果可以去这篇文章内查看:https://mrju.cn/2133.html

/* 演示代码 */
.codedemo { 
text-align:center
color:rgb(68, 68, 68);
font-size:14px;
padding-top:10px;
padding-bottom:10px;
padding-left:25px;
padding-right:25px;;
background-color:rgb(238, 238, 238);
}
.yanshi:hover{
color:#ffffff;
background-color:#555;
}

别留恋破碎的旧梦,别计较人生的得失。

3 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫