Учебник WordPress Gutenberg о том, как создать собственный веб-сайт

Это руководство по WordPress Gutenberg, написанное веб-разработчиками, имеющими значительный опыт в создании веб-сайтов WordPress с использованием нового блочного редактора.

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

Почему Гутенберг стал отличным инструментом для создания веб-сайтов

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

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

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

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

Лучшие типы тем для использования с Gutenberg

Существует множество тем WordPress премиум-класса, которые совместимы с редактором блоков Gutenberg, а также поддерживают другие плагины премиум-класса.

Вы можете быстро просмотреть лучшие темы, просмотрев наш список тем WordPress, совместимых с Gutenberg.

Лучший плагин блоков для использования с Gutenberg

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

В нашем руководстве по WordPress Gutenberg мы будем использовать блоки набора инструментов вместе с Gutenberg для создания нашего веб-сайта WordPress. Toolset Blocks предлагает ряд преимуществ, которые облегчат как кодерам, так и не кодерам быстрое проектирование и реализацию своих веб-сайтов:

• Ваш рабочий процесс будет намного проще . Теперь вам не нужно проектировать свои страницы, а затем реализовывать их. Вы можете просто создать их на WordPress и сразу увидеть, как они будут выглядеть.
• Нет необходимости переключаться между бэкендом и фронтендом . Вместо этого вы можете просто создать свои шаблоны на бэкенде и сразу увидеть, как они будут выглядеть.
• Люди, не являющиеся разработчиками, могут создавать сайты своей мечты . Вам больше не нужно быть экспертом в области кодирования, чтобы создать веб-сайт, который вы хотели. С блоками вы можете легко добавлять сложные элементы самостоятельно без html или css.
• Тратьте меньше времени на чтение документации . Простой и интуитивно понятный характер блоков набора инструментов означает, что вам не нужно читать кучу документации, чтобы понять, как создавать определенные элементы. Многие из блоков описывают, чего вы можете достичь, и с чем можно легко экспериментировать.
• Никакой дальнейшей интеграции со сторонними плагинами . С классическим редактором WordPress вам нужно было бы установить конструктор страниц и дополнительные совместимые плагины. Это может раздуть ваш сайт и значительно замедлить его работу. Вы также полагаетесь на третьи стороны, которые обновляют свои плагины и обеспечивают их безопасность. Блоки набора инструментов интегрированы с Gutenberg и WordPress, поэтому не вызовут таких проблем.
• Следуйте тому же рабочему процессу, что и ядро ​​WordPress . Вам не нужно беспокоиться об изменении того, как вы работаете с новым редактором WordPress.

Учебник WordPress Gutenberg о том, как создать собственный веб-сайт с использованием блоков

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

Вот что мы рассмотрим в этом руководстве по WordPress Gutenberg:

• Добавление, редактирование, перемещение и удаление блоков
• Отображение контента рядом
• Навигация по вашим блокам
• Отображение полей в проектах редактора блоков
• Отображение галереи изображений
• Стилизация блоков Toolset в редакторе
• Элементы управления типографикой
• Создание шаблона
• Создание страниц вашего архива
• Создание пользовательских списков контента
• Добавление пользовательского поиска

Давайте начнем!

Добавление, редактирование, перемещение и удаление блоков

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

1. На странице или в сообщении нажмите кнопку +.
2. Найдите и щелкните блок, который вы хотите использовать, чтобы вставить его.

3. Введите информацию о контенте для блока. Например, здесь мы добавили блок «Заголовок» и будем вставлять для него заголовок.
4. Слева от каждого блока вы увидите набор элементов управления, которые вы можете использовать для перемещения блоков.

5. Используйте правую боковую панель, чтобы изменить параметры выбранного блока. Например, вы можете изменить цвет шрифта, размер изображения или выравнивание текста.
6. Если вы нажмете на трехточечный вариант, вы увидите дополнительные параметры, такие как блок «Удалить» .

Как отображать контент рядом

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

1. Нажмите кнопку +.
2. Найдите блок Columns и вставьте его.

3. Теперь вы видите два столбца, в которые можно добавлять блоки, как обычно.

4. Увеличьте количество столбцов, выбрав блок столбцов и переключив число на правой панели.

Навигация по вашим блокам

Когда вы создадите свой сайт, некоторые из ваших дизайнов и шаблонов будут иметь много блоков. Один из самых простых способов выбрать тот, который вы хотите отредактировать, — использовать кнопку « Навигация по блокам» в верхней части редактора и выбрать блок, с которым вы хотите работать.

Отображение полей в ваших проектах редактора блоков

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

Есть три способа отображения ваших полей, которые мы опишем ниже в рамках руководства по WordPress Gutenberg:

1. Установить содержимое блока из значений поля

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

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

1. Создайте новый шаблон контента и выберите, какой пользовательский тип публикации вы хотите отображать.
2. Нажмите кнопку +.
3. Добавьте блок «Заголовок набора инструментов» .

4. Включите динамический текст заголовка.

5. Выберите поле сообщения, которое вы хотите отобразить. Ниже я выбрал заголовок сообщения .

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

2. Отображать поля как отдельные блоки

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

1. Выберите блок «Одно поле» .
2. На правой боковой панели в разделе Тип поля выберите Стандартное поле .
3. В разделе « Поле сообщения» выберите параметр « Содержимое публикации (тело) ».

Описание для каждого из спортивных залов теперь будет отображаться в соответствующих сообщениях.

3. Объединяйте поля с текстом в один блок

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

1. Выберите блок Поля и текст .

2. Введите метку, которую хотите добавить. Например, я добавил «Рейтинг», потому что хочу отобразить результаты для настраиваемого поля « Рейтинг », которое показывает оценку для каждого спортзала из 5.

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

4. Выберите контент, который вы хотите добавить (в моем случае это поле « Рейтинг »), и нажмите «Вставить шорткод» .

Показать галерею изображений

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

1. Выберите повторяющееся поле/блок галереи .

2. Выберите группу настраиваемых полей, которую вы хотите отобразить.
3. Выберите пользовательское поле, которое вы хотите отобразить.

Стилизация блоков в редакторе

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

Есть два способа стилизовать блоки:

1. Стилизация элементов с помощью интерфейса

1. Выберите блок, который вы хотите стилизовать. Например, я выбрал блок « Рейтинги », который добавил ранее.
2. Разверните раздел « Настройки стиля » на боковой панели.
3. Здесь вы можете настроить цвет фона, отступы, границы и многое другое.

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

2. Использование блока «Контейнер»

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

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

Еще раз, я могу сделать это, используя боковую панель справа.

Элементы управления типографикой

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

Вот список того, что вы можете настроить:

• Тип шрифта — выберите из огромного выбора шрифтов
• Размер шрифта, высота строки и межбуквенный интервал
• Стиль шрифта
• Преобразование текста — заглавная, заглавная, строчная
• Цвет текста
• Текстовая тень

Как создать шаблоны для отображения пользовательских сообщений

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

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

1. Перейдите в Toolset->Dashboard и выберите опцию Create Content Template для типа записи, для которого вы хотите создать шаблон.

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

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

Создание страниц вашего архива

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

Ниже, как часть учебника по WordPress Gutenberg, я создал архив для своего пользовательского типа записей «Gyms».

1. Перейдите в Toolset->Dashboard и выберите опцию « Создать архив » рядом с типом записи, для которой вы хотите создать архив.

2. В редакторе блоков теперь вы можете добавлять различные элементы, которые вы хотите отображать для каждого из ваших сообщений. Например, вы можете отобразить все свои стандартные и настраиваемые поля (такие как рейтинги, адреса и заголовки сообщений, которые я создал для своих настраиваемых типов сообщений «Gyms») с помощью блоков набора инструментов.

3. Чтобы изменить количество столбцов, нажмите « Блокировать навигацию » и выберите цикл архива WordPress .
4. В разделе «Стиль цикла» вы можете настроить количество столбцов.

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

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

Отображение пользовательских списков контента

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

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

1. Нажмите кнопку + на странице, на которую вы хотите добавить представление.
2. Добавьте блок Views и назовите его.
3. Выберите контент, который вы хотите отобразить в представлении. Например, я хочу отобразить свои спортивные залы.

4. Добавьте блоки, которые вы хотите отобразить как часть вашего представления.
5. Вы можете изменить порядок, отображаемый контент и многое другое, щелкнув « Блокировать навигацию », выберите « Вид » и используйте боковую панель.

6. В разделе « Цикл представления» вы можете изменить ряд настроек для всего представления, включая количество столбцов.

Добавить пользовательский поиск

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

1. Вставьте блок просмотра на свою страницу.
2. Включите параметр « Поиск » в мастере создания видов.

3. Затем вы можете добавить поля поиска, кнопки поиска и многое другое в области редактирования представлений.

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

Вот как наш пользовательский поиск лучшего тренажерного зала выглядит в интерфейсе.

Начните создавать свой собственный веб-сайт сегодня!

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

Если у вас есть какие-либо мысли или вопросы, сообщите нам об этом в комментариях ниже!