WordPressのテーマ「Arkhe」はフックで様々なカスタマイズが可能な便利なテーマで弊社でもよく使っています。
一方で、フックを使えばできることでもフックの使い方がわからなかったり、知見がないと実装できるかどうかの判断すら難しいことも…。
本記事では、不動産サイトなどでありがちな、投稿リストの各投稿の枠内にカスタムフィールドの値を表示する、というカスタマイズをフックを使ってやってみたいと思います。
具体的にはこんな感じのものを想定しています。
この「項目名」「テキスト」の並び部分を表示してみよう！というものです。
それでは早速やってみましょう！
事前準備
フックにコードを書いて実装する前に、以下の事前準備が必要です。
- あらかじめ、functions.phpにコードを書けるようにするためにしておく必要があります。
- Post Snippetsなどのfunctions.phpにコードを書く代替となるプラグインを導入する
- 子テーマ化する
- 表示するためのカスタムフィールドを準備しておく必要があります。
- Advanced Custom Fieldsなどのカスタムフィールドの追加管理をするプラグインを導入する
- 投稿画面で「カスタムフィールド」を表示できるようにして追加する
- functions.phpにコードを書いてカスタムフィールドを追加する
カスタムフィールドを設定できるようにした上で、各投稿に表示したいカスタムフィールドをあらかじめ設定しておきます。
やってみよう！
Arkheで用意されているフックのなかでも、テンプレートファイルを上書きするフックを使って、投稿リストまわりのテンプレートファイルをカスタマイズします。
functions.phpに以下を追加することで、投稿リスト内に表示された投稿に指定のカスタムフィールドが設定されている場合、そのカスタムフィールドの設定値が表示されます。
add_filter('arkhe_part__post_list/item/meta', function($parts_content) {
$tags_to_replace = '<div class="p-postList__meta c-postMetas u-flex--aicw">';
$key_text = esc_html(get_post_meta(get_the_ID(), 'key', true)); // key部分を変更
$add_content = '';
if(!empty($key_text)){
$add_content = '<dl class="custom_field"><dt>項目名</dt><dd>'; // 項目名部分を変更
$add_content .= $key_text;
$add_content .= '</dd></dl>';
}
$return_content = str_replace($tags_to_replace,$tags_to_replace.$add_content,$parts_content);
return $return_content;
});このままだと、見た目のスタイルが設定されていないので、.custom_fieldに対してCSSで装飾を追加してあげましょう。
- 更新日時や抜粋などが表示される項目欄の一番上に追加されるようになっています。すでに更新日時などを表示する設定にしている場合、CSSで配置など調整する必要があります。
- 上記のコードではすべての投稿リストで表示されるようになっています。アーカイブページの投稿リストだけではなく、投稿リストブロックや関連記事の投稿リストでも表示されてしまうため、表示されてほしくないページがある場合は上記のコードのなかに分岐を追加したりCSSで消したりしてください。
- テンプレートファイルへ記載されたコードを検索して書き換えを行っているので、テーマのバージョンアップによっては動作しなくなることがあります。
- 上記コードはArkhe 3.12.0で動作を確認したコードです
- もし動かなかった場合は、2行目の
$tags_to_replaceで指定しているタグを適切なものに変更すると動く可能性が高いです…！
フックは公式に用意されている機能ではありますが、テンプレートファイルを書き換えたり操作するもののため、上記コードが永続的に使えるコードではない点、お気をつけください。
今回はカスタムフィールドを表示するようにしましたが、投稿IDがわかればひっぱってこれるもの（例えばカスタムタクソノミーとか）であればなんでも取得ができるのでいろいろと応用の幅が広いかと思います。
この記事が近いTipsをお探しの方の参考になれば幸いです。