Миниатюры для рубрик в WordPress

Приветсвую вас на страницах моего блога!

Вчера только вернулся из отпуска и сразу же решил написать небольшую статейку про плагин вордпресс ACF (Advanced Custom Fields).

В этом посте мы рассмотрим одну очень полезную возможность плагина Advanced Custom Fields (это плагин без которого, на мой взгляд, трудно обойтись, создавая сайты на WordPress), которая позволяет добавлять миниатюры для рубрик. Данный плагин обладает большим количеством возможностей, но мало кому известно, как с помощью него организовать то, что мы сейчас будем делать.

И так, начнем…

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

1. Установка и настройка плагина.

Первым делом скачиваем плагин и устанавливаем его. После установки и активации плагина, внизу основного меню появится новый пункт Custom Fields. Кликаем по нему, затем на открывшейся странице нажимаем кнопку Add New.

11

После чего заполняете следующие поля:

Заголовок — отображается в группах полей;

В группе Location из списка Post Type выбираете пункт Taxonomy Term и в правом списке, где All выбираете Рубрики;

После этого нажимаете кнопку Add Field

22

Далее откроется еще одна группа полей для заполнения:

  • Field Label — отображается над кнопкой добавления изображения;
  • Field Name — имя поля (желательно латинскими символами);
  • Field Type — тип поля (в нашем случае image);
  • Return Value — указываем Image Object;
  • Preview Size — оставляем как есть (оно нам не понадобится);

33

44

Заполнив все поля нажимаем кнопку опубликовать.

55

Переходим в рубрики, что бы посмотреть появилось поле или нет.

66

Если сделали все правильно, то поле появится.

77

Теперь Вы можете задавать миниатюры для своих рубрик, нажав на кнопку Add Image.

2. Вывод рубрик с миниатюрами в теме.

После того как Вы добавите рубрики и миниатюры к ним, Вам нужно будет их каким-то образом вывести. Делается это следующим образом:

<ul>
    <?php
        $categories = get_categories(array('hide_empty' => 0,'exclude' => 1,'parent' => 0,'orderby' => 'ID'));
        foreach ($categories as $cat) {
            $id = $cat->cat_ID;
            $link = get_category_link($id);
            $img_arr = get_field('cat-thumbnail', 'category_'.$id);
                echo '
                    <li class="cat">
                        <a href="'.$link.'" title="'.$cat->cat_name.'">
                            <img src="'.$img_arr['sizes']['thumbnail'].'" alt="'.$img_arr['alt'].'" />
                            <span>'.$cat->cat_name.'</span>
                        </a>
                    </li>';
        }
    ?>
</ul>

Подробнее о том, что сделано. С помощью функции get_categories мы получили массив объектов содержащих информацию о категориях. Передав этой функции некоторые параметры:

  • hide_empty — значение 0 (показывать пустые категории);
  • exclude — значение 1 (не показывать категорию с id 1);
  • parent — значение 0 (вывод только основных родительских рубрик);
  • orderby — сортировка по id.

Затем прошлись по массиву с помощью foreach. Получили id категорий и далее с помощью функции get_category_link получили ссылки на категории.

После этого, воспользовавшись функцией get_field установленного нами плагина Advanced Custom Fields получили массив данных об изображениях. Передав параметры cat-thumbnail (имя поля, которое мы заполняли) и category_ (указав после подчеркивания id категорий). Потом вывели необходимые нам значения, а именно, ссылку на миниатюру и альтернативный текст.

Таким способом Вы можете в любом месте Вашей темы вывести необходимые рубрики с миниатюрами. Более подробную информацию по дополнительным полям смотрите здесь.

3. CSS

Также можно применить немного стилей.

li.cat {
  display: block;
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 10px;
  border: 5px solid #f3f3f3;
}

li.cat span {
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  bottom: 15px;
  background: rgba(0,0,0,0.7);
  padding: 5px 0;
  color: #fff;
}

На этом все… Надеюсь Вам это было полезным!

До скорых встреч!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
6 комментариев к статье "Миниатюры для рубрик в WordPress"
  1. Юрич: 26.12.2019 в 20:17

    Саша, не копируйте — это не ваше!

  2. Саша: 26.12.2019 в 18:58

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

  3. Юрич: 10.05.2019 в 12:44

    Все прекрасно копируется, дружище))) http://prntscr.com/nmqhse
    Я не ставил никаких блокировок — все для вас)

  4. Роман: 10.05.2019 в 04:12

    Зачем писать в посте пхп код, который даже скопировать нормально нельзя? http://prntscr.com/nmmekg

  5. Юрич: 18.12.2016 в 09:45

    Приветствую, homeprorab.info!
    Странно что не получается))) Могу помочь вывести, но мне будут нужны доступы к админке вашего сайта. А просто глянув на ваш сайт я вам ничего подсказать не смогу.

  6. homeprorab.info: 18.12.2016 в 04:40

    Здравствуйте. У меня на сайте wordpress картинка рубрики отсутствует. Сделал вроде все как вы описали но добавить миниатюру не могу. Подскажите что мне делать?

Заказать сайт