Как добавить изображения (картинки) для рубрик в WordPress и вывести их на сайте.

wordpress thumbnail category

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

Вариант №1. Использование плагина ACF(Advanced Custom Fields).

Этот плагин дает функция добавлять разные кастомные типы полей ввода к записям рубрикам и прочим таксономиям и произвольным типам полей ввода на веб-сайте. Нас интересует функция добавления поля ввода с картинкой для категории WordPress.

Давайте рассмотрим алгоритм действий.

1. Устанавливаем и активируем плагин «Advanced Custom Fields», если он у вас ещё не установлен.

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

2. Далее, в админке, переходим в раздел «Группы полей ввода», либо же «Произвольные поля ввода».

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

3. Вверху страницы возле заголовка «Группы полей ввода», нажимаем на кнопку «Добавить».

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

4. Вводим название группы полей ввода и жмем кнопку «Добавить поле ввода».

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

5. Заполняем основные поля ввода для создания поля ввода. Для примера, у меня введены следующие данные: «Ярлык поля ввода» — «Изображение рубрики», «Имя поля ввода» — «category_image», «Тип поля ввода» — «Изображение», «Возвращаемый формат» — «Ссылка на изображение». Последний настройка важный, так как он определяет то, что будет возвращать наше поле ввода для последующей его обработки на веб-сайте. Там есть и иные параметра, по типу допустимых форматов изображений, размера, обязательности поля ввода и иное. Достаточно заполнить поле ввода по примеру в скриншоте. Снизу нажимаем «Добавить поле ввода».

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

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

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

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

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

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

8. Переходим в раздел админки «Записи» — «Рубрики». Жмем на редактирование созданной рубрики и внизу увидим следующий блок.

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

9. Жмем кнопку «Добавить изображение» и загружаем либо выбираем из библиотеки файл картинки. В итоге у вас должно получиться вот такое.

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

На этом все, вы привязали картинку к рубрике WordPress.

Сейчас давайте разберемся как вывески это изображение на веб-сайте.

Для выведения миниатюры рубрики WordPress на самой странице категории можно использовать следующий код.

<?php if($category_image=get_field("category_image",get_category($cat))){?><img src="<?php echo $category_image;?>"/><?php }?>

Где category_image – это имя поля ввода, которое мы заполняли при его создании.

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

<?php$categories = get_categories(array('taxonomy'=>'category','hide_empty'=>false));if($categories){ foreach($categories as $cat){?> <div class="cat"> <div class="name"><a href="<?php echo get_category_link($cat->term_id);?>"><?php echo $cat->name;?></a></div>        <?php if($category_image=get_field("category_image",$cat)){?><div class="image"><img src="<?php echo $category_image;?>"/></div><?php }?>        </div>    <?php }?><?php }?>

Этот код сначала сортирует таксономии, отделяя только рубрики, после этого, если категории существуют, отображает название и через проверку отображает саму картинку.

Вариант №2. Использование плагина Taxonomy Images.

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

Алгоритм работы с плагином.

1. Устанавливаем и активируем плагин «Taxonomy Images».

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

2. Переходим в раздел админки «Categories Images» и попадаем на страницу с параметрами, где можно поставить чекбоксы и исключить отображение данной возможности на определенных категориях. По-умолчанию функция добавлять картинки включена для всех категорий и таксономий WordPress.

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

3. Переходим в раздел «Записи» — «Рубрики». Как видно, появилась функция добавлять рубрику при создании категории, а также отображаются миниатюры изображений.

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

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

Как добавить картинки(изображения) для рубрик в WordPress и вывести их на веб-сайте.

5. Добавляем фото и жмем «Обновить».

Как вывести картинку в рубриках при помощи плагина Taxonomy Images?

Для этого в нужном месте WordPress темы размещаем код.

<?php$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 здесь отвечает за размер выводимого картинки, конкретно thumbnail задается в WordPress по дефолту. Если вам необходимо указать другой размер, то выбираете из списка дефолтных или же создаете тип. Второй момент – это настройка category, он указывает на тип таксономии. Если вы планируете сменить таксономию, то просто прописываете ее название, к примеру catalog.

На этом сегодня все. При помощи двух данных подходов вы можете быстро и без труда реализовать функция добавления изображение к любой рубрике и вывести его на веб-сайте.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *