更改类别后，下拉列表将显示功能文章和博客列表

我有三个函数。

第一个是从自定义帖子中显示我的类别下拉列表。
第二个是显示最新帖子(我在每个帖子中都添加了复选框，如果用户选中了，那么它将显示在最新帖子中(
第三个将显示我的全部帖子。

下面是我正在使用的代码。

//category dropdown
function categoriesDropdown(){
$categories = get_categories( array(
'orderby' => 'name',
'order'   => 'ASC',
'taxonomy' => 'blogs_cat',
) );
$output='';
$output.='<select>';
foreach( $categories as $category ) {
$output.='<option value="'.$category->term_id.'">'.$category->name.'</option>'; 
}
$output.='</select>';
return $output;
}
add_shortcode( 'showCategoryList', 'categoriesDropdown');

// Feature blog if check box selected.
function latestBlogView( $atts ){
$the_query =array(
'post_type' => 'blog',
'post_status' => 'publish',
'posts_per_page' => 3,
'meta_key' => 'latestblog',
'meta_value' => 1,
'order'      => 'DESC'
);

$postData = '';
// The Loop
$featured = new WP_Query($the_query);
$postData.='<div class="latestBlogsWrapper articlesWrapper"><ul>';
if ($featured->have_posts()): while($featured->have_posts()): $featured->the_post();

$postData.= '<li><div class="grid-item"><a href="'.get_permalink($post->ID).'">
<div class="blogBoxwrapper"> 
<img src="'. get_the_post_thumbnail_url($post->ID, "full").'"> 
<div class="blogCatname"><h5>'.get_the_title($post->ID).'</h5></div>
</div></div></a></li>'; 

endwhile; else:
$postData.="Please select the feature post check box";

endif;
$postData .= '</ul></div>';
wp_reset_postdata();

return $postData; 
}
add_shortcode( 'latestblogs', 'latestBlogView');

// Blog list
function BlogView( $atts ){
$args = array(  
'post_type' => 'blog',
'post_status' => 'publish',
'posts_per_page' => 30, 
'orderby' => 'title', 
'order' => 'DESC', 
);    $loop = new WP_Query( $args ); 
$data ='';
$data.='<div class="articlesWrapper"><ul>';
while ( $loop->have_posts() ) : $loop->the_post(); 
$tid = $loop->ID;
$data.= ' 
<li>
<a href="'.get_permalink($tid).'">
<div class="blogBoxwrapper">
<img src="'.get_the_post_thumbnail_url($tid).'">
<div class="blogCatname">
<h5>'.get_the_title($id).'</h5>
</div>
</div>
</a>
</li>'; 
endwhile;  
$data.='</ul>

<div class="pt-5 text-center btnLoadmore"><a class="blogbtn blogbtnred loadMore" href="javascript:void(0);">Read More Blog Posts</a></div>
</div>';
wp_reset_postdata(); 
return $data; 
}
add_shortcode( 'blogandarticles', 'BlogView');

现在我要做的是，当用户从下拉列表中更改类别时，我必须显示与该类别相关的最新博客和博客列表。

例如：在页面加载时，我默认显示所有帖子。现在，我在下拉列表中有一个名为Movie的类别。一旦用户从下拉列表中选择电影，我就必须在最新的博客和博客列表中显示与电影相关的帖子。

如何解决此问题？

我找到了我的解决方案。

在更改下拉列表中，我必须显示文章列表和专题文章。所以我使用了ajax。

我在onchange事件之外使用了以下函数，因为每当用户刷新页面时，它都会调用我的ajax，并显示所选下拉列表的输出。

callAjax_forLatestblog();
callAjax_forBloglist();

我使用了两个ajax调用，因为我必须在显示动态标题的同时显示两个内容。

如果注意这里，我在下面添加了if-condition两个函数。它将检查下拉列表的值，如果它不为空，那么它将调用此条件。

if(!empty($_REQUEST['keyword'])){
$args['tax_query'] = array(
array(
'taxonomy' => 'blogs_cat',
'field' => 'term_id',
'terms' => sanitize_text_field($_REQUEST['keyword'])
)
);
}

function categoriesDropdown(){
$categories = get_categories( array(
'orderby' => 'name',
'order'   => 'ASC',
'taxonomy' => 'blogs_cat',
) );
$output='';
$output.='<select name="catDropdown" id="catDropdown"><option value="">Everything</option>';
foreach( $categories as $category ) {
$output.='<option value="'.$category->term_id.'">'.$category->name.'</option>'; 
}
$output.='</select>';
$output.='<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script><script>     
(function($) {  // ready handler
callAjax_forLatestblog();// on page load call ajax to get the latest post
callAjax_forBloglist();// on page load call ajax to get the blog list
$("#catDropdown").change(function() {
callAjax_forLatestblog();
callAjax_forBloglist();
});
function callAjax_forLatestblog(){
$.ajax({
url: "/wp-admin/admin-ajax.php",
type: "post",
data: { action: "latestBlogView", keyword: $("#catDropdown").val() },
success: function(data) {
$("#latestblogs").html(data);
}
});
}
function callAjax_forBloglist(){
$.ajax({
url: "/wp-admin/admin-ajax.php",
type: "post",
data: { action: "blogList", keyword: $("#catDropdown").val() },
success: function(data) {
$("#blogList").html(data);
}
});
}
})(jQuery);</script>';
return $output;
}
add_shortcode( 'showCategoryList', 'categoriesDropdown');

下面的代码为博客列表

add_action('wp_ajax_nopriv_blogList', 'blogList');
add_action('wp_ajax_blogList', 'blogList');
function blogList( $atts ){
$args = array(  
'post_type' => 'blog',
'post_status' => 'publish',
'posts_per_page' => 30, 
//'orderby' => 'title', 
//'order' => 'ASC', 
);  
if(!empty($_REQUEST['keyword'])){
$args['tax_query'] = array(
array(
'taxonomy' => 'blogs_cat',
'field' => 'term_id',
'terms' => sanitize_text_field($_REQUEST['keyword'])
)
);
}
$loop = new WP_Query( $args ); 
$data ='';
$data.='<div class="articlesWrapper"><ul>';
while ( $loop->have_posts() ) : $loop->the_post(); 
$tid = $loop->ID;
$data.= ' 
<li>
<a href="'.get_permalink($tid).'">
<div class="blogBoxwrapper">
<img src="'.get_the_post_thumbnail_url($tid).'">
<div class="blogCatname">
<h5>'.get_the_title($id).'</h5>
</div>
</div>
</a>
</li>'; 
endwhile;  
$data.='</ul></div>';
echo $data;
wp_die(); // it will remove 0.
}

以下后功能代码

add_action('wp_ajax_nopriv_latestBlogView', 'latestBlogView');
add_action('wp_ajax_latestBlogView', 'latestBlogView');
function latestBlogView($atts){
$the_query =array(
'post_type' => 'blog',
'post_status' => 'publish',
'posts_per_page' => 3,
'meta_key' => 'latestblog',
'meta_value' => 1,
'order'      => 'DESC'
);
if(!empty($_REQUEST['keyword'])){
$the_query['tax_query'] = array(
array(
'taxonomy' => 'blogs_cat',
'field' => 'term_id',
'terms' => sanitize_text_field($_REQUEST['keyword'])
)
);
}
$postData = '';
// The Loop
$featured = new WP_Query($the_query);
$postData.='<div class="latestBlogsWrapper articlesWrapper"><ul>';
if ($featured->have_posts()): while($featured->have_posts()): $featured->the_post();
$postData.= '<li><div class="grid-item"><a href="'.get_permalink($post->ID).'">
<div class="blogBoxwrapper"> 
<img src="'. get_the_post_thumbnail_url($post->ID, "full").'"> 
<div class="blogCatname"><h5>'.get_the_title($post->ID).'</h5></div>
</div></a></div></li>'; 

endwhile; else:
$postData.="Please select the feature post check box";
endif;
$postData .= '</ul></div>';
echo $postData;
wp_die(); // it will remove 0.
}

HTML

<div id="blogList"></div>
<div id="latestblogs"></div>

相关内容

最新更新

热门标签：