WordPress分类、子分类、活动分类问题

Question

`假设我去了一个类别页面。 此类别页面上有一些内容。 我想在内容下方或此类别页面下显示此类别的父类别的所有子类别。 我还想显示类别的描述和缩略图。 我怎么做？

然后，如果用户从菜单转到类别页面，该类别将保持活动状态。 类别的 rest 将是模糊的、不活动的或类似的东西。

更新：

假设它是一个菜单。 现在所有类别项目都已添加到此菜单中。 现在，如果有人从这里点击父类或子类，将显示该类的父类的所有子类。 就像下面的代码。 好的。

但是当有人从菜单中单击一个类别时，该类别将被突出显示。 类别的 rest 将模糊或类似。 但是如果你用鼠标 hover，那模糊就不再存在了。

如果有人帮忙，我会受益的。 有任何想法吗？

if( is_product_category() ){

$queried_object = get_queried_object();
$child_terms    = get_term_children ( $queried_object->term_id, 'product_cat' );
$based_term     = (is_wp_error($child_terms) || empty($child_terms)) ? get_term ( $queried_object->parent, 'product_cat' ) : $queried_object;

printf( '<h2 class="shop__sidebar-heading"><a href="%s?so64231449=true">%s</a></h2>', esc_url(get_term_link($based_term->term_id)), $based_term->name );

$display_terms = get_terms( 'product_cat', array(
    'orderby'       => 'name', 
    'order'         => 'ASC',
    'hide_empty'    => false,
    'parent'        => $based_term->term_id,
) );

if( !empty( $display_terms ) && !is_wp_error( $display_terms ) ){

    echo '';
  
        foreach( $display_terms as $display_term ){

            $thumbnail_id = get_term_meta ($display_term->term_id, 'thumbnail_id', true);
            $image        = wp_get_attachment_url( $thumbnail_id );
            
            printf(
                '<div class="col-md-3">
                    <div class="content-inner">
                        <h6%s><a href="%s">%s</a></h6>
                        <img src="%s" alt="" />
                    </div>
                </div>',
                ($display_term->term_id == $queried_object->term_id) ? ' class="active"' : '',
                esc_url(get_term_link($display_term->term_id)),
                $display_term->name,
                $image,
            );
        }

    echo '';
   
}

}

Answer 1

 $(document).ready(function(){ $('.category-box').hover( function () { $('.category-box').removeClass('active'); $(this).addClass('active'); }, function () { $(this).removeClass('active'); } ); });

 .sub-cat-list { width: 100%; }.sub-cat-list.content-inner { text-align: center; overflow: hidden; }.sub-cat-list.content-inner img { width: auto; height:120px; border-radius: 10px; }.sub-cat-list.content-inner h6 { padding: 10px 0; }.sub-cat-list.content-inner h6 a { font-size: 16px; text-transform: capitalize; font-weight: 600; color: #000; }.sub-cat-list.content-inner h6 a:hover { color: #CC0066; } // All are testing purpose.category-box { background: blue; }.category-box:hover { background: red; }.category-box.active { background-color: #e7e7e7 }.category-box.active h6 a { color: cayan; }.category-box.active:hover > h6 a { color: rgb(228, 22, 66); }.col-md-3 { float: left; width: 25%; }.col-md-3.category-box { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }.col-md-3.category-box.active { -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="sub-cat-list"> <div class="col-md-3 category-box active"> <div class="content-inner"> <img src="https://via.placeholder.com/150" /> <h6><a>This is a cat heading 1</a></h6> </div> </div> <div class="col-md-3 category-box"> <div class="content-inner"> <img src="https://via.placeholder.com/150" /> <h6><a>This is a cat heading 2</a></h6> </div> </div> <div class="col-md-3 category-box"> <div class="content-inner"> <img src="https://via.placeholder.com/150" /> <h6><a>This is a cat heading 3</a></h6> </div> </div> <div class="col-md-3 category-box"> <div class="content-inner"> <img src="https://via.placeholder.com/150" /> <h6><a>This is a cat heading 4</a></h6> </div> </div> </div> </div>

使用计数器变量在第一个类别框上添加活动 class。

if( is_product_category() ){

    $queried_object = get_queried_object();
    $child_terms    = get_term_children ( $queried_object->term_id, 'product_cat' );
    $based_term     = (is_wp_error($child_terms) || empty($child_terms)) ? get_term ( $queried_object->parent, 'product_cat' ) : $queried_object;

    printf( '<h2 class="shop__sidebar-heading"><a href="%s?so64231449=true">%s</a></h2>', esc_url(get_term_link($based_term->term_id)), $based_term->name );

    $display_terms = get_terms( 'product_cat', array(
        'orderby'       => 'name', 
        'order'         => 'ASC',
        'hide_empty'    => false,
        'parent'        => $based_term->term_id,
    ) );

    if( !empty( $display_terms ) && !is_wp_error( $display_terms ) ){

        echo '';
            $i = 0;
            foreach( $display_terms as $display_term ){

                $thumbnail_id = get_term_meta ($display_term->term_id, 'thumbnail_id', true);
                $image        = wp_get_attachment_url( $thumbnail_id );
                
                $class = ( $i == 0 ) ? 'active' : '' ;

                printf(
                    '<div class="col-md-3 category-box '.$class.' ">
                        <div class="content-inner">
                            <h6%s><a href="%s">%s</a></h6>
                            <img src="%s" alt="" />
                        </div>
                    </div>',
                    ($display_term->term_id == $queried_object->term_id) ? ' class="active"' : '',
                    esc_url(get_term_link($display_term->term_id)),
                    $display_term->name,
                    $image,
                );
                $i++;
            }

        echo '';
       
    }
}

在 hover 上的category-box上添加 class 称为“活动”并基于执行 CSS。

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $('.category-box').hover(
                   function () {
                        $('.category-box').removeClass('active');
                        $(this).addClass('active');
                   }, function () {
                        $(this).removeClass('active');
                   }
                );
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'add_custom_js', 10, 1 );

Answer 2

 $(document).ready(function(){ $('.category-box')( function () { $('.category-box').removeClass('active'); $(this).addClass('active'); }, function () { $(this).removeClass('active'); } ); }); })(jQuery);

 .sub-cat-list { width: 100%; }.sub-cat-list.content-inner { text-align: center; overflow: hidden; }.sub-cat-list.content-inner img { width: 220px; height:120px; border-radius: 10px; }.sub-cat-list.content-inner h6 { padding: 10px 0; }.sub-cat-list.content-inner h6 a { font-size: 16px; text-transform: capitalize; font-weight: 600; color: #000; }.sub-cat-list.content-inner h6 a:hover { color: #CC0066; } // All are testing purpose.category-box { background: blue; }.category-box:hover { background: red; }.category-box.active { background-color: #e7e7e7 }.category-box.active h6 a { color: cayan; }.category-box.active:hover > h6 a { color: rgb(228, 22, 66); }

 <div class="container"> <div class="sub-cat-list"> <div class="col-md-3"> <div class="content-inner"> <img src="" /> <h6><a>This is a cat heading 1</a></h6> </div> </div> <div class="col-md-3"> <div class="content-inner"> <img src="" /> <h6><a>This is a cat heading 2</a></h6> </div> </div> <div class="col-md-3"> <div class="content-inner"> <img src="" /> <h6><a>This is a cat heading 3</a></h6> </div> </div> <div class="col-md-3"> <div class="content-inner"> <img src="" /> <h6><a>This is a cat heading 4</a></h6> </div> </div> </div> </div>