FSE WordPress: Подробное Пошаговое Руководство на русском

Узнайте из этого пошагового руководства всё, что нужно о FSE WordPress (Full Site Editing — полном редактировании всего сайта) и как всё настроить.

Устали искать понятное и подробное объяснение: что такое FSE в WordPress? Мы идём к Вам! Подготовили пошаговое руководство на русском языке от компании Codeable, которая собрала в себе более 20-ти WordPress-агентств по всему миру и более +700 фрилансеров. Начинаем.

Содержание

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

WordPress, ведущая система управления контентом (CMS), представляет собой интуитивно понятную платформу, позволяющую частным лицам и компаниям создавать и управлять своими сайтами с непревзойденной гибкостью. Однако она может быть не слишком понятной для непрофессионалов, которые ищут конструкторы No-code (без кода) для расширения своего присутствия в сети.

Хорошая новость: вам не нужно быть мастером кодирования или техническим гуру, чтобы эффективно редактировать свой сайт WordPress. Благодаря возможности полного редактирования сайта (FSE) и огромному количеству плагинов даже нетехнические пользователи могут взять на себя ответственность за редактирование своих сайтов.

Будь вы блоггером-одиночкой, владельцем малого бизнеса или частью крупной корпорации, к концу этого руководства вы будете знать все, что нужно знать о FSE (полном редактировании всего сайта) WordPress.

Обзор полного редактирования сайта WordPress (FSE)

Прежде чем мы узнаем, что такое FSE, давайте вначале объясним, что такое проект WordPress Gutenberg.

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

Однако по мере развития веб-дизайна и создания контента классический редактор стал казаться немного ограниченным в плане создания богатых, динамичных и сложных макетов без использования дополнительных плагинов или пользовательского кодирования.

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

Редактирование с помощью редактора блоков Gutenberg.
Персонализация (включая полное редактирование сайта и темы на основе блоков).
Сотрудничество.
Многоязычный.

Первый этап этого начинания, блочный редактор Gutenberg (официально представленный в WordPress 5.0), заменяет классический редактор системой на основе блоков.

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

Редактор Gutenberg также упрощает интеграцию мультимедийных элементов, встраивание контента из различных источников (например, видео с YouTube, сообщения в Twitter и т. д.) и работу с различными типами контента — все это в едином и последовательном интерфейсе.

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

С выходом WordPress 6.3.1 проект переходит на вторую стадию, которая включает в себя полное редактирование сайта.

Что такое полное редактирование сайта (FSE)

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

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

FSE позволяет использовать следующие новые функции настройки для более полного редактирования веб-сайта:

Редактор сайта: Новый интерфейс, в котором вы можете визуально проектировать и настраивать макет и структуру всего сайта.
Блочные темы: Блочные темы — это наборы заранее разработанных шаблонов, частей шаблона и стилей блоков, которые определяют общий вид и макет вашего сайта. В отличие от традиционных тем, блочные темы сосредоточены на создании структуры для вашего контента с настраиваемыми макетами блоков.
Глобальные стили: Это набор настроек дизайна, которые определяют визуальный облик всего сайта. Эти настройки включают типографику (стили и размеры шрифтов), цвета, интервалы и другие стилистические элементы.
Настройка шаблонов и частей шаблона: FSE позволяет создавать, редактировать и располагать блоки внутри шаблонов и частей шаблона, обеспечивая тонкий контроль над структурой и внешним видом сайта.

Давайте разберем каждую из этих новых функций подробнее.

FSE редактор сайта

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

Редактор сайта предлагает такие преимущества, как:

Больше гибкости и контроля над дизайном сайта.
Легкое создание пользовательских макетов.
Не требуются знания кодирования.
Более перспективный, поскольку WordPress продолжает развивать FSE.

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

Блочные темы FSE в WordPress

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

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

Чтобы иметь возможность редактировать свой сайт с помощью FSE и редактора сайта, вам нужно использовать специально разработанную под FSE блочную тему, такую как TT1 Block; однако вы должны знать, что блочные темы все еще находятся в стадии разработки и тестирования и пока не предназначены для производственных сайтов.

