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

2016-05-04 06:24 2,235 15 条评论 龙笑天下
Dragon主题购买

免插件纯代码实现 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="favicon.ico" />
<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://cdn.ilxtx.com/wp-content/themes/dragon/assets/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="<?php echo get_permalink($pid); ?>">返回原文：<?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="favicon.ico" />
<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://cdn.ilxtx.com/wp-content/themes/dragon/assets/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="<?php echo get_permalink($pid); ?>">返回原文：<?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] 在需要的地方插入调用即可。

演示效果

「点点赞赏，手留余香」

还没有人赞赏，快来当第一个赞赏的人吧！

Wordpress插件Wordpress教程主题演示

声明：本文为原创文章，版权归所有，欢迎分享本文，转载请保留出处！

导航菜单栏随滚动条向上滚动时显示向下时隐藏

2016-04-25

大前端工具箱（加密/解密/压缩/格式化等）PHP 源码下载

2016-05-07

猜你喜欢

发表评论

表情 格式 贴图 链接 私密 签到
Dragon主题购买阿里云特价云服务器1核2G低至86元，N4共享型服务器3年仅需799元腾讯云特价云服务器1核2G 88元/年 2核4G3M688元/3年，更有千元代金券礼包免费领！
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more
Accept
Dragon