Filter posts by categories ajax, wp_create_nonce, wp_verify_nonce (ok)

https://wordpress.stackexchange.com/questions/288475/filter-posts-by-categories-ajax-is-showing-nothing

2KB

Source.zip

archive

Một cách chi tiết nhất

1. Tạo wp_create_nonce, adminajax

<?php
add_action("wp_enqueue_scripts", "myscripts");
function myscripts() {
  wp_register_script('ajax-filter-posts', get_template_directory_uri() . '/ajax-filter-posts.js', null, false, false);
  wp_enqueue_script('ajax-filter-posts');
  $translation_array = array(
    'postnonce' => wp_create_nonce('postnonce'),
    'adminajax' => admin_url('admin-ajax.php'),
  );
  wp_localize_script('ajax-filter-posts', 'localizeajax', $translation_array);
}
?>

Bước 1: Tạo giao diện lấy tất cả các chuyên mục :))) C:\xampp\htdocs\reset\wp-content\themes\twentyseventeen\template.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */
get_header();?>
<?php
/*
	Template Name: Filter Category
*/
?>
<?php  
	// WP Query
	$args = array(
		'post_type' => 'post',
		'post_status' => 'publish',
		'nopaging' => true, // show all posts in one go
	);
	$query = new WP_Query( $args );
	$tax = 'category';
	$terms = get_terms( $tax, $args);
	$count = count( $terms );
?>
<div id="ajax-cases">
	<?php if ( $count > 0 ): ?>
		<div class="post-tags">
			<?php
				echo '<select>';
					foreach ( $terms as $term ) {
						$term_link = get_term_link( $term, $tax ); 
						echo '<option value="' . $term_link . '" class="tax-filter" title="'.$term->slug.'">' . $term->name . '</option> ';
					}
				echo '</select>';
			?>
		</div>
	<?php endif; ?>
</div>
<div class="tagged-posts"></div>
<?php
get_footer();

Bước 2: Tạo afp_nonce và load file js

C:\xampp\htdocs\reset\wp-content\themes\twentyseventeen\inc\functions.php

function ajax_filter_posts_scripts() {
  wp_register_script('afp_script', get_template_directory_uri() . '/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'),
    	'afp_ajax_url' => admin_url('admin-ajax.php')
  	)
  );
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

Bước 3: Nhận afp_nonce và tạo action

C:\xampp\htdocs\reset\wp-content\themes\twentyseventeen\js\ajax-filter-posts.js

jQuery(document).ready(function($) {
  $('.post-tags select').on('change', function(event) {
    event.preventDefault();
    // Get tag slug from title attirbute
    var selecetd_taxonomy = $(this).find('option:selected').attr("title");
    // After user click on tag, fade out list of posts
    $('.tagged-posts').fadeOut();
    data = {
      action: 'filter_posts', // function to execute
      afp_nonce: afp_vars.afp_nonce, // wp_nonce
      taxonomy: selecetd_taxonomy, // selected tag
    };
    $.ajax({
        url: afp_vars.afp_ajax_url,
        type: 'POST',
        data: data
      })
      .done(function(response) {
        if (response) {
          // Display posts on page
          $('.tagged-posts').html(response);
          // Restore div visibility
          $('.tagged-posts').fadeIn();
        };
      })
      .fail(function() {
        console.log("error");
      });
  });
});

Bước 4: Nhận function

C:\xampp\htdocs\reset\wp-content\themes\twentyseventeen\inc\functions.php

<?php
function ajax_filter_posts_scripts() {
  wp_register_script('afp_script', get_template_directory_uri() . '/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'),
    	'afp_ajax_url' => admin_url('admin-ajax.php')
  	)
  );
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);
function ajax_filter_get_posts($taxonomy) {
	// Verify nonce
  if (!isset($_POST['afp_nonce']) || !wp_verify_nonce($_POST['afp_nonce'], 'afp_nonce')) {
    die('Permission denied');
  }
  $taxonomy = $_POST['taxonomy'];
	// WP Query
  $args = array(
    'post_type' => 'post',
    'nopaging'  => true, // show all posts in one go
  );
  echo $taxonomy;
	// If taxonomy is not set, remove key from array and get all posts
  if (!$taxonomy) {
    unset($args['tag']);
  } else {
	// This is the code which you are missing. You need to add taxonomy query if taxonomy is set.
    $arg['tax_query'] = array(
      array(
        'taxonomy'         => 'category',
        'field'            => 'slug',
        'terms'            => array($taxonomy),
        'include_children' => true,
        'operator'         => 'IN',
      ),
    );
  }
  $query = new WP_Query($args);
  if ($query->have_posts()): while ($query->have_posts()): $query->the_post();
	    $output = '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
	    $output .= get_the_excerpt();
    endwhile;
  else:
    $output = '<h2>No posts found</h2>';
  endif;
  echo $output;
  wp_die();
}
add_action( 'wp_ajax_filter_posts', 'ajax_filter_get_posts' );
?>