Вывод списка рубрик с изображениями

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

Задача будет состоять из 2 пунктов:

  • необходимо прилепить изображения к рубрикам;
  • вывести такие рубрики с изображениями в нужном месте сайта.

Всегда есть несколько путей решения одной и той же задачи. Вышеозвученную задачу можно решить двумя способами.

к содержанию

Способ первый. Плагин Taxonomy Images

Добавляем изображения к рубрикам

Добавлять картинки будем с помощью плагина Taxonomy Images. После установки плагина необходимо сделать следующее:

1. Выбрать нужные таксономии (в том случае, если их у вас несколько)

Рубрики с картинками

2. Добавить нужные изображения к рубрикам. После установки плагина, у вас появятся дополнительные возможности в разделе Рубрики

Рубрики с картинками

Нажимаете на плюсик и выбираете нужные изображения. Все очень не сложно.

к содержанию

Выводим рубрики с картинками используя плагин Taxonomy Images

Данный код взять с сайта oriolo.ru

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

/* вывод списка рубрик */
$args = array(
	'parent' => 0,
	'hide_empty' => 0,
	'exclude' => '', // ID рубрики, которую нужно исключить
	'number' => '0',
	'orderby' => 'count',
	'order' => 'DESC',
	'taxonomy' => 'category', // таксономия, для которой нужны изображения
	'pad_counts' => true
);
$catlist = get_categories($args); // получаем список рубрик
echo '<ul>'; 
foreach($catlist as $categories_item){

	// получаем данные из плагина Taxonomy Images
	$terms = apply_filters('taxonomy-images-get-terms', '', array(
		'taxonomy' => 'category' // таксономия, для которой нужны изображения
		));

	if (!empty($terms)){
		foreach((array)$terms as $term){
			if ($term->term_id == $categories_item->term_id){
				// выводим изображение рубрики
				print '<li><a href="' . esc_url(get_term_link($term, $term->taxonomy)) . '" title="Нажмите, чтобы перейти в рубрику">' . wp_get_attachment_image($term->image_id, 'thumbnail');
                               echo '</a>';
				}
			}
		}
	
	// выводим название рубрики
	echo '<p>' . $categories_item->cat_name . '</p></li>';
	}
echo '</ul>';

Обратите внимание!

Параметр thumbnail — указывает размер изображения, который будет выводиться. Сами размеры берутся из настроек WP (Настройки — Медиафайлы — Размер миниатюры), по умолчанию стоит размер 150х150.
Параметр category — указывает название таксономии. По умолчанию, стоит category при необходимости указывайте нужную таксономию, например catalog или portfolio.

к содержанию

Способ второй. Плагин Categories Images

Плагины выполняют один и тот же функционал, но у Categories Images, на мой взгляд, удобнее сделано добавление изображений и вывод списка рубрик в нужном месте.

Добавляем картики

Рубрики с картинками

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

Рубрики с картинками

Одним словом, выбираете нужный вам способ, самое главное — прилепить изображения к рубрикам.

к содержанию

Выводим картинки в рубриках с помощью плагина Categories Images

В нужном месте темы, размещаем следующий код

$args = array(
	'parent' => 0,
	'hide_empty' => 0,
	'exclude' => '', // ID рубрики, которую нужно исключить
	'number' => '0',
	'orderby' => 'count',
	'order' => 'DESC',
	'pad_counts' => true
);
$catlist = get_terms('category',$args);

<ul>
 <?php foreach ($catlist as $cat) : ?>
 <li>
 <img src="<?php echo z_taxonomy_image_url($cat->term_id, 'thumbnail'); ?>" />
 <a href="<?php echo get_term_link($cat->slug, 'category'); ?>"><?php echo $cat->name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>
Параметр thumbnail и category обозначают тоже самое, что и предыдущем примере.
к содержанию

Итоги

Оба способа рабочие. Так что выбирайте любой, единственно, мне больше понравилось выводить через плагин Categories Images, как-то с ним проще и удобнее…

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

Документация и ссылки

Есть вопросы? Пишем в комментариях.

Всегда ваш, Артем

