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


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

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

Вставка каркаса в исходный код

Вставка каркаса в исходный код

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

  • Василий

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

    • Максим Зайцев От автора

      Вася, привет. В моей теме этой возможности не было. И я решил её реализовать. Лучше один блок будет загружаться, чем 3-4. Да, и мой код в несколько строк — загружается значительно быстрей, чем готовое решение для темы, которое рассчитано на обычного пользователя и из-за визуализации процесса в него заложено множество дополнительного кода.

      • Тимур

        Спасибо за статью) Мне нравится как реализован блок с популярными записями сейчас. Подскажите, как он реализован? Чтобы отображались с иконками?

        • Максим Зайцев От автора

          Тимур, вот статья, где я подробно рассказал как сделать популярные материалы с миниатюрами и без http://1zaicev.ru/kak-sozdat-spisok-populyarnyx-statej/

          • Тимур

            Спасибо) Еще есть такой вопросик) Какова примерная стоимость разработки дизайна для блога?

          • Максим Зайцев От автора

            Тимур, всё зависит от потребностей заказчика. И дизайн это лишь половина дела, это дизайн ещё нужно будет сверстать. В общем удовольствие не дешёвое. На фрилансе приличная работа будет стоить от 30 000 рублей.

  • Вика

    Максим, привет. Я видела на некоторых блогах такое. И мне очень это нравится. Задавалась целью сделать это. А тут полная пошаговая инструкция. Спасибо большое. Функционально, удобно. В Блоггере тоже реализовать можно. Здорово.

    • Максим Зайцев От автора

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

  • Ольга

    Максим, оригинальное решение. Попробую применить у себя на блоге. Новый дизайн блога отличный. Единственное для меня ширина непривычная, так как приходиться читать и переводить взгляд по строчке=) но не критично.

    • Максим Зайцев От автора

      Оль, привет. Рад тебя видеть. Да, дизайн сменил, но работы ещё очень много. Многое нужно доделать. А ширина блока под контент была задумана с замашкой на будущие блоки контекстной рекламы 728х90. На днях опубликую отчёт о проделанной работе и обращусь ко всем с просьбой высказать своё мнение и предложения. Так я надеюсь улучшить свой блог, и сделать его максимально удобным для посетителей.

      • Ольга

        Максим, жду =) Но вот, второй раз на блоге с новым дизайном и уже привычно=) Я всегда к новому медленно привыкаю, люблю стабильность. Удачи всем!

        • Максим Зайцев От автора

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

  • Николай+Вилков

    Как всегда, Максим, в тему. Скоро новую тему установлю и такой многофункциональный блок давно хотел установить. Если что приду с вопросами 🙂

  • Евгений

    Максим, большое спасибо! Как раз искал что то подобное, но везде предлагают плагины, которых уже итак хватает.

    • Максим Зайцев От автора

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

  • артем

    здравствуй, Максим. подскажи, пожалуйста, в демо для этой темы имеется красивая галерея изображений: одно, дву, трех…колоночная. но в админпанели я не обнаружил настроек для галереи, кроме чекбоксов для эффектов. они её плагином что ли выводят? или галерея доступна в версии pro? или выводится галерея стандартными возможностями админпанели?

    • Максим Зайцев От автора

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