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

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

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

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

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

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

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

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

一、创建自定义字段

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

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

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

三、创建DEMO代码演示页面

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

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

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

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

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

 

五、实例为文章添加代码

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

 

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

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

点击查看演示DEMO

转载请注明:Devin >> wordpress 代码演示添加

我来说说

发表评论您必须先登录

In 2018

虚长三十而立Flag

  • 1. 生娃,并为他拿起狗头单反,背诵历史纪元表;
  • 2. 认证PMP;
  • 3. 和老外讨论工作无需翻译;
  • 4. 参与一项硬件研发项目的产品设计;
  • 5. 带老婆玩,带父母玩。

精彩爽文,窗边小说,关注送礼

In 2017

墨刀

二十岁时打架,兄弟多,那是面子,敢惹事那叫魄力!现在打架了,悄悄的,真怕身边的朋友笑话!

从前,天天喝大酒,唱歌,通宵KTV,那叫会玩。现在低调做人,约上三五知己喝喝茶,到公园跑两圈,多陪陪家人,那叫靠谱!

不管你混的多牛逼,多有钱,做和你年龄匹配的事,这叫责任! 也叫成熟!

10年前发个脾气,牛都拉不回来。10年后生个气,转眼就觉得没必要。时间渐渐磨去了年少轻狂,也渐渐沉淀了冷暖自知。

10年前,连多愁善感都要吹得惊天动地 ,10年后,越痛越不动声色;越苦,越保持沉默 。

10年前,我们本着糊涂装明白。10年后,我们本着明白装糊涂。成长就是将你的一切都变成心静如水。

In 2016

放下,守心,承担
独立自主
敢想敢做,而能不计旁人眼光
说走就走,而能不再瞻前顾后

In 2015

愿这一年,

不再蹉跎、不作妄谈,
可以抱有千种期许,但至少播种一个开端;

不必发狠、不求看穿,
懂得各有山高水长,不必苦求同路与照看;

依然敢爱、敢离开,
从错误里汲取、在行走中放下,
平常应对平淡,平心看待平凡;

生活若能精彩更好,
但更重要的自己开心,家人幸福。

About Devin

昵称:Devin
性别:男性
邮箱:atDevin#qq.com

本人的长相


简历:

2015-2017 长虹智慧健康 .产品经理岗
2012-2015 苏宁易购 .广告媒介岗
2008-2012 中国矿大 .电子商务

简介:


男、爱生活、爱世界

许可


本博客采用“知识共享署名-非商业性使用-禁止演绎 3.0 Unported许可协议”进行许可。基于“www.atdevin.com”上的作品创作。本博未注明转载的作品皆为本博原创。

知识共享@中国大陆知识共享署名-非商业性使用-禁止演绎