如果你经常在博客文章中嵌入代码块,那本文将对你有帮助。本文主要通过Wordpress自定义域功能为文章新增案例展示页面,通过此页面,你可以统一管理代码展示的效果,也可以在你的展示页面放一个广告,其它页面同样会有,一劳永逸。查看案例
步骤1:新建案例展示页面模板:
使用步骤:
<?php /* template name: example */ $pid = $_GET['pid']; $values = get_post_custom_values('example_code',$pid); if(empty($values)){ Header('Location:/'); }else{ foreach($values as $value){ $theCode = $value; } } ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>实例:<?php echo get_the_title($pid); ?></title> <style> @charset "utf-8"; body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0} body,input,textarea{font-size:12px;font-family:microsoft yahei} body{text-align:center;color:#33383D;background:#f1f1f1} ul,ol{list-style:none} img{border:0} button,input {line-height:normal;*overflow:visible} input,textarea{outline:none} a{color:#3B8DD1;text-decoration:none} a:hover{color:#8CAC52} .demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;} .demo-name{color: #ccc;} .demo-title{display: none;} .demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;} .demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;} </style> </head> <body> <h1 class="demo-title"><?php echo get_the_title($pid); ?>实例展示 - <?php echo get_option('blogname'); ?></h1> <div class="demo-header"> <a class="demo-name" href="<?php echo get_permalink($pid); ?>">« <?php echo get_the_title($pid); ?></a> </div> <div class="demo-container demo"> <?php echo $theCode; ?> </div> </body> </html>
如果你使用的是D7主题,可以在</body>之前加入流量统计代码:
<div class="demo-footer"> <?php if( dopt('d_track_b') != '' ) echo dopt('d_track'); ?> </div>
步骤2:使用模板
在写文章的时候插入一个自定义栏目,第一次需要添加自定义栏目,名称写为example_code,值里面可以任意插入你的代码,以下作为演示:
<style type="text/css"> .demo{width: 660px;} /* Your example css code... */ </style> Your example html code...
第一次新建栏目之后,以后就不用再新建,直接下拉框选择就行了。
步骤3:浏览案例
后台-页面-找到案例展示页面并复制地址,如themebetter的是themebetter.com/example/,然后在后面加上?pid=本文ID,如下:
https://themebetter.com/example/?pid=文章ID
如果你的固定链接和上面不一样,就另当别论了:
https://themebetter.com/?page_id=66&pid=文章ID
https://themebetter.com/66/?pid=文章ID
https://themebetter.com/example?pid=文章ID
OK,具体使用就是这样了,如有问题请留言回复。
本文属原创,转载请注明原文:https://themebetter.com/wordpress-demo-page-template.html
评论 (0)