WordPress实现主题演示功能

WP技巧8年前 (2016)发布 thec

WordPress实现主题演示功能
许多wordpress主题站点都提供主题演示功能。这是怎么做到的呢。

插件

WordPress Theme Demo Bar

这款插件自定义程度非常高，提供URL、工具条方式预览指定主题，而且还可以自由修改工具条样式。另外，在工具条上还可以添加当前演示主题的下载链接，并可自动统计主题预览次数等，能为预览主题添加指定css，也可以对个人用户隐藏工具栏。。
该插件提供了详细的设置选项，要通过URL预览主题，只需添加一个变量“themedemo”到网址就可以了，如：

https://im.acirno.com/?themedemo=主题文件夹名称

Wave Your Theme

Wave Your Theme 是国人制作的一个插件。安装启用后，会在网站前台显示一个“换装”图标，点击后会列出已安装的主题列表，点击对应的主题名字，即可切换预览。
该插件支持仅管理员预览，游客预览，也可以设置密码限制预览。
同时，要通过URL预览主题，只需添加一个变量“preview_theme”到网址就可以了，如：

https://im.acirno.com/?preview_theme=主题文件夹名

代码版

来自天国的@君子不器

步骤一

复制下面的代码，并且保存为yanshi.php上传到你当前使用主题的根目录。

<?php
/*
Template Name: 演示页面
*/
?>
<?php
/**
 * Modified By acirno.com
**/
?>
<?php $pid = $_GET['pid'];
$values = get_post_custom_values('wangzhanyanshi',$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" rel="external nofollow"  />
<title>网站演示：<?php echo get_the_title($pid); ?> – Acirno</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("images/demo-logo.png") no-repeat 0px 3px;text-indent:-9999px;display:block;float:right;}
</style>
<script src="https://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); ?>" rel="external nofollow" >返回原文：<?php echo get_the_title($pid); ?></a> <a class="back" href="https://www.ilxtx.com/" rel="external nofollow" >返回首页</a>
</p>
<a class="preview-logo" href="https://im.acirno.com/" rel="external nofollow"  title="JUST FOR FUN">JUST FOR FUN</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>

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

步骤二

后台创建一个演示页面。将上面的代码保存为yanshi.php并上传到你当前网站主题根目录后，请依次打开后台 → 页面 → 新建页面，标题处输入yanshi，页面模版处选择‘网站演示’，然后直接点击保存。

步骤三

添加自定义栏目。
打开后台 → 文章 → 写文章点开新建文章页面右上角的显示选项
选中其中的‘自定义栏目
选中后滚动到出现在文章编辑器下方的自定义栏目处
点击输入新栏目
在左边的名称处输入 wangzhanyanshi
右边的值那一栏则是放入需要演示网站链接
在文章标题和内容处随便输入点文字后直接点击发布即可
发布之后就删掉这篇文章，以后就不用再重新输入自定义栏目了，可以直接选择
按照上方的步骤完成后，就基本差不多了，接下来只需要调用就好。

最后一步

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

//演示短代码调用
function zhuti_yanshi($atts, $content = null) {
return ".$content.";
}
add_shortcode('yanshi', 'zhuti_yanshi');

保存上面的代码后，你就可以直接在写文章介绍主题的时候调用了，只需要用[yanshi]链接名称[/yanshi]调用即可。

# WP技巧 # Wp插件 # 主题演示

文章版权归原作者所有，转载请注明出处。

WordPress实现主题演示功能

插件

WordPress Theme Demo Bar

Wave Your Theme

代码版

步骤一

步骤二

步骤三

最后一步

方便的在更新主题时保留functions.php文件里的自定义功能函数

WordPress为页面链接添加.html伪静态后缀

相关文章

热门网址

热门标签