WordPress教程：免插件实现主题演示功能

沃森博客
沃森博客
沃森博客
1421
文章
9
评论
2017年9月12日17:28:27WordPress评论235阅读模式

主题演示功能在wordpress主题开发及下载站点用得比较多，方便读者了解主题各个细节和使用体验。最近在逛龙笑天下博客看到这个“WordPress教程：免插件实现主题演示功能”，给搬过来收藏备用的同时分享给需要的站长朋友们。

WordPress教程：免插件实现主题演示功能

WordPress教程：免插件实现主题演示功能

方法一：只能在文章中引入一个演示链接

第一步：创建演示页面模板

为WordPress创建一个用于主题演示或网站演示的页面。点击下载 page-demo.php。也可复制下方代码（转义可能有误，最好下载）保存为 page-demo.php，然后上传到当前使用主题的根目录即可。

创建演示页面模板代码：

  1. <?php
  2. /*
  3. Template?Name:?演示页面
  4. */
  5. ?>
  6. <?php
  7. /**
  8. ?*?纯代码实现WordPress添加主题演示功能
  9. ?*?教程：http://wosn.net/537.html
  10. **/
  11. ?>
  12. <?php?$pid?=?$_GET['pid'];
  13. $values?=?get_post_custom_values('demo_link',$pid);
  14. if(emptyempty($values)){
  15. ????????Header('Location:/');
  16. }else{
  17. ????????foreach($values?as?$value){
  18. ????????????????$yanshi?=?$value;
  19. ????????}
  20. }??>
  21. <!DOCTYPE?html>
  22. <head>
  23. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
  24. <meta?name="description"?content="沃森主题在线演示"?/>
  25. <meta?name="robots"?content="noindex,nofollow">
  26. <meta?name="keywords"?content="主题在线演示"?/>
  27. <link?rel="shortcut?icon"?href="http://pic.wosn.net/favicon.ico"?/>
  28. <title>主题演示：<?php?echo?get_the_title($pid);??>?–?沃森主题</title>
  29. <style?type="text/css">
  30. 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;}
  31. #preview-frame{background-color:#FFFFFF;width:100%;}.preview-logo{background:url("http://pic.wosn.net/demo-logo.png")?no-repeat?0px?3px;text-indent:-9999px;display:block;float:right;}
  32. </style>
  33. <script?src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
  34. <script?type="text/javascript">
  35. ??????var?calcHeight?=?function()?{
  36. ????????var?headerDimensions?=?$('#header-bar').height();
  37. ????????$('#preview-frame').height($(window).height()?-?headerDimensions);
  38. ??????}
  39. ??????$(document).ready(function()?{
  40. ????????calcHeight();
  41. ????????$('#header-bar?a.close').mouseover(function()?{
  42. ??????????$('#header-bar?a.close').addClass('activated');
  43. ????????}).mouseout(function()?{
  44. ??????????$('#header-bar?a.close').removeClass('activated');
  45. ????????});
  46. ??????});
  47. ??????$(window).resize(function()?{
  48. ????????calcHeight();
  49. ??????}).load(function()?{
  50. ????????calcHeight();
  51. ??????});
  52. </script>
  53. </head>
  54. <body>
  55. <div?id="header-bar">
  56. <div?class="close-header">
  57. <script?type="text/javascript">document.write("<a?id=\"close-button\"?title=\"关闭工具条\"?class=\"close\"?href=\"<?php?echo?$yanshi;??>\">X</a>");</script>
  58. </div>
  59. <p?class="meta-data">
  60. <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="http://wosn.net/">返回首页</a>
  61. </p>
  62. <a?class="preview-logo"?href="http://wosn.net/wordpress/wpzhuti/"?title="沃森主题">沃森主题</a>
  63. </div>
  64. <script?type="text/javascript">
  65. document.write("<iframe?id=\"preview-frame\"?src=\"<?php?echo?$yanshi;??>\"?name=\"preview-frame\"?frameborder=\"0\"?noresize=\"noresize\"></iframe>");
  66. </script>
  67. </body>
  68. </html>

