[英]Filter category ajax in wordpress
我正在嘗試在首頁上使用ajax創建自定義類別過濾器。當我單擊任何自定義分類法時,內容會消失並且我沒有任何內容。自定義帖子類型為aranzman 。
這是page-usluge.php
<ul class="categories-filters">
<?php $args= array(
'show_option_all' => 'All posts', //Text for button All
'title_li' => __(''),
'taxonomy' => 'vrsta-aranzmana',
'post_type' => 'aranzman' );
wp_list_categories( $args ); ?> </ul>
<?php $query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>
<div id="main-content" class="row">
<div id="inside">
<div class="container">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<article>
<a class="xiong-articlebox" href="<?php the_permalink();?>">
<header>
<h3><?php the_title( );?></h3> <p><em><?php the_date( 'j.n.Y'); ?> </em></p> </header>
<p><?php the_excerpt();?></p> </a> </article>
<?php endwhile; }?>
</div><!-- container-->
</div><!--inside -->
</div> <!--row -->
這是ajax.js
jQuery(function(){
var mainContent = jQuery('#main-content'),
cat_links = jQuery('ul.categories-filters li a');
cat_links.on('click', function(e){
e.preventDefault();
el = jQuery(this);
var value = el.attr("href");
mainContent.animate({opacity:"0.5"});
mainContent.load(value + " #inside", function(){
mainContent.animate({opacity:"1"});
});
});
});
這是functions.php調用ajax.js
function ajax_theme_scripts() {
//Ajax filter scripts
wp_register_script( 'ajax', get_stylesheet_directory_uri() . '/js/ajax.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'ajax' );
}
add_action( 'wp_enqueue_scripts', 'ajax_theme_scripts' );
該鏈接上的“無效”演示或示例
首先,Wordpress已經帶有一個ajax處理程序(admin-ajax.php)。
這是該文檔的鏈接: https : //codex.wordpress.org/AJAX_in_Plugins 。
簡要地說,您要做的是:
1)add_action('wp_ajax_nopriv_ {your_action_id}',回調)
您的回電應該是過濾功能
2)編寫javascrip ajax:$ .ajax({方法:“預期方法(POST)”,網址:“ wp-admin / admin-ajax.php (應使用wp_localize_script => https://codex.wordpress動態調用.org / Function_Reference / wp_localize_script ) “ dataType:” expected dataType(JSON)“,data:{操作:{your_action_id},”您要發送的其他數據“}成功:function(response){}});
為了能夠處理響應的內容,您需要將響應的html /文本作為響應的一部分發送。 這樣,您所需要做的就是使用簡單的jquery方法$(selector).html(htmlOfResult);。
要將數據發送到javascript成功回調,可以使用wp_send_json() https://codex.wordpress.org/Function_Reference/wp_send_json 。
這是給ajax.js的
jQuery(document).ready(function($) {
$('ul.categories-filters li a').on('click', function(event) {
event.stopPropagation();
event.preventDefault();
$.ajax({
method: "POST",
url: Object_var.ajax_url_attr,
dataType: "JSON",
data: {
action: "myfilter_action",
// I think you are using the href to check filter
filter_req: $(this).attr('href')
},
success: function(response) {
if(typeof response != "undefined")
$('#inside .container').html(response.html_text);
}
});
});
});
這是針對function.php的
<?php
add_action('wp_enqueue_scripts', function(){
// Register first the ajax.js script
wp_enqueue_script('handle_of_script', 'link/to/ajax.js');
// Now send variable to the script
wp_localize_script('handle_of_script', "Object_var", [
"ajax_url_attr" => admin_url( 'admin-ajax.php' )
]);
});
add_action("wp_ajax_nopriv_myfilter_action", function(){
$filter_req = $_POST['filter_req'];
// Run filter of whatever
$query_result = your_filter();
// Convert values to html/text
$html_text = convert_to_html_text($query_result);
// Send data to jQuery AJAX
wp_send_json(
"html_text" => $html_text
);
wp_exit();
});
function convert_to_html_text($query) {
$html = "";
ob_start();
// Maybe check if query is valid or have post ...
?>
<?php while ( $query->have_posts() ): $query->the_post(); ?>
<article>
<a class="xiong-articlebox" href="<?php the_permalink(); ?>">
<header>
<h3><?php the_title(); ?></h3>
<p>
<em><?php the_date( 'j.n.Y'); ?></em>
</p>
</header>
<p><?php the_excerpt();?></p>
</a>
</article>
<?php endwhile;?>
<?
$html_text = ob_get_contents();
return $html;
}
我認為這可能會有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.