wordpress 代码演示添加

内容纲要

代码演示对于一个技术博客来说很重要，为博客中介绍的代码提供一个可视化的效果，为用户直观的展示其效果。直观的让用户知道这个代码效果“怎么样”及是否符合自己的要求。

代码演示的代码加在哪个地方呢？

直接加在文章？NO，不稳定因素，样式冲突，直接写在文章里，给人不明显！

为代码自动新建一个文章页面？NO，杀鸡用牛刀了，而且别人RSS会订阅到这种纯代码，非常不好！

我使用的方法是使用wordpress的自定义字段把代码写在对应文章的自定义字段，方便易维护，而且稳定！

原理：使用wordpress的自定义字段存储对应文章的代码，文章页代码演示按钮带文章参数ID，点击代码演示则讲文章ID传递给新建的一个DEMO代码演示页，DEMO演示页通过接收文章ID并向数据库请求这个自定义字段并展现在这个页面上。

那么下面来讲下具体怎么做吧!

一、创建自定义字段

1、在后台发布文章的右侧设置显示选项，勾选自定义自定义栏目。

2、在文章发布页发布文章编辑器的下方有个自定义栏目，我们创建一个名为 code 的自定义栏目

二、在function.php中加入提取字段函数信息代码

function get_custom_field_value($id, $szKey, $bPrint = false,$falsemsg) {
	$szValue = get_post_meta($id, $szKey, true);
	if ( $bPrint == false ) return $szValue; else echo $szValue;
        if($falsemsg !="" && $szValue=="") echo $falsemsg;
}

三、创建DEMO代码演示页面

创建一个code.php的文件，该文件置于自己主题的根目录下。上代码

<?php
	require_once($_SERVER['DOCUMENT_ROOT']. '/wp-load.php'); //使本文件可以使用WP自带的方法和属性
	$post_id = $_GET[id];
	$queried_post = get_post($post_id);
	echo get_custom_field_value($_GET[id], 'code',"该页面不存在演示代码");
?>

上述代码就是表示接收一个ID的参数，并根据这个ID查询出这个ID的文章的自定义字段为code所含内容。

四、为文章页添加代码演示按钮

在文章页内容的下方添加如下代码，注意将下面代码中的网址换为您的网址。

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

上述代码的意思是，如果这篇文章的code自定义字段不为空则显示代码演示按钮,a链接里通过?id=给code页面传文章ID参数。顺便贴个我的这个按钮的CSS样式吧。

.article_foot {
text-align: center;
border-bottom: 1px solid #DDD;
padding-bottom: 20px;
}
.code_demo {padding: 5px 8px;}
.code_demo {
background-color: #F79100;
background-position: 0 -33px;
background-repeat: repeat-x;
border: 1px solid #F79100;
border-radius: 2px 2px 2px 2px;
box-shadow: 1px 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 3px rgba(204, 204, 204, 0.25);
color: #F9F9F9;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: 700;
margin: 4px;
padding: 6px 10px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.12);
}

五、实例为文章添加代码

发布文章的时候，在文章编辑器下方的自定义栏目里选择 code自定义栏目，并把要演示的代码粘贴进去。

本代码演示实例置于文章的最下边，更为灵活的方式是按需添加到文章的对应位置，而由于wordpress对后台可编辑功能的局限性，不能在主题中直接更改【需要修改wordpress系统文件】，不方便实现，有代码基础的同学可以直接将【DEMO演示】按钮的HTML在编辑文章的时候置于自己喜欢的位置而不在文章模板中添加。

其实就是这么简单，来试一试吧！以前尝试过其他方法，最后把个人目前认为的最好方法共享出来!（转自：COCSS）

Post Views: 7,306