eyemovic inc.

Works blog仕事の取り組み・ビジョン

2014.02.07

WordPressのカスタムフィールドを使いやすくするプラグイン「Advanced Custom Fields」

概要

WordPressは単なるブログとして運用する場合ももちろんありますが、カスタムフィールドを使って決まった形のコンテンツページをクライアント様で更新してもらえるように、という目的で導入することが多いのではないかと思います。

WordPress本体だけでもカスタムフィールドを使うことはできるのですが、設定がちょっと面倒で入力欄も少しわかりにくいです…
そんな時におすすめのプラグインがこちら!

「Advanced Custom Fields」

管理画面で簡単にカスタムフィールドを追加することができます!
それでは簡単に使い方をご紹介したいと思います。

使い方

インストール

こちらからダウンロードしてプラグインのフォルダにアップ、もしくはWordPressの管理画面からプラグイン→新規追加で「Advanced Custom Fields」を検索し追加、有効化します。

 

設定

インストールするとメニューに「カスタムフィールド」の項目が追加されます。

サイドメニュー

 

最初は何も登録されていないので「新規追加」をクリックしてフィールドグループを作成しましょう。
フィールドグループは投稿タイプや記事のカテゴリごとに出しわけることができます。

新規追加

 

フィールドグループの名前を入力し、「+フィールドを追加」でグループにカスタムフィールドを追加します。

 フィールド追加

 

カスタムフィールドの設定

フィールドひとつひとつの設定画面はこんな感じです。

フィールド

各項目の内容はこちら。(※は必須です)

フィールドラベル※ 記事編集ページの入力欄で表示される項目名です。
フィールド名※ カスタムフィールドの名前です。テンプレートで値を取得するときに使います。
フィールドタイプ※

入力欄の種類です。
いろんな種類が用意されていて、プルダウンで選択できます。

フィールドタイプ

フィールド記入のヒント 項目名の下に説明を表示したい場合に記入します。
必須か? 入力を必須にするかどうかを選択できます。
その他 フィールドタイプによっていくつか入力欄が表示されます。

 「+フィールドを追加」でグループ内にフィールドを増やせるので必要なフィールドをどんどん設定します。

並べ替え

いくつかフィールドを増やすとこんな感じになります。
カスタムフィールドの順番はドラッグで入れ替えることもできます。

 

表示画面の設定

位置

作ったフィールドセットを表示させる投稿画面を設定します。
「特定の投稿タイプだけで表示」「カテゴリAとカテゴリBでだけ表示」など細かい設定が簡単にできます。

その他の設定

オプション

順序番号 投稿画面での表示順を設定できます。
位置

投稿画面での表示位置を設定できます。
がっつり文章を入れる場合は真ん中の大きいカラム、オンオフのフラグだけであれば右カラム、など

Style

メタボックス無しか標準メタボックスかを選択できます。
標準メタボックスにすると、カスタムフィールドがグループごとに枠で囲まれ、入力画面が見やすくなります。

画面に表示しない

チェックを入れた項目を、投稿画面で非表示にします。
キャプションでは、通常本文を入力する「コンテンツエディタ」を非表示にしています。

 

設定完了

公開

設定ができたら右カラムの「公開」をクリック。
これで投稿画面にカスタムフィールドが表示されます。

 

投稿画面

投稿

設定したフィールドが表示されました!
「画面に表示しない」オプションでチェックをつけた「コンテンツエディタ」もしっかり非表示になっています。
入力して公開してみましょう。

 

テンプレート

入力した内容を表示するため、設定したカスタムフィールドの値をテンプレートに呼び出します。
データを呼び出す基本的な関数はthe_field()、get_field()の2種類があります。

直接表示する場合はthe_field()を使います。

変数に代入して使う場合はget_field()を使います。

現在の投稿を表示するときは、$post_idの値を省略することができます。

今回はこんな感じで呼び出します。

 

完成!

プレビュー

カスタムフィールドで投稿した内容が記事に表示されました!!

 

まとめ

今回はシンプルな例ですが、使いこなせば複雑なページもクライアント様で作成、更新してもらうことが可能になります。
まだ使ったことのない方はぜひ導入してみてください!

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。