前提・実現したいこと
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>現在の状況と理想（イメージ画像）
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
出力されたHTMLで、子カテゴリのみインデントするのは難しいと思います。
なので特に理由がなければ、コードをwp_list_categories関数を使うように変更すると良いでしょう。
<?php wp_list_categories(); ?>出力結果の例
<li class="categories">カテゴリー
<ul>
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a></li>
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a>
<ul class="children">
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">子カテゴリー名</a></li>
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">子カテゴリー名</a></li>
</ul>
</li>
<li class="cat-item cat-item-ID"><a href="http://～/" title="カテゴリー概要">カテゴリー名</a></li>
</ul>
</li>
引用元：<?php wp_list_categories( パラメータ ); ?>
あとは、childrenクラスにmarginなどをCSSで設定すれば実現できるはずです。
また、引数のオプションは、公式ドキュメントが詳しいです。
テンプレートタグ/wp list categories
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
Lhankor_Mhy
2016/05/31 17:55
出力されたHTMLをご提示いただくことは可能ですか？
agave
2016/05/31 18:21 編集
Lhankor_Mhy様
メッセージありがとうございます。
出力結果を追記いたしました。
Lhankor_Mhy
2016/05/31 18:34
親要素と子要素のHTML構造に違いがないですね…… これは無理じゃないかなあ…… PHPの方を触った方がいいと思いますよ。
kei344
2016/05/31 18:35
CSSのメニューに関わる部分を質問文に追記できませんか？よろしくお願いします。
Lhankor_Mhy
2016/05/31 18:38
ちなみに、これは参考になります？ なんとなくウィジェットの話ではなさそうなので違う気もするのですが。http://tsumaranai-man.com/category-kaisou
agave
2016/06/01 16:50
Lhankor_Mhy様、kei344様
この度はメッセージを投稿して頂きありがとうございました。お二人のご意見を参考に、今後はなるべく多くの情報を開示するよう心掛けたいと思います。ありがとうございました。