订阅汇聚素材网Feed

WP DEMO 代码演示添加

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

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

直接加在文章?NO,不稳定因素,样式冲突,直接写在文章里,给人不明显!

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

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

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

效果:可以看下   CSS七种方法实现分割中线 本站是置于底部的一个按钮。

 

1234

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

一、创建自定义字段

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

s2223123123

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

codeing

二、在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自定义栏目,并把 要演示的代码粘贴进去。

1234567

 

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

其实就是这么简单,来试一试吧!以前尝试过其他方法,最后把个人目前认为的最好方法共享出来!

 

5 人Likes
  

文章转载请注明:WP DEMO 代码演示添加-汇聚素材网

本文固定链接:http://www.webhj.com/hj-163.html  +复制链接

WP DEMO 代码演示添加:等您坐沙发呢!

发表评论

*

*

9 + 0

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