niestandardowa taksonomia – chcę załadować treść postu według kategorii przy użyciu Ajax
Tutaj opracowałem proste demo, aby uzyskać dane postu zależne od kategorii bez ładowania strony przy użyciu Ajax i jQuery.
Oto główna kategoria, podkategoria i listy rozwijane postów:
$args = array(
'orderby' => 'name',
'hierarchical' => 1,
'taxonomy' => 'category',
'hide_empty' => 1,
'parent' => 0,
);
$categories = get_categories($args);
?>
<select id="main_cat">
<option value="0">-----Select Category------</option>
<?php
foreach($categories as $category) {
$option .= '<option value="'.$category->cat_ID.'">';
$option .= $category->name;
$option .= '</option>';
}
echo $option;
?>
</select>
<select id="sub_cat">
<option value="0">-----Select Sub Cat------</option>
</select>
<select id="get_this_post">
<option value="0">------Select Post-----</option>
</select>
<div id="post-content-wrapper">
</div>
Teraz część jQuery: pobierz zdarzenia zmiany list rozwijanych i pobierz dane za pomocą akcji ajax.
frontend_ajax_object jest obiektem adresu URL ajax. musisz zmienić zgodnie z definicją.
<script type="text/javascript">
jQuery(function($){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// call ajax
console.log(frontend_ajax_object.ajaxurl);
$("#sub_cat").empty();
$("#get_this_post").empty();
$("#post-content-wrapper").html("");
$.ajax({
url:frontend_ajax_object.ajaxurl,
type:'POST',
data:'action=get_sub_category&main_catid=' + $mainCat,
success:function(results)
{
// alert(results);
$("#sub_cat").removeAttr("style");
$("#sub_cat").append(results);
}
});
}
);
$('#sub_cat').change(function(){
var $sub_catid=$('#sub_cat').val();
// call ajax
$("#get_this_post").empty();
$("#post-content-wrapper").html("");
$.ajax({
url:frontend_ajax_object.ajaxurl,
type:'POST',
data:'action=get_sub_category_posts&sub_catid='+ $sub_catid,
success:function(results)
{
// alert(results);
// $("#sub_cat").removeAttr("style");
$("#get_this_post").append(results);
}
});
}
);
$('#get_this_post').change(function(){
var $get_this_post=$('#get_this_post').val();
// call ajax
$("#post-content-wrapper").html("");
$.ajax({
url:frontend_ajax_object.ajaxurl,
type:'POST',
data:'action=get_page_data&this_post_id='+ $get_this_post,
success:function(results)
{
// alert(results);
$("#post-content-wrapper").html(results);
}
});
}
);
});
</script>
Oto funkcja ajax, która służy do pobierania danych na podstawie wybranych pól.
add_action('wp_ajax_get_sub_category', 'get_sub_category');
add_action('wp_ajax_nopriv_get_sub_category', 'get_sub_category');
function get_sub_category() {
if(isset($_POST['main_catid']))
{
global $post;
if(!empty($_POST['main_catid']))
{
$args = array('parent' => $_POST['main_catid']);
$categories = get_categories( $args );
$option = "<option value="0">Select sub cat</option>";
foreach($categories as $category) {
$option .= '<option value="'.$category->term_id.'">';
$option .= $category->name;
$option .= '</option>';
}
echo $option;
wp_die();
} // end if
}
}
add_action('wp_ajax_get_sub_category_posts', 'get_sub_category_posts');
add_action('wp_ajax_nopriv_get_sub_category_posts', 'get_sub_category_posts');
function get_sub_category_posts() {
if(isset($_POST['sub_catid']))
{
global $post;
if(!empty($_POST['sub_catid']))
{
$args = array( 'posts_per_page' => 5, 'offset'=> 0, 'category' => $_POST['sub_catid'] );
$myposts = get_posts( $args );
$option = "<option value="0">Select Post</option>";
foreach( $myposts as $post ) : setup_postdata($post);
$option .= '<option value="'.get_the_ID().'">';
$option .= get_the_title();
$option .= '</option>';
endforeach;
echo $option;
wp_die();
} // end if
}
}
add_action('wp_ajax_get_page_data', 'get_page_data');
add_action('wp_ajax_nopriv_get_page_data', 'get_page_data');
function get_page_data() {
if(isset($_POST['this_post_id']))
{
global $post;
if(!empty($_POST['this_post_id']))
{
$p_id= $_POST['this_post_id'];
echo '<h1>'.get_the_title($p_id).'</h1>';
echo '<p class="the_content">'.get_post_field('post_content', $p_id).'</p>';
wp_die();
} // end if
}
}
Mam nadzieję, że to demo ci pomoże. przetestowałem i działa dobrze. daj mi znać, jeśli ci to pomoże!
Dziękuję!