第二步：后台创建一个演示页面

将page-demo.php上传到网站主题根目录后，依次打开后台 → 页面 → 新建页面，标题处输入Demo，页面模板处选择我们的“演示页面”，然后直接点击发布页面。

WordPress教程：免插件实现主题演示功能

比如，本站得到的这个页面链接为：http://wosn.net/demo.html ，注意页面别名为demo，和下面的短代码相一致！

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

第三步：使用简码调用该功能。

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

  1. function?wosn_net_demo_yanshi($atts,?$content?=?null)?{
  2. ????global?$wpdb;
  3. ????$post_id?=?(?null?===?$post_id?)???get_the_ID()?:?$post_id;
  4. ????return?'<a?href="'.site_url().'/demo.html?pid='.$post_id.'"?target="_blank">'.$content.'</p>';
  5. }
  6. add_shortcode('yanshi',?'wosn_net_demo_yanshi');

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

使用方法

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

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

WordPress教程：免插件实现主题演示功能

方法二：可以在文章中引入多个演示链接

步骤跟“方法一”一样，只需：

① 将page-demo.php里的内容改为如下（下方代码转义可能有误，请直接下载）：

下载：page-demo2.php下载下来注意改名为page-demo.php上传。

  1. <?php
  2. /*
  3. Template?Name:?演示页面
  4. */
  5. ?>
  6. <?php
  7. /**
  8. ?*?WordPress教程：免插件实现主题演示功能
  9. ?*?http://wosn.net/537.html
  10. **/
  11. ?>
  12. <?php?wp_reset_query();??>
  13. <?php?if(isset($_GET['id'])):$id?=?$_GET['id'];else:$id?=?0;endif;??>
  14. <?php?$id_arr?=?explode('_',$id);?$pid=$id_arr[0];$i=isset($id_arr[1])?$id_arr[1]:1;??>
  15. <!DOCTYPE?html>
  16. <head>
  17. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
  18. <meta?http-equiv="Cache-Control"?content="no-transform"?/>
  19. <meta?http-equiv="Cache-Control"?content="no-siteapp"?/>
  20. <link?rel="shortcut?icon"?href="favicon.ico"?/>
  21. <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>
  22. <?php?if($pid!=0){
  23. ??if(get_post_field('post_excerpt',$pid)){$description=get_post_field('post_excerpt',$pid);}else{
  24. ????if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags(get_post_field('post_content',$pid),"<p>")),$result)){
  25. ??????$post_content?=?$result['1'];
  26. ????}?else?{
  27. ??????$post_content_r?=?explode("\n",trim(strip_tags(get_post_field('post_content',$pid))));
  28. ??????$post_content?=?$post_content_r['0'];
  29. ????}
  30. ?????????$description?=?utf8Substr($post_content,0,220);
  31. ??}
  32. ??$keywords?=?"";
  33. ????$tags?=?wp_get_post_tags($pid);
  34. ????foreach?($tags?as?$tag?)?{
  35. ????????$keywords?=?$keywords?.?$tag->name?.?",";
  36. ????}
  37. }
  38. ?>
  39. <meta?name="description"?content="<?php?echo?trim($description);??>"?/>
  40. <meta?name="keywords"?content="<?php?echo?rtrim($keywords,',');??>"?/>
  41. <style?type="text/css">
  42. 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;}
  43. #preview-frame{background-color:#FFFFFF;width:100%;}.preview-logo{background:url("http://wosn.net/images/demo-logo.png")?no-repeat?0px?3px;text-indent:-9999px;display:block;float:right;}
  44. </style>
  45. <script?src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
  46. <script?type="text/javascript">
  47. ??????var?calcHeight?=?function()?{
  48. ????????var?headerDimensions?=?$('#header-bar').height();
  49. ????????$('#preview-frame').height($(window).height()?-?headerDimensions);
  50. ??????}
  51. ??????$(document).ready(function()?{
  52. ????????calcHeight();
  53. ????????$('#header-bar?a.close').mouseover(function()?{
  54. ??????????$('#header-bar?a.close').addClass('activated');
  55. ????????}).mouseout(function()?{
  56. ??????????$('#header-bar?a.close').removeClass('activated');
  57. ????????});
  58. ??????});
  59. ??????$(window).resize(function()?{
  60. ????????calcHeight();
  61. ??????}).load(function()?{
  62. ????????calcHeight();
  63. ??????});
  64. </script>
  65. </head>
  66. <body>
  67. <?php?$demos?=?get_post_meta($pid,'demo_link2',true);$demoarray?=?explode(',',$demos);if(isset($demoarray[$i-1])){$singledemo?=?$demoarray[$i-1];}else{$singledemo='';}
  68. ??$singledemoarray?=?explode('|',?$singledemo);
  69. ??if(!emptyempty($singledemoarray[1])){
  70. ?>
  71. <div?id="header-bar">
  72. <div?class="close-header">
  73. <script?type="text/javascript">document.write("<a?id=\"close-button\"?title=\"关闭工具条\"?class=\"close\"?href=\"<?php?echo?$singledemoarray[1];??>\">X</a>");</script>
  74. </div>
  75. <p?class="meta-data">
  76. <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="http://wosn.net/">返回首页</a>
  77. </p>
  78. <a?class="preview-logo"?href="http://wosn.net/"?title="沃森主题">沃森主题</a>
  79. </div>
  80. <script?type="text/javascript">
  81. document.write("<iframe?id=\"preview-frame\"?src=\"<?php?echo?$singledemoarray[1];??>\"?name=\"preview-frame\"?frameborder=\"0\"?noresize=\"noresize\"></iframe>");
  82. </script>
  83. <?php?}?else?{echo?'未找到相关演示内容，你的访问链接或许无效...';}??>
  84. </body>
  85. </html>

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

  1. /**
  2. *WordPress教程：免插件实现主题演示功能
  3. *http://wosn.net/537.html
  4. **/
  5. function?wosn_net_demo_yanshi($atts,?$content?=?null)?{
  6. ????global?$wpdb;
  7. ????$post_id?=?(?null?===?$post_id?)???get_the_ID()?:?$post_id;
  8. ????$content?=?'';
  9. ????$demos?=?get_post_meta($post_id,'demo_link',true);
  10. ????$demoarray?=?explode(',',$demos);
  11. ????$i?=?0;
  12. ????foreach?(?$demoarray?as?$demo?){
  13. ????????$singledemoarray?=?explode('|',?$demo);
  14. ????????$content?.=?'<a?href="'.site_url().'/demo.html?id='.$post_id.'_'.($i+1).'"?target="_blank"?title="'.$singledemoarray[0].'">'.$singledemoarray[0].'</a>';
  15. ????????$i++;
  16. ????}
  17. ????return?$content;
  18. }
  19. add_shortcode('yanshi',?'wosn_net_demo_yanshi');

使用方法

首先，添加“自定义栏目”，输入新的自定义栏目，名称： demo_link，值:演示1名称|演示1url,演示2名称|演示2url

其中：演示名称与url用|隔开，不同演示用英文逗号隔开,url请添加http://头。

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

WordPress教程：免插件实现主题演示功能

最后推荐两款拥有演示功能的主流插件Wave Your Theme（国人开发）? 与WordPress Theme Demo Bar 。

至此，WordPress教程：免插件实现主题演示功能分享就结束了。如有在使用过程中遇到任何问题可在下方留言。

ps:本文代码来自龙笑天下博客。

 

沃森博客
  • 本文由 发表于 2017年9月12日17:28:27
  • 本文来自互利网收集整理，问题反馈联系邮箱：wosnnet@foxmail.com，转载请务必保留本文链接：https://wosn.net/537.html

发表评论