Close

Web技術Tips

Homepage Tips Homepage Tips

ホームWeb技術TipsWordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする

SHARE

SHARE

WordPress 2014.07.24(公開)

WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする

カテゴリの一覧を出力したいときに、一番簡単なのはwp_list_categoriesだと思いますが、この関数はシンプルにリストタグ<li>でカテゴリの数だけループして出力するだけです。

もちろん引数で各種設定はできますが、細かなことはできません。

例えばカテゴリによってどんなアイコンを表示させるだとか、<li>の中に複雑なHTML要素を入れたい場合などはwp_list_categoriesだけでは対応しきれません。

get_categoriesでカテゴリのリストを自由自在に。

そこで登場するのがget_categories関数です。

get_categoriesは実はwp_list_categories関数の内部で使用されています。つまりwp_list_categoriesは、get_categories関数を元にして、最終的にシンプルなリストタグを出力しているだけなのです。

従って少し複雑なカテゴリのリストを取得したい場合は大元であるget_categoriesを使用するという訳です。

サンプルコード

下記のサンプルコードは、当ブログの【sidebar.php】に設定しているコードで、カテゴリの一覧を表示させるためのものです。

おおまかに次のような処理をしています。

  1. まずは親カテゴリのみ取得する
  2. 取得したカテゴリに設定されているカスタムフィールド(Advanced Custom Fieldsを使用)からアイコン画像を取得する
  3. 親カテゴリを出力する
  4. 子カテゴリが存在しているかチェック
  5. 子カテゴリが存在する場合は子カテゴリのリストを出力する
<?php
	//一番親階層のカテゴリをすべて取得
	$categories = get_categories('parent=0');
	
	//取得したカテゴリへの各種処理
	foreach($categories as $val){
		//カテゴリのリンクURLを取得
		$cat_link = get_category_link($val->cat_ID);
		//カスタムフィールドでアイコン取得する用のIDを取得
		$post_id = 'category_' . $val -> cat_ID;
		//アイコンのソース取得
		$attachment_id=get_field('category_icon_small',$post_id);
		$icon_src = wp_get_attachment_image($attachment_id,'full');
		//親カテゴリのリスト出力
		echo '<li>';
		echo '<p class="fleft">' . $icon_src . '</p>';
		echo '<div class="overflow"><a href="' . $cat_link . '">' . $val -> name . '</a>';
		
		//子カテゴリのIDを配列で取得。配列の長さを変数に格納
		$child_cat_num = count(get_term_children($val->cat_ID,'category'));
		
		//子カテゴリが存在する場合
		if($child_cat_num > 0){
			echo '<ul>';
			//子カテゴリの一覧取得条件
			$category_children_args = array('parent'=>$val->cat_ID);
			//子カテゴリの一覧取得
			$category_children = get_categories($category_children_args);
			//子カテゴリの数だけリスト出力
			foreach($category_children as $child_val){
				$cat_link = get_category_link($child_val -> cat_ID);
				echo '<li><a href="' . $cat_link . '">' . $child_val -> name . '</a>';
			}
			echo '</ul>';
		}
		echo '</div></li>';
	}
?>

DOE(横浜)のニュースとブログ

News News

横浜のWeb制作会社DOEはホームページ制作に関連するWeb技術、Webデザイン、SEO対策情報など人気&おすすめ記事を随時公開中です。
尚、Xでは現場の声がリアルタイム配信中です。良かったらShareして繋がってください。