Полное редактирование сайта WordPress: руководство для начинающих

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

Что такое полное редактирование сайта WordPress?

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

Преимущества полного редактирования сайта в WordPress?

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

Легко использовать

Еще одним преимуществом полного редактирования сайта в WordPress является простота использования для ваших клиентов. Если вы фрилансер или профессионал веб-агентства, который хочет иметь возможность передать веб-сайт после завершения, темы FSE — это то, что вам нужно. Им не нужно копаться в коде темы, чтобы внести изменения в дизайн. Видите ли, в темах полного редактирования сайта используется файл theme.json, который позволяет разработчикам легко добавлять стили и функциональные возможности. Создание глобальной цветовой палитры, назначение шрифтов и другие стили могут быть установлены глобально, что упрощает добавление и редактирование контента конечными пользователями.

Оптимизирован для скорости

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

Полное редактирование сайта WordPress доступно только для блочных тем

Важно отметить, что не каждая тема поддерживает полное редактирование сайта. Построенный на блоках Гутенберга, запущенных еще в 2018 году, он является основой для FSE. При первом появлении блоки поддерживались только в области содержимого веб-сайтов, например в сообщениях и на страницах. С темами FSE эта функциональность распространяется буквально на все аспекты темы. Как упоминалось ранее, файл theme.json управляет всеми глобальными настройками и стилями сайта. В предыдущих поколениях настройщик тем контролировал настройки сайта. Теперь Редактор сайта WordPress управляет всеми глобальными стилями и настройками, а также дает пользователям возможность добавлять блоки по всей теме.

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

Что такое блочная тема?

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

В прошлом веб-сайты WordPress состояли из серии традиционных файлов PHP. Теперь все темы блоков построены на шаблонах блоков. Как упоминалось ранее, все блочные темы имеют файл theme.json, который позволяет разработчикам и пользователям добавлять дополнительные функции, устанавливать глобальные стили и т. д.

Темы по умолчанию, такие как Twenty Twenty-Two, считаются блочными темами. Вместо того, чтобы использовать старый настройщик WordPress для добавления слоганов вашего сайта, выбора цветов или выбора шрифтов, вы используете Редактор сайта WordPress для управления этими вещами. Кроме того, вы используете блоки для добавления контента в шаблоны для его персонализации.

В чем разница между статическими и динамическими (тематическими) блоками

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

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

Начало работы с полным редактированием сайта в WordPress

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

Выбор темы, поддерживающей полное редактирование сайта

В настоящее время в репозитории WordPress доступно более 150 тем для полного редактирования сайта. Есть два способа выбрать тему FSE. Вы можете выбрать бесплатную версию из репозитория WordPress или приобрести ее у поставщика премиум-класса. Для этого поста мы выберем FSE в репозитории WordPress.

Сначала войдите в свою панель управления WordPress и нажмите «Внешний вид» > «Темы» . Далее нажмите кнопку « Добавить новый ».

Затем щелкните ссылку « Фильтр объектов», чтобы установить параметры фильтрации.

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

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

Настройка шаблона

Когда ваша новая тема активна, следующим шагом будет настройка. В этом уроке мы не будем вдаваться в редактирование theme.json. Мы собираемся придерживаться основ Twenty Twenty-Two, чтобы вы привыкли к тому, как работают темы для полного редактирования сайта. При этом перейдите в Внешний вид > Редактор .

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

Чтобы отредактировать другие шаблоны в вашей теме, просто щелкните логотип WordPress в верхнем левом углу редактора сайта, затем нажмите « Шаблоны » . В Twenty Twenty-Two есть ряд шаблонов, которые вы можете редактировать, в том числе отдельные сообщения, страницы, 404, пустые, архив поиска и многое другое. Чтобы выбрать другой шаблон для редактирования, нажмите на него, чтобы активировать редактор сайта для этой страницы. Кроме того, вы можете создать новый шаблон для своего сайта, нажав кнопку « Добавить новый » в правом верхнем углу панели инструментов.

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

Части шаблона

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

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

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

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

Как установить глобальные стили

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

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

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

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

В разделе «Цвета» вы можете редактировать цвета, используемые в вашей глобальной цветовой палитре. Вы можете назначить цвета фону, тексту и ссылкам. В Twenty Twenty-Two есть 17 сплошных цветов и 20 градиентов. Кроме того, вы можете добавить на свой сайт собственные цвета и градиенты, что отлично подходит для целей брендинга.

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

Использование динамических блоков темы

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

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

Создание нового заголовка для ваших шаблонов

Давайте продемонстрируем, как использовать несколько блоков темы для создания новой части шаблона заголовка для вашего сайта. Начните с перехода в меню « Шаблоны ». Затем нажмите Пустой шаблон, чтобы начать.

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

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

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

Назначьте имя для своей части шаблона, затем нажмите « Создать ».

Сначала откройте блоки и найдите разделитель, а затем добавьте его на монтажный стол. Задайте ему высоту 20px. Это добавит 20 пикселей пространства в самом верху вашего шаблона.

Затем найдите блок столбцов . Перетащите его в монтажный стол. Выберите вариант столбца 33/33/33 . Это поместит три столбца в вашу строку. Каждая колонка будет занимать 33% доступного места на сайте.

Теперь ваша часть шаблона должна выглядеть так:

Добавьте блоки в свой шаблон заголовка

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

Затем перетащите блок навигации во второй столбец. Для навигационного блока вы можете добавлять страницы с вашего сайта в меню или создавать собственные ссылки. Добавление меню в темы полного редактирования сайта немного отличается от других тем. Вы больше не используете Внешний вид > Меню для их добавления. Теперь все меню созданы и добавлены в редактор сайта. Нажмите пусто, чтобы создать ссылки для своего сайта или выбрать страницы. Чтобы добавить их, нажмите клавишу ввода на клавиатуре.

