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

Здравствуйте, дорогие друзья. Сегодня поделюсь с вами информацией, как создать многофункциональный блок WordPress и вывести в нём рубрики, популярные материалы, новинки, комментарии и многое другое.

Такая необходимость возникла у меня при работе над моей новой темой оформления. Мне захотелось, чтобы рубрики, популярные материалы и новые статьи были объединены в один блок. В общем, преследовал я две цели:

первая – сделать максимально информативный блок,

вторая – очистить сайтбар, при этом сделать максимальную доступность популярных материалов.

В итоге у меня получился вот такой вот блок:

Изначально я, конечно, хотел взять готовое решение в виде плагина, проанализировал достаточно много вариантов. Но, все они либо нагружают сайт, либо медленно загружаются сами. Единственный плагин, который мне понравился это Popular Widget. Но, внешний вид этого виджета всё равно придётся дорабатывать под дизайн блога. И должен сказать, — мороки там хватает.

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

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

Как создать html каркас многофункционального блока

Основой всего блока служит html каркас, где вкладки реализованы через радиокнопки. А внешний вид вкладок дорабатывается через css стили.

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

<div class="top_widget">
<input type="radio" class="top_widget_radio" name="top_widget1" id="top_widget1_1" 
><label for="top_widget1_1">ВКЛАДКА1</label
><input type="radio" class="top_widget_radio" name="top_widget1" id="top_widget1_2" checked
><label for="top_widget1_2">ВКЛАДКА2</label
><input type="radio" class="top_widget_radio" name="top_widget1" id="top_widget1_3"
><label for="top_widget1_3">ВКЛАДКА3</label
><div class="page">
Содержимое первой вкладки
</div>
<div class="page">
Содержимое второй вкладки
</div>
<div class="page">
Содержимое третьей вкладки
</div>
</div>

Обратите внимание, что на второй вкладке стоит свойство checked, то есть этот переключатель (вкладка) будет открыта по умолчанию.

А теперь давайте посмотрим, как выглядит этот каркас без стилей оформления.

Как видите, активная радиокнопка установлена на второй вкладке. Переключения уже работают, но содержимое блоков <div class="page"> будет доступно на каждой вкладке. Не переживайте, мы решим эту задачу позже.

Теперь давайте сделаю пояснения по коду:

Все вкладки заключены в один блок ДИВ <div class="top_widget"> с классом для присвоения стилей оформления.

Вкладки реализованы с помощью тега ИНПУТ, тип которого радиокнопка <input type="radio", единый класс оформления class="top_widget_radio", имя радио-кнопки name="top_widget1" – у всех одинаковое, по нему идёт определение к какому набору относятся данные переключатели (радио-кнопки), идентификатор конкретного переключателя id="top_widget1_1" – нужен для связки названия вкладки (переключателя) с кнопкой.

Название вкладки реализовано через тег ЛЕЙБЛ <label for="top_widget1_1">, где через свойство for идёт привязка к id переключателя. То есть в свойстве for должно быть указано имя идентификатора, к которому относится название вкладки.

Под содержимое вкладок созданы отдельные блоки ДИВ <div class="page">, с единым классом оформления. В этих блоках можно размещать нужные вам коды, текст, картинки и так далее.

Создание стилей оформления для многофункционального блока

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

Итак, если к нашему каркасу применить вот эти стили:

.top_widget {
white-space: nowrap; /*запрещает переносить переключатели на несколько строк*/
overflow: hidden; /*отображение области только внутри блока*/
}
.top_widget > .top_widget_radio {
display: none; /*скрываем радиокнопки*/
}
.top_widget > .top_widget_radio + label {
display: inline-block; /*выстраиваем вкладки в линию*/
border: 1px solid gray; /*рамка*/
padding: 4px; /*внутренний отступ*/
cursor: pointer; /*курсор в виде руки*/
position: relative; /*позиция относительно исходного положения*/
}
.top_widget > .top_widget_radio + label:not(:last-of-type) {
border-right: none; /*скрывает двойные рамки вокруг вкладок*/
}
.top_widget > .top_widget_radio + label:hover {
color: #fff; /*цвет текста вкладки при наведении*/
background-color: orange; /*цвет фона вкладки при наведении*/
}
.top_widget > .top_widget_radio:checked + label {
color: blue; /*цвет текста выбранной вкладки*/
border-bottom: none; /*убирает нижнюю границу рамки у выбранной вкладки*/
}
.top_widget > .page {
white-space: normal; /*учитывать переносы слов*/
display: none; /*скрыть содержимое неактивной вкладки*/
border: 1px solid gray; /*рамка*/
border-top: none; /*убрать верхнюю границу рамки*/
margin: 0px; /*внешний отступ в нуль пикселей*/
padding: 2px 20px; /*внутренний отступ верх-низ, лево-право */
width: 238px; /*ширина блока*/
}
/*Какой блок показывать в зависимости от выбора вкладки*/
.top_widget > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.top_widget > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.top_widget > input:nth-of-type(3):checked ~ div:nth-of-type(3){
display: block;
}

то получите вот такой вот вид многофункционального блока.

Эти стили вы берёте за основу, а далее уже дело техники. Я, к примеру, использовал свойства before и after для добавления иконок и придания некой изюминки своему блоку. Скриншот вы видели выше.

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

Для вывода рубрик (категорий) вам достаточно в блок ДИВ <div class="page"> вставить вот этот код:

<ul>
<?php wp_list_categories('orderby=name&title_li'); ?>
</ul>

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

Для того чтобы вывести новые статьи в одной из вкладок нужно в блок ДИВ <div class="page"> вставить вот этот код:

<ul>
<?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>

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

Как вывести архив материалов в многофункциональном блоке

Опять же в блок ДИВ <div class="page"> нужной вкладки добавляете вот этот код:

<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>

где можно изменить интервал, monthly – помесячный архив; day – ежедневный; year – по годам.

Как вывести популярные материалы в многофункциональном блоке

А вот об этом я уже писал в этой статье, вам лишь нужно взять необходимый код и вставить его в блок ДИВ <div class="page"> соответствующей вкладки.

Где вставлять готовый код многофункционального блока

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

Если в своём блоке вы не используете, коды PHP, то есть у вас только голый html код и текст внутри, то можно воспользоваться текстовым виджетом, который доступен в административной панели WordPress.

А если вы используете php – запросы, то виджет уже не подойдет. Нужно вставлять код блока, непосредственно в файл, отвечающий за вывод сайтбара (sidebar.php).

Итак, приступим.

Шаг 1.

Открываем административную панель WordPress – «Внешний вид» — «Редактор» — «Боковая колонка (sidebar.php)»

Шаг 2.

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

Нашли нужное место, вставляйте и проверяйте вашу работу.

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

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

С уважением, Максим Зайцев.