wordpress - 在 wordpress 中显示子类别，但不在列表中

Question

我需要在我的新网站上显示某个类别的子类别。

我的结构如下:

Test1
  - Sub1_1
  - Sub1_2
Test2
  - Sub2_1
  - Sub2_2

当我在“Test1”的类别页面上时，我需要显示子类别(“Sub1_1”和“Sub1_2”)。我在网上找到了以下显示子猫的片段:

if (is_category()) {
        $this_category = get_category($cat);
    }
    ?>
    <?php
        if($this_category->category_parent)
            $this_category = wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->category_parent."&echo=0"); 
        else
            $this_category = wp_list_categories('orderby=id&depth=1&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID."&echo=0");

        if ($this_category) { ?> 
            <ul>
                <?php echo $this_category; ?>
            </ul>            
        <?php } ?>

但它在一个无序列表中使用 <ul> 执行此操作和 <li> .

<ul>
   <li>Sub1_1</li>
   <li>Sub1_2</li>
</ul>

我需要显示一个带有子类别标题和相应的子猫描述的 div 而不是这个列表(或者甚至更好:描述的摘录，但目前我很乐意只获得完整的描述) .布局必须类似于

<div class="cat-list">
    <div class="cat-subcat">
       <h2 class="cat-title">Sub1_1</h2>
       <p class="cat-text">Subcat1_1 description</p>
    </div>
    <div class="cat-subcat">
       <h2 class="cat-title">Sub1_2</h2>
       <p class="cat-text">Subcat1_2 description</p>
    </div>
</div>

如何调整片段，使其以我想要的方式显示？

Answer 1

这是基于您的回答，但标记/HTML 是基于您在问题中显示的内容。

如果您只想平面显示该类别的所有子项

然后您需要做的就是在 $args 中使用 child_of 代替 parent:

$args = array(
    'orderby'  => 'slug',
    'child_of' => $cat_id, // use child_of
//  'parent'  => $cat_id,  // and not parent
);

如果要分层显示

即使用 wp_list_categories() 时得到的相同嵌套结构.

然后您可以使用递归函数调用。

// In the theme functions file or maybe somewhere in your plugin.
function my_list_cats( $parent = 0, $level = 0 ) {
    $cats = get_categories( [
        'parent' => $parent,
        // other args here
    ] );

    if ( empty( $cats ) ) {
        return false;
    }

    // Just for styling purposes..
    $classes = 'level-' . absint( $level );
    $classes .= $level ? ' cat-child' : '';

    echo '<div class="cat-list ' . $classes . '">';

    foreach ( $cats as $term ) {
        echo '<div class="cat-subcat">';

        echo '<h2 class="cat-title">' . $term->name . '</h2>';

        // Please note that wp_trim_words() will strip all HTML tags.
        if ( $description = wp_trim_words( $term->description, 28 ) ) {
            echo '<p class="cat-text">' . $description . '</p>';
        }

        my_list_cats( $term->term_id, ++$level );

        echo '</div><!-- .cat-subcat -->';
    }

    echo '</div><!-- .cat-list -->';
}

然后在类别存档中，在模板中调用:

my_list_cats( get_queried_object_id() );

在函数中，我使用了 wp_trim_words()用于修剪类别描述by words，但您实际上可以使用自己的函数by characters。 :)

示例输出和样式

/* Just some basic styling */

.cat-list { padding: 0 10px }

/* Main/parent category */
.cat-list.level-0 { background: #d4edda; color: #155724 }

/* All child categories */
.cat-list.cat-child { margin-left: 1em }

/* Child/sub categories levels 1 and 2 */
.cat-list.level-1 { background: #fff3cd; color: #856404 }
.cat-list.level-2 { background: #f8d7da; color: #721c24 }

<div class="cat-list level-0">
    <div class="cat-subcat">
        <h2 class="cat-title">Foo Child</h2>
        <p class="cat-text">Foo Child description</p>

        <div class="cat-list level-1 cat-child">
            <div class="cat-subcat">
                <h2 class="cat-title">Foo Subchild</h2>
                <p class="cat-text">Foo Subchild description</p>

                <div class="cat-list level-2 cat-child">
                    <div class="cat-subcat">
                        <h2 class="cat-title">Foo Sub-subchild</h2>
                        <!-- No description -->
                    </div><!-- .cat-subcat -->
                </div><!-- .cat-list -->
            </div><!-- .cat-subcat -->

            <div class="cat-subcat">
                <h2 class="cat-title">Foo Subchild 2</h2>
                <!-- No description -->
            </div><!-- .cat-subcat -->
        </div><!-- .cat-list -->
    </div><!-- .cat-subcat -->

    <div class="cat-subcat">
        <h2 class="cat-title">Foo Child 2</h2>
        <!-- No description -->
    </div><!-- .cat-subcat -->
</div><!-- .cat-list -->