WordPress技術ブログサムネイル

カスタム投稿タイプ の 個別投稿 を表示させる

こんにちは!戦略的ウェブ制作工房エルタジェールの宮崎です。
WordPressでのサイト制作やGA4などのツールを使ったサイト改善についてのレポートをお届けしています。
サイト制作・リニューアルは、お気軽にご相談下さい。

カスタム投稿タイプ の 個別投稿

ACFを使ったカスタム投稿タイプ の 個別投稿 を表示させる方法を整理しておきます。

ブロックテーマでは、テンプレートファイルではなく、テンプレートパーツやテーマJSONを使ってサイトを構築します。ACFフィールドを表示するために、ショートコードを使用し、ブロックエディター内に埋め込む方法を採用しました。

まずショートコードを定義します。

get_fieldの()内にACFのフィールド名を入れ呼び出します。
出力内容の作成以降の部分では、imgが少しやっかいです。

つぎに、ショートコードをテンプレートパーツとします

a. テンプレートパーツの作成

WordPressの管理画面にログインし、「外観」 > 「エディター」に移動します。次に、「テンプレートパーツ」を選択して、新しいテンプレートパーツを作成します(例えば「ACF Fields Display」)。

b. ショートコードを埋め込む

テンプレートパーツの編集画面で、以下のようにショートコードブロックを追加します。

  • 「+」アイコンをクリックしてブロック追加メニューを開きます。
  • 「ショートコード」ブロックを選択します。
  • ショートコードブロックに [acf(アンダーバー)fields] と入力します(acf_fields)。

そしてスタムテンプレートにテンプレートパーツを追加します

カスタムテンプレートを作成し、そこに先ほど作成したテンプレートパーツを追加します。

a. カスタムテンプレートの作成

WordPressの管理画面で、「テンプレート」を選択し、新しいテンプレートを作成します(例えば「Custom Single Template」)。

b. テンプレートパーツの挿入

新しいテンプレートの編集画面で、以下の手順でテンプレートパーツを挿入します。

  • 「+」アイコンをクリックしてブロック追加メニューを開きます。
  • 「テンプレートパーツ」ブロックを選択します。
  • リストから先ほど作成したテンプレートパーツ(「ACF Fields Display」)を選択します。

これで、新しいテンプレートを保存し、カスタム投稿に適用します。
これにより、カスタム投稿の各記事に siteName と siteimage フィールドが表示されるようになります。

最後に、テンプレートをカスタム投稿に適用します

最後に、カスタム投稿タイプに新しいテンプレートを適用します。

  • 投稿編集画面に移動します。
  • 右サイドバーの「テンプレート」セクションから、新しく作成したテンプレート(「Custom Single Template」)を選択します。

これで、カスタム投稿タイプの各記事にACFフィールド siteName と siteimage が表示されるようになります。

戦略的WEB制作工房エルタジェール

ウェブ制作からウェブ解析までワンストップでお任せください

PAGE TOP