Статьи

Как подготовить свой сайт для WordPress Gutenberg

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

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

Если вы хотите узнать больше о том, что такое Гутенберг, обратите внимание на мой предыдущий пост « Что такое WordPress Gutenberg? »

  • WordPress
    Что такое WordPress Gutenberg?

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

  • Ваша тема: Гутенберг имеет собственный набор стилей для контента. Ваша тема совместима? Как это будет выглядеть с активным Гутенбергом?

  • Ваши плагины. Возможно, что Гутенберг может взаимодействовать с другими вашими плагинами неожиданным образом. Мы посмотрим, что это может быть, и что делать с любыми возникающими проблемами.

  • Ваш контент: Gutenberg будет влиять на то, как отображается сам ваш контент. Мы рассмотрим, как это может изменить внешний вид ваших страниц, и рассмотрим некоторые возможные исправления, если у вас возникли проблемы.

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

  • WordPress
    Перемещение WordPress: перемещение вашего сайта вручную
    Рэйчел Макколлин

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

Как только вы узнаете, где будете тестировать, перейдите в каталог плагинов и найдите Гутенберга. Как только он установлен и активирован, читайте дальше.

Теперь, когда у вас установлен Gutenberg, давайте посмотрим на первый раздел вашего сайта, который может быть затронут: его тема. Если на данный момент уже есть серьезные проблемы, такие как ошибки базы данных или проблемы с администратором WordPress, перейдите к разделу « Что делать, когда слишком много проблем ».

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

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

Чтобы исправить это, вам нужно определить, откуда возникла проблема. Как правило, это будет CSS-селектор, ориентированный на элемент HTML, или это может быть приоритет стилей Гутенберга над вашими собственными классами. В любом случае, попробуйте определить, где происходит ошибка. Затем определите, почему стили Гутенберга переопределяют ваш, и исправьте свой код, чтобы он имел приоритет.

Попытайтесь внести какие-либо исправления в вашу собственную тему (или, что еще лучше, в дочернюю тему или в определенную область для CSS в вашей теме), вместо того, чтобы изменять Гутенберга. Если вы изменяете какой-либо файл в Gutenberg напрямую, он, вероятно, будет перезаписан при обновлении плагина.

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

После того, как ваша тема будет удалена, появятся плагины вашего сайта. В частности, следите за плагинами, которые предоставляют шорткоды, которые вы используете в своем контенте (например, Gravity Forms), плагинами, которые влияют на внешний вид вашего контента (например, плагинами доступности, которые влияют на размер текста), и плагинами, которые непосредственно вставляют элементы на вашу страницу. (например, Расширенные пользовательские поля).

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

Однако, если вы получаете страшный визуализированный шорткод, то есть, что ваша страница отображает [shortcode] вместо того, чтобы делать то, что нужно, — есть другое решение. В этом случае вы можете посмотреть на блок, в котором находится шорткод, и убедиться, что он не считается текстом (поиск и удаление нежелательных тегов вокруг шорткода). Если проблема все еще сохраняется, перемещение шорткода к более подходящему типу блока должно вернуть все в рабочее состояние.

Эта проблема возникает из той же проблемы, которую мы рассмотрели ранее: переопределения стилей. Определите элементы, на которые влияют, и исправьте CSS.

Последняя область, в которой мы будем рассматривать конфликтующие вопросы, касается создания элементов. Любой плагин, который вставляет HTML-элементы на страницу без использования шорткодов, является подозрительным, например, когда PHP извлекает настраиваемые поля из плагина Advanced Custom Fields.

Наиболее распространенные ошибки при создании элементов вращаются вокруг несоответствующих блоков. Так как Гутенберг предоставляет свои собственные стили, есть вероятность, что если ваши элементы созданы внутри непреднамеренного блока, они могут отображаться неправильно. Исправление для этого — убедиться, что ваш код добавляет элементы в блок, где вы хотите их видеть.

Это не так актуально, как другие проблемы, которые мы обсуждали, но могут возникнуть некоторые сложности с отображением вашего контента. Большинство из этих проблем будут из-за незначительных изменений стиля или организации блоков. Чтобы исправить это, вам придется поиграться с системой блоков, пока вы не получите свою страницу так, как хотите.

Вы столкнулись с проблемой, которую не смогли решить с помощью предложений из этой статьи? Не паникуйте! Еще немного времени до того, как Гутенберг выпустит WordPress Core.

Сначала запишите, что это за ошибка и какие шаги привели к ошибке. Чем больше информации вы сможете собрать, тем лучше. Передайте всю эту информацию команде Гутенберга. Если повезет, они смогут определить проблему и исправить ее в следующем выпуске.

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

Если вы работали над своим живым сайтом, деактивация Гутенберга должна привести все в норму. Если нет, то сейчас самое время вернуться к той резервной копии, которую вы сделали!

Гутенберг стремится к масштабным изменениям в среде WordPress, которая стремится изменить контент в лучшую сторону. Прежде чем попасть в основную ветку, убедитесь, что ваш сайт будет работать с новыми изменениями. Если у вас есть проблемы, отличные от перечисленных здесь, лучшие решения или исправления для чего-либо в этой статье, оставьте комментарий ниже!