Как сделать предварительный просмотр сайта WordPress перед публикацией?

WordPress — крупнейшая система управления контентом для создания веб-сайтов. Хотя он утверждает, что использует интерфейс редактора WYSIWYG (What You See Is What You Get), это не так. Старый классический редактор нигде не мог сравниться с редакторами WYSIWYG, а новый редактор на основе блоков Гутенберга представляет собой своего рода смесь визуального и технического. При такой настройке вы всегда должны предварительно просматривать сообщения и страницы, чтобы избежать проблем с макетом. В этой статье мы объясним, как предварительно просмотреть сайт WordPress перед публикацией контента.

Почему вам следует предварительно просмотреть контент перед публикацией?

В зависимости от ситуации существуют разные сценарии предварительного просмотра.

1. Предварительный просмотр сообщений или страниц

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

  • Многие функции не будут отображаться в редакторе сообщений, и вы можете просмотреть их только при предварительном просмотре или после публикации. Например, любые коды CSS, которые вы добавили в разделе «Внешний вид> Настройка> Дополнительные CSS», будут работать только с предварительным просмотром или живым контентом.
  • Точно так же, если вы добавите собственный класс CSS на боковую панель документа редактора для любого элемента, он будет эффективен только при просмотре содержимого.
  • Содержимое боковой панели и нижнего колонтитула можно увидеть только на всей странице, а не на экране редактора.
  • Могут возникнуть проблемы с макетом из-за несовместимости с вашей темой. Например, многие темы не будут работать должным образом с параметрами полной и широкой ширины изображений. Вам необходимо проверить предварительный просмотр, чтобы изображения не накладывались на содержимое боковой панели.
  • Коды, вставленные в заголовок, нижний колонтитул или основной раздел с помощью плагина, не будут работать внутри редактора. например, у вас может быть код заголовка для рекламы или социальных значков, которые будут работать только в предварительном просмотре или в реальном времени.
  • Ваш плагин кеширования может некорректно отображать измененный контент. В этом случае вам необходимо предварительно просмотреть и очистить кеш, если есть какие-либо проблемы.
  • Почти каждый сайт WordPress использует шорткод либо через плагины, либо из настройки темы. Ни один из этих шорткодов не будет работать в редакторах Gutenberg или Classic.

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

2. Предварительный просмотр сообщений других пользователей

Все вышеперечисленные причины действительны для просмотра отдельного сообщения или страницы на вашем сайте. Однако это ситуации для владельца сайта или человека, который публикует контент. Но есть другой сценарий, когда вы или ваш редактор хотели бы поделиться публикацией перед публикацией. Например, вам может потребоваться поделиться контентом с вашим клиентом для получения одобрения, прежде чем он будет запущен. Это также возможно в WordPress, чтобы отправить ссылку на сообщение кому угодно для просмотра или предварительного просмотра.

3. Предварительный просмотр для изменения темы

Есть еще одна дополнительная причина для предварительного просмотра всего сайта или случайных страниц. В WordPress есть тысячи бесплатных и премиальных тем, и вы не можете активировать каждую тему для тестирования макета сайта. Решение состоит в том, чтобы протестировать предварительный просмотр любой темы, доступной в репозитории WordPress или установленной на вашем сайте, без активации. Это поможет выявить проблемы с макетом и понять внешний вид, не затрагивая реальных пользователей.

Предложение SEO: Оптимизируйте свой сайт с помощью специальной 14-дневной бесплатной пробной версии Semrush Pro.

Как предварительно просмотреть сайт WordPress перед публикацией?

Давайте объясним все возможные объяснения, охватывающие все вышеперечисленные сценарии.

Предварительный просмотр отдельного сообщения или страницы

Хорошая часть состоит в том, что вы можете предварительно просмотреть содержимое публикации или страницы в WordPress без дополнительных плагинов.

  • Когда вы находитесь в редакторе блоков Гутенберга, щелкните ссылку «Предварительный просмотр», отображаемую рядом с кнопкой «Опубликовать» или «Обновить». Вы увидите кнопку «Опубликовать» при создании нового сообщения и кнопку «Обновить» при редактировании уже опубликованного сообщения.
