Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Тема в разделе "Вопросы новичков", создана пользователем Ollti, 13 авг 2016.

  1. Ollti

    Ollti

    Сообщения:
    29
    Симпатии:
    7
    Баллы:
    3
    Добрый день.

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

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

    В целом задумка такова: добавить отдельный блок с фильтрами для мобильных устройств, т.к. из меню пользоваться фильтрами крайне неудобно, который должен появляться по нажатию на:
    [​IMG]
    Надеюсь на помощь с реализацией.
     
  2. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Готовое решение под Вашу тему, скорее всего, никто не будет писАть просто так, но общее направление примерно такое.

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

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

    Ollti

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

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    • Нравится Нравится x 1
  5. Ollti

    Ollti

    Сообщения:
    29
    Симпатии:
    7
    Баллы:
    3
    Что в итоге получилось
    Есть фиксированный блок 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:
    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; ?>
     
  6. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    У Вас скрипт показывается на странице?
    Очень смущает, конструкция с get_template_directory_uri(). Почему она с параметрами?
    Вот ее синтаксис из codex.

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

    Ollti

    Сообщения:
    29
    Симпатии:
    7
    Баллы:
    3
    Вы правы, дело было в параметрах. Такие параметры были в одном из уроков по wp - "инициализация скрипта, зависимого от jquery"
    PHP:
    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 на примере поиска?