Выпадающий список с выбором категорий

7 окт. 2014 г., 20:39:57
Просмотры: 27.8K
Голосов: 3

Я создал сайт-каталог с выпадающими списками в меню, позволяющими пользователю перемещаться по категориям и подкатегориям. [Вебсайт]

Я использую wp_dropdown_categories() для отображения меню и JavaScript, опубликованный здесь, чтобы позволить пользователю выбрать категорию и перейти на соответствующую страницу. Когда выбрано 'Все категории', ничего не происходит. Как можно добавить эту функциональность?

$args = array(
    'show_option_all'    => 'Все категории',
    'show_option_none'   => 'ОБЗОР',
    'orderby'            => 'NAME', 
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1, 
    'child_of'           => 0,
    'exclude'            => 1,
    'echo'               => 1,
    'selected'           => $cat_id2->term_id,
    'hierarchical'       => 1, 
    'name'               => 'cat',
    'id'                 => '',
    'class'              => 'postform',
    'depth'              => 1,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,
);

wp_dropdown_categories( $args );

JS

<script type="text/javascript">
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;

6
Комментарии

Вы используете пример Javascript 1 или 2 из codex для wp_dropdown_categories? Можете также предоставить Javascript код?

RachieVee RachieVee
8 окт. 2014 г. 23:25:22

JS код теперь предоставлен выше.

MF1 MF1
12 окт. 2014 г. 03:41:17

$cat_id2 не определена. И ваша переменная "dropdown" равна null при загрузке страницы. Функция не запускается при изменении выбранного пункта в выпадающем списке, только при загрузке страницы. Возможно, вам потребуется помощь с JS, так как это не моя специализация. Похоже, ваша единственная проблема с PHP - это неопределенная $cat_id2. Надеюсь, это поможет.

RachieVee RachieVee
23 окт. 2014 г. 19:10:43

Поможет ли, если я предоставлю ссылку на мой сайт?

MF1 MF1
23 окт. 2014 г. 19:19:23

Конечно. Чем больше информации вы предоставите, тем лучше. Надеюсь, кто-то сможет помочь вам, если у меня не получится. Удачи! :-)

RachieVee RachieVee
23 окт. 2014 г. 19:28:11

Добавил выше....

MF1 MF1
23 окт. 2014 г. 19:35:06
Показать остальные 1 комментариев
Все ответы на вопрос 3
0

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

Однако есть и другие изменения, которые необходимо внести для его работы. При выборе опции Все категории вы будете перенаправлены на страницу, которая отобразит всё, что вам нужно. Эту страницу вам придётся создать вручную.

Как вы, возможно, знаете, в WordPress нет архивных страниц индекса (ознакомьтесь с этой статьёй, которую я написал на эту же тему). Это означает, что domain.com/category/ возвращает ошибку 404.

Чтобы всё заработало, вам нужно сделать копию файла page.php, переименовать её, например, в page-category.php (см. кодекс о создании пользовательских шаблонов страниц), открыть его и создать пользовательский запрос для отображения нужного контента при посещении этой страницы.

Теперь вам нужно создать страницу в админ-панели. Я рекомендую использовать слаг category, чтобы при переходе на domain.com/category/ отображалась именно эта страница (помните, что вы не можете создавать дочерние страницы для неё, это нарушит иерархию). Я также изменил код, чтобы при выборе Все категории происходил переход на domain.com/category/.

В остальном код должен работать корректно. Вам лишь нужно проверить структуру URL и настроить параметры в get_categories() под свои нужды. Вот код выпадающего списка:

<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
    <option value=""><?php echo esc_attr(__('Выберите категорию')); ?></option> 

    <?php 
        $option = '<option value="' . get_option('home') . '/category/">Все категории</option>'; // измените category на ваш пользовательский слаг страницы
        $categories = get_categories(); 
        foreach ($categories as $category) {
            $option .= '<option value="'.get_option('home').'/category/'.$category->slug.'">';
            $option .= $category->cat_name;
            $option .= ' ('.$category->category_count.')';
            $option .= '</option>';
        }
        echo $option;
    ?>
