Всем привет! Сегодня на 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="–" /></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
У вас показан результат вывода картинок на странице рубрики «Европа». Выводятся «Англия», «Германия», «Голландия» — это подрубрики?
Да, это подрубрики.
Полезная информация. Как до этого «дойдут руки», знаю, где информацию искать. А благодаря подробному описанию «что зачем и почему» уже кое-чему сама научилась и некоторые функции под свои потребности переписывать удается (ТТТ).
Приветствую вас, Виталий! Давно от вас не было новинок))
Отличное решение! У меня на сайте это давно было реализовано, хотя антипрограммистским способом) Путем прямого прописывания путей к картинкам) Благо, категорий немного. Надо будет сделать все по-правильному.
Здравствуйте!
Да Наталья, к сожалению часто писать не получается, но я рад, что Вы следите за обновлениями.
Надеюсь, что данное решение окажется для Вас полезным!
Интересные функции! У меня есть намерение сделать страницу для рубрик с размещением ссылки в верхнем меню. С миниатюрами такая страница будет, несомненно, лучше смотреться.
Виталий, у меня не работает загрузчик.
Виктор, функцию полностью скопировали, проверьте еще раз.
Все должно работать, проверял на нескольких вордпрессовских темах.
Виталий, попробую сегодня повторить на «нулевой» теме.
Виктор, выведите текстовый редактор для категорий по этой статье и загрузчик будет работать, скорее всего причина в этом.
Здравствуйте, Виталий! Спасибо за отличное решение, сделал все по шагам, получилось. Подрубрики выводятся в виде каталога с миниатюрами, но есть одна проблема: при переходе в подрубрику не выводятся записи внутри нее:(
То есть, другими словами: в основной рубрике все ОК — подрубрики выводятся в виде миниатюр с заголовком, а вот при переходе в какую-либо из подрубрик должны выводиться материалы в ней, но они не выводятся.
Пытался решить посредством оставления кода в archive.php, отвечающего за вывод списка материалов рубрики, но в этом случае в основной рубрике материалы выводятся из всех подрубрик ниже миниатюр этих подрубрик.
Хотелось бы, чтобы для основной рубрики материалы не выводились вообще, а была только галерея миниатюр подрубрик. А вот уже в самих подрубриках выводились материалы. Если подскажете что подправить, будет очень круто и полезно, супер статья.
Решил погуглить возможные решения по выводу записей только основной рубрики и запрету на вывод записей из дочерних. Нашел решение — необходимо вставить в файл functions.php темы следующий код:
У меня теперь все отлично работает:) Если решение грамотное, оно будет полезно другим читателям Вашего блога.
Приветствую всех! Извините за глупый вопрос,Можно ли данную функцию каким-то образом реализовать на Dle? Заранее спасибо!!!
Нет.
Добрый день, а есть возможность вывести пути до этих картинок, а не целиком конструкцию ? Нужно загонять в цикле картинки в background
вопрос снят, разобрался сам, функция wp_get_attachment_image_url существует
Привет. Башка и так не варит, нужно по быстрому сделать, чтобы не углубляться. А тут еще и не получится сделать, без того, чтобы не вставить код из другой статьи. Переходишь на другую статью и там снова while (i>=crazy) go_to fuck…
Нельзя было вот в одной статье весь код выложить? Вещь полезная и мне очень нужная, работа зачетная. Я даже по рекламке тыкнул, чтобы не зря автор работал. Но ротмойвзубах, туда-сюда ходить, собирать по крохам, а потом возвращаешься к этой, исходной статье, и уже забыл что делал.
Неспавшим мозгом щас попытался осознать прочитанное — не вышло. Руки чо-то делали, но результата не дали. Для людей же вроде делать надо, чо так много перелинковок?
Надо или файлы выкладывать готовые, или все в одной статье писать или уже плагином радовать. К чертям… придется еще завтра тратить время на разбор.
Добрый день! подскажите, пожалуйста, как пользуясь вашей функцией, выводить только главные (родительские) рубрики на главной странице?
Здравствуйте!
Для этого в функции mayak_cats_images(), вместо:
надо установить параметр:
Больно все так мудрено и сложно. Но я все таки попробую!
Здравствуйте Виталий!Использовал Ваше решение, работает, спасибо Вам. Подскажите, как вывести эти картинки в меню, которое отображается в боковой панели?
в виджете
Здравствуйте! частично решил проблему добавления кода в виджет. Чтобы в виджетах работал php код, добавляем в файл function.php
add_filter('widget_text', 'my_widget_execute_php', 100);
function my_widget_execute_php($text) {
if(strpos($text,'<?') !== false) {
ob_start();
eval('?>'.$text);
$text = ob_get_contents();
ob_end_clean();
}
return $text;
}
Теперь в текстовой виджет можно добавить код
<?php mayak_cats_images(); ?>
который выведет наши категории, вместе с картинками. Но, я использую эту функцию именно как меню, на главной всё нормально, но вот если мы переходим в любую из категорий, у нас выводятся только подкатегории этой категории, а мне нужно чтобы выводились все. я надеюсь на вашу помощь.
А почему верстка табличная? Ух.. Меня прям на много лет назад отбросило)) Будем пробовать.
Уже точно не помню почему я там таблицу решил использовать, видимо что-то с блоками не получалось. По-моему это не суть, главное, что все работает.
Виталий, спасибо!
А почему загрузчик не работает без текстового редактора?
Редактор нужные скрипты подключает, отдельно понять какие, пока не получилось, да и времени тестить нету.
У меня не работает вывод подрубрик с миниатюрами в виде каталога. Даже не знаю что делать. Вывод изображения на странице категории работает нормально. Может дадите какой нибудь совет, голову сломал уже.
У кого не работает Вывод подрубрик с миниатюрами в виде каталога, как у меня, сделайте так:
Просто добавьте в функцию mayak_cats_images() строку 'hide_empty' => 0, как показано ниже.
Не работает в том случае, если категории пустые, без материалов. По умолчанию 'hide_empty' => true, то есть включено и скрывает в выборке пустые категории.
$args = array(
'taxonomy' => 'category',
'hide_empty' => 0,
'parent' => get_query_var('cat'),
'meta_query' => array(array('key' => 'id-cat-images',)),
);
Описание рубрики не выводится category_description();
Но если подставить номер id рубрики, то выводится category_description(10)
Как сделать чтобы описание всех рубрик выводилось?
Решилась проблема 😉
Нужно в функцию передать параметр $term_taxonomy_id
так: category_description($term_taxonomy_id)
Здравствуйте! Такой вопрос, можно ли выводить название и картинку для категорий по слагу а не все подряд. Дело в том что нужно вывести на главной странице три категории
название,
ссылку на категорию,
картинку категории,
и произвольные поля.
Спасибо! 🙂
А можно как то расширить, чтобы и метки захватывал?
Здравствуйте, при попытке добавления второй части кода, касающейся добавления загрузчика, встроенный обработчик WP не дает обновить файл, выдавая следующее:
«Ваши изменения в коде PHP были отменены из за ошибки на строке 40 файла wp-content/themes/tortuga/functions.php. Исправьте и попробуйте пересохранить.
syntax error, unexpected ‘add_action’ (T_STRING)»
Не подскажете ли, в чем может быть дело? Нужно прикрутить к рубрикам картинки и сделать вывод, и ваш способ очень заинтересовал
Здравствуйте, Вячеслав!
Где-то ошибка синтаксиса php.
Внимательно посмотрите все ли захватили при копировании.
Виталий, спасибо за ответ! Захватил все, проверял многократно, вот что у меня идет в начале functions.php:
По идее все правильно, сам не пойму, почему не работает?
Код в предыдущем комментарии обрезался при отправке, почему-то. Но с самого начала functions.php идут два блока кода по тексту статьи.
При отправке php кода пользуйтесь преобразователем, иначе код не пройдет.
Виталий посмотрите сам код, может я что то упустил
Через комментарии код не проходит, надо заняться проблемой.
Вячеслав, напишите мне через форму обратной связи, пообщаемся.
Виталий, я еще раз попробую, если что не получится напишу вам. Спасибо.
Подскажите, можно ли в бд (wp_termmeta) сохранять в поле «meta_value» не ID изображения, а путь до изображения ../../uploads/cat/img.jpg
Можно подумать.
Сейчас просто на эксперименты времени нет.
Виталий, приветствую. Подскажите, как тоже самое сделать для меток?