WordPress 类别、子类别、活动类别问题答案

【问题标题】：WordPress Category, Child Category, Active Category ProblemsWordPress 类别、子类别、活动类别问题
【发布时间】：2021-07-10 04:01:43
【问题描述】：

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

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

更新：

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

但是当有人从菜单中点击一个类别时，该类别将被突出显示。其余类别将模糊或类似。但是，如果您将鼠标悬停，则该模糊将不再存在。

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

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 '';
   
}

}

【问题讨论】：

不久前你为我解决了一个问题。我想强调该类别的活跃类别。其余类别想要做一些类似模糊的事情。我在那里重播，请看..stackoverflow.com/questions/67102659/…
好的，请将代码放在这里。你也能给我一些截图吗？它会是什么样子？
请看我的更新详情
在悬停或默认页面加载时突出显示活动类别？
1.页面加载时，活动类别将突出显示。其余类别将被模糊。 2.但是如果你把鼠标放在模糊类，就不会有模糊了。如果您不再次悬停，它将变得模糊。

标签： javascript php jquery wordpress woocommerce

【解决方案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>

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

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 '';
       
    }
}

在 category-box 上添加名为“活动”并基于 do 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 );

【讨论】：

你有什么不明白的？
你检查过category-box在悬停时上课吗？
你活跃吗？？
@cholonto 是的，告诉我。
我可能不太了解你。我再说一遍，当用户从菜单中点击一个类别并进入类别页面时，页面加载后会像上面的截图一样。也就是说，Active 或 Current 类别将被突出显示。其余类别将被模糊。

【解决方案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>

【讨论】：