46 комментариев
  • Ержан

    26.05.2015

    Здравствуйте,подскажите пожалуйста,у вас написано что параметр «thumbnail» указывает размер изображения,я зашел в настройки=>медиафайлы и поменял 150х150 на 100х100 но миниатюры остались все равно 150х150,скажите в чем может быть причина

    • Артем

      26.05.2015

      Добрый день! Размер вы поменяли а картинки те же остались. Вам надо переделать миниатюры. Воспользуйтесь плагином Force Regenerate Thumbnails он пределает все картинки и тогда будут те размеры, которые нужны

      • Ержан

        26.05.2015

        Отлично!Спасибо большое Артем,ваша статья мне очень помогла)

        • Артем

          26.05.2015

          Всегда пожалуйста. Рад помочь

  • Olga

    26.08.2015

    Здравствуйте, подскажите, куда именно надо вставлять код, если использовать второй способ. Спасибо.

    • Артем

      26.08.2015

      Добрый день!
      В том месте, где вам надо вывести такой список рубрик. Если на на главной, то в файле index.php или если вы на отдельной странице все это выводите, то в шаблоне страницы.
      Да, еще можно и в боковой панели такой список вывести, это уже файл sidebar.php

  • Александр

    20.11.2015

    Здравствуйте,я вывожу категории таким образом как во втором примере моего комментария,как мне прилепить картинку к такому варианту? напишите пожалуйста. раньше я выводил плагином Category & Page I c o n s и кодом

     'name', 'order' =>; 'DESC', 'show_count' =>; 1, 'title_li' =>; '', 'hide_empty' =>; 0, 'style=none&echo=0', 'use_desc_for_title' => 0, 'exclude' => '13,18,12,2,7,6,8,5,22,10,21,20,9,3,23,4,11,1',  'number' =>; 20 ) );
    ?>;

    а сейчас понадобилось выводить описание категории и теперь приходиться выводить таким.вот как сделать тут картинку?

    $args=array(
      'orderby' => 'name',
      'order' => 'DESC',
      'show_count' => 1,
      'title_li' => '',
      'hide_empty' => 0,
      'style=none&echo=0',
      'use_desc_for_title' => 0,
      'exclude' => '13,18,12,2,7,6,8,5,22,10,21,20,9,3,23,4,11,1',
      'number' => 20
      );
    $categories=get_categories($args);
      foreach($categories as $category) {
    	echo ' term_id, 'thumbnail') . '" title="' . sprintf( __( "Смотреть все посты %s" ), $category->name ) . '" ' . '>' . $category->name.'  ';
    	echo ''. $category->description . '';
    	// echo ''. $category-?count . ''; 
    	  }
    ?>
    
    • Артем

      20.11.2015

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

      $args = array(
      	'parent' => 0,
      	'hide_empty' => 0,
      	'exclude' => '', // ID рубрики, которую нужно исключить
      	'number' => '0',
      	'orderby' => 'count',
      	'order' => 'DESC',
      	'pad_counts' => true
      );
      $catlist = get_terms('category',$args);
      
      
      
      • Александр

        21.11.2015

        Здравствуйте,спасибо что ответили. Я всё сделал как Вы сказали,но в коде чего-то не хватает,так как страница пустая открывается.Вот код:

        < ?php
        $args = array(
         'orderby' => 'name',
          'order' => 'DESC',
          'show_count' => 1,
          'title_li' => '',
          'hide_empty' => 0,
          'style=none&echo=0',
          'use_desc_for_title' => 0,
          'exclude' => '13,18,12,2,7,6,8,5,22,10,21,20,9,3,23,4,11,1',
          'number' => 20
        );
        $catlist = get_terms('category',$args);
        
        
         
         
         <img src="term_id, 'thumbnail'); ?>" /> 
         <a href="">name; ?> 
         description; ?>
         
         

        Плагин поставил,картинки добавил

        • Артем

          21.11.2015

          Что значит пустая? Белый экран или не выводиться ничего? (для добавления кода в комментарии используйте тег pre)

          • Александр

            22.11.2015

            да,белый экран.
            Пробывал по разному
            вот этот код всё выводит,но картинки нету

            				
             'name',
              'order' => 'DESC',
              'show_count' => 1,
              'title_li' => '',
              'hide_empty' => 0,
              'style=none&echo=0',
              'use_desc_for_title' => 0,
              'exclude' => '13,18,12,2,7,6,8,5,22,10,21,20,9,3,23,4,11,1',
              'number' => 20
              );
            $categories=get_categories($args);
              foreach($categories as $category) {
            	echo ' term_id ) . '" title="' . sprintf( __( "Смотреть все посты %s" ), $category->name ) . '" ' . '>' . $category->name.'  ';
            	echo ''. $category->description . '';
            	echo ''. $category->count . '';
            	  }
             ?>
            

            А ваш код даёт белую экран..но я как-то его изменил,что получилось вывести фото,но описание не вывелось..не помню что измени,потом обратно откатил…
            На Вашу помощь надеюсь,плохо когда знаешь только основы((

          • Артем

            22.11.2015

            Если белый экран, то значит где-то синтаксическая ошибка. Вы какой плагин установили?

  • Александр

    23.11.2015

    Я не силён в php поэтому не могу определить где ошибка..я второй плагин использовал Categories Images

    • Артем

      23.11.2015

      Мы так долго буем выяснять что и где)) Давайте по скайпу artikus13 или в вк

  • Олег

    23.01.2016

    Добрый день!
    Пользуюсь Hueman Full, не получается вывести картинки в рубриках с помощью плагина Categories Images на боковой панели. Вставлял код в sidebar.php

    • Артем

      25.01.2016

      Тут сложно что-то сказать. Должно все выводится, если сделано все правильно. Проверьте названия таксономий

  • Алексей

    26.01.2016

    Артем, здравствуйте!
    Если добавить ссылку к названию таксономии, то некорректно отображается ссылка у названия таксономии без изображения. Подскажите, пожалуйста, как это можно исправить?

     echo 'taxonomy)) . '">' . $categories_item->cat_name . '';
    
    • Артем

      26.01.2016

      Добрый день! Что-то с кодом не так, скиньте весь код, а то не понятно. (код будет хорошо виден в тегах pre)

  • Алексей

    26.01.2016

    Артем, еще такой вопрос: как сделать, чтобы у таксономии у которой нет фото, отображалось однотипное изображение (no photo)?

     0,
     'hide_empty' => 0,
     'exclude' => '', // ID рубрики, которую нужно исключить
     'number' => '0',
     'orderby' => 'count',
     'order' => 'DESC',
     'taxonomy' => 'catalog-cat', // таксономия, для которой нужны изображения
     'pad_counts' => true
    );
    $catlist = get_categories($args); // получаем список рубрик
    echo ''; 
    foreach($catlist as $categories_item){
     
     // получаем данные из плагина Taxonomy Images
     $terms = apply_filters('taxonomy-images-get-terms', '', array(
     'taxonomy' => 'catalog-cat' // таксономия, для которой нужны изображения
     ));
     
     if (!empty($terms)){
     foreach((array)$terms as $term){
     if ($term->term_id == $categories_item->term_id){
     // выводим изображение рубрики
     print 'taxonomy)) . '">' . wp_get_attachment_image($term->image_id, 'thumbnail');
                                   echo '';
     }
     }
     }
     
     // выводим название рубрики
     echo 'taxonomy)) . '">' . $categories_item->cat_name . '';
     }
    echo '';	
    ?>
    
    • Артем

      27.01.2016

      Добрый день! Я вас правильно понял: у вас будут таксономии с картинками и без? И надо сделать, чтобы если нет картинки, то появлялось бы картинка заглушка?

      • Алексей

        27.01.2016

        Да, все верно. Также попробовал добавить ссылку к имени таксономии, но выводится все некорректно.

        • Артем

          27.01.2016

          А почему нельзя добавить через плагин картинку-заглушку?

          • Алексей

            27.01.2016

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

          • Артем

            27.01.2016

            Хм, ну тогда код надо переписывать и условие добавлять. Так сразу не готов подсказать, надо тестить.
            В этом плане второй вариант гораздо удобнее будет…

  • Владимир

    02.02.2016

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

    • Артем

      02.02.2016

      Добрый вечер! Так же как в статье и выводить. Тут, правда, надо смотреть как у вас портфолио выводится: в архивах или на странице. Ну или можно создать шаблон страницы и на нем выводить

  • Денис

    14.04.2016

    Все работает, использовал первый метод. Хотелось бы узнать как вывести только подрубрики с картинками в самой рубрике.

    • Артем

      16.04.2016

      Хороший вопрос. Даже не подскажу. Но скорее всего надо использовать вложенные циклы или аргумент child_of функции get_categories

    • Олег

      06.10.2016

      В стркое
      $catlist = get_categories($args); // получаем список рубрик
      удаляем $args
      Выводит все подкатегории и категории

      • Артем

        06.10.2016

        Естественно, так работает функция, по умолчанию она все и выведет, для ограничений надо передавать нужные параметры

  • Юрий

    19.06.2016

    День добрый! Подскажите пожалуйста. Названия категорий неактивны. Изображение переводит на рубрику. Использован метод номер один. Почему то второй метод не заработал. И подскажите как разместить названия с изображением в строку

    • Артем

      19.06.2016

      Добрый! Не понял вопроса. Что значит рубрики не активны?

  • Александр

    07.07.2016

    Артем, доброго времени суток!
    Столкнулся с такой задачей ,которую решить самому пока не под силу, а спросить и не у кого.
    Я делаю несколько меню (для двух разных страниц). Для одной из страниц понадобилось вывести категории с картинками.
    Меню я подключал в function.php вот так^
    register_nav_menus(array(
    ‘menu_country’ => ‘меню стран’,
    ‘menu_try’ => ‘меню стран2’
    ));
    В админке создал это самое меню http://prntscr.com/bq0de6
    Вывел на страницу в файле index.php вот так:
    ‘menu_country’
    )); ?>
    Но вот куда вставлять Ваш код который вы указали к плагину для вывода картинок, я не пойму)
    Будьте добры, подскажите!

    • Артем

      07.07.2016

      Добрый вечер! А какая связь между меню и картинками в рубриках? Или надо вывести в меню список рубрик с картинками?

      • Александр

        07.07.2016

        Да, надо вывести в меню список рубрик с картинками и я не пойму куда прописывать код.

        • Артем

          07.07.2016

          Для этого не обязательно кодить, в ВП можно в разделе для каждого пункта меню установить или картинку, или класс, к которому можно привязать картинку
          Ну или кодить, но надо тогда для меню отдельный класс выводить

          • Александр

            07.07.2016

            Артем, я честно говоря совсем запутался.
            В статье Вы указали, что (в нужном месте темы, размещаем следующий код …). Я создал несколько меню. В коде в нужном месте, где надо вывести меню я указываю php wp_nav_menu с названием нужного мне меню.
            Теперь надо вывести картинки к определенному меню в котором будет список категорий с картинками.
            Я скачал модуль и в админке вставил картинку http://prntscr.com/bq2pf7 но на сайте картинки нет, а только название категории.
            Как вывести картинки, чтобы пользователь мог добавлять их с админки?
            Можете помочь обьяснить как это сделать, т.к. из вашего предыдущего ответа я откровенно говоря не понял как их выводить? Или научить за определенную плату.

          • Артем

            07.07.2016

            В статье ни слова не сказано про меню, там говорится о выводе списка рубрик с картинками, но не в меню, а на любой странице. Не путайте меню и просто список рубрик — это разные вещи.
            Если надо картинки к списку рубрик именно в меню добавить. то это можно сделать так http://snap.ashampoo.com/Q0fsETPT то есть просто хтмл тег запихнуть в пункт меню. Это самый простой и оптимальный вариант.
            Если же надо вывести списки рубрик на странице. то это делается как в статье описано…

          • Александр

            08.07.2016

            Я не знал про функцию о выводе списка рубрик, я думал что речь идет про рубрики в меню.
            Меня абсолютно устраивает обычный вывод списка рубрик. Но всё равно не получилось. Вот два скрина http://prntscr.com/bq5ges http://prntscr.com/bq5h0p
            Я не пойму что делаю не так?
            Буду Вам благодарен за конструктивную помощь!

          • Артем

            08.07.2016

            Постучитесь в скайп artikus13 разберемся, а то мы так долго будем переписываться

    • Александр

      07.07.2016

      Небольшая опечатка, пишу повторно, а то часть кода куда-то пропала:
      Вывел на страницу в файле index.php вот так:
      ‘menu_country’
      )); ?>

  • Артур

    04.04.2017

    Здравствуйте, вывел список категорий с помощью плагина Taxonomy Images и вашего кода, все работает. Но проблема в том, что у меня на сайте очень много категорий, которые будут активно добавляться. И на странице они выводятся все сразу, десятки категорий, можно ли сделать автоподгрузку категорий, например по 15 штук, с помощью кнопки «Загрузить еще»?

    • Артем

      08.04.2017

      ДОбрый день! Можно, но это надо код дополнительный писать для ajax подгрузки. Готового решения у меня нет

  • Антон Сергеевич

    15.05.2017

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

  • Дизайнер

    21.05.2017

    Я воспользовался первым советом и попробовал Плагин Taxonomy Images, все легко и просто установилось.

Добавить комментарий

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