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

2013年04月22日
WordPress, プラグイン
ダム

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

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

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

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

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

カスタムフィールド

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

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

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

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

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

Advanced Custom Fields

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

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

カスタムフィールド例

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

表示ルール

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

オプション

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

いざ投稿！

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

投稿画面

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

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

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

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

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

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

サンプルサイト

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

ダム情報表示例

古い記事へ新しい記事へ