Question

我希望实现我开发的WordPress主题的“主题预览”，就像你在Themeforest上看到的那样，它基本上将你的网站或WP主题包装在一个框架中，并允许你将视口更改为各种设备大小展示响应能力。以下示例链接。

SAMPLE LINK

一个人甚至从哪里开始？我已经在谷歌上找了几个小时找到一个线索从哪里开始......什么都没有！

它真的只是将网站包装在iframe中并使用JS来控制iframe的大小吗？我觉得某处会有更清洁，更轻便的解决方案。

我想自己构建或者找一个开源插件。我知道那里有付费版本，但希望收集意见并找到明确的解决方案。

提前致谢！

Answer 1

感谢大家的所有回复，但我设法接受了我自己的建议并且能够解决问题。也许有人会在那里找到这个方便的一天，但这是我使用Jquery的解决方案。是的，我所做的就是创建一个带有标题和iframe的空白页面。

我为我的“a”标签分配了唯一的ID作为jquery的标识符：

<ul>
  <li class="icon-row"><a id="viewport-change-desktop" href="#"><img src="img/desktop-icon@2x.png" height="48px" width="60px" alt="Desktop Viewport" /></a></li>
  <li class="icon-row"><a id="viewport-change-laptop" href="#"><img src="img/laptop-icon@2x.png" height="30px" width="47px" alt="Laptop Viewport" /></a></li>
  <li class="icon-row"><a id="viewport-change-tablet" href="#"><img src="img/tablet-icon@2x.png" height="25" width="18" alt="Tablet Viewport" /></a></li>
  <li class="icon-row"><a id="viewport-change-mobile" href="#"><img src="img/mobile-icon@2x.png" height="20px" width="9px" alt="Mobile Viewport" /></a></li>
</ul>

这里的CSS与解决问题无关，只有“a id =”。使用我的HTML中的唯一ID，我能够像这样制作一些jquery：

$( "#viewport-change-desktop" ).click(function () {
  $("iframe").width('100%');
  $("iframe").height('100%');
});
$( "#viewport-change-laptop" ).click(function () {
  $("iframe").width(1024);
  $("iframe").height(768);
});
$( "#viewport-change-tablet" ).click(function () {
  $("iframe").width(768);
  $("iframe").height(800);
});
$( "#viewport-change-mobile" ).click(function () {
  $("iframe").width(320);
  $("iframe").height(568);
});

现在我创建的标题栏中的图标会调整包含WordPress主题的iframe，点击我能够设置的值。因此，回答我自己的问题。摇滚！

FULL TUTORIAL HERE

WordPress主题预览 - 呃？从哪儿开始？

1 个答案: