Миниатюры для рубрик в WordPress
Приветсвую вас на страницах моего блога!
Вчера только вернулся из отпуска и сразу же решил написать небольшую статейку про плагин вордпресс ACF (Advanced Custom Fields).
В этом посте мы рассмотрим одну очень полезную возможность плагина Advanced Custom Fields (это плагин без которого, на мой взгляд, трудно обойтись, создавая сайты на WordPress), которая позволяет добавлять миниатюры для рубрик. Данный плагин обладает большим количеством возможностей, но мало кому известно, как с помощью него организовать то, что мы сейчас будем делать.
И так, начнем…
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
1. Установка и настройка плагина.
Первым делом скачиваем плагин и устанавливаем его. После установки и активации плагина, внизу основного меню появится новый пункт Custom Fields. Кликаем по нему, затем на открывшейся странице нажимаем кнопку Add New.
После чего заполняете следующие поля:
Заголовок — отображается в группах полей;
В группе Location из списка Post Type выбираете пункт Taxonomy Term и в правом списке, где All выбираете Рубрики;
После этого нажимаете кнопку Add Field
Далее откроется еще одна группа полей для заполнения:
Заполнив все поля нажимаем кнопку опубликовать.
Переходим в рубрики, что бы посмотреть появилось поле или нет.
Если сделали все правильно, то поле появится.
Теперь Вы можете задавать миниатюры для своих рубрик, нажав на кнопку 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 мы получили массив объектов содержащих информацию о категориях. Передав этой функции некоторые параметры:
Затем прошлись по массиву с помощью 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; }
На этом все… Надеюсь Вам это было полезным!
До скорых встреч!