gravatar头像龙笑天  7个月前 (05-03) 来源:龙笑天下 隐藏边栏 |   6 条评论  256 
文章评分 20 次,平均分 5.0

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

下面分别介绍插件版和代码版。

插件

目前拥有演示功能的主流插件,主要有 WordPress Theme Demo Bar 与 Wave Your Theme。

WordPress Theme Demo Bar

这款插件自定义程度非常高,提供URL、工具条方式预览指定主题,而且还可以自由修改工具条样式。另外,在工具条上还可以添加当前演示主题的下载链接,并可自动统计主题预览次数等。

该插件使用也很方便,提供了详细的设置选项,要通过URL预览主题,只需添加一个变量“themedemo”到网址就可以了,例如:

除此之外,该插件还能为预览主题添加指定css,也可以对个人用户隐藏工具栏。

Wave Your Theme

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

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

同时,要通过URL预览主题,只需添加一个变量“themedemo”到网址就可以了,例如:

非插件代码版1:只能在文章中引入一个演示链接

下面就一步步教你不用插件实现主题在线预览功能,这种样式非常漂亮,下面有演示效果。修改自 @君子不器

步骤一

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

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

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

步骤二

后台创建一个演示页面。将上面的代码保存为 page-demo.php 并上传到你当前网站主题根目录后,请依次打开后台 → 页面 → 新建页面,标题处输入Demo,页面模版处选择我们的“网站演示”,然后直接点击发布页面。比如,得到的这个页面链接为:http://www.ilxtx.com/demo ,记住这个链接,后面的短代码中要用到!

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

步骤三

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

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

使用方法

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

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

PS:这个有一个缺点,一篇文章只能插入一个演示链接... 希望高手能改善!

非插件代码版2:可以在文章中引入多个演示链接

20161126:经过龙笑天下的改造,已经能完美的在一篇文章中引入多个演示链接了!

步骤方面

步骤跟“非插件代码版1”一样,只需:

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

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

使用方法方面

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

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

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

演示效果

相关演示

 

除特别注明外,本站所有文章均为龙笑天下原创,转载请注明出处来自http://www.ilxtx.com/wordpress-demo.html

gravatar头像
龙笑天 最后编辑于:2016-11-26
互助分享,互联网本该如此!

发表评论

表情 链接 贴图 私信 格式 签到

最赞评论
  1. gravatar头像
    成航先森 评论达人 LV.3 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 8_1 like Mac OS X 四川省成都市 移动GSM/TD-SCDMA/LTE全省共用出口

    又不是主题站,一般博主用不着吧

    2016-05-04 8:46
    2 0
  2. gravatar头像
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信

    方法不错,没想到竟然还可以纯代码实现主体预览,真的很给力

    2016-05-06 21:03
    1 0
  1. gravatar头像
    henson 来自天朝的朋友 火狐浏览器 Windows 7 广东省广州市白云区 电信

    博主,能不能将这个演示URL伪静态啊?怎么实现?http://www.ilxtx.com/demo/?id=2158_1

    地板 2016-07-05 16:29
    0 0 回复
    • gravatar头像
      龙笑天 年费会员 博 主

      @henson不好意思,不会伪静态 [衰] 可以去问问张戈大神哈!

      2016-07-05 19:23
      0 0 回复
  2. gravatar头像
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信

    方法不错,没想到竟然还可以纯代码实现主体预览,真的很给力

    板凳 2016-05-06 21:03
    1 0 回复
  3. gravatar头像
    成航先森 评论达人 LV.3 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 8_1 like Mac OS X 四川省成都市 移动GSM/TD-SCDMA/LTE全省共用出口

    又不是主题站,一般博主用不着吧

    沙发 2016-05-04 8:46
    2 0 回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录。
快捷登录后,请完善资料中的电子邮件地址,可及时收到回复邮件通知和用于登录!

切换登录

注册

扫一扫二维码分享