Предварительный просмотр сообщения в редакторе Гутенберга
Предварительный просмотр сообщения в редакторе Гутенберга
  • Вы увидите раскрывающийся список с несколькими вариантами предварительного просмотра — на компьютере, планшете или мобильном устройстве.
Параметры предварительного просмотра сообщения
Параметры предварительного просмотра сообщения
  • По умолчанию предварительный просмотр в редакторе будет отображаться в режиме «Рабочий стол», и вы можете выбрать режим «Планшетный» или «Мобильный», чтобы мгновенно изменить вид в редакторе. Вы можете использовать это только как предварительный просмотр для проверки содержимого текста / изображения, так как другие коды и макет не будут работать в редакторе.
Адаптивный предварительный просмотр внутри редактора
Адаптивный предварительный просмотр внутри редактора
  • Чтобы просмотреть полный предварительный просмотр, выберите режим устройства и нажмите опцию «Предварительный просмотр в новой вкладке». Это откроет публикацию на новой вкладке браузера и применит все коды, шорткоды и изменения макета, которые вы применили в других местах в шаблонах.
Предварительный просмотр сообщения с проблемами
Предварительный просмотр сообщения с проблемами

Помните, что предварительный просмотр включает в себя все эффекты, такие как CSS, скрипты, шорткоды и применение глобального макета с боковой панелью, нижним колонтитулом и т. Д. На приведенном выше снимке экрана предварительного просмотра в реальном времени вы можете заметить несколько проблем, которые вы не можете найти в редакторе. В [google-translator] шорткод и первый виджет боковой панели не работают. Вы можете устранить проблемы и исправить их, прежде чем нажимать кнопку «Опубликовать» или «Обновить».

Если вы все еще используете классический редактор для сообщений и страниц или используете пользовательский тип сообщения с интерфейсом классического редактора, сначала нажмите кнопку «Сохранить черновик». Теперь вы увидите постоянную ссылку под заголовком сообщения и щелкните по ней.

Ссылка на предварительный просмотр публикации в классическом редакторе
Ссылка на предварительный просмотр публикации в классическом редакторе

Это откроет предварительный просмотр живого сообщения в новой вкладке браузера. Вы можете оставить вкладку предварительного просмотра открытой и продолжить обновление содержимого страницы. Каждый раз, когда вы снова нажимаете на постоянную ссылку, она обновляет уже открытую вкладку предварительного просмотра.

Разрешить предварительный просмотр, поделившись ссылкой с кем угодно

Когда вы видите URL-адрес предварительного просмотра в адресной строке браузера, у него есть preview_id, preview_nonce и preview = true. WordPress имеет механизм для предварительного просмотра в зависимости от статуса публикации, как описано в этом Статья на StackExchange. Доступны плагины для создания истекающего одноразового номера с настраиваемым URL-адресом публикации, которым вы можете поделиться с кем угодно.

  • Перейдите в раздел «Плагины> Добавить новый» и найдите «предварительный просмотр» в поле поиска.
  • Это отфильтрует многие плагины, найдет плагин Public Post Preview и установит / активирует его на вашем сайте.
Установить плагин для предварительного просмотра общедоступных сообщений
Установить плагин для предварительного просмотра публичных публикаций
  • Создайте новое сообщение и сохраните его как черновик, чтобы на боковой панели появился дополнительный параметр «Включить общедоступный предварительный просмотр». Помните, что этот параметр появится только после запуска автосохранения или после щелчка по ссылке «Сохранить черновик», которая доступна слева от ссылки «Предварительный просмотр».
Включить общедоступный предварительный просмотр
Включить общедоступный предварительный просмотр
  • Установите флажок «Включить общедоступный предварительный просмотр», чтобы увидеть URL-адрес предварительного просмотра.
