» » » Картинки для категорий (рубрик) — изображения WordPress
logotip

Картинки для категорий (рубрик) — изображения WordPress

Всем привет! Сегодня на seo-mayak.com мы продолжим расширять возможности движка и в рамках темы «Изображения WordPress» разберем функционал, который позволит добавлять картинки для категорий.

В стандартной сборке WordPress у категорий нет такого функционала. У записей (single) такая функция есть, у страниц (page) тоже, а вот категории как-то мимо.

Вообще, непонятно, почему разработчики WordPress до сих пор не внедрили такой функционал, он как бы сам собой напрашивается.

По-моему картинки для рубрик очень даже нужны!

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

Понятно, что наличие индивидуальной картинки, закрепленной за каждой категорией значительно упрощает решение данной задачи. Другой вопрос, как это все осуществить?

Можно, конечно, воспользоваться плагином Taxonomy Images или подождать, когда разработчики движка озадачатся картинками для категорий, а можно взять и самим создать такой функционал, чем мы сегодня и займемся. Поехали!

Создаем функцию-каркас для вывода картинок на странице редактирования категорий

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

Можете скопировать и загрузить на сайт мой вариант заглушки:

wp

Далее, открываем для редактирования файл functions.php и в самое начало после знака <?php вставляем следующую функцию:

add_action( 'category_edit_form_fields', 'mayak_update_category_image' , 10, 2 ); 
function mayak_update_category_image ( $term, $taxonomy ) { 
?>
   <style>
   img{border:3px solid #ccc;}
   .term-group-wrap p{float:left;}
   .term-group-wrap input{font-size:18px;font-weight:bold;width:40px;}
   #bitton_images{font-size:18px;}
   #bitton_images_remove{font-size:18px;margin:5px 5px 0 0;}
   </style>
   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="id-cat-images">Изображение</label>
     </th>
     <td>
	   <p><input type="button" class="button bitton_images" id="bitton_images" name="bitton_images" value="+" /></br>
	   <input type="button" class="button bitton_images_remove" id="bitton_images_remove" name="bitton_images_remove" value="&ndash;" /></p>
       <?php $id_images = get_term_meta ( $term -> term_id, 'id-cat-images', true ); ?>
       <input type="hidden" id="id-cat-images" name="id-cat-images" value="<?php echo $id_images; ?>">
       <div id="cat-image-miniature">
         <?php if (empty($id_images )) { ?>
		 <img src="Путь до картинки-заглушки" alt="Zaglushka" width="84" height="89"/>
		 <?php } else {?>
           <?php echo wp_get_attachment_image ( $id_images, 'thumbnail' ); ?>
         <?php } ?>
       </div>
     </td>
   </tr>
<?php
}

Обратите внимание на строчку №22

<img src="Путь до картинки-заглушки" alt="Zaglushka" width="84" height="89"/>

Здесь надо прописать путь до картинки-заглушки.

После чего в админке, на странице редактирования категорий должен появится интерфейс для добавления картинки:

Конечно, кнопки пока работать не будут, так как к ним еще надо надо привязать стандартный загрузчик изображений WordPress.

Выводим загрузчик изображений WordPress

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

Итак, для подключения к кнопкам стандартного загрузчика изображений WordPress, копируем и вставляем в файл functions.php еще одну функцию:

add_action( 'admin_footer', 'mayak_loader'  );
function mayak_loader() { ?>
   <script>
     jQuery(document).ready( function($) {
       function mayak_image_upload(button_class) {
         var mm = true,
         _orig_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var mb = '#'+$(this).attr('id');
           var mt = $(mb);
           mm = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if (mm) {
               $('#id-cat-images').val(attachment.id);
               $('#cat-image-miniature').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#cat-image-miniature .custom_media_image').attr('src',attachment.sizes.thumbnail.url).css('display','block');
             } else {
               return _orig_send_attachment.apply( mb, [props, attachment] );
             }
            }
         wp.media.editor.open(mt);
         return false;
       });
     }
     mayak_image_upload('.bitton_images.button'); 
     $('body').on('click','.bitton_images_remove',function(){
       $('#id-cat-images').val('');
       $('#cat-image-miniature').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     $(document).ajaxComplete(function(event, xhr, settings) {
       var mk = settings.data.split('&');
       if( $.inArray('action=add-tag', mk) !== -1 ){
         var mh = xhr.responseXML;
         $mr = $(mh).find('term_id').text();
         if($mr!=""){
           $('#cat-image-miniature').html('');
         }
       }
     });
   });
</script>
<?php }

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

Загружаем картинку и ее миниатюра отобразится на странице редактирования категории вместо заглушки:

Это еще не все. Если мы сейчас сохраним изменения, то выбранная картинки исчезнет, это потому, что нам еще надо занести информацию о изображении в базу данных.

Сохранение данных в таблице wp_termmeta

В прошлой статье я подробно разбирал таблицу wp_termmeta, кому интересно можете почитать. Сейчас же я не буду углубляться в объяснение деталей.

Итак, чтобы настроить сохранение данных в БД, нам понадобиться еще одна функция:

add_action( 'edited_category','mayak_updated_category_image' , 10, 2 );
function mayak_updated_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['id-cat-images'] ) && '' !== $_POST['id-cat-images'] ){
     $image = $_POST['id-cat-images'];
     update_term_meta ( $term_id, 'id-cat-images', $image );
   } else {
     update_term_meta ( $term_id, 'id-cat-images', '' );
   }
}

Теперь, после обновления страницы редактирования рубрики, в таблице wp_termmeta сохранятся следующие данные:


Получается, что в поле meta_key у нас записался ключ id-cat-images, который будет одинаковый для всех картинок, а в поле meta_value записалось ID изображения.

Этих данных вполне достаточно, чтобы вывести картинку или картинки в нужном месте на сайте. Приступим.

Вывод изображения на странице категории

Для того, чтобы вывести изображение на странице категории, к которой это изображение было прикреплено, надо открыть файл archive.php или category.php (зависит от шаблона) и вставить следующий код:

<?php 
$term = get_category(get_query_var('cat'));
$cat_id = $term->cat_ID;
$image_id = get_term_meta($cat_id, 'id-cat-images', true);
echo '<div class="image_id">'.wp_get_attachment_image($image_id, 'medium').'</div>';
?>

В строчке №5 можно указать размер изображения:

thumbnail — миниатюра;
medium — средний размер;
large — крупный размер;
full — исходный размер.

Если надо вывести картинку с описанием категории, то надо добавить в строчку №5 функцию category_description():

echo '<div class="image_id">'.wp_get_attachment_image($image_id, 'medium').category_description().'</div>';

Также в коде предусмотрен класс .image_id, к которому можно привязать какие угодно стили.

Вывод подрубрик с миниатюрами в виде каталога

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

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

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

function mayak_cats_images(){
$ags = array(
'taxonomy'=>'category',
'parent' => get_query_var('cat'),
'meta_query' => array(array('key' => 'id-cat-images',)),
);
$terms = get_terms($ags);
 $count = count($terms);
 if($count > 0){
	 echo '<div class="cat-thumbnail"><ul>';
	 foreach ($terms as $term) {
	 $term_taxonomy_id = $term->term_taxonomy_id;
	 $image_id = get_term_meta ( $term_taxonomy_id, 'id-cat-images', true );
	   echo '<li>
	   <a href="'.get_category_link($term_taxonomy_id).'">'.wp_get_attachment_image ( $image_id, 'thumbnail' ).'</a>
	   <a href="'.get_category_link($term_taxonomy_id).'">'.$term->name.'</a>
	   </li>';
	 }
	 echo '</ul></div>';
 }
}

Функцию вставляем в файл functions.php. Далее ищем файл, который отвечает за вывод рубрик. Обычно это файл archive.php, чуть реже это может быть category.php.

В нужное место в файле (за пределами цикла WordPress) вставляем код вызова функции:

<?php mayak_cats_images(); ?>

В функции я задал класс .cat-thumbnail, с помощью которого можно без труда расставить изображения и ссылки как захочется, например так:



.cat-thumbnail {
    list-style-type: none;
	width:750px;
	text-align:center;
	margin:0 auto;
}
.cat-thumbnail li {
	width:160px;
	height:150px;
	float:left;
	margin: 5px 10px;	
}
.cat-thumbnail a{
    font-size:16px;	
}
/* Для мобильный устройств*/
@media screen and (max-width:760px){
.cat-thumbnail {
    width:auto;
    display:block;
    position:relative;
}
.cat-thumbnail ul {
    width:auto;
}
.cat-thumbnail li {
    float:left;
}
}

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

Надеюсь у Вас все получится! Подписывайтесь на обновления блога, будет интересно.

До встречи!

С уважением, Виталий Кириллов

Статьи по теме:

Title, description, keywords и h1 для категорий (рубрик) WordPress
Редактор для категорий (рубрик), меток и произвольных таксономий
Шаблоны для категорий WordPress. Как сделать каталог из рубрики
Использование миниатюр. Как вывести миниатюры на главной странице
Популярные записи с миниатюрами в сайдбаре без плагина
Как вывести похожие записи с миниатюрами на WordPress без плагина
Функция the_post_thumbnail() — миниатюра записи в анонсе WordPress

Комментарии: 12

  1. Дмитрий:

    У вас показан результат вывода картинок на странице рубрики «Европа». Выводятся «Англия», «Германия», «Голландия» — это подрубрики?

    Ответить
    • Виталий Кириллов:

      Да, это подрубрики.

      Ответить
  2. Наталья:

    Полезная информация. Как до этого «дойдут руки», знаю, где информацию искать. А благодаря подробному описанию «что зачем и почему» уже кое-чему сама научилась и некоторые функции под свои потребности переписывать удается (ТТТ).

    Ответить
  3. Наталья:

    Приветствую вас, Виталий! Давно от вас не было новинок))
    Отличное решение! У меня на сайте это давно было реализовано, хотя антипрограммистским способом) Путем прямого прописывания путей к картинкам) Благо, категорий немного. Надо будет сделать все по-правильному.

    Ответить
    • Виталий Кириллов:

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

      Ответить
  4. Александр Силиванов:

    Интересные функции! У меня есть намерение сделать страницу для рубрик с размещением ссылки в верхнем меню. С миниатюрами такая страница будет, несомненно, лучше смотреться.

    Ответить
  5. Виктор:

    Виталий, у меня не работает загрузчик.

    Ответить
    • Виталий Кириллов:

      Виктор, функцию полностью скопировали, проверьте еще раз.
      Все должно работать, проверял на нескольких вордпрессовских темах.

      Ответить
      • Виктор:

        Виталий, попробую сегодня повторить на «нулевой» теме.

        Ответить
        • Виталий Кириллов:

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

          Ответить
  6. Александр:

    Здравствуйте, Виталий! Спасибо за отличное решение, сделал все по шагам, получилось. Подрубрики выводятся в виде каталога с миниатюрами, но есть одна проблема: при переходе в подрубрику не выводятся записи внутри нее:(

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

    Пытался решить посредством оставления кода в archive.php, отвечающего за вывод списка материалов рубрики, но в этом случае в основной рубрике материалы выводятся из всех подрубрик ниже миниатюр этих подрубрик.

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

    Ответить
  7. Александр:

    Решил погуглить возможные решения по выводу записей только основной рубрики и запрету на вывод записей из дочерних. Нашел решение — необходимо вставить в файл functions.php темы следующий код:

    //вывод записей только родительской рубрики start
    function wph_only_parent_category($query) {
        if (!is_admin() && $query->is_category())
            $query->set('category__in', array(get_queried_object_id()));
    }
    add_action('pre_get_posts', 'wph_only_parent_category');
    //вывод записей только родительской рубрики end

    У меня теперь все отлично работает:) Если решение грамотное, оно будет полезно другим читателям Вашего блога.

    Ответить

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

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS