Filtern Sie benutzerdefinierte Post-Typ-Archivseite mit benutzerdefinierten Taxonomien (Kategorien) mit AJAX

Ich habe einen benutzerdefinierten Beitragstyp (Projekte) mit verschiedenen benutzerdefinierten Taxonomien (Projektkategorien) erstellt.

Ich möchte einen Filter für Kategorien erstellen, aber mit AJAX, also ohne die Seite jedes Mal neu zu laden.

Dies ist, was ich befolgt habe:

Wie filtert man Post-Daten mit AJAX auf der Seite?

und das ist der Leitfaden:

AJAX Filter Posts By Tag

Hier mein Code

function.php

function ajax_filter_posts_scripts() { // Enqueue script wp_register_script('afp_script', get_template_directory_uri() . '/assets/js/ajax-filter-posts.js', false, null, false); wp_enqueue_script('afp_script'); wp_localize_script( 'afp_script', 'afp_vars', array( 'afp_nonce' => wp_create_nonce( 'afp_nonce' ), // Create nonce which we later will use to verify AJAX request 'afp_ajax_url' => admin_url( 'admin-ajax.php' ), ) ); } add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100); function ajax_filter_get_posts( $taxonomyproject ) { // Verify nonce if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' )) die('Permission denied'); $taxonomyproject = $_POST['project']; $result = json_encode(my_get_posts($taxonomyproject, true)); echo $result; die(); } function my_get_posts($taxonomyproject = '', $ajax = false){ // WP Query $args = array( 'post_type' => 'projects', 'posts_per_page' => -1, 'tax_query' => array( array( 'taxonomy' => 'project', ) ) ); // If taxonomy is not set, remove key from array and get all posts if( !$taxonomyproject ) { unset( $args['tax_query'] ); } $query = new WP_Query( $args ); $html = ''; $items = array(); if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); $res = ''; $ajax ? $items[] = $res : $html .= $res; endwhile; $result['response'] = $ajax ? $items : $html; $result['status'] = 'success'; else: $result['response'] = '

No posts found

'; $result['status'] = '404'; endif; wp_reset_postdata(); return $result; }

Javascript-Datei

 $(document).ready(function(){ // work filters $('.projects-filter').click( function(event) { // Prevent default action - opening tag page if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } // Get tag slug from title attirbute var stuff = $(this).attr('title'); data = { action: 'filter_posts', // function to execute afp_nonce: afp_vars.afp_nonce, // wp_nonce post_type: "projects", // selected tag }; $.ajax({ type: "post", dataType: "json", url: afp_vars.afp_ajax_url, data: data, success: function(data, textStatus, XMLHttpRequest) { console.log(data); // Restore div visibility $('.projects-results').fadeOut() .queue(function(n) { $(this).html(data.response); n(); }).fadeIn(); }, error: function( XMLHttpRequest, textStatus, errorThrown ) { /*console.log( MLHttpRequest ); console.log( textStatus ); console.log( errorThrown );*/ $('.projects-results').fadeOut() .queue(function(n) { $(this).html("No items found. "); n(); }).fadeIn(); } }); }); }); 

Projektdatei

 
FILTER BY SECTOR
  • <a href="https://wordpress.stackexchange.com/questions/291241/filter-custom-post-type-archive-page-with-custom-taxonomies-categories-with-aj/">ALL
  • <a class="projects-filter" href="https://wordpress.stackexchange.com/questions/291241/filter-custom-post-type-archive-page-with-custom-taxonomies-categories-with-aj/cat_ID); ?>">name; ?>

Im Moment bekomme ich alle Projekte, wenn ich zum ersten Mal auf der Archivseite des Projekts lande. Wenn ich auf die Kategorien (Filter) klicke, bekomme ich den Fade-Effekt, aber ich bekomme “No items found.”. Es scheint, dass die Parameter, die ich in JS übergeben habe, falsch sind.

Wahrscheinlich etwas hier:

 data = { action: 'filter_posts', // function to execute afp_nonce: afp_vars.afp_nonce, // wp_nonce post_type: "projects", // selected tag }; 

aber ich bekomme nicht die richtigen Posts der richtigen Kategorie

Solutions Collecting From Web of "Filtern Sie benutzerdefinierte Post-Typ-Archivseite mit benutzerdefinierten Taxonomien (Kategorien) mit AJAX"