Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спочатку нам потрібно створити певний код для відображення списку наших тегів із найпопулярнішими записами разом із пов'язаними з ними зображеннями. Щоб це зробити, ми додамо до файлу 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(); ?>

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

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

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

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

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

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

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

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

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

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

Висновок

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

Джерело: WPLift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 14

марат:

Все зробив за інструкцією, але виводить у сайдбарі список із випадкових міток і без зображень :(

3dstereov:

як зробити щоб виводилися лише популярні мітки?

WordPresso:

Пошукайте плагін Popular Tags for WordPress

Rap Core:

на жаль, не працює. виводить теги без зображень(

Rap Core:

помилився. вже працює

Антон:

Допоможіть будь ласка, мені потрібно, щоб у сайдбарі замість назви мітки
виводилася картинка, яку я прив'язав за допомогою плагіна Taxonomy
Images. що потрібно для цього зробити?

WPcafe.org:

Ну як мінімум, потрібно спочатку розібратися з тим, як працює цей плагін) Можливо, цей плагін не вміє виводити прив'язані картинки в області сайдбара.

Антон:

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

Щоб виводилися всі мітки, я так зрозумів потрібно прибрати з коду функції 'number' => '10' — після цього виводяться всі мітки, а не 10 найпопулярніших, і не працюю посилання, всі посилання міток ведуть на головну сторінку сайту (використовував код з цієї статті).

Ігор:

А чи є такий плагін, який виводив би популярні мітки (теги) тільки з популярних записів (скажімо з 50 найбільш популярних)? Виходило б, що виводяться популярні теги, так би мовити, не з погляду автора, а з погляду читачів?

Володимир:

Привіт.
Допоможіть зробити так щоб у кожному пості біля назви категорії або в іншому місці (я вже підправлю стилями) виводилася відповідна картинка категорії!

WPcafe.org:

Можливо вам знадобиться цей урок: https://hostenko.com/wpcafe/tutorials/kak-otobrazit-raznyie-ikonki-dlya-otdelnyih-rubrik/

Володимир:

Дуже радий, що відповіли.
Але я не маю стандартної категорії «category» (рубрика).
У темі є свій вид категорій question-category (питання).
Тому цей плагін цілком підходить, все, що мені потрібно, це в короткому і повному пості біля назви своєї категорії була відповідна картинка.
Перепробував 3-4 плагіна з-під адмінки налаштовую а за незнання як писати скрипти а іноді просто побудови синтаксису. Просто кажучи так і не вдалося правильно налаштувати виведення зображення в потрібному місці.
Підкажіть, як зробити?

Володимир:

Допоможіть будь ласка!
Але я не маю стандартної категорії «category» (рубрика).
У темі є свій вид категорій question-category (питання).
Тому цей плагін цілком підходить, все, що мені потрібно, це в короткому і повному пості біля назви своєї категорії була відповідна картинка.
Перепробував 3-4 плагіна з-під адмінки налаштовую а за незнання як писати скрипти а іноді просто побудови синтаксису. Просто кажучи так і не вдалося правильно налаштувати виведення зображення в потрібному місці.
Підкажіть, як зробити?

Аліна:

Здравствуйте.
Плагін відмінно підходить, але ніяк не можу досягти того, що мені потрібно, а саме:
є головна сторінка, в ній блок «проекти» де виводяться превью проектів, кожному з яких потрібно присвоїти мітку, максимум 3. Я зробила як написано, але виходить що в кожному превью у мене видає список тегів, що використовувалися, а мені потрібно щоб у кожному превью виводилася та мітка, яку я вказала у записі.
Допоможіть, будь ласка, як це зробити?

Додати коментар або відгук