Прежде всего нам необходим доступ к файлам нашего шаблона. Проще всего работать с файлами шаблона через протокол FTP с использованием FileZilla или WinSCP (в частности, я им пользуюсь, мне он больше нравится). Есть и другие способы работы с файлами шаблона, самый извращенный это подключившись по SSH, его я опущу, не думаю, что кто-то выберет его. Другие два:
- Через панель Администратора WordPress. Для этого Вам необходимо зайти вот сюда "Внешний вид -> Редактор тем". Тут Вы сможете добраться и отредактировать любой из файлов, любой из установленных тем на Вашем сайте.
- Тут Вам потребуется установить дополнительный плагин файлового менеджера. Например, этот File Manager, довольно стабильный плагин, нет правда поддержки русского (на момент написания статьи), но это не беда, там иконки, думаю у Вас не возникнет проблем с его освоением.
Еще не определились с хостингом, Вам сюда beget.com, цены не кусаются, удобно, живая тех.поддержка, мне пока нравится.
Регистрируем новое место для виджетов
Теперь, нам надо добавить новое место для виджетов. Так как мы уже научились и знаем, что фильтр товаров мы выводим с помощью стандартных виджетов. Ищем в файлах темы, которые находятся по следующему пути "wp-content/theme/<название вашей текущей темы>", от корня сайта, файл functions.php, открываем его для редактирования. В самый конец добавляем следующий код:
register_sidebar( array( 'name' => 'Up Category WooCommerce', 'id' => 'upcatwoo', 'before_widget' => '', 'before_title' => '', 'after_title' => '
' ) );
Ячейку массива name, это где "'Up Category WooCommerce", Вы, можете заполнить по своему усмотрению, в том числе и русским названием, данное название будет отображаться в "Внешний вид -> Виджеты" как название области для размещения виджетов. Всё остальное тоже на Ваше усмотрение, но уже исключительно латиницей. Ячейки массива:
- name – название области для виджетов;
- id – alias уникальный код области виджетов, с помощью него мы сможем вывести нашу область в шаблоне;
- before_widget – то что будет прописываться перед каждым виджетом добавленным в эту область, при его выводе в шаблоне;
- after_widget – то что будет прописываться после каждого виджета добавленным в эту область, при его выводе в шаблоне;
- before_title – то что прописывается перед заголовком каждого виджета;
- after_title – то что прописывается после заголовка каждого виджета.
Как видите я обернул каждый виджет в тег div, а заголовок виджета в тег h3. Как Вы, уже догадались, это необходимо чтобы навести марафет виджетам с помощью CSS.
Можно вообще, ничего не писать в последних 4 и опустить данные ячейки, это допустимо.
Встраиваем область виджетов в шаблон
Уже сейчас, после сохранения измененного файла function.php, Вы, сможете увидеть новую область для виджетов. И да, Вы уже можете накидать туда виджеты Ваших фильтров товара по слоям. Теперь осталось дело за малым, отобразить нашу область вывода виджетов в шаблоне. Для этого опять обращаем свой взор на каталог темы и находим папку woocommerce. Уже в ней, находим файл archive-product.php (если там есть файл taxonomy-product_cat.php, то правим его), открываем его для редактирования. Если там нет такого файла, то идём по следующему пути "wp-content/plugins/woocommerce/templates", из корня Вашего сайта, и оттуда копируем этот файл в папку woocommerce Вашей темы и открываем его для редактирования. И после 46 строки вставляем следующую конструкцию отображения нашей области виджетов:
<?php dynamic_sidebar( 'upcatwoo' ); ?>
Содержание файла archive-product.php может отличаться от его первоначального вида, которые поставляется с плагином woocommerce, так как разработчики тем подстраивают под свою тему работу плагина. Поэтому Вам надо понять в коде, где начинается вывод товаров. С этой целью ищем вот такие строки:
<?php /** * woocommerce_before_shop_loop hook * * @hooked woocommerce_result_count - 20 * @hooked woocommerce_catalog_ordering - 30 */ do_action( 'woocommerce_before_shop_loop' ); ?>
Важно! Если над этими строками будет какое-либо количество условной конструкции php, а она там будет, над ней уже вставляем код для отображения нашей области виджетов.
Всё сохраняем и смотрим результат, далее с помощью CSS придаём необходимый вид нашим виджетам фильтра товаров.
На этом всё, добра Вам и успехов в жизни!
Алекс
- 03 апреля 2020, 18:10 0 ↓Лия
- 31 июля 2020, 14:43 0 ↓Sart
- 25 ноября 2020, 15:26 0 ↓Роман
- 26 ноября 2020, 15:34 0 ↓// Малые девайсы («ландшафтные телефоны», >= 576px)
@media (min-width: 576px) {… }
// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) {… }
// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) {… }
// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) {… }
Sart
- 29 ноября 2020, 20:47 0 ↑ ↓Дмитрий
- 11 декабря 2020, 23:34 0 ↓Роман
- 12 декабря 2020, 03:09 0 ↑ ↓Максим
- 07 января 2021, 19:58 0 ↓Виктор
- 15 марта 2021, 23:21 0 ↓Роман
- 16 марта 2021, 15:25 0 ↓У Вас в теме присутствуют разные шаблоны, в частности (в корне темы) page.php, single.php, arhive.php и т.д. их много разных может быть. Так же есть папка woocommerce в ней уже находятся шаблоны для страниц магазина archive-product.php, content-product.php и т.д. Если в теме не предусмотрен сайдбар, то его можно в этих шаблонах добавить. То есть с помощью вёрстки Вы добавляете область и в неё вписываете вывод dynamic_sidebar('upcatwoo'); своего места под виджеты.
Дмитрий
- 18 октября 2022, 16:19 0 ↓Александр
- 23 декабря 2022, 14:15 0 ↓1 создал область виджетов как указано в статье выше
2 Добавил в виджет шорт код фильтра из плагина (у меня плагин Product Filter by WooBeWoo)
3 Если добавить код <?php dynamic_sidebar('upcatwoo'); ?> в archive-product.php (как советует автор статьи), то он будет отображаться только на страницах категорий товаров. Поэтому я добавил этот кусок кода в файл: плагины/woocommerce/loop/orderby.php после строки:
if (! defined( 'ABSPATH' ) ) {exit;}?>
4 далее все очень просто — работа с css для того, чтобы скрыть эту область виджитов на пк (потому, что на пк работает штатный сайтбар: @media (min-width: 551px) {
#\31 s {
display: none;
}}
и отобразить на мобильном при этом скрыв основной сайтбар:
@media (max-width: 550px) {
#\31 s {
display: block;
}#sidebar{
display: none;}}
Спасибо автору за совет, очень помогло