2022年3月15日

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

thumnail image

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記事存在するという意味です。

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

HTMLをカスタマイズ

‘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>
  <a href="http://white-sesame.jp/date/2021/08/">2021.08(10)</a>
</li>

wp_get_archives()関数は、内部でget_archives_link()関数を使用しています。get_archives_link()関数は$formatの引数などを受け取って先程のHTMLコードを返り値として渡します。

例えば’format’に’html’を指定した場合は以下の文字列を返します。

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

ここで$before、$url、$text、$afterは引数で指定する変数ですが、重要なのは$afterです。wp_get_archives()関数ではget_archives_link()関数の引数の$afterに’&nbsp;(記事数)’を渡す処理となっています。

なので、返す文字列は以下のようであれば良いです。

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

このget_archives_link()関数はフィルターフックを用いることができます。フィルターフックを追加して新しいパラメータを作成してみます。

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

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

function my_get_archives_link( $link_html, $url, $text, $format, $before, $after, $selected ){
  if( $format === 'mylist' ) {
    $custom_after = str_replace( '&nbsp;', '', $after );
    $link_html = "\t<li>$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 );
?>

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

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

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

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

まとめ

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

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

コメントを書く

メールアドレスが公開されることはありません。