Dragon
龙笑天龙笑天  2016-05-04 06:24 龙笑天下 隐藏边栏 |   15 条评论  1,918 
文章评分 37 次,平均分 4.9

免插件纯代码实现 WordPress 添加主题演示功能 wordpress

经常浏览一些 wordpress 主题介绍与下载站点,一般这些站点都提供主题演示功能,通过访问特定 url 预览多种主题效果,极大的方便了读者更详细的了解主题作品。要实现这一功能,当然不可能为每一个主题建立一个站点!

下面分别介绍插件版和代码版。

插件

目前拥有演示功能的主流插件,主要有 WordPress Theme Demo Bar 与 Wave Your Theme。

WordPress Theme Demo Bar

这款插件自定义程度非常高,提供 URL、工具条方式预览指定主题,而且还可以自由修改工具条样式。另外,在工具条上还可以添加当前演示主题的下载链接,并可自动统计主题预览次数等。

该插件使用也很方便,提供了详细的设置选项,要通过 URL 预览主题,只需添加一个变量“themedemo”到网址就可以了,例如:

https://www.ilxtx.com/?themedemo=the-theme-folder-name

除此之外,该插件还能为预览主题添加指定 css,也可以对个人用户隐藏工具栏。

Wave Your Theme

Wave Your Theme 是国人制作的一个插件。安装启用后,会在网站前台显示一个“换装”图标,点击后会列出已安装的主题列表,点击对应的主题名字,即可切换预览。

该插件不仅支持“仅管理员预览”,而且支持游客预览,也可以设置密码限制预览。

同时,要通过 URL 预览主题,只需添加一个变量“themedemo”到网址就可以了,例如:

https://www.ilxtx.com/?preview_theme=the-theme-folder-name

非插件代码版 1:只能在文章中引入一个演示链接

下面就一步步教你不用插件实现主题在线预览功能,这种样式非常漂亮,下面有演示效果。修改自 @君子不器

步骤一

为 WordPress 创建一个用于主题演示或网站演示的页面。你只需要复制下面的代码,并且保存为 page-demo.php 上传到你当前使用主题的根目录即可。