Глобальные стили в FSE WordPress

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

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

Шаблоны FSE и детали шаблонов

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

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

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

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

Для пользователей:

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

FSE меняет эту парадигму, позволяя пользователям:

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

Для разработчиков

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

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

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

Этот переход от жестких тем к гибким блокам способствует более модульному и эффективному процессу разработки.

Для дизайнеров

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

Визуальная природа FSE устраняет разрыв между проектированием и реализацией, позволяя дизайнерам:

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

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

Сравнение плагинов полного редактирования сайта и конструктора страниц

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

С другой стороны, плагины для построения страниц (такие как Elementor, Divi и Beaver Builder) сыграли важную роль в устранении пробелов в дизайне для пользователей, не обладающих техническими знаниями. Они предлагают интерфейс drag-and-drop, предварительно разработанные шаблоны и множество опций настройки, которые предоставляют пользователям значительную гибкость.

FSE или Page Builder?

Выбор между FSE и плагинами для построения страниц — это не универсальное решение. Вместо этого компаниям необходимо оценить свои конкретные потребности, ресурсы и знакомство с существующими инструментами.

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

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

Вот краткий обзор плюсов и минусов плагинов FSE и конструкторов страниц:

	Плюсы	Минусы
Полное редактирование сайта (FSE)	Встроенная интеграция: FSE легко интегрируется в ядро WordPress. Перспективный: Разработанный командой WordPress, он совместим с будущими версиями. Последовательный опыт: Обеспечивает единообразие в работе с темами и плагинами.	Кривая обучения: Требуется понимание парадигмы, основанной на блоках. Ограниченная поддержка тем: Полагается на темы, совместимые с блочным редактором.
Плагины для построения страниц	Универсальность: Работайте с широким спектром тем. Устоявшиеся решения: Хорошо зарекомендовавшие себя решения с обширной базой пользователей (например, Elementor, Divi, Beaver Builder). Богатые возможности: Предварительно разработанные шаблоны, элементы, возможности настройки.	Зависимость от плагинов: Сайт зависит от сторонних плагинов. Потенциальная раздутость: Некоторые из них могут добавлять дополнительный код, потенциально снижая производительность сайта. Проблемы совместимости: Не все темы/плагины могут работать без проблем, что может привести к конфликтам.

Пошаговое руководство по освоению FSE WordPress

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

Создайте резервную копию вашего сайта: Всегда имейте резервные копии на случай, если что-то пойдет не так. Используйте плагин, например UpdraftPlus.
Обновите версию WordPress: Убедитесь, что вы используете последнюю версию WordPress, поддерживающую функцию полного редактирования сайта. Функции FSE могут постепенно появляться в обновлениях, поэтому всегда следите за актуальностью своей установки WordPress.
Ознакомьтесь с редактором блоков: прежде чем погружаться в FSE, убедитесь, что вам удобно пользоваться редактором блоков. Поймите, как добавлять, располагать и настраивать блоки в редакторе Gutenberg для постов и страниц.
Выберите совместимую тему: Для FSE требуется тема, поддерживающая его функции. Выбирайте тему, в которой явно указана совместимость с FSE или которая разрабатывается с учетом блочного дизайна, как, например, тема TT1 Blocks.

Блочные темы FSE WordPress

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

Получите доступ к полному редактору сайта: Перейдите в раздел «Внешний вид > Редактор» сайта на панели управления WordPress (вы должны использовать блочную тему и WordPress версии 6.3.1 или новее).

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

Шаблоны FSE WordPress

Создавайте и настраивайте шаблоны: Создавайте и редактируйте шаблоны, используя предоставленные блоки. Например, вы можете создать шаблон заголовка с помощью блоков Site Title и Site Tagline. Кроме того, используйте блок «Навигация» для оформления меню сайта.

