Примерка — Theme Preview & Compare

Описание

Подарок от разработчиков WPMarkets.Ru

Мы сами делаем сайты и знаем, чего стоит показать работу заказчику до запуска: поднять копию сайта, залить на неё содержимое, объяснить, почему адрес другой, а потом делать это ещё раз после каждой правки.

«Примерка» родилась из нашей собственной задачи и осталась бесплатной. Это наш подарок тем, кто делает сайты, — плагин, который убирает возню вокруг сдачи работы: новый дизайн показывается на настоящем сайте, по одной ссылке, без доступа в админку и без копии.

• Сдавать работу проще — отправили ссылку, заказчик открыл на своём телефоне и увидел, как всё будет.
• Согласовывать быстрее — два варианта рядом, и разговор идёт про конкретную разницу, а не про «мне кажется, тот был лучше».
• Ничего не сломается — покупатели заказчика всё это время работают с прежним сайтом и ничего не замечают.
• Видно, посмотрел ли клиент — не нужно писать «вы открывали?» и ждать ответа.

Зачем это нужно

Вы поставили новую тему и хотите посмотреть, как в ней выглядит сайт. Включать её нельзя — посетители увидят недоделанное. «Живой просмотр» WordPress показывает тему только вам и только внутри окна настройщика — с его панелью сбоку и в уменьшенной рамке. Ссылку заказчику оттуда не отправить, и посмотреть, как сайт выглядит на телефоне у клиента, тоже не получится.

«Примерка» подменяет тему на всём сайте, но только для вас и для тех, кому вы дали ссылку. Остальные всё это время работают с обычной темой и ничего не замечают.

Ничего настраивать не нужно

Поставили новую тему, открыли сравнение — и сразу видите два окна: слева сайт как есть, справа новая тема. Никаких галочек и списков перед этим.

Тема в любом окне меняется выпадающим списком прямо в его шапке. Поставили пять тем — перебирайте их одну за другой, сравнивая с тем же самым сайтом, не возвращаясь в консоль. Перезагружается только то окно, где вы сменили тему: выбранная ширина и соседнее окно остаются как были.

Главное отличие: варианты видно рядом

Обычные переключатели тем показывают по одной. Вы смотрите первую, потом вторую и сравниваете по памяти — а разницу в отступах, размере шрифта и высоте карточек так не поймать.

Здесь оба варианта открыты одновременно, на одной и той же странице, и разница видна сразу. Кнопки «Ноутбук», «Планшет», «Телефон» переключают ширину обоих окон разом — причём меняется ширина самих окон, а не масштаб картинки, поэтому сайт по-настоящему отрабатывает свои медиазапросы, а не показывает уменьшенную десктопную вёрстку.

Окна прокручиваются вместе. Листаете одно — второе едет следом, и не нужно догонять его вручную после каждого движения. Синхронизация идёт по доле длины страницы, а не по пикселям: у разных тем страницы разной высоты, и пиксели разъехались бы на первом же экране. Совпадение приблизительное — блоки в разных темах стоят по-разному, — но оба окна остаются примерно на одном месте по длине страницы. Если мешает, выключается кнопкой прямо на странице сравнения.

Окна показывают сайт так, как его видит посетитель

Внутри окон сравнения нет административной панели WordPress: она занимает место и сдвигает вёрстку сверху, а покупатель её всё равно не увидит. Вы сравниваете то, что получит посетитель, — без панели WordPress и лишних отступов.

Выйти из сравнения можно кнопкой «Закрыть сравнение»: она вернёт на ту же страницу и сразу снимет примерку, чтобы вы не остались в чужой теме, не поняв почему.

Сравнивать можно любую страницу

Не только главную. Возьмите карточку товара, корзину или запись блога: темы расходятся сильнее всего там, где много чужой разметки, и поломки видно раньше. Адрес вводится прямо на странице сравнения.

Ссылка для заказчика

• Укажите тему, кому отправляете и на сколько дней — получите ссылку.
• Человек откроет сайт в новой теме без доступа в админку и без учётной записи.
• В назначенный день ссылка перестанет работать сама.
• Любую можно отозвать раньше, а все разом — одной кнопкой.
• В журнале видно, открывали ли ссылку и на какой странице остановились.

Что плагин не сломает

• Админка, AJAX, REST и cron — тема там не подменяется никогда.
• Конструкторы — Elementor, Beaver Builder, Divi, Brizy, WPBakery и настройщик открываются в обычной теме, редактировать можно как раньше.
• Поиск и кеш — страницы примерки отдаются с X-Robots-Tag: noindex и без кеширования, поэтому недоделанный дизайн не попадёт в выдачу и не покажется посетителям.
• Сайт при сбое — если что-то пойдёт не так, показывается обычная тема. Примерка не может уронить сайт для посетителей.

Требования

• WordPress 6.0 и новее, PHP 7.4 и новее.
• Копия сайта не нужна: примерка идёт на настоящем содержимом.

Частые вопросы

Посетители увидят новую тему?

Нет. Тема подменяется только у того, кто вошёл с правом менять темы, и у того, кто открыл вашу ссылку.

Тема ломает вёрстку. Это опасно?

Нет. Ломается она только в вашем окне. Посетители в это время работают с активной темой, и даже фатальная ошибка в примеряемой теме их не затронет.

Работает с дочерними темами?

Да. Родительская тема определяется по заголовку Template, поэтому шаблоны находятся правильно.

Плагин правда бесплатный?

Да, целиком и без ограничений. Платной версии нет.

Можно ли листать окна порознь?

Да. Синхронная прокрутка включена по умолчанию, но выключается кнопкой «Прокручивать вместе» на странице сравнения — без сохранения настроек. Если она вам не нужна совсем, снимите галочку во «Внешний вид → Примерка».