<?php
/*
Template Name: 演示页面
*/
?>
<?php
/**
 * 免插件纯代码实现 WordPress 添加主题演示功能
 * https://www.ilxtx.com/wordpress-demo.html
 * Modified By ilxtx.com
**/
?>
<?php $pid = $_GET['pid'];
$values = get_post_custom_values('demo_link',$pid);
if(empty($values)){
        Header('Location:/');
}else{
        foreach($values as $value){
                $yanshi = $value;
        }
} ?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="龙笑天下网在线演示" />
<meta name="keywords" content="演示" />
<link rel="shortcut icon" href="https://www.ilxtx.com/redirect/4682dowbHbH9BysoaSsn6YD9wRkWHRjPHzkbs4CSN4D8HzsPwzE9QPD9HSCYkxsPh8Unsyk9jxjbEbC" />
<title>Demo:<?php echo get_the_title($pid); ?> – 龙笑天下</title>
<style type="text/css">
html body{color:#eee;font-family:Verdana,Helvetica,Arial,sans-serif;font-size:10px;height:100%;margin:0;overflow:hidden;padding:0;width:100%;}#header-bar{background:#333;font-size:10px;z-index:100;margin:0;padding:0;color:#eee;height:36px;line-height:36px;}#header-bar a.site-loopback{background-position:left top;background-repeat:no-repeat;display:block;float:right;margin-left:-10px;text-indent:-9999px;}#header-bar .preview-logo{height:36px;width:118px;margin-right:30px;}#header-bar p.meta-data{float:left;margin:0;padding:0;}#header-bar p.meta-data p{display:inline;margin:0;}#header-bar p.meta-data a{color:#e6f6f6;text-decoration:none;}#header-bar p.meta-data a.back{border-left:1px solid #545454;margin-left:10px;padding-left:15px;}#header-bar p.meta-data a:hover,#header-bar p.meta-data a.activated{color:#FFFFFF;}#header-bar div.close-header{float:left;height:29px;margin-left:15px;width:30px;}#header-bar div.close-header a#close-button{background-repeat:no-repeat;display:block;overflow:hidden;color:#fff;text-decoration:initial;}#header-bar div.close-header a#close-button:hover,#header-bar div.close-header a#close-button.activated{background-position:0 -12px;}#header-bar span.preview{color:#D2D1D0;display:none;font-family:MgOpen Modata,Tahoma,Geneva;font-size:13px;letter-spacing:1px;margin-left:10px;padding-left:20px;text-decoration:none;}
#preview-frame{background-color:#FFFFFF;width:100%;}.preview-logo{background:url("https://www.ilxtx.com/wp-content/themes/lxtx/images/demo-logo.png") no-repeat 0px 3px;text-indent:-9999px;display:block;float:right;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
      var calcHeight = function() {
        var headerDimensions = $('#header-bar').height();
        $('#preview-frame').height($(window).height() - headerDimensions);
      }      
      $(document).ready(function() {
        calcHeight();
        $('#header-bar a.close').mouseover(function() {
          $('#header-bar a.close').addClass('activated');
        }).mouseout(function() {
          $('#header-bar a.close').removeClass('activated');
        });
      });      
      $(window).resize(function() {
        calcHeight();
      }).load(function() {
        calcHeight();
      });
</script>
</head>
<body>
<div id="header-bar">
<div class="close-header">
<script type="text/javascript">document.write("<a id=\"close-button\" title=\"关闭工具条\" class=\"close\" href=\"<?php echo $yanshi; ?>\">X</a>");</script>
</div>
<p class="meta-data">
<script type="text/javascript">document.write("<a target=\"_blank\" class=\"close\" href=\"<?php echo $yanshi; ?>\">移除顶部</a>");</script> <a class="back" href="https://www.ilxtx.com/redirect/af9fbua4jPD8UxNzs4ER6SEbUzUzkxa9EbQqsWTRhWCzQxw4NWB86oQWkbEWkWaqhnjxDohWUWQoazQyjuHPCYjbE9woCzDx6z6W6SQPhoazw4NzUzH9axNYkbBWUusSjnQYNzwqk4D8wRNy6SaPw4j4Bz6qjPhqUSjSQWjyUPwxk9HbN">返回原文:<?php echo get_the_title($pid); ?></a> <a class="back" href="https://www.ilxtx.com/">返回首页</a>
</p>
<a class="preview-logo" href="https://www.ilxtx.com/" title="龙笑天下 - 分享悲伤;共享快乐">龙笑天下</a>
</div>
<script type="text/javascript">
document.write("<iframe id=\"preview-frame\" src=\"<?php echo $yanshi; ?>\" name=\"preview-frame\" frameborder=\"0\" noresize=\"noresize\"></iframe>");
</script>
</body>
</html>

需要注意的是,上面贴出的代码中只是提供了最基本的样式,你可以根据自己的需求来修改,你也可以加入浏览计数、网站统计、广告之类的。

步骤二

后台创建一个演示页面。将上面的代码保存为 page-demo.php 并上传到你当前网站主题根目录后,请依次打开后台 → 页面 → 新建页面,标题处输入 Demo,页面模版处选择我们的“网站演示”,然后直接点击发布页面。比如,得到的这个页面链接为:https://www.ilxtx.com/demo ,注意页面别名为 demo,和下面的短代码相一致!

为了 SEO,可以在 robots.txt 中禁止蜘蛛爬取收录动态链接。如:Disallow: /*?* 或者 在 page-demo.php 文件的头部加上: <meta name="robots" content="noindex,nofollow">

步骤三

使用简码调用该功能。为了调用方便,请将下面的代码放入你主题的模版函数 functions.php 文件中即可。

/**
 * 免插件纯代码实现 WordPress 添加主题演示功能 - 龙笑天下
 * https://www.ilxtx.com/wordpress-demo.html
 */
function lxtx_demo_yanshi($atts, $content = null) {
	global $wpdb;
    $post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
	return '<a href="'.site_url().'/demo?pid='.$post_id.'" target="_blank">'.$content.'</p>';
}
add_shortcode('yanshi', 'lxtx_demo_yanshi');

注:代码第 8 行里的 demo 页面的链接要与步骤二中的一致!

使用方法

首先,添加“自定义栏目”,输入新的自定义栏目,名称: demo_link,值:填写要演示的链接地址;

然后,用短代码 [yanshi]演示名称[/yanshi] 在需要的地方插入调用即可。

PS:这个有一个缺点,一篇文章只能插入一个演示链接... 希望高手能改善!

非插件代码版 2:可以在文章中引入多个演示链接

20161126:经过龙笑天下的改造,已经能完美的在一篇文章中引入多个演示链接了!

步骤方面

步骤跟“非插件代码版 1”一样,只需:

① 将page-demo.php里的内容改为如下:

<?php
/*
Template Name: LXTX-演示页面
*/
?>
<?php
/**
 * Published By ilxtx.com
**/
?>
<?php wp_reset_query(); ?>
<?php if(isset($_GET['id'])):$id = $_GET['id'];else:$id = 0;endif; ?>
<?php $id_arr = explode('_',$id); $pid=$id_arr[0];$i=isset($id_arr[1])?$id_arr[1]:1; ?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="https://www.ilxtx.com/redirect/4682dowbHbH9BysoaSsn6YD9wRkWHRjPHzkbs4CSN4D8HzsPwzE9QPD9HSCYkxsPh8Unsyk9jxjbEbC" />
<title><?php if($pid!=0):echo '《'.get_the_title($pid).'》- '.sprintf(__('资源演示%1$s','tinection'),$i); else:echo trim(wp_title('',0)); endif; ?> - <?php bloginfo('name'); ?></title>
<?php if($pid!=0){
  if(get_post_field('post_excerpt',$pid)){$description=get_post_field('post_excerpt',$pid);}else{
    if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags(get_post_field('post_content',$pid),"<p>")),$result)){
      $post_content = $result['1'];
    } else {
      $post_content_r = explode("\n",trim(strip_tags(get_post_field('post_content',$pid))));
      $post_content = $post_content_r['0'];
    }
         $description = utf8Substr($post_content,0,220);
  }
  $keywords = "";     
    $tags = wp_get_post_tags($pid);
    foreach ($tags as $tag ) {
        $keywords = $keywords . $tag->name . ",";
    }
}
?>
<meta name="description" content="<?php echo trim($description); ?>" />
<meta name="keywords" content="<?php echo rtrim($keywords,','); ?>" />
<style type="text/css">
html body{color:#eee;font-family:Verdana,Helvetica,Arial,sans-serif;font-size:10px;height:100%;margin:0;overflow:hidden;padding:0;width:100%;}#header-bar{background:#333;font-size:10px;z-index:100;margin:0;padding:0;color:#eee;height:36px;line-height:36px;}#header-bar a.site-loopback{background-position:left top;background-repeat:no-repeat;display:block;float:right;margin-left:-10px;text-indent:-9999px;}#header-bar .preview-logo{height:36px;width:118px;margin-right:30px;}#header-bar p.meta-data{float:left;margin:0;padding:0;}#header-bar p.meta-data p{display:inline;margin:0;}#header-bar p.meta-data a{color:#e6f6f6;text-decoration:none;}#header-bar p.meta-data a.back{border-left:1px solid #545454;margin-left:10px;padding-left:15px;}#header-bar p.meta-data a:hover,#header-bar p.meta-data a.activated{color:#FFFFFF;}#header-bar div.close-header{float:left;height:29px;margin-left:15px;width:30px;}#header-bar div.close-header a#close-button{background-repeat:no-repeat;display:block;overflow:hidden;color:#fff;text-decoration:initial;}#header-bar div.close-header a#close-button:hover,#header-bar div.close-header a#close-button.activated{background-position:0 -12px;}#header-bar span.preview{color:#D2D1D0;display:none;font-family:MgOpen Modata,Tahoma,Geneva;font-size:13px;letter-spacing:1px;margin-left:10px;padding-left:20px;text-decoration:none;}
#preview-frame{background-color:#FFFFFF;width:100%;}.preview-logo{background:url("https://www.ilxtx.com/wp-content/themes/lxtx/images/demo-logo.png") no-repeat 0px 3px;text-indent:-9999px;display:block;float:right;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
      var calcHeight = function() {
        var headerDimensions = $('#header-bar').height();
        $('#preview-frame').height($(window).height() - headerDimensions);
      }      
      $(document).ready(function() {
        calcHeight();
        $('#header-bar a.close').mouseover(function() {
          $('#header-bar a.close').addClass('activated');
        }).mouseout(function() {
          $('#header-bar a.close').removeClass('activated');
        });
      });      
      $(window).resize(function() {
        calcHeight();
      }).load(function() {
        calcHeight();
      });
</script>
</head>
<body>
<?php $demos = get_post_meta($pid,'demo_link2',true);$demoarray = explode(',',$demos);if(isset($demoarray[$i-1])){$singledemo = $demoarray[$i-1];}else{$singledemo='';}
  $singledemoarray = explode('|', $singledemo);
  if(!empty($singledemoarray[1])){
?>
<div id="header-bar">
<div class="close-header">
<script type="text/javascript">document.write("<a id=\"close-button\" title=\"关闭工具条\" class=\"close\" href=\"<?php echo $singledemoarray[1]; ?>\">X</a>");</script>
</div>
<p class="meta-data">
<script type="text/javascript">document.write("<a target=\"_blank\" class=\"close\" href=\"<?php echo $singledemoarray[1]; ?>\">移除顶部</a>");</script> <a class="back" href="https://www.ilxtx.com/redirect/af9fbua4jPD8UxNzs4ER6SEbUzUzkxa9EbQqsWTRhWCzQxw4NWB86oQWkbEWkWaqhnjxDohWUWQoazQyjuHPCYjbE9woCzDx6z6W6SQPhoazw4NzUzH9axNYkbBWUusSjnQYNzwqk4D8wRNy6SaPw4j4Bz6qjPhqUSjSQWjyUPwxk9HbN">返回原文:<?php echo get_the_title($pid); ?></a> <a class="back" href="https://www.ilxtx.com/">返回首页</a>
</p>
<a class="preview-logo" href="https://www.ilxtx.com/" title="龙笑天下 - 分享悲伤;共享快乐">龙笑天下</a>
</div>
<script type="text/javascript">
document.write("<iframe id=\"preview-frame\" src=\"<?php echo $singledemoarray[1]; ?>\" name=\"preview-frame\" frameborder=\"0\" noresize=\"noresize\"></iframe>");
</script>
<?php } else {echo '未找到相关演示内容,你的访问链接或许无效...';} ?>
</body>
</html>

② 再将插入 functions.php 中的那段代码改为:

/**
* 免插件纯代码实现 WordPress 添加主题演示功能 - 龙笑天下
* https://www.ilxtx.com/wordpress-demo.html
*/
function lxtx_demo_yanshi($atts, $content = null) {
	global $wpdb;
	$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
	$content = '';
	$demos = get_post_meta($post_id,'demo_link',true);
	$demoarray = explode(',',$demos);
	$i = 0;
	foreach ( $demoarray as $demo ){
		$singledemoarray = explode('|', $demo);
		$content .= '<a href="'.site_url().'/demo?id='.$post_id.'_'.($i+1).'" target="_blank" title="'.$singledemoarray[0].'">'.$singledemoarray[0].'</a>';
		$i++;
	}
	return $content;
}
add_shortcode('yanshi', 'lxtx_demo_yanshi');

使用方法方面

首先,添加“自定义栏目”,输入新的自定义栏目,名称: demo_link,值:格式为 演示 1 名称|演示 1url,演示 2 名称|演示 2url 其中:演示名称与 url 用|隔开,不同演示用英文逗号隔开,url 请添加 http://头。

比如(效果见下方的演示),值为:演示示例 1|https://www.ilxtx.com/wordpress-automatically-refuse-spam-comments.html,演示示例 2|https://www.ilxtx.com/wordpress-statistics.html

然后,用短代码 [yanshi] 在需要的地方插入调用即可。

演示效果

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:32    粉丝:36 最后编辑于:2019-06-14
互助分享,互联网本该如此!

发表评论

表情 贴图 链接 私密 格式 签到
最赞评论
  1. 成航先森
    成航先森 评论达人 LV.3 来自天朝的朋友 Netscape Navigator 5.0 iPhone iPhone OS 8_1 like Mac OS X 四川省 移动数据上网公共出口

    又不是主题站,一般博主用不着吧

  2. 龙笑天
    龙笑天 永久会员 博主 来自天朝的朋友 火狐浏览器 Windows 7

    @Yephy嗯 有点点不同 我是把主题里面自带的提取出来适应大众的 基本的思路已经讲清楚了 其它的就要靠你们自己填充丰满了~ [滑稽]

  3. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广西南宁市 电信

    方法不错,没想到竟然还可以纯代码实现主体预览,真的很给力

  1. vivo
    vivo 来自天朝的朋友 谷歌浏览器 71.0.3578.80 Windows 7 浙江省宁波市 电信

    大佬,自定义栏目没有 demo_link 值是怎么回事

    6楼 2018-12-11 18:35
    0 0 回复
  2. devoted
    devoted 来自天朝的朋友 谷歌浏览器 64.0.3282.140 Windows 10 河北省石家庄市 移动

    受教。非常不错的教程。

    5楼 2018-04-11 12:48
    0 0 回复
  3. Yephy
    Yephy Hong Kong 谷歌浏览器 65.0.3325.181 Windows 7 香港 新力讯(Sunnyvision)数据中心(九龙新蒲岗八达街9号威达工贸商业中心)

    大佬,你这展示页面跟你这教程里的出入有点大啊?!展示页面采用的代码里,加了很多东西吧?
    很多小白用了教程,却没有达到你展示页面的效果,还以为是自己哪里写的不对的!?

    4楼 2018-04-10 16:40
    0 0 回复
    • 龙笑天
      龙笑天 永久会员 博主 来自天朝的朋友 火狐浏览器 Windows 7

      @Yephy嗯 有点点不同 我是把主题里面自带的提取出来适应大众的 基本的思路已经讲清楚了 其它的就要靠你们自己填充丰满了~ [滑稽]

  4. henson
    henson 来自天朝的朋友 火狐浏览器 47.0 Windows 7 广东省广州市白云区 电信

    博主,能不能将这个演示 URL 伪静态啊?怎么实现?http://www.ilxtx.com/demo/?id=2158_1

    地板 2016-07-05 16:29
    0 0 回复
  5. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广西南宁市 电信

    方法不错,没想到竟然还可以纯代码实现主体预览,真的很给力

    板凳 2016-05-06 21:03
    1 0 回复
  6. 成航先森
    成航先森 评论达人 LV.3 来自天朝的朋友 Netscape Navigator 5.0 iPhone iPhone OS 8_1 like Mac OS X 四川省 移动数据上网公共出口

    又不是主题站,一般博主用不着吧

    沙发 2016-05-04 08:46
    2 0 回复
扫一扫二维码分享