Копировать ссылку для предварительного просмотра
Копировать ссылку для предварительного просмотра
  • Нажмите кнопку «Копировать URL-адрес предварительного просмотра» рядом с URL-адресом, чтобы скопировать ссылку в буфер обмена. Теперь вы можете поделиться этим URL-адресом со всеми, кому вы хотите увидеть предварительный просмотр своего сообщения. Если вы хотите ограничить доступ, просто перейдите к своему сообщению и снимите флажок «Включить общедоступный предварительный просмотр». Или публикация сообщения также сделает недействительным общедоступный URL-адрес предварительного просмотра, поскольку вы уже опубликовали сообщение.
  • После ограничения доступа или публикации сообщения любой, кто просматривает URL-адрес предварительного просмотра, получит сообщение об ошибке WordPress: «Общедоступный предварительный просмотр недоступен!».
Срок действия ссылки на общедоступный предварительный просмотр истек
Срок действия ссылки на общедоступный предварительный просмотр истек

WordPress SEO: Оптимизируйте сайт WordPress с помощью бесплатного руководства по SEO для WordPress.

Предварительный просмотр всего сайта с другой темой

Это функция WordPress по умолчанию, и вам не нужно для этого никаких дополнительных плагинов. Это также самый полезный вариант, когда вы хотите предварительно просмотреть несколько тем, не активируя их на своем действующем сайте. Однако вам необходимо установить тему, чтобы использовать функцию предварительного просмотра темы. Вы можете использовать предварительный просмотр темы двумя способами из панели администратора WordPress.

Следуйте инструкциям, если вы хотите установить / просмотреть тему из репозитория WordPress.org или предварительно просмотреть уже установленную тему на вашем сайте.

  • Когда вы находитесь в панели администратора WordPress, перейдите в раздел «Внешний вид> Настройка», чтобы открыть настройщик.
  • Он покажет предварительный просмотр домашней страницы вашего сайта с вашей текущей темой. В приведенном ниже примере вы можете увидеть, что настройщик показывает предварительный просмотр в режиме реального времени с темой Astra, и нажмите кнопку «Изменить».
Просмотреть активную тему
Просмотреть активную тему
  • Вы увидите экран, показанный ниже, на котором показаны все установленные на вашем сайте темы, а также возможность переключиться на темы WordPress.org.
  • Для уже установленных тем нажмите кнопку «Live Preview», чтобы перейти к экрану предварительного просмотра.
Предварительный просмотр установленной темы
Предварительный просмотр установленной темы
  • Если вы хотите протестировать любую тему WordPress.org, щелкните этот параметр на боковой панели, чтобы просмотреть темы. Вы можете использовать поле поиска, чтобы отфильтровать свою тему и нажать кнопку «Установить и просмотреть».
Предварительный просмотр темы репозитория WordPress
Предварительный просмотр темы репозитория WordPress
  • Например, мы изменим тему на GeneratePress и предварительно просмотрите ее, как показано ниже, без активации. Вы также можете переключить отображение устройства на рабочий стол, планшет или мобильное устройство, щелкнув значки, отображающие нижнюю часть боковой панели.
Предварительный просмотр новой темы и переключение адаптивного режима
Предварительный просмотр новой темы и переключение адаптивного режима
  • Большим преимуществом этого метода является то, что вы можете щелкнуть любую внутреннюю ссылку на странице предварительного просмотра и просмотреть предварительный просмотр этой страницы с новой темой.
  • После предварительного просмотра вы можете закрыть настройщик или вернуться к исходной теме. Или нажмите кнопку «Активировать и опубликовать», чтобы применить новую тему на вашем сайте и сделать ее активной.

Следующим вариантом является предварительный просмотр тем, установленных только на вашем сайте, в разделе «Внешний вид> Темы». Наведите указатель мыши на указатель мыши и нажмите кнопку «Просмотр в реальном времени» на теме, которую вы хотите просмотреть. Это приведет вас к экрану настройщика, где вы можете просмотреть любые ссылки, как описано в приведенном выше методе.

Установленная тема Live Preview
Установленная тема Live Preview

Заключительные слова

Многие пользователи не знают о различных вариантах предварительного просмотра, доступных в WordPress. Мы надеемся, что эта статья помогла вам предварительно просмотреть сайт WordPress перед публикацией с новой темой или только предварительно просмотреть и поделиться URL-адресом одного сообщения.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *