【WordPress】wp_get_archives()関数で表示されるHTMLを安全にカスタマイズ

wp_get_archives()関数は引数で指定することで年月日別のアーカイブを表示することができる関数です。デフォルトでも簡単にリスト表示することができるのでサイドバーでも使いやすい関数です。

引数に、’show_post_count’をtrueで渡すと年月日の後に「(記事数)」と表示されるので月別アーカイブや年別アーカイブを作る際には重宝します。ただ、この記事数は表示される年月日が含まれる<a>タグの外に表示されています。

今回は、wp_get_archives()関数を使っていて、「(記事数)」を<a>タグの中に入れたい機会があったので、add_filter()関数を使って安全にwp_get_archives()関数で出力されるHTMLをカスタマイズしていきます。

wp_get_archives()の基本情報

まずは引数に何も指定しないままwp_get_archives()を出力してみます。

<?php wp_get_archives();?>

すると、出力結果はこうなります

<li>
  <a href="http://white-sesame.jp/date/2021/08/">2021.08</a>
</li>
...

次は、記事数を表示させます。

<?php
$arg = array(
  'show_post_count' => 1,
);
wp_get_archives( $arg );
?>

引数配列の中に’show_post_count’を1とするパラメータを入れればいいだけなので簡単です。この出力結果は以下になります。

<li>
  <a href="http://white-sesame.jp/date/2021/08/">2021.08</a>
  &nbsp;(10)
</li>

a閉じタグの後ろに&nbsp;(10)と表示されます。「&nbsp;」は改行禁止のスペースを表す特殊文字で記事数が改行されずにリンクの後ろにつく役割をしています。「(10)」というのが記事数で2021年8月には10記事存在するという意味です。

ほかにも、表示上限や表示順などパラメータがありますが、ここでは省略します。

‘format’パラメータを使用

wp_get_archives()関数では’format’というパラメータでHTMLをある程度カスタマイズすることができます。

formatは、‘link’、 ‘option’、 ‘html’の３種類の形式が登録されていて、その３種類に当てはまらない値を指定した際に出力するカスタムという形式が登録されています。

実際に引数に’format’を指定して出力した際の表示結果は以下となります。

<!-- 'html'を指定 -->
<li>
  <a href="http://white-sesame.jp/date/2021/08/">2021.08</a>
  &nbsp;(10)
</li>
<!-- 'option'を指定 -->
<option value="http://white-sesame.jp/date/2021/08/"> 2021.08 &nbsp;(10)</option>

<!-- 'link'を指定 -->
<link rel="archives" title="2021.06" href="http://white-sesame.jp/date/2021/06/">

<!-- それ以外を指定 -->
<a href="http://white-sesame/date/2021/06/">2021.06</a>

それぞれの用途が想像できる出力結果です。

新しくほしいHTML形式

さて、目的のHTMLは以下の形式です。

<li class="date-archive-item">
  <a href="http://white-sesame.jp/date/2021/08/">2021.08(10)</a>
</li>

liタグにclass属性を追加して、記事数をaタグの中に入れています。

wp_get_archives()関数は、フォーマットによって表示するHTMLが変わりました。

このフォーマットは’get_archives_link()”関数にフィルターフックを追加することで新しいフォーマットを作成できます。

例としてget_archives_link()関数の引数に$format = ‘html’を渡した時、返ってくる文字列は

"\t<li>$before<a href='$url'$aria_current>$text</a>$after</li>\n"

となります。$beforeは初期値は空文字で、$textは日付、$afterは$nbsp;(記事数)が指定されています。

なので、返す文字列は

"\t<li>$before<a href='$url'$aria_current>$text$after</a></li>\n"

このようになっていれば、”2022-07(10)”のように出力され、この部分全てがリンクになります。

ではフィルターフックを追加して新しいパラメータを作成してみます。

フィルターフックを追加する本題のPHPコード

&nbsp;はあっても特に問題はないですが同じ<a>タグの中に入れることから必要なくなるので削除しておきます。

function my_get_archives_link( $link_html, $url, $text, $format, $before, $after, $selected ){
  if( $format === 'mylist' ) {
    $custom_after = str_replace( ' ', '', $after );
    $link_html = '\t<li class="date-archive-item">$before<a href='$url'$aria_current>$text$custom_after</a></li>\n';
  }
  return $link_html;
}
add_filter( 'get_archives_link', 'my_get_archives_link', 11, 7 );

このコードをfunctions.phpに追加してください。これにより’format’パラメータに新しく’mylist’が追加されます。このパラメータを使用してwp_get_archives()関数を使用してみます。

<?php
$arg = array(
  'show_post_count' => 1,
  'format' => 'mylist',
);
wp_get_archives( $arg );
?>

すると出力結果は以下のようになります。

<!-- 'mylist'を指定 -->
<li class="date-archive-item">
  <a href="http://white-sesame.jp/date/2021/08/">2021.08(10)</a>
</li>

これで目的のHTMLを得られることができました。

my_get_archives_link()関数の$link_htmlの値を任意に変更することでHTMLタグにclassやidを追加したりや、liタグの代わりにpタグにしたりなどの自由にカスタマイズすることができます。

まとめ

今回はwp_get_archives()関数の仕組みを掘り下げながら、フィルターフックをfunctions.phpに記載するだけで新しいHTMLフォーマットを作成できるプログラムを紹介しました。プログラムの内容を理解していなくてもfunctions.phpへのコピペでも使用可能ですが、functions.phpを変更する前にはバックアップを忘れないようにしましょう。

バグやタイポ、プログラムについての質問がありましたら、お問い合わせや、公式ツイッターにご連絡ください。