サポート » テーマ » wp_list_categories()が出力するHTMLを変更したい。

  • 解決済 khh2004

    (@khh2004)


    Googleや過去ログ等を探ってみましたが
    探し方が悪いせいか見つからなかったので
    トピックをあげさせて頂きました。

    • Cat 1
      • Cat 1.1
      • Cat 1.2
      • Cat 1.3
    • Cat 2
      • Cat 2.1
      • Cat 2.2
      • Cat 2.3

    上記の様にカテゴリーがあるとします。
    サイドバーでwp_list_categories()を使いカテゴリーリストを出力すると

    <li class="categories">カテゴリー
    	<ul>
    		<li class="cat-item cat-item-*"><a href="#" title="Cat 1">Cat 1</a>
    			<ul class='children'>
    				<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 1.1</a></li>
    				<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 1.2</a></li>
    				<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 1.3</a></li>
    			</ul>
    		</li>
    		<li class="cat-item cat-item-*"><a href="#" title="Cat 1">Cat 2</a>
    			<ul class='children'>
    				<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 2.1</a></li>
    				<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 2.2</a></li>
    				<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 2.3</a></li>
    			</ul>
    		</li>
    	</ul>
    </li>

    上記の様にHTMLで出力されます。
    この出力されるHTMLを

    <h2><a href="#" title="Cat 1">Cat 1</h2>
    <ul class='children'>
    	<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 1.1</a></li>
    	<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 1.2</a></li>
    	<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 1.3</a></li>
    </ul>
    
    <h2><a href="#" title="Cat 1">Cat 2</a>
    <ul class='children'>
    	<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 2.1</a></li>
    	<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 2.2</a></li>
    	<li class="cat-item cat-item-*"><a href="#" title="Cat 1.1">Cat 2.3</a></li>
    </ul>

    とするにはどうすれば良いでしょうか。
    ご指導ご教授の程、宜しくお願い致します。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • モデレーター jim912

    (@jim912)

    khh2004さん、こんにちは。

    codexのテンプレートタグ/wp list categoriesにある子カテゴリのみの表示を参考に、カテゴリ毎にwp_list_categoriesを実行する方法ではいかがでしょうか。

    jim912様 コメントありがとうございます。

    お教え頂いた方法は一番最初に思いつきました。
    しかし、その方法ではカテゴリーを追加する毎にサイドバーを弄らなくてはならないと思い、実用性にかけるのではないかと判断し、こちらのフォーラムにトピックを立てさせて頂きました。

    モデレーター jim912

    (@jim912)

    khh2004さん

    では、下記コードにて、最上位のカテゴリの配列データが取得できますので、それをforeachなどでループし、子カテゴリのみのリスト表示にさせれば、ご要望の出力が実現出来るかと思います。

    get_categories( 'parent=0&hide_empty=0' )

    jim912様 コメントありがとうございます。

    色々試行錯誤していて、あと一歩まではできました。

    <?php
    $categories = get_categories('parent=0&hide_empty=0&orderby=id');
    foreach($categories as $category):
    	$v_cat = $category->cat_ID;
    	$v_cat_list = $category->cat_name;
    	$v_cat_list_child = wp_list_categories("orderby=id&hide_empty=0&title_li=&use_desc_for_title=0&child_of=$v_cat&depth=1&echo=0");
    	if ( strpos($v_cat_list, __('No categories')) === false) {
    		echo "<h2>$v_cat_list</h2>\n";
    	}
    	if ( strpos($v_cat_list_child, __('No categories')) === false) {
    		echo "<ul>\n$v_cat_list_child\n</ul>\n";
    	}
    endforeach;
    ?>

    と表示させる処まではできました。
    しかし、h2タグに入るカテゴリー名をリンクにする事ができません。
    どの様な感じにすれば良いでしょうか?
    また、上記ソースに改善した方が良い点などありましたら、お教え頂けませんでしょうか?

    ご指導とご教授を宜しくお願い致します。

    上記の件、一応は自己解決しました。

    <?php
    	$categories = get_categories('parent=0&hide_empty=0&orderby=id');
    	foreach($categories as $category):
    		$v_cat_id = $category->cat_ID;
    		$v_cat_Parent_title = $category->cat_name;
    		$v_cat_Parent_url = get_category_link($v_cat_id);
    		$v_cat_child_list = wp_list_categories("orderby=id&hide_empty=0&title_li=&use_desc_for_title=0&child_of=$v_cat_id&depth=1&echo=0");
    		if ( strpos($v_cat_Parent_title, __('No categories')) === false) {
    			echo "<h2><a href=\"$v_cat_Parent_url\" title=\"$v_cat_Parent_title\">$v_cat_Parent_title</a></h2>\n";
    		}
    		if ( strpos($v_cat_child_list, __('No categories')) === false) {
    			echo "<ul>\n$v_cat_child_list\n</ul>\n";
    		}
    	endforeach;
    ?>

    また、上記ソースに改善した方が良い点などありましたら、お教え頂けませんでしょうか?

    ご指導とご教授を宜しくお願い致します。

    モデレーター jim912

    (@jim912)

    khh2004さん、こんにちは。

    できましたね。^^
    では、多少なりといくつか気づいた点を、

    • foreachの前にif分岐
      この場合ルートカテゴリを全て削除することは出来ない(はず)なので、$categoriesは必ず配列になるはずではありますが、一応、foreachの前にif ( is_array( $categories ) )とした方が確実かと思います。(これは、私もよくやるエラーなので、自戒をこめて。)
    • h2のif分岐は不要
      $v_cat_Parent_titleは、wp_list_categoriesが生成するデータとは異なりますので、__(‘No categories’)と照合させる必要はないように思います。
    • エスケープ処理は重要
      wp_list_categoriesの場合は、自動でエスケープ処理がなされますが、自分で生成したコードの場合は、エスケープ処理も自前になります。title属性にはattribute_escape(2.8系ならesc_attr)を、カテゴリー名表示にはwp_specialcharsなどをかけてエスケープ処理を行ったほうがよいです。

    少々、重箱の隅をつつくようで申し訳ありませんが、今後の参考になれば幸いです。

    jim912様 コメントありがとうございます。

    アドバスを元にソースを変更してみました。

    <?php
    	$categories = get_categories('parent=0&hide_empty=0&orderby=id');
    	if (is_array($categories)) {
    		foreach($categories as $category):
    			$v_cat_id = $category->cat_ID;
    			$v_cat_Parent_title = $category->cat_name;
    			$v_cat_Parent_t_a = wp_specialchars($v_cat_Parent_title);
    			$v_cat_Parent_t_u = attribute_escape($v_cat_Parent_title);
    			$v_cat_Parent_url = get_category_link($v_cat_id);
    			$v_cat_child_list = wp_list_categories("orderby=id&hide_empty=0&title_li=&use_desc_for_title=0&child_of=$v_cat_id&depth=1&echo=0");
    			echo "<h2><a href=\"$v_cat_Parent_url\" title=\"$v_cat_Parent_t_u\">$v_cat_Parent_t_a</a></h2>\n";
    			if ( strpos($v_cat_child_list, __('No categories')) === false) {
    				echo "<ul>\n$v_cat_child_list\n</ul>\n";
    			}
    		endforeach;
    	}
    ?>

    もっと短いソースで済むのかもしれませんが
    これ以上にやり方が思いつきませんで・・・。

    まだ色々出てきそう気がしますので、上記ソースに改善した方が良い点などありましたら、お教え頂けませんでしょうか?
    ご指導とご教授を宜しくお願い致します。

    モデレーター jim912

    (@jim912)

    khh2004さん、こんにちは。

    使用する変数を簡略化はできますが、よろしいのではないでしょうか。^^b

    jim912様 コメントありがとうございます。

    テンプレートを柔軟にしたかったので、ウィジェットにして利用する事にしました。
    この度はアドバイス有難うございました。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「wp_list_categories()が出力するHTMLを変更したい。」には新たに返信することはできません。