Решено Добавить кастомный сайдбар

[Ollti]

Добрый день.

Подскажите пожалуйста как добавить кастомную зону виджетов, показывающийся только на страницах каталога в который можно будет добавлять виджеты из woocommerce.

Перерыл довольно много инфы, но либо я овощ, либо материалы уже не актуальны:

Спойлер: ресурсы

Например:
http://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
http://dineshkarki.com.np/add-widgets-from-shortcode-in-post-page.html

Результат либо: в бэкенде не показывается зона, либо заменяет главный сайдбар...
Надеюсь на вашу помощь!

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

Надеюсь на помощь с реализацией.

 

[searchingman]

Готовое решение под Вашу тему, скорее всего, никто не будет писАть просто так, но общее направление примерно такое.

1. Если сайдбара в нужной части нет, то его нужно создать и вставить в нужное место соответствующего шаблона.
Неплохой мануал, поясняющий что такое сайдбары и виджеты , как их создавать, чтобы они были видны в админке и в публичной части сайта.
При размещении сайдбара на нужных страницах (каталог, карточка товара и т.д.) можно пользоваться условными функциями WooCommerce или каким-нибудь плагином, н-р, WooSidebars.

2. Если Ваш блок-сайдбар должен показываться только для мобильных устройств, то есть 2 способа его скрыть/показать:
2.1. Перед его отображением/скрытием нужно определить мобильное устройство на стороне сервера (более правильное решение).
Для определения мобильных устройств многие используют довольно известную библиотеку Mobile Detect , на базе которой существует плагин WP Mobile Detect.
2.2. Скрыть/показывать блок-сайдбар с помощью медиа-запросов на стороне клиента. В этом случае весь код в любом случае будет на странице, но будет скрываться/показываться стилями.
Скорее всего, внешний вид блоков на мобильных устройствам нужно будет кастомизировать с помощью стилей.
Динамику показа/скрытия блока создают с помощью JavaScript-а с помощью изменения или присваивания определенных стилей.

 

[Ollti]

Огромное спасибо за наводку!!! По мануалу всё заработало так, как должно было.
Единственная проблема - нужен простой скрипт, который должен менять класс div-у, в который обёрнут сайдбар при нажатии на кнопку и возвращать назад при повторном нажатии. И способ корректно вставить этот скрипт. Буду благодарен за помощь!

 

[searchingman]

jQuery изменить класс по клику
Для подключения скрипта в Wordpress используйте функцию wp_enqueue_script()

 

[Ollti]

Что в итоге получилось
Есть фиксированный блок div.mobile_filter собственно с самими фильтрами, находящийся в обёртке .site-content .col-full
Есть кнопка a.mob-filter-butt, находящаяся в .site-footer .col-full .storefront-handheld-footer-bar ul li, которая должна добавлять класс .active к блоку с фильтрами.
Сам скрипт:

$(document).ready(function(){
    $('a.mob-filter-butt').click(function () {
        $(".mobile-filter").toggleClass('active');
        });
    });

Скрипт вставлен через functions.php:

function my_scripts_filter() {
    wp_enqueue_script('filter',
        get_template_directory_uri( '/assets/js/filter.js', __FILE__ ),
        array('jquery')
    );
}  
add_action( 'wp_enqueue_scripts', 'my_scripts_filter' );

Скрипт превосходно работает в песочнице, но напрочь отказывается работать на самом сайте.
1. В чём может быть проблема?
2. Как div с фильтрами добавить непосредственно в .storefront-handheld-footer-bar, так же как там распологается строчка поиска и выдвигается при нажатии?
В данный момент блок с фильтрами реализован так:

Спойлер

Functions.php:
function true_register_wp_sidebars() {
    register_sidebar(
        array(
            'id' => 'mobile-filter', // уникальный id
            'name' => 'Фильтры на мобильных устройствах', // название сайдбара
            'description' => 'Перетащите сюда виджеты, чтобы добавить их в сайдбар.', // описание
            'before_widget' => '<div id="%1$s" class="side-widget %2$s">', // по умолчанию виджеты выводятся <li>-списком
            'after_widget' => '</div>',
            'before_title' => '<h3 class="mob-filter-heading">', // по умолчанию заголовки виджетов в <h2>
            'after_title' => '</h3>'
        )
    );
}
add_action( 'widgets_init', 'true_register_wp_sidebars' );

в файл sidebar.php:
<?php if ( is_active_sidebar( 'mobile-filter' ) ) : ?>
    <div class="mobile-filter">
        <?php dynamic_sidebar( 'mobile-filter' ); ?>
    </div>
<?php endif; ?>

 

[searchingman]

У Вас скрипт показывается на странице?
Очень смущает, конструкция с get_template_directory_uri(). Почему она с параметрами?
Вот ее синтаксис из codex.

Если у Вас используется дочерняя тема, то лучше использовать get_stylesheet_directory_uri()

 

[Ollti]

Вы правы, дело было в параметрах. Такие параметры были в одном из уроков по wp - "инициализация скрипта, зависимого от jquery"

function my_scripts_filter() {
     wp_enqueue_script( 'filter',
        get_template_directory_uri() . '/assets/js/filter.js',
        array('jquery')
    );
}   
add_action( 'wp_enqueue_scripts', 'my_scripts_filter' );

Сам скрипт дополнил:

( function( $ ) {
    $( window ).load( function() {
        $('a.mob-filter-butt').click(function () {
             $(".mobile-filter").toggleClass('active');
         });
    } );
} )( jQuery );

Всё заработало!

Единственное что теперь не нравится, это расположение самого блока в файле sidebar.php, можно его как-то подгружать через functions.php непосредственно в storefront-handheld-footer-bar на примере поиска?