Содержание
Задача 1. Необходимо сделать шорткод, который выводил бы список всех категорий товаров в магазине на Woocommerce. Также, нужно стилизовать список, чтобы дочерние категории сворачивались в родительскую [Примеры №1.1 и №1.2].
Задача 2. Позже появилась похожая задача, но вывести нужно категории вместе с их прикрепленными изображениями [Примеры №2.1 и №2.2], а подкатегории должны появляться во всплывающем списке при наведении курсора, либо разворачиваться при клике на мобильных экранах.
Все категории товаров списком WP-функцией wp_list_categories
See the Pen
Drop down list of categories by qfurs (@qfurs)
on CodePen.
Решение 1. В файле functions.php
вставляем основной код вывода списка категорий Код №1.1. В нем функция WordPress wp_list_categories
[подробней о функции], которая выводит список категорий ссылками. И тут же мы все выведенное добавляем в шорткод [cats_list]
. Сам шорткод добавляем в попап окно. С помощью Код №1.2 и №1.3 стилизуем и заставляем разворачиваться наш список.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
## Шорткод списка категорий function shortcode_cats_list (){ $args_cat = array( 'show_option_all' => '', 'show_option_none' => __('Нет категорий'), 'orderby' => 'count', // 'name' - по названию, 'menu_order' - сортировка как в админе (категории можно перетаскивать) 'order' => 'DESC', 'style' => 'list', // 'list' значит в тег <li>, none - только в <a> 'show_count' => 0, 'hide_empty' => 0, 'use_desc_for_title' => 1, 'child_of' => 0, 'feed' => '', 'feed_type' => '', 'feed_image' => '', 'exclude' => '', 'exclude_tree' => '', 'include' => '', 'hierarchical' => true, 'title_li' => '', 'number' => NULL, 'echo' => 1, 'depth' => 0, 'current_category' => 0, 'pad_counts' => 0, 'taxonomy' => 'product_cat', // тип таксаномии 'product_cat' для Woo (category - рубрики WP, post_tag - метки, nav_menu - меню и др.) 'walker' => 'Walker_Category', 'hide_title_if_empty' => false, 'separator' => '<br />', ); ob_start(); echo '<ul class="big-menu-catalog">'; wp_list_categories( $args_cat ); echo '</ul>'; $output = ob_get_contents(); // всё, что вывели, окажется внутри $output ob_end_clean(); return $output; } add_shortcode ('cats_list', 'shortcode_cats_list'); ## end Шорткод списка категорий |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
/* Раскрывающиеся списки категорий */ .big-menu-catalog { /*display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;*/ /* если убрать Masonry сетку */ column-count: 3; } .big-menu-catalog li { list-style-type: none; margin: 0; } .big-menu-catalog > li { /* -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; width: 30%;*/ /* если убрать Masonry сетку */ display: inline-block; width: 100% !important; text-transform: uppercase; line-height: 1.5; margin: 1rem 0; } .big-menu-catalog li a:hover { color: #199302; text-decoration: underline;} .big-menu-catalog > li > a { color: #199302; font-size: 1.4rem;} .big-menu-catalog > li > ul { margin-top: 5px; padding-left: 0; text-transform: none; } .big-menu-catalog > li > ul > li {font-size: 1.2rem;} .big-menu-catalog > li li.parent > ul { display: none; padding-left: 10px; } .big-menu-catalog > li, .big-menu-catalog > li > ul > li { padding: 5px 30px; position: relative; } .big-menu-catalog > li > ul > li.parent:before { -webkit-transform: translate(-50%,-50%) rotate(0); transform: translate(-50%,-50%) rotate(-90deg); will-change: translate,rotate; } .big-menu-catalog > li li.parent:after { transform: translate(-50%,-50%); will-change: translate,opacity; } .big-menu-catalog > li > ul > li.parent.open:before { /* добавочный класс */ transform:translate(-50%,-50%) rotate(-0deg); width:0; } .big-menu-catalog > li > ul > li.parent:after, .big-menu-catalog > li > ul > li.parent:before { content: ""; position: relative; width: 14px; height: 2px; border-radius: 2px; background-color: #222222; display: block; position: absolute; top: 19px; transition: all .2s ease-in-out; opacity: 1; left: 12px; contain: strict; } .big-menu-catalog > li > ul > li:hover:after, .big-menu-catalog > li > ul > li:hover:before { background-color: #199302; } @media (max-width: 1024px){ .big-menu-catalog { column-count: 2; } .big-menu-catalog > li { width: 50%; } } @media (max-width: 600px){ .big-menu-catalog { column-count: 1; } .big-menu-catalog > li { width: 100%; } } /* end Раскрывающиеся списки категорий */ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* Раскрывающиеся списки категорий */ document.addEventListener('DOMContentLoaded', function(){ // Класс parent для li у которых есть вложенные списки var allLi = document.querySelectorAll('.big-menu-catalog li'); allLi.forEach(function(element, index, arr){ let ulChildren = element.querySelector('ul'); if (ulChildren){ ulChildren.parentNode.classList.add("parent"); } }); // Измененить порядок отображения главных категорий в меню cusomSortMenu('.sidebar-widget .product-categories'); // в сайдбаре cusomSortMenu('.big-menu-catalog'); //в шапке // Свернуть после загрузки все пункты меню в сайдбаре на странице Каталога setTimeout(collapsListMenuSidebar, 100); }); /* Свернуть-развернуть */ jQuery(document).ready(function($) { // без этого иногда бывало «...$ is not a function...» $(".big-menu-catalog > li").click(function(){ var secondtLiUl = event.target.querySelector('.big-menu-catalog > li > ul > li > ul'); var secondtLi = event.target; if ($(secondtLiUl).is(":hidden")) { $(secondtLiUl).slideDown("slow"); } else { $(secondtLiUl).hide("slow"); } secondtLi.classList.toggle("open"); }); }); /* Функция свернуть все открытые пункты меню в садйбаре */ function collapsListMenuSidebar(){ var allCatParentLeftMenu = document.querySelectorAll('.product-categories.with-accordion > li.cat-parent'); allCatParentLeftMenu.forEach(function(element, index, arr){ element.classList.remove("opened"); let i_CatParentLeftMenu = element.querySelector('.et-up-arrow'); i_CatParentLeftMenu.classList.remove("et-up-arrow"); i_CatParentLeftMenu.classList.add("et-down-arrow"); let ul_CatParentLeftMenu = element.querySelector('ul.children'); ul_CatParentLeftMenu.style.display= 'none'; }); } |
jQuery(document).ready(function($) {...});
, т.к. выдавало на одном из сайтов что-то вроде «...$ is not a function...»
Вывод категорий товаров с их изображением
See the Pen
Dropdown list of categories with images by qfurs (@qfurs)
on CodePen.
Решение 2. Нам нужно сделать некое динамическое меню из категорий таким образом, чтобы у главных категорий выводились прикрепленные к ним изображения, а выпадающим списком выводились подкатегории (как в Примерах №2.1 и №2.2). Ну и подключить все это в шорткод [cats_list_2]
, чтобы далее можно было выводить в нужном месте (например, во всплывающем окне). Вывести с изображениями ссылки категорий, по первому решению не получится.
Будем использовать функцию get_categories()
. Получим все категории и дальше будем отбирать и выводить нужные данные по каждой через цикл, расставляя html-теги для придания нужного вида нашему меню.
'img_2'
через плагин ACF и уже через него добавлял им нужные картинки для вывода в меню.Алгоритм:
- В файл
functions.php
вставляем Код №2.1 для создания шорткода вывода ссылок на категории. - В стили добавляем Код №2.2 для нужного вида списка.
- Подключаем javascript Код №2.3 для сворачивания и раскрытия списков категорий. Код должен подключаться после загрузки html-элементов нашего списка категорий.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
## Шорткод 2 (Вариант 2) Список категорий с изображением из пользовательского поля function shortcode_cats_list_2 (){ $prod_cat_args = array( 'taxonomy' => 'product_cat', // тип таксаномии 'product_cat' для Woo (category - рубрики WP, post_tag - метки, nav_menu - меню и др.) 'orderby' => 'id', // по какому полю сортировать 'hide_empty' => false, // скрывать категории без товаров или нет 'parent' => 0 // id родительской категории ); ob_start(); $woo_categories = get_categories($prod_cat_args); echo '<div class="top-nav"><ul class="top-nav__ul-ul">'; foreach ($woo_categories as $woo_cat) { $woo_cat_id = $woo_cat->term_id; //category ID $woo_cat_name = $woo_cat->name; //category name $woo_cat_slug = $woo_cat->slug; //category slug if ($woo_cat_name !== "Misc") { // если ненужна какая-то категория, можно по id через $woo_cat_id echo '<li class="top-nav__li-li">'; echo '<a href="' . get_term_link($woo_cat_id, 'product_cat') . '" class="top-nav__ul-a">'; echo '<span class="top-nav__ul-a-img">'; /* 'img_2' пользовательское поле хранит ссылку на изображение для категорий в ACF // Чтобы получить значение поля для таксаномии в ACF нужно указывать не просто ее ID, а строкой с указанием типа таксаномии 'product_cat_ID' */ $img_2 = get_field('img_2', 'product_cat_' . $woo_cat_id); if( $img_2 ){ echo '<img src="' . $img_2 . '"/>'; } echo '</span>'; /* Если нужны родные (изначально в WP) изображения категорий, то требуется заменить код между echo '<span class="top-nav__ul-a-img">' и echo '</span>' на $category_thumbnail_id = get_woocommerce_term_meta($woo_cat_id, 'thumbnail_id', true); $thumbnail_image_url = wp_get_attachment_url($category_thumbnail_id); echo '<img src="' . $thumbnail_image_url . '"/>'; */ echo '<span class="top-nav__ul-a-title">' . $woo_cat_name . '</span>'; echo '</a>'; // получаем дочерние категории: $child_cats = get_categories(array( 'taxonomy' => 'product_cat', 'child_of' => $woo_cat_id )); if(count($child_cats)){ // выводим ссылки на дочерние категории: ?> <div class="x-open-cat"></div> <div class="top-nav__subnav sub_menu"> <ul class="top-nav__submenu"> <?php foreach ( $child_cats as $key => $cat ) { ?> <li class="top-nav__li-li"> <a class="top-nav__ul-a" href="<?php echo get_category_link($cat->cat_ID); ?>"> <span class="top-nav__ul-a-title"><?php echo $cat->name; ?></span> </a> <?php } ?> </ul> </div> <?php } echo '</li>'; } echo '</ul></div>'; $output = ob_get_contents(); // всё, что вывели, окажется внутри $output ob_end_clean(); return $output; } add_shortcode ('cats_list_2', 'shortcode_cats_list_2'); ## end Шорткод 2 списка категорий (Вариант 2) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 |
/* ## Раскрывающиеся списки категорий 2 */ .top-nav__ul-ul { display: flex; max-width: none; flex-wrap: wrap; list-style: none; margin: 0; } .top-nav__li-li { position: relative; width: 25%; padding: 0 30px 39px 0; } @media only screen and (max-width: 1559px){ .top-nav__li-li { padding-bottom: 20px; } } .top-nav .top-nav__ul-a { font-size: 18px; display: flex; color: #238ac0; flex-wrap: wrap; justify-content: center; } .top-nav__ul-a-img { display: flex; width: 115px; height: 100px; margin-bottom: 15px; align-items: center; justify-content: center; } .top-nav__ul-a-img img { height: 100%; max-width: 100%; } .top-nav__ul-a-title { width: 100%; text-align: center; font-weight: 600; line-height: 1.2; } @media(min-width: 1240px){ .top-nav__ul-ul>.top-nav__li-li:hover .top-nav__subnav { display: block; opacity: 1; } .top-nav__ul-ul .top-nav__li-li:nth-child(4n - 1) .top-nav__subnav, .top-nav__ul-ul .top-nav__li-li:nth-child(4n) .top-nav__subnav { left: auto; right: 100%; } .top-nav__ul-ul .top-nav__li-li:nth-child(4n - 1) .top-nav__subnav:before, .top-nav__ul-ul .top-nav__li-li:nth-child(4n) .top-nav__subnav:before { left: auto; right: -14px; box-shadow: 6px -4px 5px 0px rgb(0 0 0 / 2%); } } .top-nav__submenu { list-style: none; margin: 0; height: 300px; padding: 20px; overflow: auto; } .top-nav__submenu::-webkit-scrollbar { width: 8px; background: #f1f1f1; } .top-nav__submenu::-webkit-scrollbar-button { background: #ffffff; height: 20px; } .top-nav__submenu::-webkit-scrollbar-track { } .top-nav__submenu::-webkit-scrollbar-thumb { width: 6px; background: #238ac0; border-radius: 5px; height: 40%; } .top-nav__submenu .top-nav__ul-a-title { text-align: left; font-size: 15px; } .top-nav__submenu li { width: 100%; margin-bottom: 15px; padding: 0; } .top-nav__subnav { display: none; opacity: 0; position: absolute; top: 115px; transform: translateY(-50%); left: 89%; min-width: 292px; max-height: 300px; z-index: 1; border: 1px solid #f1f1f1; box-shadow: 4px 4px 25px rgb(0 0 0 / 15%); background: #fff; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; -ms-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .top-nav__subnav:before { content: ''; position: absolute; top: 30%; left: -14px; margin-top: -15px; width: 30px; height: 30px; z-index: -1; transform: rotate(45deg); box-shadow: -6px 4px 5px 0px rgb(0 0 0 / 2%); background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } @media(max-width: 1239px){ .top-nav__subnav { padding-bottom: 2rem; min-width: 240px; border: none; } .top-nav__subnav:before { content: none; } .top-nav__li-li { padding-right: 30px; } .top-nav__li-li {width: 33%;} .x-open-cat { position: absolute; display: block; top: 15px; right: 7px; width: 20px; height: 20px; margin: 0 auto; cursor: pointer; z-index: 1; -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .x-open-cat::before { top: 8px; left: 0; width: 100%; height: 3px; } .x-open-cat::after { top: 0; left: 8px; width: 3px; height: 100%; transition: .4s; } .x-open-cat::before, .x-open-cat::after { content: ''; position: absolute; background: #0c71a9; } .x-open-cat.active::after { transform: rotate(90deg); } .x-open-cat.active ~ .top-nav__subnav { position:relative; display: block; opacity: 1; top: 30%; left: 0; box-shadow: none; height: auto; max-height: 300px; } .top-nav__submenu { height: auto; max-height: 300px; } } @media(max-width: 799px){ .top-nav__li-li {width: 50%;} .x-open-cat.active ~ .top-nav__subnav {top: 35%;} } @media(max-width: 599px){ .top-nav__li-li {width: 100%;} .x-open-cat.active ~ .top-nav__subnav {top: 38%;} } /* end Категории 2 */ |
1 2 3 4 5 6 7 8 9 10 11 12 |
document.addEventListener('DOMContentLoaded', function(){ // Класс active для категорий из шорткода-2 (категории с картинками) var xOpenCat = document.querySelectorAll('.x-open-cat'); xOpenCat.forEach(function(element, index, arr){ element.addEventListener('click', function(event){ element.classList.toggle('active'); }); }); }); |