menu

Advanced Custom Fields

2021年5月25日 HPの作り方 WordPress

今日は「Advanced Custom Fields」について解説します。

まずはカスタムフィールドの説明から。

カスタムフィールドってなに?

普通、固定ページや投稿ページでは、ブロックエディタと呼ばれる本文を入力するところしか用意されていません。

しかし、それだけでは十分にWordPressの機能を使えているとは限りません。

例えば商品の画像を載せたときにそのすぐ下に値段や購入ページに遷移させるボタンなどがあったほうが便利ですよね?

そういう「かゆいところに手が届く」ようなものがカスタムフィールドというものです。

要するに、「投稿ページを少し便利にしまっせ」というものです。

しかし、このカスタムフィールド、プラグインを使用しないで作るとなるとめちゃくちゃ大変なんです。

テーマの中のfunctions.phpところを中心に色々と改造しなければいけません。

しかも、functions.phpというのはその名の通りWordPressの機能を集めた脳のような存在なので、こいつをおかしくしてしまうとWordPressがぶっ壊れてしまうので、素人が簡単に手を出していい領域ではありません。

そんな危険な作業を安全に出来るようにしたプラグインが「Advanced Custom Fields」です。

それでは前置きが長くなりましたが、プラグインの説明をしていきます。

インストール

プラグイン→新規追加→Advanced Custom Fieldsでインストールします。

左のメニューにカスタムフィールドが出現するので、新規追加をクリック。

タイトルというのは、このフィールドの名前になります。

位置というのはいろんな項目があります

こんな感じでページの種類やユーザー、テンプレートの種類やフォームの種類に合わせてカスタムフィールドをどの条件のときに使用できるかを定義づけられます。

一番わかりやすいのが投稿タイプ(固定ページとか投稿ページ)なのでそれでやってみると良いかもしれません。

フィールドを追加

そしたら、ちょっと上にあるフィールドを追加というボタンをクリック

ここで抑えておくべき項目は赤線で引いた3つの項目です。

フィールドラベル管理画面で投稿する人が見る値(表側で使われる値)
フィールド名(英語じゃなきゃだめ)テンプレートで呼び出すときに使われる値(裏側で使われる値)
フィールドタイプどういう入力項目を追加するかの指定(フォームのアイテム)

下の方にスクロールしてアクティブをはいにします。これで保存したらカスタムフィールドの完成です。

投稿ページに行ってみると、、、

こんな感じでカスタムフィールドが出現しています。

お疲れさまでした。これで終わり、、、とはなりません!!

ここはあくまでも「投稿者が見るページ」が編集できただけであり、「サイトを見る人」が見るページにこのカスタムフィールドで入力した値を出力しなければいけません。

カスタムフィールドの値を出力する方法

これが一番難しいです。

正直この方法以外にカスタムフィールドを簡単に実装できる方法があればそちらをお伝えしたいのですが、残念ながらこの方法しかないです。

「テーマテンプレートに直接編集を加える」

そうです。今まで避けてきたテーマテンプレートへの介入です。

これをミスるとWordPressのサイトが崩れてしまうので本当に慎重にやっていきましょう。

外観からテーマエディターをクリック

mい

右側にこんな項目が出てくるので、single.phpを選択

これはテーマによって異なるのですが、

<?php the_content(); //本文を表示 ?>

これが本文を表しているのでココの上に

<?php the_field( 'price' ); ?>

と入力してあげます。このpriceというのは

画像に alt 属性が指定されていません。ファイル名: スクリーンショット-2021-04-24-13.56.46-1024x652.png

ここのフィールド名のところの名前です。

表示を見てみよう!

こんな感じで入力すると・・・

今感じで出力することに成功しました!!

まとめ

みなさんこう思ったことでしょう。

「こんなことやらなくても本文で普通に入力したほうが早いやん」

はい。その気持ち。すごーくよくわかります。これだけ大変な思いをしたのに結果は全然大したことありませんよね。笑

じゃあなんでこんな機能があるん?

についてですが、WordPressのテーマ開発をする人が簡単に出来るようにできたプラグインです。

なので初心者の方には正直あまりおすすめできないプラグインになっています。

ですが、これを理解できて使いこなすことができればWordPressの構造をかなり理解できたことになるので、良かったら挑戦してみてください!