超便利「Advanced Custom Fields」の使い方①

ACF-thumb

こんにちは。久々のブログ更新なので頑張っていきます。

今回はWordPressのプラグイン『Advanced Custom Fields』についてご紹介します。

『Advanced Custom Fields』はカスタムフィールドを自在に設定できるプラグインです。とても便利で使い勝手が良いので初心者の方でも気軽に使用できると思います。

『Advanced Custom Fields』の説明の前に、そもそもカスタムフィールドが分からない初心者さんのために軽くカスタムフィールドについて説明したいと思います。

 

カスタムフィールドとは

カスタムフィールドとは、WordPressの投稿に任意の情報(メタデータ)を追加する機能の事です。

メタデータをうまく利用すれば「評価が高い順に並び替える」「表示件数が100以上の記事を表示する」などデフォルト機能では実現不可能なこともできます。

不動産サイトのような様々な情報を扱うサイトを作りたい時は「カスタムフィールド」が便利(個人的には必須)です。

 

カスタムフィールドについてもっと詳しく知りたい!という方はこちらのサイトが分かりやすくまとめているので参考にすると良いと思います。
WordPressのカスタムフィールドの使い方が初心者でも超わかる記事8選

 

 

このプラグインでできること

さて、先ほどカスタムフィールドについて軽く説明しましたが「じゃあ、どうやってカスタムフィールドを使えばええんじゃ!?」と思ってる方も多い事でしょう。

『Advanced Custom Fields』はカスタムフィールドをより高度に、そして簡単に使うプラグイン と思っていただければいいと思います。しかも日本語対応!

 

Advanced Custom Fieldsのインストール方法

プラグインを追加から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 » プラグイン » 新規追加 » 『Advanced Custom Fields』 で検索
  2. WordPress.org からダウンロード

インストールしたら有効化してください。

 

 

Advanced Custom Fieldsの設定方法

『Advanced Custom Fields』を有効化すれば編集画面左側のメニューに新たにカスタムフィールドの項目が追加されるので、カスタムフィールド » カスタムフィールド をクリックします。

ACF

すると、以下のような画面が表示されるのでフィールドグループの横にある『新規追加』をクリックしてください。

WordPressを更新しろと急かされていますね….

ACF(1)

クリックすると色々と表示されますが、取りあえず上の方にある『ここにタイトルを入力』と表示されているテキスト欄に好きなタイトルを入力しましょう。ここで入力するタイトルは自分が管理しやすくするためのものなので自分さえわかればOKです。

ACF1

今回は、『タンポポ』と入力しました。特に意味はないです。入力したら『+フィールド追加』をクリックします。

ACF2

 

クリックするといろいろな項目が表示されます。必須項目はフィールドラベル,フィールド名,フィールドタイプです。

input

 

フィールドラベル 編集画面で表示される名前です。
フィールド名 フィールドを出力する際に使用します。フィールドラベルと関連した半角英数を入力すると分かり易くて良いです。例)テキスト→text,動画→movie
フィールドタイプ カスタムフィールドの種類です。色々なものが用意されています。

 

フィールドタイプが結構な量用意されているので私が良く使うものだけ説明したいと思います。パスワードとか誰が使うんですか?

 

テキスト

text

普通のテキストフィールドです。個人的に使用頻度が高いです。

text-input

 フィールド記入のヒント 作成者向けのヒントです。画像を参照すれば分かると思いますが、フィールドラベルの下に表示されていますね。自分で使用する際は入力する必要はないと思いますが、他の人が使用する場合は簡単な説明があると入力しやすいかもしれません。
必須か? 「はい」にした場合そのフィールドは必須項目になり未入力状態では公開できなくなります。入力し忘れなどを防げるので便利。
デフォルト値 初期値を設定することが出来ます。
Placeholder Text 入力欄に薄いテキストを表示できます。これを設定すれば入力欄に何を入力すればいいのかを示すことが出来るので入力ミス防止などに役立つかも・・・?
Prepend 入力欄の前に文字列を表示できます。フィールドを出力する際には関係ないのであくまで入力用。
Append 入力欄の後に文字列を表示できます。フィールドを出力する際には関係ないのであくまで入力用
フォーマット Convert HTML into tagsフィールドにHTMLタグを使用できます。No formatting

フィールドにHTMLタグを入力しても文字列として出力されます。

Character Limit 文字数制限を設定できます。

 

 

テキストエリア

textarea

普通のテキストエリアです。

textarea-input

Rows フィールドの高さを設定できます。
フォーマット Convert HTML into tagsフィールドにHTMLタグを使用できます。Convert new lines into <br />tags
改行がbrタグとして反映されます。No formattingフィールドにHTMLタグを入力しても文字列として出力されます。

 

数値

num数値専用のフィールドです。このフィールドの値でソートしたり比較したりできるので不動産サイトのように様々な情報を扱うサイトを作る場合は多用します。

num-input

Minimux Value 最小値を指定できます。
Maximux Value 最大値を指定できます。
Step Size 倍数の指定。例えば「100」と入力すると100の倍数のみ入力できるようになります。
num-step100の倍数以外の数値を入力した場合

 

 

メール

mail(1)

メールアドレス専用のフィールドです。メールアドレスの形式のみ入力可能です。

mail-input

 

画像

photo画像をアップロードできるフィールドです。

photo-input

返り値 画像を出力する形式を決めます。「画像ID」を選択するのが使い勝手が良いです。
↓に出力例を書いておきます
画像オブジェクト266, , 画像名, , , image/jpeg, http://example.com/wp-content/uploads/2015/12/画像名.jpg, 1280, 720, Array画像URLhttp://example.com/wp-content/uploads/2015/12/画像名.jpg画像ID266
プレビューサイズ プレビューサイズの指定ができます。画像の出力には関係ありません。
ライブラリ 「投稿にアップロードされる」を選択した場合、ライブラリの画像を選択できずその記事の編集画面でアップロードした画像しか使用できなくなります。

 

セレクトボックス

select-
普通のセレクトボックスです。
select

選択し セレクトボックスの選択しです。red : 赤と記載すると、値とラベルの両方を制御することが出来ます。し。
無を許可するか? 「はい」を選択すると選択肢の中に「-セレクトボックス-」というラベルが追加されます。
複数の値を選択できるか? 「はい」を選択すると複数選択できるようになります。もし複数選択したい場合はチェックボックスを利用するといいでしょう。また、返り値が配列になるので出力する際に注意が必要です。

チェックボックス

check
普通のチェックボックスです。
check-input

レイアウト 編集画面での選択肢の並び方を指定します。

垂直
check1
水平
check2

 

 

ラジオボタン

radio

普通のラジオボタンです。

radio-input

 

 

関連

kanren

関連記事の設定が出来ます。便利です。

キーワードで他の記事を検索したり、投稿タイプでフィルタしたりできます。

kanren-input

Return Format 戻り値をオブジェクト型にするか記事IDにするか指定します。
フィルター 検索キーワードで記事を検索できます。Post Type Select

投稿タイプでフィルタします。

Elements ここでチェックしたものが編集画面で表示されます。
最大投稿数 関連記事の最大登録数を指定できます。

予想以上に長くなってしまったのでカスタムフィールドの出力に関しては次回書こうと思います。

expand_less