^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

WordPress制作案例演示模板

阿里云限时特惠

如果你和陌小雨一样经常在博客文章中嵌入代码块,那本文将对你有帮助。本文主要通过 WordPress 自定义域功能为文章新增案例展示页面,通过此页面,你可以统一管理代码展示的效果,也可以在你的展示页面放一个广告,其它页面同样会有,一劳永逸。

步骤 1:新建案例展示页面模板:

使用步骤:

1、把以下代码复制并保存为 example.php 文件,上传至主题目录下;

2、后台-页面-新建页面-选择 example 模板;

<?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); ?>">&laquo; <?php echo get_the_title($pid); ?></a>
</div>
<div class="demo-container demo">
	<?php echo $theCode; ?>
</div>
</body>
</html>

步骤 2:使用模板

在写文章的时候插入一个自定义栏目,第一次需要添加自定义栏目,名称写为 example_code,值里面可以任意插入你的代码,以下作为演示:

<style type="text/css">
.demo{width: 660px;}
/* Your example css code... */
</style>
Your example html code...

第一次新建栏目之后,以后就不用再新建,直接下拉框选择就行了。

步骤 3:浏览案例

后台-页面-找到案例展示页面并复制地址,如陌小雨的是 www.dedewp.com/example/,然后在后面加上 pid=本文 ID,如下:

https://dedewp.com.com/example/pid=文章 ID

扩展演示的话,还可以给代码 wordpress 添加演示和下载地址。就是在主题中添加同样的页面,命名的时候改为 demo 和 download,例如

demo

https://dedewp.com/download

然后再自定义框里面写下要访问的网站地址和下载地址即可。具体还可以在这些页面添加广告之类的。

让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈
  1. 云落
    看到这个才想起来,我擦啊啊啊啊啊啊,是的,和博客大全想到的一样,我第一时间想到了下载页面
    • 陌小雨网站管理员
      @云落 这么多啊。。。。想起来什么了
  2. 淘乐导刊
    :shock:
  3. 阿里亦初
    有演示吗 :?:
  4. BOKE123
    :wink: 确实很不错,特别是拓展到下载页面