在更改类别下拉列表中显示功能文章和博客列表 [英] Onchange the category dropdown display the feature post and blog list
问题描述
我有三个功能。
-
第一个功能是显示自定义帖子中的类别下拉列表。
The first one is displaying my categories dropdown from the custom post.
第二个是显示最新帖子（如果用户选中了该复选框，那么我将在每个帖子中添加复选框，然后该复选框将显示在最新帖子中）
The second is displaying the latest post(I have added the checkbox in each post if the user checked that then that will display in the latest post)
第三个将显示我的所有帖子。
And the third will display my all the post.
下面是我正在使用的代码。
Below is the code I am using it.
//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');
现在我在做什么，当用户从下拉列表中更改类别时，我必须显示最新的博客，并与该类别相关的博客列表。
Now what I am doing is, When the user changes the category from the dropdown then I have to display the latest blog and blog list related to that category.
例如。在页面加载时，默认情况下，我将显示所有帖子。现在，下拉列表中有一个名为 Movie 的类别。一旦用户从下拉列表中选择了电影，我就必须在最新的博客和博客列表中显示与电影相关的帖子。
For example. On page load, I am displaying all the posts by default. Now I have a category called Movie in the dropdown. Once the user selects the Movie from the dropdown then I have to show the Movie related post in the latest blog and blog list.
您能帮我解决这个问题吗？
Would you help me out with this issue?
推荐答案
我找到了解决方案。
在更改下拉列表中，我必须显示帖子列表和功能发布。因此，我使用了ajax。
On change dropdown, I have to display the post list and feature post. So I used ajax.
我在onchange事件之外使用了以下函数，因为每当用户刷新页面时，它将调用我的ajax并显示输出，无论下拉菜单如何。
I used the below function outside of the onchange event because whenever the user refreshes the page it will call my ajax and display the output whatever the dropdown selected.
callAjax_forLatestblog();
callAjax_forBloglist();
我使用了两个ajax调用，因为我必须显示两件事以及动态标题。
I used two ajax calls because I have to show two things along with dynamic heading.
如果在这里注意到，我在两个函数的 if-condition 下面都添加了。
If notice here, I added below if-condition in both the function. it will check the value of dropdown if it's not empty then it will call this 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>
这篇关于在更改类别下拉列表中显示功能文章和博客列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
