wp_list_categoriesのリストにクラス付加

解決済 skunk0915
(@skunk0915)

11年、 11ヶ月前
こんにちは。いつもお世話になっております。

wp_list_categories();で親・子・孫のカテゴリリストを出力するとして、それぞれに独自のスタイルを与えるためにclassを付与する方法はあるでしょうか？

↓このようなコードを出力したいのですが…。
```
<ul>
	<li class="oya">親
		<ul>
			<li class="ko">子
				<ul>
					<li class="mago">孫
					</li>
				</ul>
			</li>
		</ul>
		</li>
</ul>
```

5件の返信を表示中 - 1 - 5件目 (全5件中)

モデレーター jim912
(@jim912)

11年、 11ヶ月前
skunk0915さん、こんにちは。

いちばんわかりやすいのは、jQueryを使って、classを追加する方法です。
PHPでやるとなると、それなりの理解が必要ですが、
1. Walker_Categoryを継承したクラスを作り
2. start_elメソッドを定義し、親クラスのメソッドをオーバーライド
3. その際に生成されるコードで、$depth変数を用いて、階層によって異なるclassを出力
4. wp_list_categoriesでのパラメーターには、上述したクラスのインスタンスを指定
となろうかと思われます。
トピック投稿者 skunk0915
(@skunk0915)

11年、 11ヶ月前

jim912さん

いつもありがとうございます。

なるほど、こういうときにwalkerパラメータを使うんですか。
他のパラメータはある程度理解しているつもりでしたが、walkerについては調べてもなかなか理解できず、ご提示いただいた手順の「1」で行き詰まっているレベルです。

比較的需要の多い方法だと思い、もっと簡単にできるものかと思っていましたが甘かったです。

ただ、これをやらないことにはCSSが冗長になってしまいますので、がんばってみます。

ありがとうございました。
nobita
(@nobita)

11年、 11ヶ月前
こんにちは

作ってみましたのでよかったら、うまく動くか評価お願いします
3階層限定

functions.php
```
class MyWalker extends Walker_Category {

	function start_el(&$output, $category, $depth, $args) {
		extract($args);

		$cat_name = esc_attr( $category->name );

		$link = '<a href="%1$s" rel="%2$s">%3$s</a>';

		$link = sprintf($link
							, esc_attr( get_term_link($category) )
							, $category->slug
							, $cat_name
							);
		$check_mago = count( get_ancestors( $category->term_id, 'category' ) );

		if($check_mago == 2 and $category->category_parent > 0 ){
			$class = 'mago';
		}
		if($check_mago == 1 and $category->category_parent > 0 ){
			$class = 'kodomo';
		}
		if($category->category_parent == 0){
			$class = 'oya';
		}
		$output .= '<li class="'.$class.'">'.$link;
	}
}
```
template
```
<?php
$MyWalker = new MyWalker();
$args = array('walker' => $MyWalker);
?>
<ul>
<?php
wp_list_categories($args);
?>
</ul>
```
トピック投稿者 skunk0915
(@skunk0915)

11年、 11ヶ月前

こ、これは…
まさに希望していたコードが出力されました。

わざわざ完成形にまで作り上げたものをご提供いただき誠にありがとうございます！

正直なところ一見しただけではなぜこの構文があのコードを出力するのか理解できていないため、これからこちらを元にいろいろ試して理解を深めさせてもらいたいと思います。

本当にありがとうございました！

scheppen15
(@scheppen15)

10年、 10ヶ月前

こんばんは。

こちらの方法だとリンクに関係のない、「カテゴリー」という文字が出てくるのですが、

カテゴリーという文字を消す方法を知っている方はいらっしゃりませんか？