Невозможно стилизовать WordPress wp_list_categories

Question

У меня проблема с отображением моего wp_list_categories со стилем. Я уже использую аргументы и т. Д., Но это, похоже, не помогает с проблемой.

Я хочу отобразить те же подкатегории для одной статьи.

Вот мой код:

<?php
if (is_home()) {
    wp_list_categories('orderby=id&title_li=none&depth=1');
} else {
    $category = get_the_category();
    $cat_term_id = $category[0]->term_id;
    $cat_category_parent = $category[0]->category_parent;
    $listcat = wp_list_categories('echo=0&child_of='.$cat_category_parent.'&title_li=');
    $listcat = str_replace("cat-item-".$cat_term_id, "cat-item-".$cat_term_id." current-cat", $listcat);
  if ( in_category( $cat_term_id ) || post_is_in_descendant_category( $cat_term_id )) {
      echo $listcat;
  }
}
?>
</ul>

и вот результат:

Я хочу, чтобы результат был таким:

Answer 1

Я думаю, что это может сработать для вас, но я не совсем уверен, на какой файл темы вы ссылаетесь выше.

<?php $parent_cat_id = 1; // Change this ID to match the ID value of the "Sepeda" category ?>
<?php $categories = get_categories( "child_of=$parent_cat_id" ); ?> 

<?php if ($categories) : ?>
    <ul id="category-list">
        <?php // Print the link for 'Sepeda' ?>
        <?php echo "<li class='category-name'><a href='" . get_category_link($parent_cat_id) . "'>" . get_cat_name($parent_cat_id) . "</a></li>"; ?>

        <?php // Loop through the sub-categories of 'Sepeda' and print the names and links ?>
        <?php foreach ($categories as $cat) { 
            echo "<li class='category-name'><a href='" . get_category_link( $cat->term_id ) . "'>" . $cat->name . "</a></li>";
        } ?>

        <?php wp_reset_query();  // Restore global post data  ?> 
    </ul>
<?php endif; ?>

Затем вы можете использовать этот CSS для стилизации списка категорий соответствующим образом:

#category-list {
    width: 250px;
    padding: 5px;
    background: white;
    list-style: none;
}
.category-name {
    background-color: #694489;
    color: white;
    min-height: 40px;
    text-align: center;
    line-height: normal;
    padding-top: 10px;
}
.category-name + .category-name {
    margin-top: 10px;
}