Множественная фильтрация облаков тегов

Я пишу плагин, который создает пользовательский тип сообщения и две связанные пользовательские таксономии. Страница персонализированного списка типов / архивов должна быть фильтруема по срокам в одной или обеих таксономии, то есть не только в виде фильтра по одному таксономическому термину. Фильтры должны отображаться как два отдельных облака тегов.

Кто-нибудь имеет опыт внедрения этой функции и может рекомендовать любые подходящие плагины?

Solutions Collecting From Web of "Множественная фильтрация облаков тегов"

Для этого вам не нужен предварительно построенный плагин, или вы можете создать свой собственный тонкий плагин. Вот как я решил проблему:

  1. Вам нужно приложение, чтобы помнить уже выбранный фильтр и передавать все значения фильтров каждый раз, когда вы меняете свой выбор.
  2. Поэтому ваша самая безопасная ставка заключается в создании формы с таким количеством полей <select> как таксономии, которые вы хотите фильтровать.
  3. Вы заполняете эти поля всеми вашими условиями, а затем скрываете форму. Значение <option> s будет равно числу slug-термина.
  4. Затем вы wp_tag_cloud стандартное облако wp_tag_cloud с помощью wp_tag_cloud и wp_tag_cloud его к скрытым фильтрам <select> используя JavaScript.
  5. Каждый раз, когда вы нажимаете на ссылку в облаке, вы меняете соответствующий фильтр окна <select> и отправляете форму.
  6. Когда форма отправлена, вы получите настройки фильтра из $_GET и запросите и отфильтруйте сообщения, используя new WP_Query .
  7. Появятся запрошенные сообщения. Легко!

Ниже приведен пример реализации. Вы можете перечислить столько таксономий, которые вы хотите. Перед попыткой использовать его перед загрузкой jQuery:

 <?php // List all taxonomies you want to bind $taxonomies = array( 'genre', 'writer' ); // Creates the supplementary $genres_list, $writers_list, ... taxonomies holding all their terms foreach( $taxonomies as $taxonomy ) ${$taxonomy . 's_list'} = get_terms( $taxonomy, array() ); ?> <!-- Create the hidden <select>s that will filter our data --> <form method="GET" id="filter-manager"> <?php foreach( $taxonomies as $taxonomy ): ?> <select id="<?= $taxonomy ?>_filter" name="<?= $taxonomy ?>_filter"> <option value="">(none)</option> <?php foreach( ${$taxonomy . 's_list'} as $taxonomy_object ): ?> <?php $selected = ( isset( $_GET[$taxonomy . '_filter'] ) && $_GET[$taxonomy . '_filter'] === $taxonomy_object->slug ) ? ' selected="selected"' : ''; ?> <option value="<?= $taxonomy_object->slug ?>"<?= $selected ?>><?= $taxonomy_object->name ?></option> <?php endforeach; ?> </select> <?php endforeach; ?> </form> <?php // Display the tag clouds for all taxonomies foreach( $taxonomies as $taxonomy ) { $cloud = wp_tag_cloud( array( 'taxonomy' => $taxonomy, 'echo' => false ) ); // Add the taxonomy data to each link $cloud = preg_replace( '~>([^<]+)<~U', ' data-taxonomy="' . $taxonomy . '">$1<', $cloud ); echo $cloud; } ?> <script> (function($) { // Hide the filter manager $form = $('#filter-manager'); $form.find('select').on('change', function() { $form.submit(); }).hide(); // Pass the cloud clicks to the appropriate filter manager $('a[class*="tag-link"]').on('click', function(e) { e.preventDefault(); var taxonomy = $(this).data('taxonomy'); var $link = $(this); $form.find('select#' + taxonomy + '_filter option').filter( function() { return ( $(this).text() == $link.text() ); }).prop('selected', true); $form.find('select#' + taxonomy + '_filter option').trigger('change'); }); })(jQuery); </script> <?php // Construct WP_Query args, change as you see fit $args = array( 'post_type' => 'post', 'posts_per_page' => -1 ); // Creates the WP_Query that filters only the posts we want foreach( $taxonomies as $taxonomy ) if ( isset( $_GET[$taxonomy . '_filter'] ) and (bool) $_GET[$taxonomy . '_filter'] === true ) $args = array_merge( $args, array( $taxonomy => $_GET[$taxonomy . '_filter'] ) ); $filtered_posts = new WP_Query( $args ); // List filtered posts while( $filtered_posts->have_posts() ): $filtered_posts->the_post(); ?> <div class="post"> <?php echo '<h2>' . get_the_title() . '</h2>'; the_content(); ?> </div> <?php endwhile;