Наконец, добавьте блок социальных ссылок в третий столбец. Добавьте значки социальных сетей, которые вы хотите использовать, нажав + справа от блока значков социальных сетей.

ПРИМЕЧАНИЕ. Вы не ограничены добавлением тематических блоков в свои шаблоны. Вы можете использовать любой блок WordPress. В этом примере блок социальных ссылок не является динамическим блоком темы, но по-прежнему является полезным элементом для добавления в заголовок.

Теперь, когда все ваши блоки добавлены, ваш заголовок должен выглядеть так.

Настройка макета шаблона

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

Повторите шаги, чтобы настроить второй столбец на 60%, а затем третий столбец на 20%. Ваш заголовок теперь должен иметь лучший интервал. Сохраните шаблон, нажав кнопку «Опубликовать» в правом верхнем углу.

Теперь ваш шаблон должен выглядеть так.

Использование шаблонов блоков для быстрого запуска ваших проектов

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

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

Divi: лучшая тема для полнофункционального редактирования сайта для WordPress

Если вы ищете универсальную, многофункциональную тему для полнофункционального редактирования сайта для WordPress, обратите внимание на Divi. Поднимите полное редактирование сайта на совершенно новый уровень, используя самый продвинутый Visual Builder в мире. Пользователи могут применять эффекты наведения, добавлять разделители фигур, применять анимацию, массово редактировать элементы, применять глобальные стили и цветовые палитры, и это лишь некоторые из функций. Кроме того, в арсенале Divi более 200 элементов, которые помогут вам создать потрясающий, высокофункциональный веб-сайт. С такими элементами, как блоги, слайдеры, призыв к действию, ценообразование, отзывы и многое другое, пользователи могут создать действительно уникальный веб-сайт.

Конструктор тем Divi

В дополнение к неограниченным возможностям дизайна Divi пользователи также могут расширять настройки всего своего веб-сайта. Вы можете создавать заголовки, нижние колонтитулы, шаблоны продуктов, страницы категорий и архивов, шаблоны 404, шаблоны сообщений и многое другое. Кроме того, вы можете делать все это с помощью собственного Visual Builder от Divi, который позволяет вам видеть изменения дизайна в режиме реального времени. Количество шаблонов, которые вы можете создать, не ограничено. Кроме того, шаблоны Theme Builder можно назначать как глобальные элементы или отдельные страницы, если это необходимо.

Динамический контент Divi

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

Динамические модули в Divi

Динамические модули отлично подходят для использования на всех типах веб-сайтов. Их можно использовать для создания модулей для туристических веб-сайтов, рецептов, услуг по аренде и многого другого. Используя Visual Builder Divi, вы можете назначать динамический контент в зависимости от типа шаблона, который вы хотите создать. Например, при создании шаблонов сообщений или категорий динамический контент, доступный для текстового модуля, имеет параметры, отличные от параметров модуля изображения. Для модулей с текстом вы можете выбрать такие вещи, как заголовок поста/архива, отрывок поста, дату публикации, количество комментариев, теги, описание категории и многое другое. С другой стороны, модули изображений используются для установки динамического содержимого, такого как избранное изображение, изображение профиля автора и изображение логотипа сайта.

Динамические модули WooCommerce

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

Часто задаваемые вопросы о полном редактировании сайта WordPress

После всей информации, которую мы вам передали, мы уверены, что у вас остались вопросы. Не волнуйтесь, у нас есть ответы для вас.

Если я перейду на тему полного редактирования сайта, что произойдет с моим сайтом?

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

Где я могу найти полную тему редактирования сайта?

Есть два способа найти полную тему редактирования сайта. Первый способ — провести фильтрованный поиск в разделе темы WordPress на панели администратора. На выбор предлагается более 160 тем. Второй способ — приобрести премиум-тему для полного редактирования сайта, такую ​​как Divi.

Мой старый сайт использует виджеты. Останутся ли они на месте, если я перейду на тему полного редактирования сайта?

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

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

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

Я не очень разбираюсь в технологиях. Могу ли я использовать FSE?

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

Ускорит ли мой сайт использование полной темы редактирования сайта?

Да, может, но это еще не все. Во-первых, темы для полного редактирования сайта могут повысить производительность, поскольку они построены таким образом, что для дополнительных функций требуется меньше плагинов. Таким образом, вам не нужно устанавливать много, чтобы получить сайт там, где вы хотите. При этом темы FSE не разрабатываются автоматически, чтобы быть быстрее из коробки. Есть и другие соображения, такие как хостинг-провайдеры. Хороший хостинг-провайдер, такой как SiteGround, будет использовать последнюю версию PHP и предоставит CDN и другие улучшения скорости, которые ускорят работу веб-сайтов.

Полное редактирование сайта — это будущее WordPress

Полное редактирование сайта набирает популярность в сообществе WordPress. Благодаря возможности редактировать каждый аспект веб-сайтов разработчики и креативщики начинают видеть в этом ценность. Премиум-темы, такие как Divi, используют эту технологию с 2021 года и остаются на шаг впереди. При этом, с выпуском темы WordPress Twenty Twenty-Two в начале этого года, мы можем ожидать, что темы для полного редактирования сайта вскоре станут нормой. Знание того, как использовать полное редактирование сайта при разработке WordPress, является важным шагом для подготовки к будущему.

Используете ли вы полное редактирование сайта в WordPress? Дайте нам свои мысли об этом ниже.

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