Afficher les sous-catégories dans wordpress, mais pas dans une liste

J’ai besoin d’afficher les sous-catégories d’une catégorie sur mon nouveau site Web.

Ma structure est la suivante :

Test1
  - Sub1_1
  - Sub1_2
Test2
  - Sub2_1
  - Sub2_2

Lorsque je suis sur la page de catégorie de « Test1 », j’ai besoin d’afficher les sous-catégories (« Sub1_1 » et « Sub1_2 »). J’ai trouvé l’extrait suivant sur le Web qui affiche le sous-chat :

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 } ?>

Mais il le fait dans une liste non ordonnée avec <ul>et <li>.

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

Au lieu de cette liste, j’ai besoin d’afficher un div avec le titre de la sous-catégorie et la description du sous-chat correspondant (ou mieux encore : un extrait de la description, mais pour le moment, je serais heureux d’obtenir simplement la description complète). La mise en page doit être quelque chose comme

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

Comment puis-je ajuster l’extrait de code pour qu’il puisse être affiché comme je le souhaite ?

Solution n°1 trouvée

Pour obtenir tous les niveaux imbriqués , vous pouvez utiliser child_ofparam.

Ensuite, vous pouvez construire la structure de votre choix avec array_reduceou avec une approche similaire

$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 );

Solution n°2 trouvée

Je l’ai fait de cette façon maintenant et ça marche, mais c’est peut-être encore trop compliqué ou faux ou inhabituel… si vous voyez une chance d’améliorer le code, veuillez laisser un commentaire car je suis nouveau dans les modèles PHP et 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>';
   }
?>

Solution n°3 trouvée

Ceci est basé sur votre réponse, mais le balisage/HTML est basé sur ce que vous avez montré dans la question.

Si vous voulez juste un affichage à plat de tous les enfants de la catégorie

Ensuite, tout ce que vous avez à faire est d’utiliser child_ofà la place de parentdans votre $args:

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

Si vous souhaitez un affichage hiérarchique

C’est-à-dire la même structure imbriquée que vous obtiendriez en utilisant wp_list_categories().

Ensuite, vous pouvez utiliser des appels de fonction récursifs .

// 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() );

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