Работайте с частями шаблона: Части шаблона — это многократно используемые блоки, которые можно включать в различные шаблоны. Например, вы можете создать часть шаблона с призывом к действию (CTA) и использовать ее в разных местах вашего сайта. Создавать, редактировать и настраивать части шаблона можно на вкладке «Шаблоны».

Используйте блоки запросов и настраивайте стили: Блоки запросов позволяют создавать динамические списки постов или другого контента. Узнайте, как использовать блоки запросов для создания пользовательских списков постов, разделов с тематическим контентом и т. д. Кроме того, с помощью редактора настройте стили сайта в соответствии с вашими предпочтениями, включая цвета, типографику и макет.

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

Крайне важно не использовать FSE на живом сайте; подумайте о том, чтобы создать промежуточную среду для экспериментов и убедиться, что все работает так, как нужно. Всегда имейте резервные копии на случай, если что-то пойдет не так.

Текущие ограничения Полного редактирования сайта

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

Совместимость тем: Многие существующие темы не предназначены для FSE, что может привести к проблемам с совместимостью. Темы должны быть разработаны или обновлены для полной поддержки функций FSE.
Кривая обучения: FSE представляет новый способ создания сайтов с помощью блоков и шаблонов, который может оказаться сложным для освоения пользователями, привыкшими к традиционному редактору WordPress.
Сложность настройки шаблонов: Хотя FSE стремится упростить редактирование шаблонов, создание сложных шаблонов все равно может потребовать глубокого понимания взаимодействия блоков и иерархии шаблонов.
Отсутствие интеграции сторонних блоков: Интеграция сторонних блоков и плагинов в шаблоны FSE может оказаться сложной задачей из-за развивающейся природы FSE и потенциальных конфликтов.
Проблемы доступности: Обеспечение доступности контента, создаваемого FSE, для всех пользователей, включая людей с ограниченными возможностями, является важной задачей, требующей решения.
Оптимизация производительности: Сайты на основе FSE необходимо оптимизировать для повышения производительности, поскольку добавление слишком большого количества блоков или элементов может привести к замедлению загрузки страниц.

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

Коммерческие возможности и потенциал полного редактирования сайта

FSE создает несколько новых возможностей для получения прибыли и роста для предпринимателей и компаний, таких как:

Разработка и настройка темы

Пользовательские темы блоков FSE: Разработчики тем могут создавать и продавать пользовательские темы FSE, которые используют весь потенциал функций FSE. Эти темы могут соответствовать конкретным отраслям, нишам или предпочтениям в дизайне.
Премиальные шаблоны FSE: Предложение премиальных пакетов шаблонов FSE для различных разделов веб-сайтов (заголовки, футеры, целевые страницы и т. д.) может стать прибыльной бизнес-моделью.
Услуги по настройке шаблонов: Предприятия могут предоставлять услуги по настройке существующих шаблонов FSE в соответствии с брендингом и требованиями клиентов.

Разработка плагинов

Блоки и расширения FSE: Разработчики могут создавать и продавать плагины, которые добавляют новые блоки и виджеты FSE или расширяют возможности существующих блоков FSE.
Создание пользовательских блоков: Предложение услуг по разработке пользовательских блоков FSE под конкретные функции может привлечь клиентов, ищущих уникальные возможности.

Образование и обучение

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

Агентства веб-дизайна

Агентства веб-дизайна могут предложить услуги по разработке дизайна, ориентированного на FSE, создавая для клиентов индивидуальные шаблоны, дизайны и макеты с использованием инструментов FSE.

Тематические рынки

На таких площадках, как ThemeForest, можно разместить множество тем и шаблонов FSE, предоставляя разработчикам тем платформу для продажи своих творений.

Хостинг и управляемые услуги

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

Интеграция электронной коммерции

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

Возможности фриланса

Фрилансеры могут предложить свои услуги по проектированию, разработке, настройке и устранению неполадок, связанных с FSE.

Вклад в развитие сообщества

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

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

Переведено с официального блога компании Codeable