Створюємо список популярних тегів із зображеннями у стилі Mashable

Сьогодні ми спробуємо навчитися відображати теги як популярні теми (актуальні теми) разом із картинками у сайдбарі. Вийде приблизно так, як у Mashable, тільки під нашими темами не буде follow-кнопок.

У чому проблема?

На даний момент WordPress не має можливості для того, щоб пов'язати зображення з рубриками, тегами та власними таксономіями. Якщо ви хочете відображати картинку, яка представляє конкретну рубрику, тег або таксономію, вам доведеться використовувати для цього плагіни. Більшість доступних зараз плагінів надає різні можливості. Так що якщо ви хочете щось зробити, вам доведеться перебрати багато плагінів, потім ви знайдете плагін, який запропонує рішення, яке досить близько до того, що вам потрібно, але все ж таки недостатньо добре.

Наприклад, під час написання цієї статті ми знайшли плагін, який пізніше обговоримо. Цей плагін надає потрібну функціональність, але нам довелося писати свій код для того, щоб додати до нього наші стилі.

Проблема з тегами у тому, що людям подобається відображати їх у вигляді хмари. Я не знаю чому. Хіба зображення тегів у вигляді хмар робить їх більш привабливими для користувачів? Чи є інші способи відображення тегів для того, щоб зробити їх цікавішими та привабливішими?

Ми спробуємо навчитися відображати наші теги у списку із зображеннями біля них. Ми відсортуємо список так, щоб теги, що використовуються на сайті найчастіше, були вгорі списку.

Як пов'язати зображення з тегами WordPress?

Спочатку потрібно вирішити, які розміри зображень ви хочете використовувати. Оскільки ми будемо використовувати їх у сайдбарі, ми не хочемо вставляти великі зображення. У цьому посібнику для наших тегів ми будемо використовувати зображення розміром 40 40 х точок. Ви можете використовувати інші зображення в залежності від вашої розмітки та налаштувань.

плагін систематика зображення для WordPress

плагін систематика зображення від Майкла Філдса дозволить вам асоціювати зображення з вашими рубриками, тегами, зв'язати рубрики та власні таксономії, використовуючи вбудований завантажувач зображень, а потім відобразити ці зображення у ваших шаблонах та темах. Ви можете використовувати цей плагін для показу зображень будь-де на вашому сайті, він добре працює всередині записів, сайдбарів, шаблонів архіву. Ми будемо використовувати цей плагін для того, щоб побудувати зв'язки, а потім використовуємо функціональність плагіна для відображення цих зображень для наших тегів.

Додавання зображень до тегів

Перейдіть в керування вашими тегами і, якщо ви завантажили та встановили плагін систематика зображенняВи побачите симпатичні блоки зображень біля ваших тегів. Клацніть на такому блоку, відкриється вікно медіа завантажувача, і ви зможете додати зображення для цього конкретного тега. Переконайтеся, що ви зробили це як мінімум для найпопулярніших тегів на вашому сайті.

Відображення картинок тегів у сайдбарі

Спочатку нам потрібно створити певний код для відображення списку наших тегів із найпопулярнішими записами разом із пов'язаними з ними зображеннями. Щоб це зробити, ми додамо до файлу functions.php нашої теми наступний код:

function my_trending_tags() {
echo "<div class='trending_topics'><ul>";
	$categories =  get_categories(array( 'taxonomy' => 'post_tag', 'orderby' => 'count', 'number' => '10' ));
	 foreach ($categories as $category) {
		$termlink = get_category_link( $category->term_id );
		$termname = $category->cat_name;
	 	$tax_term_id = $category->term_taxonomy_id;
 		$images = get_option('taxonomy_image_plugin');
 		echo '<li><a href="' . $termlink . '">';
		echo wp_get_attachment_image( $images[$tax_term_id], 'full' );
		echo '</a><br /><a href="' . $termlink . '">' . $termname . '</a></li>';
 }
	echo "</ul></div>";
}

Тепер давайте поясню вам цей код. Спочатку ми створюємо функцію та називаємо її my_trending_tags. Усередині функції ми отримуємо 10 тегів з найбільшою кількістю постів, використовуючи функцію get_categories. Тепер функція отримати_категорію повертає масив необхідної нам інформації (див. php масив). Потім циклічно дивимося на інформацію в масиві. Ми беремо один тег, витягуємо URL сторінки тега, потім отримуємо зображення для тега, потім виводимо назву тега і закриваємо посилання, елемент списку і повертаємося назад, доки не виведемо все 10 тегів або доки не закінчаться рядки в масиві. Як тільки ми у циклі пройшли масив, ми закриваємо список та шар.

Тепер проблема полягає в тому, як вивести нашу функцію всередині віджету. Більшість тем використовують віджети, і ми не можемо додати php код у віджети. Щоб вирішити це питання, ми качаємо, встановлюємо та активуємо WordPress PHP-код Віджет. Цей плагін дозволяє додавати PHP Code Widget у наш сайдбар. Перейдіть до Віджети, перетягніть PHP Code Widget в сайдбарі там, де ви хочете розмістити популярні теги. Всередині віджету додайте цей простий рядок:

<?php my_trending_tags(); ?>

Результат у вашому сайдбарі виглядатиме приблизно так:

Налаштування стилю популярних тегів

Ми вже пов'язали зображення з тегами та відобразили їх у списку. Але зараз список виглядає жахливо, бо ми не додали йому жодного стилю. До таблиці стилів вашої теми додайте наступний CSS:

.trending_topics ul {
list-style-type:none;
list-style:none;
}
.trending_topics li {
border-bottom:1px solid #ccc;
padding:5px;
background:#eee;
}

Такий результат:

Інші методи для того ж результату

Мені подобається робити речі простіше та зрозуміліше для недостатньо досвідчених користувачів. Деякі наші досвідчені читачі можуть захотіти зробити це трохи інакше. Наприклад, вони можуть додати дію для функції my_trending_tags і потім викликати його всередині Віджета, так що їм не доведеться додавати код у файл functions.php і той же віджет буде доступним для всіх тем. Деякі більш просунуті користувачі можуть захотіти написати власний плагін для зв'язку зображень з таксономією, їх завантаження та керування цими зображеннями.

Висновок

Хмари тегів використовувалися для того, щоб швидко дати зрозуміти користувачеві, які теми часто обговорюються у блозі. Тим не менш, мені здається, що зараз більшість користувачів не звертає увагу на хмару тегів і навряд чи переходить по тегах у хмарі. Функціональність для відображення тегів без хмари доступна давно, і багато власників сайтів використовують теги різноманітно. Зображення біля тегів і рубрик роблять їх помітнішими та привабливішими, але я впевнений, що є багато інших способів їхнього ще більш ефективного використання.

Джерело: WPLift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/