经常浏览一些 wordpress 主题介绍与下载站点，一般这些站点都提供主题演示功能，通过访问特定 url 预览多种主题效果，极大的方便了读者更详细的了解主题作品。要实现这一功能，当然不可能为每一个主题建立一个站点！
下面介绍非插件代码版：只能在文章中引入演示地址方法
1、为 WordPress 创建一个用于主题演示或网站演示的页面。你只需要复制下面的代码，并且保存为 page-demo.php 上传到你当前使用主题的根目录即可。
$('.icon-monitor').addClass('active');
$(".icon-mobile-3").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('mobile-width-3'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; });
$(".icon-mobile-2").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('mobile-width-2'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; });
$(".icon-mobile-1").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('mobile-width'); $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; });
$(".icon-tablet").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('tablet-width'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; });
$(".icon-monitor").click(function () { $("#by").css("overflow-y", "hidden"); $('#iframe-wrap').removeClass().addClass('full-width'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; }); });
-
手机二维码预览
扫一扫，直接在手机上打开
