WordPress免插件实现主题演示工具条功能
  • Blog
  • 2019-12-02
  • (298) Views
  • (0) Comments

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

实现方案一:
使用插件 WordPress Theme Demo Bar 与 Wave Your Theme,在wordpress后台插件中心搜索下载食用即可。

非插件代码版一
第一步,创建demo.php文件存放至当前主题目录,代码如下:

<?php
/*
Template Name: 演示页面
*/
?>
<?php
/**
* 免插件纯代码实现WordPress添加主题演示功能
**/
?>
<?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" />
<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("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>

第二步,后台创建演示页面demo,选择刚刚创建的php文件为主题

第三步,将以下模版函数添加至当前主题的functions.php文件

/**
 * 免插件纯代码实现WordPress添加主题演示功能
 */
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');

使用方法:

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

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

非插件代码版二

第一步,同上创建php文件

<?php
/*
Template Name: LXTX
*/
?>
<?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://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="<?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添加主题演示功能 
*/
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|地址1,演示案例2|地址2

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

原文地址:https://www.ilxtx.com/wordpress-demo.html


Comments

Top