Здравствуйте, сегодня продолжим настраивать стандартную тему Twenty Twenty (данное руководство подойдёт и для темы Twenty Twenty One), а именно будем – разбивать главную страницу сайта на три колонки, в которых будут выведены последние записи/посты, отсортированные по категориям. Создавать трёхколоночный вывод статей будем с помощью относительно нового блочного редактора WordPress (Gutenberg, Гутенберга).
Скачать исходники для статьи можно ниже
Перед тем как приступить к созданию трёхколоночного стиля на главной странице, на вашем сайте уже должно быть определенное количество записей/постов, разбитого по категориям. Для всех статей установлена миниатюра записей/постов (featured image).
Создаем новую страницу (в админке, в левом меню, пункт “Страницу”, подпункт “Добавить новую”), в данном примере назову её Main page.
Далее установим данную страницу – главной страницей сайта. Для этого заходим в админке, в левом меню, в пункт “Настройки” (“Параметры”), подпункт “Чтение”, и устанавливаем в пункте “На главной странице отображать” статическую страницу, которую мы создали, в данном примере – Main page.
И жмём кнопку “Сохранить изменения”.
Приступим к редактированию страницы с помощью блоков Гутенберга.
Здесь мы будем отоброжать статьи из трех категорий, по четыре статьи в трех колонках и первая статья с картинкой. Такое форматирование уже будет адаптировано под смартфон. То есть на телефоне все будет показано в одну колонку.
Шаг 1. Создаем трехколоночный блок
Нажимаем “+” добавить блок и выбираем тип “Столбцы”. Тут стоит выбрать вариант “три колонки” с разбивкой по 33% каждая. Выделяем полностью весь блок и в колонке настроек блока справа идем в пункт “Дополнительно” и прописываем “Дополнительные классы CSS” следующий класс: front-magazine
Шаг 2. Наполняем колонки
Сперва напишем заголовки категорий. Это делается через элемент “Заголовок“. Ему также стоит присвоить ссылку и в виде ссылки указать название категории.
Добавляем самый свежий пост в категории с картинкой. Жмем + и выбираем тип блока “Последние записи“.
В настройках справа включаем “Отображать дату публикации” и “Показывать изображение записи“. Сортировать от новых к старым и количество записей выбираем 1. В поле рубрика пишем название категории записей. Система должна подсказать правильное название.
Ниже создаем еще раз блок “Последние записи“, но теперь отключаем настройку “Показывать изображение записи“. В поле рубрика указываем ту же самую категорию. А количество записей выбираем 5.
В окне Дополнительное прописываем “Дополнительные классы CSS” следующий класс: first-post-hidden
Повторяем те же действия для второй и третьей колонок.
Сохраняем страницу. Идем в настройки нашей темы и там самая нижняя строчка настроек “Дополнительные стили“. Вставляем туда наш css код. Жмем применить.
/* -------------------------------------------------------------------------- */
/* Magazine Main Page
/* -------------------------------------------------------------------------- */
.front-magazine a {
text-decoration:none;
}
/* размер категории */
.front-magazine h2 {
font-size:1.2em;
}
/* настройка цветовой палитры */
.front-magazine h2 a,
.front-magazine a {
color:#222;
}
/* прячем первый пост */
.first-post-hidden li:first-child {
display:none;
}
.first-post-hidden li a {
font-size:0.8em;
}
.first-post-hidden li {
line-height:1em;
}
Если вас устраивает то, что получилось вы можете сохранить этот блок для использования на других страницах сайта. Просто в меню блока выберите “Добавить в мои блоки” (Add to reusable blocks) и можете такой же шаблон использовать где-нибудь еще на сайте.