</select>

РЕДАКТИРОВАНИЕ

У меня возникла идея, которая может быть полезной. Недавно я отвечал на вопрос о выводе всех категорий в виде списка с заголовками записей под каждой категорией. Эту же идею можно использовать в шаблоне page-category.php.

Когда пользователь выбирает опцию Все категории, он будет перенаправлен на эту страницу, где отобразятся все категории и заголовки записей.

Вот полный код: (подробное объяснение кода можно найти в моей статье здесь)

В файле functions.php:

add_action( 'transition_post_status', 'publish_new_post', 10, 3 );

function publish_new_post() {
   delete_transient( 'category_list' );
}

В шаблоне, где нужно отобразить список:

<?php
if ( false === ( $q = get_transient( 'category_list' ) ) {

    $args = array( 
        'posts_per_page' => -1
    );

    $query = new WP_Query($args); 

    $q = array();

    while ( $query->have_posts() ) { 

        $query->the_post(); 

        $a = '<a href="'. get_permalink() .'">' . get_the_title() .'</a>';

        $categories = get_the_category();

        foreach ( $categories as $key=>$category ) {

            $b = '<a href="' . get_category_link( $category ) . '">' . $category->name . '</a>';    

        }

        $q[$b][] = $a; // Создаём массив с названиями категорий и заголовками записей
    }


    /* Восстанавливаем оригинальные данные поста */
    wp_reset_postdata();

set_transient( 'category_list', $q, 12 * HOUR_IN_SECONDS );
}

foreach ($q as $key=>$values) {
        echo $key;

        echo '<ul>';
            foreach ($values as $value){
                echo '<li>' . $value . '</li>';
            }
        echo '</ul>';
    }


?>
23 окт. 2014 г. 21:45:37
0

Вы можете просто изменить скрипт выше на следующий:

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
    else if ( dropdown.options[dropdown.selectedIndex].value == 0 ) {
        location.href = "<?php echo get_option('home'); ?>";
    }
}
dropdown.onchange = onCatChange;

Если вы хотите также включить -1 (ПРОСМОТР КАТЕГОРИЙ), вы можете изменить второе условие на: dropdown.options[dropdown.selectedIndex].value <= 0

23 окт. 2014 г. 22:03:25
0

Я хотел добавить это как комментарий, но у меня пока недостаточно репутационных баллов :)

Я потратил около 20 минут на тестирование и изучение вашего кода. Первый тест воспроизвел описанную вами проблему, но когда я установил точки останова (на событие change и конкретную строку кода) и выражения наблюдения с помощью встроенных инструментов отладки Chrome, проблема перестала проявляться. Предполагаю, что либо вы уже исправили проблему, либо произошло какое-то изменение состояния для моей сессии из-за использования инструмента Chrome Inspect, и теперь всё работает.

В вашем JS действительно есть одна ошибка: в каждом месте, где встречается код:

dropdown(x).onchange = onCatChange(x);

(например, строки 567, 4840, 4851) этот код вызывает ошибку, когда значение равно 0 (выбрана опция 'All') и возможно также -1 (выбрана опция 'Browse'), хотя я подозреваю, что это происходит потому, что выбор BROWSE приводит к повторному установлению значения All по умолчанию (что в свою очередь вызывает ошибку).

Возможно, в некоторых случаях эта ошибка приводит к остановке выполнения в зависимости от настроек обработки ошибок Java в браузере? А включение инструментов отладки могло изменить режим выполнения так, что код продолжает работать несмотря на эту ошибку? Просто предположение.

Также, когда я выбираю "Activities" в Dropdown1, "Bowling" в Dropdown2, а затем меняю выбор в Dropdown2 на "All Activities", URL остается:

http://www.mydetroitjewishdirectory.com/category/activities/bowling/

Но содержимое страницы меняется на простой текст "category".

Надеюсь, эта информация вам поможет!

Пол

23 окт. 2014 г. 20:46:19