[英]Filter WordPress Posts with AJAX
I've been following this tutorial: http://pixelers.net/filter-wordpress-posts-by-category-with-ajax/ . 我一直在关注本教程: http : //pixelers.net/filter-wordpress-posts-by-category-with-ajax/ 。 and working.
和工作。
I want to create a filter based on the popular and recent post. 我想根据热门和最新帖子创建一个过滤器。 For popular post based on a lot of the post being viewed.
基于很多正在查看的热门帖子。
For "Recent" bring up the last post. 对于“最近”,请调出最后一个帖子。 For "Popular" only display post based on the number of most viewed.
对于“热门”,仅显示基于观看次数最多的帖子。
index.php index.php
<div class="col-sm-12">
<ul class="post-filters">
<li><a href="">Recent</a></li>
<li><a href="">Popular</a></li>
</ul>
</div>
<main id="main" class="content site-main">
<?php $query_args = array(
'post_type' => 'post',
'meta_key' => 'wpb_post_views_count',
'orderby' => 'meta_value_num',
);
$the_query = new WP_Query( $query_args );
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="col-md-3">
<?php get_template_part( 'template-parts/content', 'grid' ); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main>
ajax.php ajax.php
jQuery( document ).ready( function ( $ ) {
var $mainContent = $( '#main' ),
$cat_links = $( '.post-filters li a' );
$cat_links.on( 'click', function ( e ) {
e.preventDefault();
$el = $(this);
var value = $el.attr( "href" );
$mainContent.animate({opacity: "0.7"});
$mainContent.load(value + " #main", function(){
$mainContent.animate({opacity: "1"});
});
});
});
How can I make a link recent and popular it can Clicked and filter. 如何使链接最近流行,可以单击并过滤。
Thank you. 谢谢。
Make your HTML Structure like this .. Keep its inner HTML blank for first time. 使您的HTML结构像这样..第一次将其内部HTML保留为空白。
<div class="col-sm-12">
<ul class="post-filters">
<li><a href="" id="recent_posts">Recent</a></li>
<li><a href="" id="latest_posts">Popular</a></li>
</ul>
</div>
<main id="main" class="content site-main">
</main>
Create onclick events in footer.php of the active theme 在活动主题的footer.php中创建onclick事件
<script type="text/javascript">
$( "#recent_posts" ).click(function() {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$.post(
ajaxurl,
{
'action' : 'fetch_posts',
'fetch' : 'recent_posts',
},
function(output){
$('#main').html(output);
});
});
$( "#latest_posts" ).click(function() {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$.post(
ajaxurl,
{
'action' : 'fetch_posts',
'fetch' : 'latest_posts',
},
function(output){
});
});
</script>
Put the below code to start coding in the functions.php of active theme 将以下代码放入活动主题的functions.php中开始编码
add_action('wp_ajax_fetch_posts', 'fetch_posts');
add_action('wp_ajax_nopriv_fetch_posts', 'fetch_posts');
function import_map_landing() {
if($_REQUEST['fetch'] == 'latest_posts'){
$query_args = array(
'post_type' => 'post',
'meta_key' => 'wpb_post_views_count',
'orderby' => 'meta_value_num',
);
$the_query = new WP_Query( $query_args );
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
$return_str.= '<div class="col-md-3">';
$return_str.=//paste the content of content-grid template here
$return_str.='</div>';
endwhile;
wp_reset_postdata();
else :
$return_str.= 'No posts found'
endif;
}
if($_REQUEST['fetch'] == 'recent_posts'){
//do the code for recent posts here
//need to be concatinated in $return_str
}
echo $return_str;
die;
}
?>
We are concatinating all the output (php code and HTML) in the $return_str and it is echoed at the end . 我们在$ return_str中隐藏所有输出(PHP代码和HTML),并在末尾回显。 so please dont forget to concatinate .
所以请不要忘记修饰。
Templates part needs to be pasted here not to be included
模板部分需要粘贴在此处,不包括在内
Like this <?php get_template_part( 'template-parts/content', 'grid' ); ?>
像这样
<?php get_template_part( 'template-parts/content', 'grid' ); ?>
<?php get_template_part( 'template-parts/content', 'grid' ); ?>
needs to be replaced with the code inside this page. <?php get_template_part( 'template-parts/content', 'grid' ); ?>
需要替换为该页面内的代码。
Also at the start of the page we can fire the onclick
event onload()
to get the data on page load 同样在页面的开头,我们可以触发
onclick
事件onload()
以获取页面加载时的数据
For EG 对于EG
$( body ).load(function() {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$.post(
ajaxurl,
{
'action' : 'fetch_posts',
'fetch' : 'recent_posts',
},
function(output){
$('#main').html(output);
});
});
I have called the recent_posts funtion on page load , you can switch to latest_posts as per your choice 我在页面加载中调用了最近使用的功能,您可以根据自己的选择切换到最新使用的功能
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.