Выпадающий список с выбором категорий
Я создал сайт-каталог с выпадающими списками в меню, позволяющими пользователю перемещаться по категориям и подкатегориям. [Вебсайт]
Я использую 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;

Вот вариант кода, который вы используете. Здесь я применяю 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>';
}
?>

Вы можете просто изменить скрипт выше на следующий:
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

Я хотел добавить это как комментарий, но у меня пока недостаточно репутационных баллов :)
Я потратил около 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".
Надеюсь, эта информация вам поможет!
Пол
