plugins - How to display the category name in the tab and post inside the tab in Wordpress?

admin管理员组

文章数量:1278910

I am using the bootstrap nav tab. What I am doing is, I have a custom post type and I have created the custom category. I have 8 categories and each category has 10 posts.

I have to display the category name in the tab and post display inside the tab. I am getting the category name in the tab but not getting the post.

Below is the UI part

function dictionarytabview(){
global $post;
 $custom_terms = get_terms('dictionary_cats');
$data='<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist">';
foreach($custom_terms as $custom_term) {
$data.='<button class="nav-link" id="'.$custom_term->slug.'" data-bs-toggle="tab" data-bs-target="'.$custom_term->slug.'" type="button" role="tab" aria-controls="'.$custom_term->slug.'" aria-selected="true">'.$custom_term->name.'</button>';
}
$data.='</div></nav>';

  $args = array('post_type' => 'dictionary',
        'tax_query' => array(
            array(
                'taxonomy' => 'dictionary_cats',
               // 'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
        ),
     );

     $loop = new WP_Query($args);
     if($loop->have_posts()) {
     $data.='<div class="tab-content" id="nav-tabContent">';
        while($loop->have_posts()) : $loop->the_post();
            $data.='<div class="tab-pane" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                          <div class="">
                          <h4>'.get_the_title().'</h4>
                          <p>'.get_the_content().'</p>
                          </div>
                  </div>';
        endwhile;
        $data.='</div>';

     }

wp_reset_query();
return $data;

}

add_shortcode( 'dictionary-tabview', 'dictionarytabview');

Second way

$data='';
$custom_terms = get_terms('dictionary_cats');
 $data='<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist">';


foreach($custom_terms as $custom_term) {
    $data.='<button class="nav-link"  data-bs-toggle="tab" data-bs-target="'.$custom_term->slug.'" type="button" role="tab" aria-controls="'.$custom_term->slug.'" aria-selected="true">'.$custom_term->name.'</button>';
}
 $data.='</div></nav>';
 $data.='<div class="tab-content" id="nav-tabContent">';
foreach($custom_terms as $custom_term) {
   $args = array('post_type' => 'dictionary',
        'tax_query' => array(
            array(
                'taxonomy' => 'dictionary_cats',
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
        ),
     );

     $loop = new WP_Query($args);
     if($loop->have_posts()) {            
        $data.='<div class="tab-pane fade" id="'.$custom_term->slug.'" role="tabpanel" aria-labelledby="'.$custom_term->slug.'">';

        while($loop->have_posts()) : $loop->the_post();
                 $data.='<div class="dic-post-list d-table w-100">
                 <div class="dic-inner-box headingBox"><h4>'.get_the_title($post->ID).'</h4></div>
                 <div class="dic-inner-box"> <p>'.get_the_content($post->ID).'</p></div>
                 </div>';
        endwhile;

                 $data.='</div>';

     }

}
           $data.='</div>';

        

        $data.='<script src=".5.1/jquery.min.js"></script><script>
          jQuery(document).ready(function($){
             jQuery(".nav-tabs button.nav-link:first").addClass("active");
             jQuery(".tab-content .tab-pane:first").addClass("show active");

             $(".nav-tabs button").click(function () {
                $("button").removeClass("active");
                $(this).addClass("active");   
                var tabactive=$(this).attr("data-bs-target");
                $(".tab-content .tab-pane").removeClass("show active");
                var a=$("#" + tabactive );
                a.addClass("show active");

            });
          }); 

</script>';

本文标签： pluginsHow to display the category name in the tab and post inside the tab in Wordpress