MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > WordPress > 「Advanced Custom Fields」でカスタムフィールドを自由にカスタマイズ!【使い方】


「Advanced Custom Fields」でカスタムフィールドを自由にカスタマイズ!【使い方】

 2012年11月13日   タグ: , ,

「Advanced Custom Fields」でカスタムフィールドを自由にカスタマイズ!【使い方】
「Advanced Custom Fields」はWordPressの標準のカスタムフィールドを機能拡張するプラグインです。WordPress 標準のカスタムフィールドは、テキストでしか値を入力できませんが、 「Advanced Custom Fields」を導入すれば、さまざまな種類のカスタムフィールドを簡単にを作成出来ます。 また、作成したカスタムフィールドを、投稿だけに表示したり、固定ページだけに表示したりと、とにかく気の利いたプラグインです。

「Advanced Custom Fields」をWordPressにインストール

「Advanced Custom Fields」をインストールして、有効化しましょう。

WordPress のプラグインをインストールする方法

「Advanced Custom Fields」ダウンロードはコチラ

「Advanced Custom Fields」の使い方

「Advanced Custom Fields」でオリジナルのカスタムフィールドを設定する

「Advanced Custom Fields」をインストール&有効化すると、WordPress管理画面左メニューに「カスタムフィールド」という項目が追加されますので「カスタムフィールド」→「カスタムフィールド」をクリックしてください。

新規にオリジナルのカスタムフィールドを設定します。今回は、各エントリーの上部にメインのイメージ画像を挿入するカスタムフィールドを設定していきます。

はじめは、何も設定していないので「新規追加」をクリックします。

以下の画像のように、各項目を設定します。

  • 各項目の説明は後述しますので、まずは画像を確認してみてください。

カスタムフィールドの設定が完了したら、最後に画面右カラムの「公開」ボタンをクリックしてください。

カスタムフィールドの項目の概要(説明)

フィールドラベル

投稿ページで表示される名前です。

フィールド名

テンプレートなどにタグを追加するときなどに使います。単一語。スペース無し。アンダースコアとダッシュは使用可能。

フィールドタイプ

カスタムフィールドのタイプを選択します。テキスト、テキストエリア、Wysiwygエディタ、画像、ファイル、Number、セレクトボックス、チェックボックス、ラジオボタン、真/偽、ページリンク、投稿オブジェクト、関連、デイとピッカー、カラーピッカーの15種類から選択することができます。

フィールドの説明

制作者向けのメモ欄です。

必須か?

記事投稿の際に、必須の項目にするかどうかを設定します。

デフォルト値

最初から、特定の値を入力しておくことができます。

フォーマット

フィールドの値に HTML を含むときの動作を指定できます。

無:HTML タグとして認識しないで、文字列としてそのまま吐き出します。

HTML:HTML タグとして認識します。

投稿記事テンプレート(content-single.php)にカスタムフィールドを表示するタグを追加する

投稿記事テンプレート(content-single.php)のメインイメージ画像を表示させたい位置に、設定したカスタムフィールを表示するためのテンプレートタグを追加します。

  • 今回は、画像のURLを取得していますので、テンプレートにimgタグと組み合わせて追記することで、画像に独自のスタイルを設定することも出来ます。

<img src="<?php the_field( 'フィールド名',$post->ID); ?>" alt="" />

今回はフィールド名が「entryMainPhoto」で、altには、エントリーのタイトルを使用しますのでソースは以下になります。

<img src="<?php the_field( 'entryMainPhoto',$post->ID); ?>" alt="<?php the_title();?>" />

以下の画像は、実際に投稿記事テンプレートにカスタムフィール(画像)を表示するコードを追記したところです。

実際に記事を投稿してみる

投稿画面にカスタムフィールドが追加されているのが分かります。

実際に投稿画面から記事を投稿して見ます。

メイン画像が挿入されました。あとは記事を公開すれば、さきほど、投稿記事テンプレートに追記した部分にメイン画像が表示されます。

画像以外のフィールドに関しても、色々と試してみたいと思っています。
このエントリーをはてなブックマークに追加

  |  Blog TOP   |