WEBデザインテクニック|KLUTCHE

【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法

WordPressは便利です。しかし所詮ブログです。もっと自由な使い方をしたい。そんな願いを叶えてくれるのがカスタムフィールドです。

WordPressの投稿に様々なデータを追加する

例えば、
WordPressでダムの情報をデータベース化したサイトを作りたい。
ダムの写真や、所在地、堤高、湛水量などを管理ページから登録したい。
そんな場合に使うのが「カスタムフィールド」という機能です。

カスタムフィールドどこにあるだ?

投稿画面の下部にひっそりと存在します。

カスタムフィールド

WordPressをブログとして使っている人はあまり気にしない部分だと思います。
新規投稿画面に表示されない人は「表示オプション」で表示できます。

カスタムフィールドって何だ?

この機能を使うと、投稿に「メタデータ」と呼ばれる任意の「名前」と「値」を追加できます。
要は、タイトル・本文だけでなく、独自の項目を投稿に追加できるという事です。

プラグインでカスタムフィールド機能を強化する

最近のバージョンのWordPressはカスタムフィールド機能がかなり使いやすくなっています。
しかし、もう一歩…という点もあり、現状でカスタムフィールドをバリバリ使いたいならプラグインを導入することをオススメします。

Advanced Custom Fields

その名も「アドバンスドカスタムフィールド」です。
WordPress管理ページ「プラグイン」内の「新規追加」から検索して、サクッと導入出来ます。

menu

右側メニューに「カスタムフィールド」という項目が追加されます。
クリックして「新規追加」です。

カスタムフィールド例

一番上のフィールドグループ名は用途に応じて適当なものを名付けましょう。
その下に追加したい項目を登録していきます。
「フィールドラベル」は、投稿画面に表示される項目名、わかりやすいよう日本語で付けます。
「フィールド名」はサイト側で値を呼び出す時に使います。プログラム内で使うので半角英数字で付けましょう。
「フィールドタイプ」は、その項目がテキストなのか画像なのか選択できます。チェックボックスやカラーピッカーなんかも利用できます。

表示ルール

「位置」という設定で、投稿時にカスタムフィールドを表示する条件を設定できます。
上記の例では、投稿時にダムデータというカテゴリを選択すると、カスタムフィールドの入力ボックスが表示されるようになっています。

オプション

さらにその下の「オプション」設定で、投稿画面をカスタマイズできます。
通常表示される「コンテンツエディタ」を非表示にしてみました。

いざ投稿!

新規投稿画面で予め作成しておいたカテゴリ「ダムデータ」をチェックすると…

投稿画面

普段あるブログ本文のコンテンツエディタが消え、ダムデータを入力するための項目が表示されます。
ダムサイトを作る為だけにカスタマイズされた管理ページの誕生です!

投稿されたデータをサイト側に呼び出す

メタデータを呼び出すタグはWordPressに準備されているのですが、Advanced Custom Fieldsには独自の関数があります。

例えば、フィールド名を「type」と名付けた、カスタムフィールドの値を呼び出すには、

<?php the_field("type", $post->ID); ?>

とループ内に記載すれば良いです。

サンプルサイト

完成したページの例です。

ダム情報表示例

“【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法” への15件のフィードバック

  1. nano より:

    Advanced Custom Fields解説大変参考なりました。
    ありがとうございます!

    wordpress でサイト構築しているのですが、
    Advanced Custom Fieldsでの
    google mapもLocation Fieldを使用されているかと思いますが、
    上手く使用できません。

    こちらの詳細の導入方法を伺えないでしょうか。
    宜しくお願い致します。

  2. […] d custom fieldというのはWordPressのプラグインでどんなものかは【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法という記事がKLUTCHEさんで公開されているのでそれを参考に […]

  3. […] 【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法 […]

  4. […] 【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法 | KLUT… […]

  5. 神崎谷行雄 より:

    Advanced Custom Fields有効にしたのですが、「右側メニューに「カスタムフィールド」という項目が追加されます。」
    失礼ながらメニューは左側にありませんか?
    いずれにしても記事に書いておられるような「カスタムフィールド」という項目がでてこず、「設定」でおしまいです。
    有効化の他にしなければならないことはありますか?

  6. 神崎谷行雄 より:

    失礼しました。なんだか違うものを入れてしまったようです。いろんなバリエーションがあるようですね。すみませんでした。再度やってみます。

  7. asdf より:

    ループ内に記載ってどのファイルに記載するのでしょうか?

  8. […] Advanced Custom Fieldsでカスタムフィールドを自在に操る方法 […]

  9. bb.1228 より:

    acfの勉強中ですが、一覧にテーマを表示したいと思いますが、
    テーマのみ出力する形はどのような対応が必要ですか、ご教授お願いできますか?

  10. […] Custom Fields の使い方を詳細解説[ 出力編 ] | MAO PC エンジニア 【WordPress】Advanced Custom Fieldsでカスタムフィールドを自在に操る方法 | […]

bb.1228 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です