662 回閲覧されました

公開日 : 2022年8月16日
最終更新日 : 2024年9月1日

みなさんこんにちは、WEB制作のエンジニアのjonioです。

前回はWordPressの記事の表示をして記事のタイトルとアイキャッチ画像を表示しました。

今回は記事のカテゴリー名の表示をします。

↓の赤枠です。

前回の解説でアイキャッチ画像を表示するのに記事があるWordPressサイトでフックを使いましたが今回もフックを使います。

 

functions.php

functions.phpのコードを↓にします。

カテゴリーの識別子名を取得するために4行目のapi_add_fields関数の中に15行目〜22行目の関数を追加します。

18行目の「register_fields_categories」関数ですが31行目〜33行目でカテゴリーを取得しています。

これでJSONデータを見るとカテゴリーの識別子が追加されているのが確認できます。

↑のJSONデータの場合のカテゴリー名は「name:コーディング」と書いてある部分でこれをNuxt.jsのindex.vue（記事のタイトルとアイキャッチ画像を表示したファイル）に表示するためのコードは↓になります。

「post.category[0].name」の「0」と「name」ですが0は↓の赤枠でnameは↓の青枠です。

これでカテゴリー名が表示されます。

次はNuxt.jsで作ったサイトをFirebaseで公開するための解説をします。