Как вывести изображение категории wordpress

Миниатюры для элементов таксономий

В этой заметке я поделюсь готовым кодом, который добавляет возможность задавать миниатюры для элементов таксономий, как встроенных (метки, рубрики), так и произвольных. Код протестирован и 7 раз улучшен — все для вас, мои дорогие

Чтобы добавить, или загрузить и добавить, или изменить картинку элемента таксономии, нужно кликнуть на саму картинку — она по совместительству является кнопкой. При загрузке открывается стандартное окно медиафайлов и картинка загружается в медиатеку WordPress. Но в отличии от картинок записей, она не привязывается к термину — она не привязывается ни к чему и это минус. Ну, пока так.

По умолчанию код работает для всех публичных таксономий (рубрики, метки и существующие произвольные таксономии). В коде можно указать конкретные таксы для которых он должен работать.

Вот что мы получим в итоге:

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

Можно сделать плагин или можно добавить его в functions.php темы.

Вывод картинки элемента таксономии во фронтенде

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

Делается это через родную функцию WordPress get_term_meta(), которая напомню еще раз существует с версии 4.4.

ID картинок (вложений) сохраняется в метаполе термина _thumbnail_id , его и будем получать.

Если нужен не полный размер меняем full на нужный размер в wp_get_attachment_image_url(). Если нужны другие данные картинки, используем другую функцию получения вложения по ID.

Плагины для вставки миниатюр таксономий

Не кодом единым жив программист — есть еще плагины:

Taxonomy Thumbnail — по коду все круто, только его там много. Поддержка версий WP до 4,4 (когда была добавлена таблица метаданных таксономий).

WP Multiple Taxonomy Images — код плагина очень похож на код из этой статьи — его не много, только то что нужно. Фишка плагина в том, что он позволяет задать сразу несколько миниатюр для термина.

Taxonomy Images — самый рейтинговый плагин по этому вопросу. Плагин в целом неплохой, но кода много, «лишнего» много, кажется. Если лишнее не нужно, используйте лучше предыдущие плагины или код из этой статьи.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь давайте разберемся как вывески это изображение на сайте.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

WordPress картинка рубрики

Добро пожаловать на наш замечательный проект, если Вы впервые сюда попали. Сегодня мы будем добавлять картинки к рубрикам сайта. По личной практике могу отметить, что данная опция очень востребована среди пользователей WordPress. У нас возникает дополнительный трафик, повышается юзабилити и улучшаем интерфейс. Сегодня мы будем разбирать данный вопрос в деталях. Миниатюра рубрики WordPress даёт огромные преимущества.

p, blockquote 1,0,0,0,0 —>

Как добавить картинки в рубрики вордпресс?

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

p, blockquote 2,0,0,0,0 —>

Инструкция по добавлению плагина WordPress

1) Скачиваем, устанавливаем и активируем Category Thumbnails. К счастью, процесс установки разбирался везде многократно. Ничего сложного в нём нет, повторяться я не буду. Если у Вас возникли с этим какие-то проблемы, используем поисковую систему Google.

p, blockquote 3,0,0,0,0 —>

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

p, blockquote 4,0,0,0,0 —>

Добавление специального кода в WordPress

2) В functoins.php нашего сайта вставляем специальный небольшой код, позволяющий использовать картинки для рубрик wordpress. Не исключено, что когда плагин будет установлен, Вы получите сообщение о невозможности отображения изображений.

p, blockquote 5,0,1,0,0 —>

Отображение миниатюр включается с помощью специальной функции, которая применяется в файле functions.php. Не будем ничего выдумывать, будем следовать по порядку инструкции. Переходим в wp-content/themes/наш_шаблон. Ищем конец кода, и перед фрагментом кода ?> прописываем эту функцию:

p, blockquote 6,0,0,0,0 —>

p, blockquote 7,0,0,0,0 —>

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

p, blockquote 8,0,0,0,0 —>

3) На этом шаге задаем размер изображений миниатюр. Если Вы обрезаете картинки самостоятельно, то можно пропустить данный пункт. В большинстве случаев, пользователи WordPress доверяют эту задачу специальному коду PHP. Он уменьшает изображения до нужного размера.

p, blockquote 9,0,0,0,0 —>

Опять отправляемся в functions.php, по аналоги добавляем ещё один небольшой код:

p, blockquote 10,1,0,0,0 —>

add_image_size($name, $width, $height, $crop);

p, blockquote 11,0,0,0,0 —>

Мы получаем код с 4-мя параметрами, которые отвечают за наши миниатюры категорий.

p, blockquote 12,0,0,0,0 —>

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

p, blockquote 13,0,0,0,0 —>

Лучше использовать в качестве параметра true. Даже если изображение будет немного обрезано, оно будет точно соответствовать указанному размеру и пропорциям.

p, blockquote 14,0,0,0,0 —>

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

p, blockquote 15,0,0,1,0 —>

add_image_size(‘img_catalog’, 250, 300, true);

p, blockquote 16,0,0,0,0 —>

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

p, blockquote 17,0,0,0,0 —>

4) Присваиваем категории миниатюру. Если нам требуется использовать миниатюру, переходим в админ панель. Жмём клавишу — обновить.

p, blockquote 18,0,0,0,0 —>

5) Выводим миниаютры в шаблоне. Ищем файл category.php. Добавляем код:

p, blockquote 19,0,0,0,0 —>

echo wp_get_attachment_image($img_info->id, ‘img_catalog’)

p, blockquote 20,0,0,0,0 —> p, blockquote 21,0,0,0,1 —>

Если Вы заметили, один из параметров мы использовали ранее.

Источник

SEO Маяк

Блог Виталия Кириллова | Все о создании,
продвижении сайтов и заработке в интернете

Создание и продвижение сайтов, заработок в интернете

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник