当前位置:
首页 > WP仿站教程 > 免插件纯代码实现WordPress添加主题演示功能

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

不用插件能否实现WordPress添加主题演示功能?答案是肯定的,酷马资源神马资源)在网上搜到了一篇很不错的文章,马上转载过来只需要几句简单的代码,再按照下面给出的步骤即可。
前言:添加网站演示或主题演示功能有必要吗?

这两天君子不器闲来无事就折腾自己的主题,为自己的主题添加了两个比较常用的功能,那就是在线代码演示页面和独立下载页面。添加了这两个功能后,君子不器总觉得还缺了一点什么东西没弄,只不过一时没想起来就放弃了。

就在今天,君子不器在浏览某个wordpress主题站的时候,才想起君子不器之前那感觉的由来了,那就是缺少一个WordPress主题演示或网站演示页面,既然想到了,那肯定就要动手实现了。如果决定要为你的WordPress网站添加该功能,那么请继续往下看,君子不器贴出具体的实现方式,请一步一步按照君子不器给出的方法操作。

实现步骤一:为WordPress创建一个用于主题演示或网站演示的页面

既然要实现该功能,自然得先创建一个页面才行。页面的话君子不器已经做好了,你只需要复制下面君子不器提供的代码,并且保存为yanshi.php上传到你当前使用主题的根目录即可。

  1. <?php
  2. /*
  3.         template name: 网站演示
  4. */
  5. $pid = $_GET['pid'];
  6. $values = get_post_custom_values('wangzhanyanshi',$pid);
  7. if(empty($values)){
  8.         Header('Location:/');
  9. }else{
  10.         foreach($values as $value){
  11.                 $yanshi = $value;
  12.         }
  13. }
  14. ?>
  15. <!DOCTYPE HTML>
  16. <html>
  17. <head>
  18. <meta charset="UTF-8" />
  19. <title>网站演示:<?php echo get_the_title($pid); ?> - 君子不器</title>
  20. <style type="text/css">
  21.         html body{color:#eee;font-family:Verdana,Helvetica,Arial,sans-serif;font-size:10px;height:100%;margin:0;overflow:hidden;padding:0;width:100%;}
  22.         #header-bar{background-color: #000;) repeat-x;font-size:10px;height:30px;line-height:30px;z-index:100;margin:0;padding:0;}
  23.         #header-bar a.site-loopback{background-position:left top;background-repeat:no-repeat;display:block;float:right;margin-left:-10px;text-indent:-9999px;}
  24.         #header-bar .preview-logo{height:30px;width:118px;margin-right:30px;}
  25.         #header-bar p.meta-data{float:left;margin:0;padding:0;}
  26.         #header-bar p.meta-data p{display:inline;margin:0;}
  27.         #header-bar p.meta-data a{color:#e6f6f6;text-decoration:none;}
  28.         #header-bar p.meta-data a.back{border-left:1px solid #4575d4;margin-left:10px;padding-left:15px;}
  29.         #header-bar p.meta-data a:hover,#header-bar p.meta-data a.activated{color:#FFFFFF;}
  30.         #header-bar div.close-header{float:left;height:29px;margin-left:15px;width:30px;}
  31.         #header-bar div.close-header a#close-button{background-color: #000;background-repeat:no-repeat;border:1px solid #4575d4;display:block;height:12px;margin:9px auto 0;text-indent:-9999px;width:12px;overflow:hidden;}
  32.         #header-bar div.close-header a#close-button:hover,#header-bar div.close-header a#close-button.activated{background-position:0 -12px;}
  33.         #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;}
  34.         #preview-frame{background-color:#FFFFFF;width:100%;}
  35.         
  36. </style>
  37.  
  38. <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
  39.  
  40. <script type="text/javascript">
  41. var calcHeight = function() {
  42. var headerDimensions = $('#header-bar').height();
  43. $('#preview-frame').height($(window).height() - headerDimensions);
  44. }
  45. $(document).ready(function() {
  46. calcHeight();
  47. $('#header-bar a.close').mouseover(function() {
  48. $('#header-bar a.close').addClass('activated');
  49. }).mouseout(function() {
  50. $('#header-bar a.close').removeClass('activated');
  51. });
  52. });
  53. $(window).resize(function() {
  54. calcHeight();
  55. }).load(function() {
  56. calcHeight();
  57. });
  58. </script>
  59. </head>
  60. <body>
  61. <div id="header-bar">
  62. <div class="close-header">
  63. <script type="text/javascript">document.write("<a id=\"close-button\" title=\"关闭工具条\" class=\"close\" href=\"<?php echo $yanshi; ?>/\">X</a>");</script>
  64. </div>
  65. <p class="meta-data">
  66. <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); ?>">&laquo; 返回原文:<?php echo get_the_title($pid); ?></a>&laquo; <a class="back" href="http://junzibuqi.com/">返回君子不器Junzibuqi.com</a>
  67. </p>
  68.  
  69. </div>
  70.  
  71. <script type="text/javascript">
  72. document.write("<iframe id=\"preview-frame\" src=\"<?php echo $yanshi; ?>\" name=\"preview-frame\" frameborder=\"0\" noresize=\"noresize\"></iframe>");
  73. </script>
  74.  
  75. </body>
  76. </html>

上面的代码就是用于WordPress主题演示或者网站演示的调用页面了,记得要连同html代码一起复制并保存为yanshi.php文件。

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

实现步骤二:后台创建一个演示页面

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

实现步骤三:添加自定义栏目

完成步骤二后,请按照下面君子不器给出的步骤进行操作。

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

纯代码为WordPress添加主题演示或网站演示功能
自定义栏目添加方式

最后一步:使用简码调用该功能

为了调用方便,君子不器提供一种简单的调用方式,请将下面君子不器提供的代码放入你主题的模版函数functions.php文件中即可

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

保存上面的代码后,你就可以直接在写文章的时候调用了,只需要用[yanshi]链接名称[/yanshi]调用即可,(注意是[]而不是【】)
原文地址:http://junzibuqi.com/zhutiyanshiwangzhanyanshi.html

免插件纯代码实现WordPress添加主题演示功能:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!

切换注册

登录

忘记密码 ?

切换登录

注册