1. TOPTOP
  2. Webサービス

WordPress wp_list_categoriesを活用する ~フィルターフックの実例を詳細に解説(PHPのpreg_replace・正規表現・後方参照の応用)

wordpress_wp_list_categories_hook_example_0

先日、WordPressサポートフォーラムにおいて、「フッターで使っているカテゴリーメニューのスタイリングについて」(新しいタブで開く)という質問をしたら、下記の通りフィルターフックを活用したコードを教えていただきました。

function my_list_categories( $output ) {
	$output = preg_replace( '/<\/a>\s(\(\d+\))/', ' $1</a>', $output );
	return $output;
}

add_filter ( 'wp_list_categories', 'my_list_categories' );

ただ「分からないからコードを教えてもらってファイルにコピペしました。めでたしめでたし」で終わってしまっては、せっかくの貴重なアドバイスが身につきません。そこで教えていただいたコードについて、PHPプログラミングを始めたばかりの方でも分かるように解説をしたいと思います。

カテゴリーメニューの記事数も装飾したい

wordpress_wp_list_categories_hook_example_2

まず教えていただいたコードの意味です。WordPressにはウィジェット機能のうちカテゴリーの機能があります。カテゴリーはデフォルトではカテゴリーの名前しか出力されませんが、オプションとしてそのカテゴリーとして書いた記事数を出力することが可能です。

wordpress_wp_list_categories_hook_example_1

ただし、(テーマにもよると思いますが)当エコテキブログで使っているテーマで記事数を出力すると、なぜか記事数には水色(#75dbe7)の装飾はされません。加えてフォントサイズも統一されません。この状態では何となく違和感を感じたので、カテゴリー名とともに記事数も装飾したいと考えました。

add_filter関数とget_archives_link

そこでWordPressフォーラムで、add_filter関数とwp_list_categoriesフックの活用方法を個別具体的に教えていただきました。そのコードをfunctions.phpにコピペすると、冒頭の画像の通り年月と記事数がキレイに1行に並びます。

フィルターフックとは

まずWordPressにおけるフックという言葉の意味です。WordPressではWebサイトを表示するにあたって様々な処理フローがありますが、フックはその処理フローの間に割り込んで、処理をカスタマイズすることです。

具体的にはアクションフック(add_action)と、今回紹介するフィルターフック(add_filter)の2種類のフックがあります。前者は処理を追加し、後者は何かの値を返す処理をします。

get_archives_linkとは

get_archives_linkとはWordPress関数の一種です。アーカイブへのリンク文字列を所定のフォーマットまたはカスタムコードに基づいて取得します。

コードの詳細解説

ではフィルターフックによるget_archives_linkの活用方法をコードを少しずつ書き足しながら解説しましょう。

関数の概要を作成

そもそもフィルターフックを利用するためには、カスタマイズで値を返したい関数が必要となります。そこでまずPHPの文法に基づいて関数の概要を作成する必要があります。

function my_list_categories( $output ) {
	return $output;
}

関数名は任意です。ここでは”my_get_archives_link”とします。なおフィルターフックは値を返す処理です。したがってmy_list_categories関数の処理を終了させるにあたって、returnを使い変数$outputの値を返します。

add_filterでフックと関数の登録

次にwp_list_categories関数をフィルターフックに登録します。具体的にはここでadd_filerを利用します。

add_filter ( 'wp_list_categories', 'my_list_categories' );

add_filterは第一引数にフィルターフックの名前、第二引数にカスタマイズした関数名を入力します。第三引数の処理の優先順位、第四引数のカスタマイズした引数の個数は省略します。

第一引数について

wp_list_categoriesフックです。アーカイブへのリンク文字列を、所定のフォーマットまたはカスタムコードに基づいて取得します。

第二引数について

カスタマイズした関数名です。my_list_categories関数を登録します。

wp_list_categories関数の引数を作成

function wp_list_categories( $output ) {
  $output = preg_replace( '/<\/a>\s(\(\d+\))/', ' $1</a>', $output );	
  return $output;
}
add_filter ( 'wp_list_categories', 'my_list_categories' );

$outputはフィルターフックの処理としてmy_get_archives_link関数によって変更したい値の引数です。その$outputはPHPの組み込み関数によって作成されます。

preg_replace()とは

preg_replace()はWordPressではなく、PHPの組み込み関数で正規表現に基づいた検索および置換を行います。第一引数は検索パターン、第二引数は置換後の文字列、第三引数は検索や置換の対象となる文字列を入力します。

第一引数の正規表現について

第一引数の中で使われている”/<\/a>\s(\(\d+\))/”は、「aタグの閉じかっこの後にある数字」を表します。例えば”(25)”や”(9)”などを表します。ただ、正規表現に慣れていない方は読み取ることが難しいと思います。少しずつ根気よく読み解いて行きましょう。

ダブルクオーテーション

まずダブルクオーテーションの中で文字列や記号を囲っている”//(スラッシュ)”です。最初と最後のスラッシュで検索対象文字列の最初と最後を示します。

メタ文字について

ダブルクオーテーションの中では、メタ文字が使われています。意味は以下の通りです

"\s" → タブ
"\d" → 数字
"()" → 直前の文字列の個数指定
"+"  → 1個以上の文字列
メタ文字(バックスラッシュ)に続くメタ文字

次に見るべき箇所は、”\/”、”\(“、”\)”です。基本的に”/”、”(“、”)”は正規表現の世界ではメタ文字と呼ばれ、それぞれが特殊な意味をもつ記号です。ですが、この部分では単にHTMLタグの終端を表す文字列と丸かっこを表現したいだけです。そのため”\(バックスラッシュ)”を用いることで、特殊な意味を打ち消して単なる文字列として扱うようにしています。

第二引数の後方参照について

第二引数で使われている”$1″は後方参照と呼ばれる表現です。後方参照は第一引数(検索対象文字列)でメタ文字としての”()”を使ったときに、第二引数で宣言するお約束みたいなものと解釈してください。

解説のまとめ

つまり冒頭で紹介したコードをあえて日本語に変換すると「wp_list_categoriesのポイントでmy_list_categories関数をフックすると”Webサービス(343)”を”Webサービス(343)“にする」という意味になります。そうすると冒頭の画像のようにカテゴリーメニューに引き続いて記事数にもリンクと水色の装飾が施されます。

プログラミング初心者の方にとって、正規表現や後方参照は難しかったかもしれません。プログラミングに付随する知識についても参考書やGoogle検索で根気よく調べましょう。