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

Question

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

SAMPLE LINK

一个人甚至从哪里开始？我在 Google 上找了好几个小时才找到从哪里开始的线索……什么都没有！

真的只是把网站包装在一个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