WordPressのブロックテーマでカスタムフィールドを作成して表示するためには以下のことを行います。

• カスタムフィールドを作るプラグインインストールする
• カスタムフィールドを作成する
• カスタムフィールドに入力する
• カスタムフィールド用ブロックを設置して表示する

カスタムフィールド自体はプラグインをインストールすることで作成可能。既存の投稿タイプ(投稿、固定ページ、カスタム投稿タイプなど)に対してカスタムフィールを作成できるようになります。

編集画面でブロックを設置すれば入力した内容を表示できますが、レイアウトも作る必要があるので手間がかかりがち。効率よくレイアウトを作るならパターンテンプレートを使うのがおすすめです。

OrigamiUIではコピペするだけでオシャレなデザインのページを作成できるパターンテンプレートをたくさん用意しています。コピペしたあとは必要な部分だけカスタマイズするだけなので効率化できます。

-> 今すぐテンプレートを使ってみる

ここからは、Wordpressのブロックテーマでカスタムフィールド作る方法を画面の画像付きで詳しく解説していきます。

カスタムフィールドの作り方

カスタムフィールドを作るプラグインインストールする

WordPressのブロックテーマでカスタムフィールドを追加できるプラグインはたくさんあります。有名なのはACF(Advanced Custom Field)ですが、ブロックの設置は有料になっているので、ここでは無料でカスタムフィールドを表示できる「Pods」を使います。

通常通り、プラグインインストール画面で「Pods」と検索して表示されたプラグインをインストール〜有効化してください。

カスタムフィールドを作成する

プラグインをインストールできたらカスタムフィールドを作成します。

Podsではカスタム投稿タイプも作成可能ですが、ここでは「CPT UI」などですでに作成した投稿タイプ向けにカスタムフィールドを作成してみます。

Podsのメニューにある「新規追加」から新規作成ページを開き、「Extend an existing Content Type」の方をクリックします。

次の設定ページでは、どの投稿タイプでカスタムフィールドを追加するかを選択します。

「次のステップ」でフィールドを追加する画面に移動するので「Add Fields」で追加していきます。

最低限必要なのは、ラベル名とフィールドタイプの選択。フィールドタイプは以下から選べます。

• Text
  • Plain Text
  • Website
  • Phone
  • E-mail
  • Password
• Paragraph
  • Plain Paragraph Text
  • WYSIWYG (Visual Editor)
  • Code (Syntax Highlighting)
• Date / Time
  • Date / Time
  • Date
  • Time
• Number
  • Plain Number
  • Currency
• Relationships / Media
  • File / Image / Video
  • oEmbed
  • Relationship
• その他
  • Yes / No
  • Color Picker
• Layout Elements
  • Heading
  • HTML Content

「Save Field」ボタンで保存するとフィールドを追加できます。あとはこの作業を繰り返して必要なフィールドを追加していきます。

必要なカスタムフィールドを作成できたら、編集画面の右にある「Save Pod」を押して保存します。

カスタムフィールドに入力する

カスタムフィールドを作成したあと、選択した投稿タイプで記事の編集画面を開くとカスタムフィールドが表示されています。

テキストだけでなく画像のアップロードなども可能です。

カスタムフィールド用ブロックを設置して表示する

最後にカスタムフィールドに入力した内容をページに表示します。やることはブロックを設置するだけです。

ブロック一覧から「Pods Field Value」を選択して画面に設置します。

次に右のブロックパネルで表示したい投稿タイプとフィールド名を入力します。

• PODの名称: 投稿タイプの選択
• スラッグやID: 表示したい投稿のスラッグやID、空欄で現在の投稿
• FIELD NAME: 設定したラベル名を入力

正しく入力できていれば画面に表示されます。

カスタムフィールドに入力した画像がURLしか表示されない原因と対策

カスタムフィールドで画像を入力してそのまま表示しようと思ったときに、画像のURLが表示されてしまうことがあります。

この原因はPodsのフィールド設定の問題で、設定を変更すれば画像として問題なく表示できます。

やり方は以下の通りです。

• 作成したフィールドの編集画面で「File / Image / Video Options」を選択
• 下の方にある「WP のギャラリーとして出力する」にチェックを入れる
• 画像のリンクやサイズを設定して保存

設定して保存したあとブロックを設置した画面を更新すれば正しく画像が表示されているはずです。

もっと細かくレイアウトしたい場合やドロップシャドウなどのスタイルをつけたい場合は、OrigamiUIのグループブロックの中に配置してスタイルを追加してください。

一覧ページでカスタムフィールドを表示するには？

一覧ページで投稿記事一覧の中でカスタムフィールドを表示したい場合は、「クエリループ」ブロック内にカスタムフィールドのブロックを配置してください。