Вопрос или проблема
Я хочу создать фильтр шире, чем одна ширина таксономии, используя Ajax и jQuery. Демо, которое я хочу закодировать: http://gycweb.org/resources/ Я пытался закодировать с этим демо: http://dinhkk.com/demo/ajaxfilter/
Проблема в том, что я не могу одновременно отправить информацию из двух меню на правой боковой панели в Ajax данные.
Кто-нибудь может помочь мне с решением??
Я верю, что WordPress может обрабатывать несколько параметров запроса по умолчанию.
Вы можете загрузить http://wordpresssite.com/?taxonomy-1=term-a&?taxonomy-2=term-b, чтобы запросить все посты, которые принадлежат термину а (в таксономии 1) И термину b (в таксономии 2).
Используйте функцию jQuery load() для загрузки нужного параметра запроса в зависимости от выбранного элемента на боковой панели.
Надеюсь, это поможет.
Ответ или решение
Чтобы реализовать фильтрацию постов по нескольким таксономиям с использованием AJAX и jQuery в WordPress, вам необходимо следовать нескольким шагам. Ниже приведено полное руководство по созданию такого фильтра.
Шаг 1: Создание пользовательского AJAX-запроса
Вам потребуется создать обработчик AJAX-запроса в вашей функции functions.php. Вот пример:
add_action('wp_ajax_my_filter', 'my_filter_function');
add_action('wp_ajax_nopriv_my_filter', 'my_filter_function');
function my_filter_function() {
$args = array(
'post_type' => 'your_post_type', // Замените на свой тип поста
'tax_query' => array('relation' => 'AND'), // Используем AND для фильтрации по нескольким таксономиям
);
if (isset($_POST['taxonomy_1'])) {
$args['tax_query'][] = array(
'taxonomy' => 'taxonomy-1', // Замените на свою таксономию
'field' => 'slug',
'terms' => $_POST['taxonomy_1'],
);
}
if (isset($_POST['taxonomy_2'])) {
$args['tax_query'][] = array(
'taxonomy' => 'taxonomy-2', // Замените на свою таксономию
'field' => 'slug',
'terms' => $_POST['taxonomy_2'],
);
}
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) : $query->the_post();
// Здесь вы выводите ваши посты
echo '<h2>' . get_the_title() . '</h2>';
endwhile;
} else {
echo 'Нет постов!';
}
wp_die();
}Шаг 2: JavaScript для обработки выборки на стороне клиента
Теперь необходимо создать JavaScript для отправки запросов на сервер при выборе значения в фильтрах. Этот скрипт должен использовать jQuery.
<script>
jQuery(document).ready(function($) {
// Отслеживаем изменения в селекторах
$('#taxonomy_1_select, #taxonomy_2_select').change(function() {
var taxonomy1 = $('#taxonomy_1_select').val();
var taxonomy2 = $('#taxonomy_2_select').val();
$.ajax({
url: ajaxurl, // стандартный адрес для AJAX в WordPress
type: 'POST',
data: {
action: 'my_filter',
taxonomy_1: taxonomy1,
taxonomy_2: taxonomy2
},
success: function(response) {
$('#your-post-container').html(response); // Замените на ваш контейнер
}
});
});
});
</script>Шаг 3: Добавление селекторов таксономий в HTML
Не забудьте добавить соответствующие селекторы на свою страницу:
<select id="taxonomy_1_select">
<option value="">Выберите таксономию 1</option>
<!-- Здесь добавьте опции для первой таксономии -->
</select>
<select id="taxonomy_2_select">
<option value="">Выберите таксономию 2</option>
<!-- Здесь добавьте опции для второй таксономии -->
</select>
<div id="your-post-container">
<!-- Здесь будут выводиться посты -->
</div>Шаг 4: Проверка и отладка
После выполнения вышеперечисленных шагов проверьте работу фильтров. Убедитесь, что все селекторы правильно связаны, и что обработчик AJAX срабатывает.
Заключение
Таким образом, вы можете реализовать фильтрацию постов по нескольким таксономиям с использованием AJAX и jQuery в WordPress. Убедитесь, что вы правильно указываете свои таксономии и адаптируете код в соответствии с вашей структурой проекта. Если возникнут дополнительные вопросы, не стесняйтесь их задавать!