Настраиваем стандартную тему WordPress – Twenty Twenty, Twenty Twenty One (часть 2)

Здравствуйте, сегодня продолжим настраивать стандартную тему 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) и можете такой же шаблон использовать где-нибудь еще на сайте.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий