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

Главная » Создание блога » Настройка Wordpress » Картинки для категорий (рубрик) — изображения WordPress

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

2017-07-07 автор: Виталий Кириллов

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

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

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

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

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

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

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

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

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

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

Далее, открываем для редактирования файл 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 еще одну функцию:

if(preg_match("#tag_ID=([0-9.]+)#", $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']))
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, к которому можно привязать какие угодно стили.

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

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

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

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

Выборка по мета полям из БД осуществляется с помощью функции get_terms().

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