Главная » WordPress » WordPress: Вывод списка категорий ссылками и с изображениями

WordPress: Вывод списка категорий ссылками и с изображениями

Задача 1. Необходимо сделать шорткод, который выводил бы список всех категорий товаров в магазине на Woocommerce. Также, нужно стилизовать список, чтобы дочерние категории сворачивались в родительскую [Примеры №1.1 и №1.2].

Задача 2. Позже появилась похожая задача, но вывести нужно категории вместе с их прикрепленными изображениями [Примеры №2.1 и №2.2], а подкатегории должны появляться во всплывающем списке при наведении курсора, либо разворачиваться при клике на мобильных экранах.

Все категории товаров списком WP-функцией wp_list_categories

Пример №1.1: Видео — Всплывающее окно со списком категорий товаров в Woocommerce

See the Pen
Drop down list of categories
by qfurs (@qfurs)
on CodePen.

Пример №1.2: Живой пример раскрывающегося списка

Решение 1. В файле functions.php вставляем основной код вывода списка категорий Код №1.1. В нем функция WordPress wp_list_categories [подробней о функции], которая выводит список категорий ссылками. И тут же мы все выведенное добавляем в шорткод [cats_list]. Сам шорткод добавляем в попап окно. С помощью Код №1.2 и №1.3 стилизуем и заставляем разворачиваться наш список.

Код №1.1: Шорткод вывода списка всех категорий
Код №1.2: CSS-стили для реализации разворачивающихся списков категорий
Код №1.3: Javascript для реализации разворачивающихся списков категорий (должен быть jQuery)
В Код №1.3 обвернул в jQuery(document).ready(function($) {...});, т.к. выдавало на одном из сайтов что-то вроде «...$ is not a function...»

Вывод категорий товаров с их изображением

Пример №2.1: Видео — Всплывающее окно со списком категорий товаров и их изображениями Woocommerce

See the Pen
Dropdown list of categories with images
by qfurs (@qfurs)
on CodePen.

Пример №2.2: Живой пример раскрывающегося списка с изображениями

Решение 2. Нам нужно сделать некое динамическое меню из категорий таким образом, чтобы у главных категорий выводились прикрепленные к ним изображения, а выпадающим списком выводились подкатегории (как в Примерах №2.1 и №2.2). Ну и подключить все это в шорткод [cats_list_2], чтобы далее можно было выводить в нужном месте (например, во всплывающем окне). Вывести с изображениями ссылки категорий, по первому решению не получится.

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

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

Алгоритм:

  1. В файл functions.php вставляем Код №2.1 для создания шорткода вывода ссылок на категории.
  2. В стили добавляем Код №2.2 для нужного вида списка.
  3. Подключаем javascript Код №2.3 для сворачивания и раскрытия списков категорий. Код должен подключаться после загрузки html-элементов нашего списка категорий.

Код №2.1: Шорткод вывода списка всех категорий с их изображениями WordPress

Код №2.2: CSS-стили для реализации разворачивающихся/всплывающих списков категорий
Код №2.3: Javascript для реализации разворачивающихся списков категорий
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии