/**FAQ简码开始**/
add_shortcode("faqcatList","faqcatListFun");
function faqcatListFun(){
ob_start();
?>
<script src="/wp-content/plugins/elementor-list-widget/assets/js/avalon.js"></script>
<script type="text/javascript">var ajax_url = '<?php echo admin_url(); ?>admin-ajax.php';</script>
<style>
.treeTermses{width:100%; overflow:hidden; padding:15px;}
.treeTermses .TTers{max-width:1435px; margin:0 auto; overflow:hidden; display:flex;flex-direction: row;}
.treeTermses .treeList{ flex:0 0 20%; padding:0; margin:0 30px 0 0;}
.treeTermses .treeList .tli{ width:100%; display:flex;flex-direction:column; padding:0; margin:0;}
.treeTermses .treeList .tli h3{text-align: center; background:#f08200; color:#fff; padding:15px 10px; margin:0 0 10px 0; border-radius:3px; font-size:18px;}
.treeTermses .treeList .tli .p{ display:flex;flex-direction:column; padding:0; margin:0;}
.treeTermses .treeList .tli .p p{text-align:center; background:#fdf2e5; padding:15px 10px; margin:10px 0; border-radius:3px; font-size:16px;}
.treeTermses .treeCont{flex:0 0 79%; box-sizing: border-box; position:relative;}
.treeTermses .treeList .tli:not(:first-child) .p{ display:none;}
.treeCont .qs{ display:flex; flex-direction:column;}
.treeCont .qs .qs_title{ display:flex; justify-content: flex-start; align-items:center; font-size:20px; font-weight:bold; border-bottom:1px solid #dadada; padding:0 0 15px 0; margin-bottom:10px; cursor: pointer;}
.treeCont .qs .qs_title span{ display:block; width:60px; height:60px; line-height:60px; background:#f08200;border-radius:3px; color:#fff; text-align:center; margin-right:15px; font-size:30px;flex:none;}
.treeCont .qs .as_title{ display:flex; justify-content: flex-start; align-items:center; font-size:18px; font-weight:300; padding:0 0 15px 0; margin-bottom:10px;}
.treeCont .qs .as_title span{ display:block;flex:none; width:60px; height:60px; line-height:60px; background:#B5B5B5;border-radius:3px; color:#fff; text-align:center; margin-right:15px; font-size:30px;}
.noData{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:18px; color#333; background:#fdf2e5;}
.loadings{position:absolute;left:0; bottom:0;}
@media screen and ( max-width:700px){
.treeTermses{width:100%; overflow:hidden; padding:15px; box-sizing:border-box;}
.treeTermses .TTers{display:flex; flex-direction:column;}
.treeTermses .treeList{ flex:0 0 100%; padding:0; margin:0 0 30px 0;}
.treeTermses .treeCont{flex:0 0 100%; box-sizing: border-box;}
}
@media screen ( min-width:700px and max-width:1024px){
.treeTermses{width:100%; overflow:hidden; padding:15px; box-sizing:border-box;}
}
</style>
<div class="treeTermses" ms-controller="faqCategory" id="faqCategory">
<div class="TTers">
<div class="treeList">
<div class="tli" ms-repeat="listse">
<h3 ms-click-1="changeBox" ms-click-2="getDatas(el.term_id)">{{el.name}}</h3>
<div class="p">
<p ms-repeat-pl="el.lists" ms-click="getDatas(pl.term_id)">{{pl.name}}</p>
</div>
</div>
</div>
<div class="treeCont">
<div class="qs" ms-repeat="faqList" ms-if="faqList.length > 0">
<div class="qs_title" ms-click="showBox"><span>Q</span>{{el.post_title}}</div>
<div class="as_title" style="display:none;"><span>A</span>{{el.post_excerpt}}</div>
</div>
<div class="noData" ms-if="faqList.length == 0">empty Datas!</div>
<div class="noData loadings"><img src="<?php echo plugins_url( 'widgets/assets/image/loading.gif', __FILE__ )?>" width="100" height="100"></div>
</div>
</div>
</div>
<script>
(function($) {
var vm = avalon.define({
$id:"faqCategory",
listse:[],
faqList:[],
ids:'',
initData:function(){
$.ajax({
url:ajax_url,
type:'post',
dataType: 'json',
data:{
'action':'get_faq_art_lists'
},
success:function(result){
console.log(result);
vm.listse = result;
}
})
},
changeBox:function(){
$(this).next().slideToggle();
},
getDatas:function(obj){
vm.ids = obj;
// vm.faqList=[];
$(".loadings").fadeIn(1000);
vm.getDatasFun();
},
getDatasFun:function(){
$.ajax({
url:ajax_url,
type:'post',
dataType: 'json',
data:{
'action':'get_faq_lists',
'ids':vm.ids
},
success:function(result){
$(".loadings").fadeOut(1000);
setTimeout(function() {
vm.faqList = result;
}, 500);
}
})
},
showBox:function(){
$(this).next().slideToggle();
}
})
vm.initData();
vm.getDatasFun();
}(jQuery));
</script>
<?php
return ob_get_clean();
}
/**FAQ简码结束**/
后台接口代码：
add_action("wp_ajax_get_faq_art_lists", "get_faq_art_lists");
add_action("wp_ajax_nopriv_get_faq_art_lists", "get_faq_art_lists");
function get_faq_art_lists(){
$categories = get_terms( ['taxonomy' => 'faq-category', 'hide_empty' => false] );
$arrCatlist = array();
foreach ($categories as $key){
if($key->parent == 0){
array_push($arrCatlist,$key);
}
}
foreach ($arrCatlist as $k){
$k->lists = array();
foreach ($categories as $a){
if($a->parent == $k->term_id){
array_push($k->lists,$a);
}
}
}
wp_send_json($arrCatlist);
}
add_action("wp_ajax_get_faq_lists", "get_faq_lists");
add_action("wp_ajax_nopriv_get_faq_lists", "get_faq_lists");
function get_faq_lists(){
$ids = $_POST['ids'];
$args = array(
'post_type' => 'faq',
'posts_per_page' => 6
);
if(!empty($ids) || $ids){
$args['tax_query'] = array(
array(
'taxonomy' => 'faq-category',
'terms' => $ids
)
);
}
$lists = new WP_Query($args);
wp_send_json($lists->posts);
}
