Миниатюры для рубрик на WordPress с разметкой Shema.org

Главная » Верстка » Миниатюры для рубрик на WordPress с разметкой Shema.org
Самолетная 614022 Россия, Пермь +79630195620
Верстка
seo, новичкам, шаблоны
1973

Встречаются такие задачи, когда необходимо у рубрики на wordpress сайте, вывести прикрепленные к ним изображения. Все это легко решается с помощью одного маленького плагинчика и небольшого куска PHP кода. Но вся проблема в том, что эти изображения не обладают микроразметкой Shema.org. А если сайт у вас размечен, то это небольшое упущение. Поэтому сегодня я подготовил вам инструкцию, как можно нанести микроразметку и к миниатюрам рубрики.

Как прикрепить изображение к рубрике?

Для этого необходимо установить плагин Taxonomy Images из репозитория WordPress плагинов. После его установки и активации переходимо в меню Настройки, а там следуем по названию плагина Taxonomy Images.

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

Указываем у каких категорий должны появится миниатюры

Указываем у каких категорий должны появится миниатюры

Прикрепляем картинку к рубрике.

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

Добавляем к категориям миниатюры

Добавляем к категориям миниатюры

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

Библиотека файлов

Выбираем изображение

Выводим категории с изображениями. Микроразметку тоже не забыли.

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

Первым делом открываем файл functions.php и добавляем в него следующий код.

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

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

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

После того как файл functions.php вы сохранили, осталось указать, где выводить миниатюры. Для этого открываете либо файл index.php, либо arhive.php, в зависимости от вашего шаблона. И прописываете вот эту конструкцию в том месте, где должен быть вывод картинки.

Вот так у меня выводятся теперь рубрики.

Вот так выглядит вывод на сайте

Вот так выглядит вывод на сайте

Черкни и ты пару строк

А вы на своих проектах выводите изображения у рубрик? Если да, то микроразметку к ним применяли?

Подписка на блог MASALKIN.NAME
Не упусти шанс получить отличные бонусы!

100% конфидециальность, адреса электронной почты не разглашаются и не предоставляются третьим лицам для коммерческого или некоммерческого использования.

Благодарность читателям

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

P.S. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

  • Добрый день, Андрей! Прежде всего, спасибо за то, что откликнулись! Через вашу функцию у меня в каждой рубрике стал выводиться список рубрик. Ну и после этого содержание рубрики. Миниатюру рубрики разметило, однако обязательные для google поля height, url, width, — так и остались пустыми.

    • Масалкин Андрей

      Так, разметка нужна для google? Просто с яндексом они отличаются:) И у одной будут ошибки:) Я прописал правило актуальное для яндекса.

  • Как быть со списком рубрик?

    • Масалкин Андрей

      Добавил код, который выводит изображение только текущей категории.

  • Роман

    Привет. Смотрю у тебя дизайн немного изменился)

    У меня вопрос не совсем по теме. Ты ведь с WooCommerce используешь вроде? Там можно сделать калькулятор наподобие как здесь: denga.ru

    Или с помощью каких средств это можно сделать? Тут мне уже подсказали что можно вроде как вытащить с деньги, но честно говоря с «вытаскиванием» первый раз сталкиваюсь)

    Ещё раз прошу простить за вопрос не по теме) (второй день загадку решаю))

    • Масалкин Андрей

      Привет! Ага, немного изменил миниатюры :)

      Не, WooCommerce ни разу, нигде не использовал. Считаю его не очень удачным решением для интернет — магазинов:)

      Вытащить с их сайта можно. Открываешь исходный код страницы, находишь там калькулятор. Копируешь на свою HTML страничку. Дальше фаербагом находишь стили, копируешь их. Ну и js код, который используется в калькуляторе.

    • Масалкин Андрей

      Как вариант посмотри на плагин WordPress Creator Calculator, если нужен калькулятор для WP. Там вроде есть решение с ползунками.

      • Роман

        Да, спасибо. Все дороги ведут к JS походу)

        Тогда ещё один вопрос. Как тебе bootstrap — смотрю сейчас часто стали его упоминать. Вот копаю. Делаю сайт (для тренировки) с калькулятором, вообщем что-то похожее на сайты микрозаймов, типа деньги (структура интересная), думаю может бу. подключить

        • Масалкин Андрей

          Бутстрап не нравится:) Очень много лишнего кода генерирует, приходится подчищать постоянно.

          По сути, бутстрап сделали чтобы быстро накидать рабочий прототип:) Предпочитаю с 0 верстать. Быстрее получается, чем бутстрап править потом.

          Но как уже сказал, если нужно быстро рабочий вариант запустить, то можно и бутстрап. У него кстати тоже есть эти ползунки:)

          • Роман

            Ну таки все сделал, в трёх вариантах, только ни в одном внешний jc файл подключить не могу)

          • Масалкин Андрей

            Так ты внешний не подключай, ты его себе скопируй:)

  • Кто-то у меня недавно в комментариях спрашивал про это, знал бы про статью, дал бы ссылку )

x

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение