WordPressの標準のカテゴリー表示ってちょっと物足りないですよね。(ですよね?!)

なので少し手を入れて以下のような表示にしました(この段階ではjQuery適用前なので、子カテゴリーもすべて表示されています)。

blog02

階層表示されており、親カテゴリだけカラフルになっていますよね。これは以下のように実装しました。

category.php

<aside>
	<div class="sub_content">
		<ul>
			<?php wp_list_categories('orderby=order&show_count=1&title_li=');?>
		</ul>
	</div>
</aside>

出力されるHTML

<aside>
	<div class="sub_content">
		<ul>
			<li class="cat-item cat-item-107"><a href="http://hi-rom.com/blog/archives/category/adobe" title="Adobe に含まれる投稿をすべて表示">Adobe</a> (15)
				<ul class='children'>
					<li class="cat-item cat-item-141"><a href="http://hi-rom.com/blog/archives/category/adobe/aftereffects" title="AfterEffects に含まれる投稿をすべて表示">AfterEffects</a> (8)</li>
					<li class="cat-item cat-item-4"><a href="http://hi-rom.com/blog/archives/category/adobe/flash" title="Flash に含まれる投稿をすべて表示">Flash</a> (1)</li>
					<li class="cat-item cat-item-153"><a href="http://hi-rom.com/blog/archives/category/adobe/illustrator" title="Illustrator に含まれる投稿をすべて表示">Illustrator</a> (1)</li>
					<li class="cat-item cat-item-108"><a href="http://hi-rom.com/blog/archives/category/adobe/photoshop" title="Photoshop に含まれる投稿をすべて表示">Photoshop</a> (4)</li>
					<li class="cat-item cat-item-171"><a href="http://hi-rom.com/blog/archives/category/adobe/premiere" title="Premiere に含まれる投稿をすべて表示">Premiere</a> (1)</li>
				</ul>
			</li>
			<li class="cat-item cat-item-160"><a href="http://hi-rom.com/blog/archives/category/cgcad" title="CG/CAD に含まれる投稿をすべて表示">CG/CAD</a> (30)
				<ul class='children'>
					<li class="cat-item cat-item-170"><a href="http://hi-rom.com/blog/archives/category/cgcad/123ddesign" title="123D Design に含まれる投稿をすべて表示">123D Design</a> (13)</li>
 
				(略)
 
		</ul>
	</div>
</aside>

出力されるHTMLを見るとそれぞれのliタグにclass=”cat-item cat-item-xx”が設定されています。

したがって親のcat-item-xxのxxの部分の番号をメモしておいて、それをcssで調整するという非常に泥臭い実装をしています。

style.css

.cat-item-107 {
	background-image:url(./img/category01.png);
	background-repeat:no-repeat;
	padding:0px 0px 0px 50px;
	vertical-align:middle;
}
.cat-item-160 {
	background-image:url(./img/category02.png);
	background-repeat:no-repeat;
	padding:0px 0px 0px 50px;
	vertical-align:middle;
}
・・・(略)

 

なお、試行錯誤した部分は端折りましたが、実はこのカテゴリ表示結構悩ましかったです。

並び順を自分の好きなようにしたり、親の記事数をうまく表示したり、自力で実装するのはなかなか大変そうですが以下のようにいろいろと試してみたので凝れば面白い表示もできそうな気もします。

いろいろ1

<?php //全カテゴリ名取得
		$cat_all = get_terms( "category", "fields=all&get=all" );
		foreach($cat_all as $value):
?>
<li><a href="&lt;?php echo get_category_link($value-&gt;term_id); ?&gt;">
	<?php echo $value->name;?></a> (<?php echo $value->count;?>)</li>
<?php endforeach; ?>

いろいろ2

<?php 
	$cat = get_the_category();
	echo "name:".$cat[0]->name."<br>";
	echo " slug:".$cat[0]->slug."<br>";
	echo " parent:".$cat[0]->parent."<br>";
	echo " count:".$cat[0]->count."<br>";
?>

いろいろ3

<?php
	$chosen_id = 3; // カテゴリID
	$thisCat = get_category($chosen_id);
	echo "count:".$thisCat->count;
	echo " parentID:".$thisCat->parent; //親がない場合は0を返す
?>

いろいろ4

<?php echo get_category(18)->category_count; ?>

いろいろ5

<?php
	$categories=get_categories('orderby=id');
	foreach($categories as $category) {
		if(!$category->category_parent) {//親の時
			if($category->name == "任意のカテゴリ名"){
				//なんかの処理
			}
		}
	}
?>

トラックバック

コメント

  1. Rodney Mathony より:

    Thank you, I’ve just been looking for information approximately this subject for ages and yours is the greatest I’ve found out till now. However, what in regards to the bottom line? Are you positive in regards to the supply?

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です