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

Question

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

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