Question

我正在尝试在标签中创建一个包含 Woocommerce 产品类别的页面。

我的选项卡菜单正在运行，但我需要在每个选项卡内容区域中对相应类别运行查询。

但是当我点击每个标签时，标签内容会显示该类别中的所有帖子，而不是属于当前标签的帖子。我没有得到出现的问题，请帮我解决问题

这是我的代码：

<?php
echo '<ul class="nav nav-tabs" role="tablist">';

 $args = array(
 'post_type' => 'product',
 'posts_per_page' => 100,
 'product_cat' => $category->slug,
 'hide_empty'=> 1,
 'orderby' => 'name',
 'order' => 'ASC'
 );

$categories = get_terms( 'product_cat',  $args );;

  foreach($categories as $category) {

    echo '<li><a href="#' . $category->slug.'" role="tab" data-toggle="tab">' .
    $category->slug.'('. $category->count .')</a></li>';
    $cat_name = $category->slug;

    }
    echo '</ul>';
    echo '<div class="tab-content">';
      foreach($categories as $category) {
        echo '<div class="tab-pane" id="' . $category->slug.'">';
        ?>

 <?php

     $loop = new WP_Query( $args );
     while ( $loop->have_posts() ) :
     $loop->the_post();
     ?>

            <h1><?php the_title(); ?></h1>

                   <?php
    endwhile;
   wp_reset_postdata();
   ?>


    <?php
echo '</div>';
   }

     ?>

问题在于它显示了每个类别的所有帖子。我坚持下去了..请帮忙

Answer 1

首先，您必须获取所有类别，然后，您必须开始一个类别循环，并在该循环内按类别获取所有产品。检查下面的代码。

<?php 

function load_scripts() {
    wp_enqueue_style( 'jquery-ui-css', get_template_directory_uri().'/assets/css/jquery-ui.css', '' );
    wp_enqueue_script( 'jquery-ui-js', get_template_directory_uri().'/assets/js/jquery-ui.js', array('jquery'), time() , false);
}    

add_action('wp_enqueue_scripts', 'load_scripts');

function show_product_categories_tabs( $args ){

    $atts = shortcode_atts( array(
        '' => '',
    ), $atts, 'show_product_categories_tabs' );

    ob_start();
    ?>
        <div id="tabs">
            <ul>
                <?php
                $categories = get_terms( array(
                    'taxonomy'   => 'product_cat',
                    'hide_empty' => 1,
                ) );

                foreach ( $categories as $key => $cat ) { ?>
                    <li><a href="#<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></a></li>
                <?php } ?>
            </ul>
            <?php foreach ( $categories as $key => $cat ) { 

                $args = array(
                    'post_type'      => 'product',
                    'posts_per_page' => 100,
                    'product_cat'    => $cat->slug,
                    'hide_empty'     => 1,
                    'orderby'        => 'name',
                    'order'          => 'ASC'
                );

                ?>
                <div id="<?php echo $cat->slug; ?>">
                    <?php
                    $products = new WP_Query( $args );
                    if( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post(); ?>

                        <h1><?php the_title(); ?></h1>
                    <?php endwhile; wp_reset_postdata(); endif; ?>
                </div>
            <?php } ?>
        </div>
        
        <script>
            ( function( $ ) {
                $( "#tabs" ).tabs();
                $("#tabs ul li").delegate('a', 'click', function(e){
                    e.preventDefault();
                    return false;
                });
            } )(jQuery);
        </script>
    <?php 

    $html = ob_get_clean();
    return $html;
}
add_shortcode( 'show_product_categories_tabs', 'show_product_categories_tabs', 10, 1 );

?>

经过测试并有效。

如何在选项卡中显示 woocommerce 产品类别

1 个答案: