WordPress

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

经常阅读一些wordpress主题引见与下载站点,普通这些站点都提供主题演示功用,经过访问特定url预览多种主题效果,极大的便当了读者更细致的理解主题作品。要完成这一功用,当然不可能为每一个主题树立一个站点!

下面分别引见插件版和代码版。

目前具有演示功用的插件,有 WordPress Theme Demo Bar 与 Wave Your Theme。
WordPress Theme Demo Bar

这款插件自定义水平十分高,提供URL、工具条方式预览指定主题,而且还能够自在修正工具条款式。另外,在工具条上还能够添加当前演示主题的下载链接,并可自动统计主题预览次数等。

该插件运用也很便当,提供了细致的设置选项,要经过URL预览主题,只需添加一个变量“themedemo”到网址就能够了,例如:

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

除此之外,该插件还能为预览主题添加指定css,也能够对个人用户躲藏工具栏。
Wave Your Theme

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

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

同时,要经过URL预览主题,只需添加一个变量“themedemo”到网址就能够了,例如:
https://www.uoo2.com/?preview_theme=the-theme-folder-name


免插件代码版1:

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


步骤一:

为WordPress创立一个用于主题演示或网站演示的页面。你只需求复制下面的代码,并且保管为yanshi.php上传到你主题的根目录即可。

  1. <?php
  2. /*
  3. Template Name: 演示页面
  4. */
  5. ?>
  6. <?php
  7. /**
  8.  * 免插件实现WordPress主题演示功能
  9.  * https://www.uoo2.com/wordpress-demo.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="keywords" content="演示" />
  26. <link rel="shortcut icon" href="favicon.ico" />
  27. <title>Demo:<?php echo get_the_title($pid); ?> – 悠兔网</title>
  28. <style type="text/css">
  29. 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;}
  30. #preview-frame{background-color:#FFFFFF;width:100%;}.preview-logo{background:url("http://www.ilxtx.com/wp-content/themes/lxtx/images/demo-logo.png") no-repeat 0px 3px;text-indent:-9999px;display:block;float:right;}
  31. </style>
  32. <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
  33. <script type="text/javascript">
  34.       var calcHeight = function() {
  35.         var headerDimensions = $('#header-bar').height();
  36.         $('#preview-frame').height($(window).height() - headerDimensions);
  37.       }
  38.       $(document).ready(function() {
  39.         calcHeight();
  40.         $('#header-bar a.close').mouseover(function() {
  41.           $('#header-bar a.close').addClass('activated');
  42.         }).mouseout(function() {
  43.           $('#header-bar a.close').removeClass('activated');
  44.         });
  45.       });
  46.       $(window).resize(function() {
  47.         calcHeight();
  48.       }).load(function() {
  49.         calcHeight();
  50.       });
  51. </script>
  52. </head>
  53. <body>
  54. <div id="header-bar">
  55. <div class="close-header">
  56. <script type="text/javascript">document.write("<a id=\"close-button\" title=\"关闭工具条\" class=\"close\" href=\"<?php echo $yanshi; ?>\">X</a>");</script>
  57. </div>
  58. <p class="meta-data">
  59. <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.uoo2.com/">返回首页</a>
  60. </p>
  61. <a class="preview-logo" href="https://www.uoo2.com/" title="悠兔网 -免费资源分享地">悠兔网</a>
  62. </div>
  63. <script type="text/javascript">
  64. document.write("<iframe id=\"preview-frame\" src=\"<?php echo $yanshi; ?>\" name=\"preview-frame\" frameborder=\"0\" noresize=\"noresize\"></iframe>");
  65. </script>
  66. </body>
  67. </html>

步骤二

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

为了SEO,能够在robots.txt中制止蜘蛛爬取收录动态链接。如:Disallow: /*?* 或者 在page-demo.php文件的头部加上:

  1. <meta name="robots" content="noindex,nofollow">

步骤三

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

  1. /**
  2.  * 免插件纯代码实现WordPress添加主题演示功能
  3.  * https://www.uoo2.com/wordpress-demo.html
  4.  */
  5. function uoo2_demo_yanshi($atts$content = null) {
  6.     global $wpdb;
  7.     $post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
  8.     return '<a href="'.site_url().'/demo?pid='.$post_id.'" target="_blank">'.$content.'</p>';
  9. }
  10. add_shortcode('yanshi', 'uoo2_demo_yanshi');

使用方法

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

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

PS:这个有一个缺点,一篇文章只能插入一个演示链接。

可以在文章中引入多个演示链接

步骤

跟“免插件代码版1”一样,只需:

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

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

② 在functions.php中添加:

  1. /**
  2. * 免插件实现WordPress主题演示功能 - 悠兔网
  3. * https://www.uoo2.com/wordpress-demo.html
  4. */
  5. function uoo2_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?id='.$post_id.'_'.($i+1).'" target="_blank" title="'.$singledemoarray[0].'">'.$singledemoarray[0].'</a>';
  15.         $i++;
  16.     }
  17.     return $content;
  18. }
  19. add_shortcode('yanshi', 'uoo2_demo_yanshi');

使用方法

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

比如(效果见下方的演示),值为:演示示例1|http://hao.uoo2.com,演示示例2|https://www.uoo2.com/wordpress-demo.html

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

(0)

本文由 优次元 作者:MiChen 发表,转载请注明来源!

热评文章

评论:

3 条评论,访客:3 条,博主:0 条
  1. linode
    linode发布于: 

    已添加贵站

  2. linode
    linode发布于: 

    朋友 交换链接吗

    • MiChen
      MiChen发布于: 

      好的

发表评论


*