перша - зробити максимально інформативний блок,
друга - очистити сайтбар, при цьому зробити максимальну доступність популярних матеріалів.
В результаті у мене вийшов ось такий ось блок:
Спочатку я, звичайно, хотів взяти готове рішення у вигляді плагіна, проаналізував досить багато варіантів. Але, всі вони або навантажують сайт, або повільно завантажуються самі. Єдиний плагін, який мені сподобався це Popular Widget. Але, зовнішній вигляд цього віджета все одно доведеться доопрацьовувати під дизайн блогу. І мушу сказати, - мороки там вистачає.
Тому я вирішив створити цей багатофункціональний блок самостійно, за допомогою html каркаса, запитів до бази даних і css стилів.
Як створити html каркас багатофункціонального блоку
Основою всього блоку служить html каркас, де вкладки реалізовані через радиокнопки. А зовнішній вигляд вкладок допрацьовується через css стилі.
Ось код html каркаса, який ви можете допрацьовувати під свої потреби в залежності від кількості вкладок:
Зверніть увагу, що на другій вкладці варто властивість checked. тобто цей перемикач (вкладка) буде відкрита за замовчуванням.
А тепер давайте подивимося, як виглядає цей каркас без стилів оформлення.
Як бачите, активна радіокнопка встановлена на другій вкладці. Перемикання вже працюють, але вміст блоків
Тепер давайте зроблю пояснення по коду:
Всі вкладки укладені в один блок ДІВ
Виберіть реалізовані за допомогою тега інпут, тип якого радіокнопка
Назва вкладки реалізовано через тег ЛЕЙБЛ
Під вміст вкладок створені окремі блоки ДІВ
Створення стилів оформлення для багатофункціонального блоку
Для додання блоку потрібного виду, а найголовніше, необхідного функціоналу, потрібно в файл style.css додати необхідні стилі. Я приведу приклад найнеобхідніших стилів, які ви надалі зможете змінювати і доповнювати залежно від дизайну вашого сайту.
Отже, якщо до нашого каркасу застосувати ось ці стилі:
то отримаєте ось такий ось вигляд багатофункціонального блоку.
Ці стилі ви берете за основу, а далі вже справа техніки. Я, наприклад, використовував властивості before і after для додавання іконок і додання якоїсь родзинки своєму блоку. Скріншот ви бачили вище.
Як вивести рубрики в багатофункціональному блоці
де цифра десять вказує кількість виведених записів.
Як вивести архів матеріалів в багатофункціональному блоці
Знову ж в блок ДІВ
де можна змінити інтервал, monthly - помісячний архів; day - щоденний; year - по роках.
А ось про це я вже писав в цій статті. вам лише потрібно взяти необхідний код і вставити його в блок ДІВ
Де вставляти готовий код багатофункціонального блоку
Думаю, найкращим місцем є сайтбар, хоча в деяких темах оформлення це блок непогано буде виглядати і в підвалі. Але, ми розберемо приклад вставки блоку в сайтбар.
Якщо в своєму блоці ви не використовуєте, коди PHP, тобто у вас тільки голий html код і текст всередині, то можна скористатися текстовим віджетом, який доступний в адміністративній панелі WordPress.
А якщо ви використовуєте php - запити, то віджет вже не підійде. Потрібно вставляти код блоку, безпосередньо в файл, який відповідає за виведення сайтбара (sidebar.php).
Визначаєте потрібно місце, будьте уважні. Звертайте на закриваються теги, дужки, крапки з комою. Якщо ви їх затрёте, все може з'їхати криво і навскіс. А краще робіть резервні копії перед зміною файлів.
Знайшли потрібне місце, вставляйте і перевіряйте вашу роботу.