在 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

我现在已经用这种方法完成了并且它可以工作，但仍然可能太复杂或错误或不寻常......如果你看到任何改进代码的机会，请发表评论，因为我是 PHP 和 WordPress 模板...

<?php 
  $category_ids = get_all_category_ids(); 
  $current_category = get_category( get_query_var( 'cat' ) );
  $cat_id = $current_category->cat_ID;
        
  $args = array(
          'orderby' => 'slug',
          'parent' => $cat_id
  );
  $categories = get_categories( $args );
  foreach ( $categories as $category ) {
       echo '<div><h3 class="title">' . $category->name . '</h3><div class="text">' . $category->description . '</div><div class="ink"><a href="' . get_category_link( $category->term_id ) . '">Read more</a></div></div>';
   }
?>

Answer 2

试试这个：

    <?php 
          $category_ids = get_all_category_ids(); 
          $current_category = get_category( get_query_var( 'cat' ) );
          $cat_id = $current_category->cat_ID;
                
          $args = array(
                  'orderby' => 'slug',
                  'parent' => $cat_id
          );
          $categories = get_categories( $args );
          foreach ( $categories as $category ) {
               echo '<div><h3 class="title">' . $category->name . '</h3><div class="text">' . $category->description . '</div><div class="ink"><a href="' . get_category_link( $category->term_id ) . '">Read more</a></div></div>';

          $subargs = array(
                  'orderby' => 'slug',
                  'parent' => $category->term_id
          );
          $subcategories = get_categories( $subargs );

 foreach ( $subcategories as $subcategory ) {
               echo '<div><h3 class="title">' . $subcategory->name . '</h3><div class="text">' . $subcategory->description . '</div><div class="ink"><a href="' . get_category_link( $subcategory->term_id ) . '">Read more</a></div></div>';
}

           }
        ?>

Answer 3

要获取 所有嵌套级别，您可以使用 child_of 参数。

然后您可以使用 array_reduce 或类似的方法构建您想要的任何结构

$category = get_category( get_query_var( 'cat' ) );
$cat_id   = $category->cat_ID;

$categories = get_categories(
    [
        'orderby'    => 'slug',
        'child_of'   => $cat_id,
        'hide_empty' => false,
    ]
);

$content = array_reduce(
    $categories,
    function ( $content, $category ) {
        ob_start();
        ?>
        <div class="cat-subcat">
            <h2 class="cat-title"><?php echo esc_html( $category->name ) ?></h2>
            <p class="cat-text"><?php echo esc_html( $category->description ) ?></p>
        </div>
        <?php

        return $content . ob_get_clean();
    },
    ''
);

echo sprintf( '<div class="cat-list">%1</div>', $content );

Answer 4

这是基于您的回答，但是 markup/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()按单词修剪类别描述，但你真的可以使用自己的函数来修剪按字符。 :)

示例输出和样式

/* 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 -->

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

Display subcategories in wordpress, but not in a list

wordpress

wordpress-theming

custom-wordpress-pages

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

如果要分层显示

示例输出和样式