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

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

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

Почему Gutenberg теперь отличный способ создавать веб-сайты

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

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

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

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

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

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

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

Лучший плагин блоков для использования с Гутенбергом

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

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

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

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

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

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

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

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

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

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

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

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

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

Как отображать ваш контент бок о бок

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

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

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

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

Перемещение по блокам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отображение настраиваемых списков содержимого

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

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

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

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

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

Добавить собственный поиск

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

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

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

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

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

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

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

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