サポート » 使い方全般 » wp_list_categoriesのリストにクラス付加

  • 解決済 skunk0915

    (@skunk0915)


    こんにちは。いつもお世話になっております。

    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)

    skunk0915さん、こんにちは。

    いちばんわかりやすいのは、jQueryを使って、classを追加する方法です。
    PHPでやるとなると、それなりの理解が必要ですが、

    1. Walker_Categoryを継承したクラスを作り
    2. start_elメソッドを定義し、親クラスのメソッドをオーバーライド
    3. その際に生成されるコードで、$depth変数を用いて、階層によって異なるclassを出力
    4. wp_list_categoriesでのパラメーターには、上述したクラスのインスタンスを指定

    となろうかと思われます。

    jim912さん

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

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

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

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

    ありがとうございました。

    こんにちは

    作ってみましたのでよかったら、うまく動くか評価お願いします
    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>

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

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

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

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

    こんばんは。

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

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

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「wp_list_categoriesのリストにクラス付加」には新たに返信することはできません。