Предварительный просмотр темы WordPress-er? Когда начать?

Question

Я ищу, чтобы реализовать «предварительный просмотр темы» темы WordPress, которую я разработал, как те, которые вы видите на Themeforest, где она в основном обертывает ваш сайт или тему WP в рамке и позволяет вам изменять видовое окно на различные размеры устройства до продемонстрировать отзывчивость. Пример ссылки ниже.

SAMPLE LINK

Где один даже начать? Я искал часы в Google, чтобы найти ключ, с чего начать ... ничего!

Действительно ли это просто обертка сайта в iframe и использование JS для управления размером iframe? Я чувствую, что там где-то будет более чистое и легкое решение.

Я хотел бы построить это самостоятельно или найти плагин с открытым исходным кодом. Я знаю, что там есть платные версии, но они хотят собрать мнения и найти четкое решение.

Заранее благодарен!

Answer 1

Спасибо за все ответы всем, но мне удалось взять мой собственный совет и смог что-то сделать. Может быть, кто-то там найдет этот удобный один день, но вот мое решение с помощью JQuery. И да, все, что я сделал, это создать пустую страницу с заголовком и iframe.

I присвоены уникальные идентификаторы для моих "а" метки в качестве идентификаторов для 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, я был в состоянии обработать некоторые 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); 
}); 

Теперь мои иконки в моем заголовке панели я создал будет изменить размер IFRAME, содержащий тему WordPress на клик до значений, я был в состоянии задавать. Поэтому, отвечая на мой собственный вопрос. Раскачать!

FULL TUTORIAL HERE