HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
WordPress

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

WordPress2014.07.24

カテゴリの一覧を出力したいときに、一番簡単なのは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>';
	}
?>
この記事は公開から 1237 日経っているため、情報が古くなっている可能性があります。

PAGE TOP