WordPressでカテゴリーを表示させる際、子要素に対してインデントを設ける方法

###前提・実現したいこと

WoedPressでブログカテゴリーのリストを作成しています。
下に記しているコードを使用した場合、親要素と子要素が等しく表示されてしまい判別しにくくなってしまいます。
図に示したように、子要素に対してインデントを設けたい場合何か良い方法はありますか？

###現在記述しているコード

<section id="category_list">
 <h3 class="btn">カテゴリー</h3>
  <ul>

<?php $cat_all = get_terms( "category", "fields=all&get=all" );
foreach($cat_all as $value): ?>

  <li>
  <a href="<?php echo get_category_link($value->term_id); ?>" class="rpthumb clear"><span cla ss="rpthumb-title"><?php echo $value->name;?>(<?php echo get_category($value->term_id)->cat egory_count; ?>)</span></a>
  </li>

  <?php endforeach; ?>

 </ul>
</section>

###出力されたHTML

<section id="cate" class="openBox">
  <h3 class="btn">カテゴリー</h3>
  <ul>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（親要素）(8)</span></a>
  </li>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ/子要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（子要素）(12)</span></a>
  </li>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ/子要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（子要素）(5)</span></a>
  </li>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（親要素）(11)</span></a>
  </li>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（親要素）(37)</span></a>
  </li>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（親要素）(8)</span></a>
  </li>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ/子要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（子要素）(6)</span></a>
  </li>
  <li>
   <a href="http://ドメイン名/親要素のスラッグ" class="rpthumb clear"><span class="rpthumb-title">カテゴリ名（親要素）(56)</span></a>
  </li>
  </ul>
</section>

###現在の状況と理想（イメージ画像）

Lhankor_Mhy

2016/05/31 08:55

出力されたHTMLをご提示いただくことは可能ですか？

agave

2016/05/31 09:24 編集

Lhankor_Mhy様メッセージありがとうございます。出力結果を追記いたしました。

Lhankor_Mhy

2016/05/31 09:34

親要素と子要素のHTML構造に違いがないですね……　これは無理じゃないかなあ……　PHPの方を触った方がいいと思いますよ。

kei344

2016/05/31 09:35

CSSのメニューに関わる部分を質問文に追記できませんか？よろしくお願いします。

Lhankor_Mhy

2016/05/31 09:38

ちなみに、これは参考になります？　なんとなくウィジェットの話ではなさそうなので違う気もするのですが。http://tsumaranai-man.com/category-kaisou

agave

2016/06/01 07:50

Lhankor_Mhy様、kei344様この度はメッセージを投稿して頂きありがとうございました。お二人のご意見を参考に、今後はなるべく多くの情報を開示するよう心掛けたいと思います。ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

出力されたHTMLで、子カテゴリのみインデントするのは難しいと思います。

なので特に理由がなければ、コードをwp_list_categories関数を使うように変更すると良いでしょう。

php
1<?php wp_list_categories(); ?>

出力結果の例

html
1<li class="categories">カテゴリー
2  <ul>
3    <li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a></li>
4    <li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a>
5      <ul class="children">
6        <li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">子カテゴリー名</a></li>
7        <li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">子カテゴリー名</a></li>
8      </ul>
9    </li>
10    <li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a></li>
11  </ul>
12</li>