WordPress вывод категорий с миниатюрами

Содержание
  1. WordPress картинка рубрики
  2. Как добавить картинки в рубрики вордпресс?
  3. Инструкция по добавлению плагина WordPress
  4. Добавление специального кода в WordPress
  5. SEO Маяк
  6. Картинки для категорий (рубрик) — изображения WordPress
  7. Создаем функцию-каркас для вывода картинок на странице редактирования категорий
  8. Выводим загрузчик изображений WordPress
  9. Сохранение данных в таблице wp_termmeta
  10. Вывод изображения на странице категории
  11. Вывод подрубрик с миниатюрами в виде каталога
  12. Вывод списка рубрик с изображениями
  13. Способ первый. Плагин Taxonomy Images
  14. Добавляем изображения к рубрикам
  15. Выводим рубрики с картинками используя плагин Taxonomy Images
  16. Способ второй. Плагин Categories Images
  17. Добавляем картики
  18. Выводим картинки в рубриках с помощью плагина Categories Images
  19. Итоги
  20. Миниатюры записей и страниц в WordPress. Как задать и как вывести миниатюру поста?
  21. Шаг 1. Включение поддержки миниатюр для вашей темы WordPress
  22. Можно ли назначить миниатюру таксономии WordPress?
  23. Шаг 2. Как установить миниатюру для поста?
  24. Способ 1. Метабокс «Миниатюра записи»
  25. Способ 2. Кнопка «Добавить медиафайл»
  26. Шаг 3. Выводим миниатюры постов на страницах сайта
  27. the_post_thumbnail() и get_the_post_thumbnail(). Стандартный способ вывода миниатюр.
  28. Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()
  29. Как выбрать область обрезки миниатюры?
  30. Смотрите также

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

SEO Маяк

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

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

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

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

Читайте также:  Код ошибки 0x80072ee7 что это

В стандартной сборке 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, с помощью которого можно без труда расставить изображения и ссылки как захочется, например так:

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

Читайте также:  Check if port is open from linux

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

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

Источник

Вывод списка рубрик с изображениями

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

  • Способ первый. Плагин Taxonomy Images
  • Добавляем изображения к рубрикам
  • Выводим рубрики с картинками используя плагин Taxonomy Images
  • Способ второй. Плагин Categories Images
  • Добавляем картики
  • Выводим картинки в рубриках с помощью плагина Categories Images
  • Итоги
  • Документация и ссылки

Задача будет состоять из 2 пунктов:

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

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

Способ первый. Плагин Taxonomy Images

Добавляем изображения к рубрикам

Добавлять картинки будем с помощью плагина Taxonomy Images. После установки плагина необходимо сделать следующее:

1. Выбрать нужные таксономии (в том случае, если их у вас несколько)

2. Добавить нужные изображения к рубрикам. После установки плагина, у вас появятся дополнительные возможности в разделе Рубрики

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

Выводим рубрики с картинками используя плагин Taxonomy Images

Правда, пришлось его немного модифицировать, потому что получался какой-то не правильный html-код и к нему сложно было стили прилепить. В итоге получилось так:

Обратите внимание!

Параметр thumbnail — указывает размер изображения, который будет выводиться. Сами размеры берутся из настроек WP (Настройки — Медиафайлы — Размер миниатюры), по умолчанию стоит размер 150х150.
Параметр category — указывает название таксономии. По умолчанию, стоит category при необходимости указывайте нужную таксономию, например catalog или portfolio .

Способ второй. Плагин Categories Images

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

Добавляем картики

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

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

Выводим картинки в рубриках с помощью плагина Categories Images

В нужном месте темы, размещаем следующий код

Итоги

Оба способа рабочие. Так что выбирайте любой, единственно, мне больше понравилось выводить через плагин Categories Images, как-то с ним проще и удобнее…

Источник

Миниатюры записей и страниц в WordPress. Как задать и как вывести миниатюру поста?

Чуть больше практики по работе с миниатюрами WordPress в моём видеоуроке.

Потрясающая фишка в WordPress!

Начну с нуля. Итак, для начала вы должны понять разницу между миниатюрами и обычными изображениями из поста. Миниатюра — это что-то вроде превьюшки к посту, в самом посте она может даже и не использоваться.

Предположим, у вас есть какая-то категория, и на странице этой категории перед некоторыми записями (а может быть и перед каждой) есть какая-то картинка, которая по сути и является превьюшкой поста, т.е. миниатюрой. Если мы перейдем на страницу одной из записей, то можем найти эту картинку в её содержимом, а можем и не найти.

В общем ладно, в двух словах, миниатюра — это изображение-превью к постам, которое:

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

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

Шаг 1. Включение поддержки миниатюр для вашей темы WordPress

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

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

Если вы не хотите использовать миниатюры во всех типах постов сразу, вы можете подключить их например только для записей ( post ):

Читайте также:  Как назвать компьютеры принтеры

или только для страниц ( page ):

или только для записей и только для страниц:

Можно ли назначить миниатюру таксономии WordPress?

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

Шаг 2. Как установить миниатюру для поста?

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

Способ 1. Метабокс «Миниатюра записи»

Имейте ввиду, что даже если метабокс у вас подключен, он может не отображаться на странице редактирования поста. Как включить его отображение?

Для начала посмотрите в правую верхнюю часть страницы (возможно ее потребуется проскроллить к началу). Там должна быть вот такая вкладка Настройки экрана:

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

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

Способ 2. Кнопка «Добавить медиафайл»

Итак, переходим на страницу редактирования поста и нажимаем кнопку Добавить медиафайл:

В появившемся окне кликаем по ссылке Задать миниатюру:

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

Шаг 3. Выводим миниатюры постов на страницах сайта

То, как мы будем выводить миниатюры в данном случае может во многом зависеть от вашего шаблона WordPress. Чаще всего, во многих темах WordPress миниатюры в основном выводятся вместе с тегом сразу. Но что, если нам надо получить URL миниатюры?

Рассмотрим оба случая.

the_post_thumbnail() и get_the_post_thumbnail(). Стандартный способ вывода миниатюр.

get_the_post_thumbnail() the_post_thumbnail()
Возвращает миниатюру поста в виде HTML-тега , возвращаемый HTML-код можно использовать в других функциях или записать в переменную. Выводит миниатюру поста, является эквивалентом для:
Позволяет в качестве первого параметра указать ID поста, миниатюру которого нужно получить. При помощи этой функции можно вывести только миниатюру текущего поста из цикла.
В качестве второго параметра можно указать размер получаемой миниатюры, по умолчанию — размер, заданный в Параметры > Медиафайлы. В качестве первого параметра можно указать размер выводимой миниатюры.

Особо заморачиваться не будем, рассмотрим один и тот же пример для каждой из функций. Итак, сначала пример для get_the_post_thumbnail():

Этот пример выводит заголовки (функция the_title()) и миниатюры постов со ссылками (функция the_permalink()) на сам пост.

Тот же самый пример для функции the_post_thumbnail():

Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()

Функция wp_get_attachment_image_src() нужна для получения параметров изображения — его URL, ширины и высоты (в данном случае нам будет интересен именно URL). Она не работает в цикле и её обязательным параметром является ID вложения (ID миниатюры в данном случае).

В то же время ID миниатюры мы можем получить, используя функцию get_post_thumbnail_id(), указав в качестве параметра ID поста, иначе будет возвращаться ID миниатюры текущего поста из цикла.

Посмотрим, как это будет выглядеть на примере:

Как видите, в качестве второго параметра мы также можем указать размер получаемого изображения в виде строки ( один из зарегистрированных размеров, например thumbnail , medium , large , full и т.д.) или в виде массива array( 100, 100 ) . Чтобы миниатюры на сайте получались качественными, задавайте соответствующие размеры.

Как выбрать область обрезки миниатюры?

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

Для того, чтобы вы смогли сами выбирать область картинки для отображения на сайте, установите себе плагин Manual Image Crop. Этот плагин позволяет для каждого загруженного изображения для его каждого размера вручную установить область, отображаемую на сайте. Потрясающий инструмент!

Смотрите также

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector