脱コピペ!WordPressを使いこなす講座 第一回~Advanced Custom Fields~

4,071 view

あなたはWordPress、使いこなせていますか?

WordPressには色々なテンプレートタグやプラグインがありますが、
「良くわからないからコピペ」では、初心者からは抜け出せません。

自由自在にWordPressをカスタマイズするためにも、
意味を理解し「使いこなせる」ようになることが重要!
「脱コピペ!WordPressを”使いこなす”講座」、
始めていきたいと思いますよ!

私keishibukiも分からないことがまだまだありますが、
一緒に頑張っていきましょう!

第一回はカスタムフィールド系プラグイン「Advanced Custom Fields(以下ACF)」についての講座。
基本機能についてと有料アドオンの紹介。出力方法の説明。それからACFを使ったカスタマイズ例などを紹介していきたいと思います。

ちなみにかなり長くなると思いますので、

基本的な使い方、
各フィールドタイプと項目解説、
ACFの関数解説
と分けて解説していきます。

今回は基本的な使い方なので、少し短くまとめました。

「Advanced Custom Fields」のインストール

管理画面のプラグイン→新規追加→「Advanced Custom Fields」で検索。
インストールしたら有効化してください。

僕はインストール済みなので、
「今すぐインストール」の場所が「今すぐ更新」になっています。

buki_004_01

「カスタムフィールド」の作成

ACFを有効化するとサイドメニューに「カスタムフィールド」
という項目が追加されているので、クリック。

buki_004_02

フィールドグループページが表示されますが、まだ何もカスタムフィールドを作っていないので何も表示されません。ここから作ったカスタムフィールドを編集できます。
今回は新しく作るので、「新規追加」をクリック。

buki_004_03

するとフィールドグループを新規追加ページが表示されます。
まずはカスタムフィールドのタイトルを入力しましょう。

buki_004_04

このタイトルはフィールドグループページ(さっきの一覧ページです)
に表示されるだけですので、わかりやすい名前を付けておきましょう。

タイトルを入力したら「+フィールドの追加」をクリックしてカスタムフィールドを追加します。
何やらいろいろ項目が出てきましたが、必須項目は3つ。それぞれ解説します。

フィールドラベル
編集画面で表示される名前です。
フィールド名
フィールドは入力しただけでは表示されないので、それを表示させるときに必要になります。フィールドラベルに関連した英語を半角英数で付けておくと分かりやすいです。
フィールドタイプ
カスタムフィールドの種類。テキストや画像などいろいろあります。

フィールドタイプの種類や入力項目の説明などは後ほど解説するので、
今回はとりあえずテキストを出力する簡単なカスタムフィールドを作ってみましょう。
以下の通りに入力し、公開ボタンを押してください。

buki_004_05

これでカスタムフィールドが作成できました。
では早速投稿の「新規追加」で確認してみましょう。

buki_004_06

下の方にぽつんとありましたね(笑)
ではこちらに文字を入力して公開してください。

buki_004_07

投稿を表示すると…

buki_004_08

先ほども言いましたがカスタムフィールドに入力しただけでは表示されないので、
カスタムフィールドで入力した値は出力されていません。

カスタムフィールドで入力した値を出力する

ACFで作ったカスタムフィールドでは、フィールドタイプによって出力タグが違います。
今回はテキストのみの解説ですが、後ほど改めて解説させていただきます。

ちなみに基本的に使う関数は3つです。

the_field()

カスタムフィールドで入力した値を取得し、示させる関数です。

the_field ( $field_name, $post_id );

$field_name
取得する入力フィールドの「フィールド名」を指定します。必須項目です。
$post_id
取得するPOST IDを指定します。省略可能で、その場合現在表示中のページのPOST IDを取得します。

get_field()

get_fieldは値を変数に格納したい場合に使います。
ちなみにecho get_field( $field_name )は先ほどのthe_field( $field_name ) と同じ機能となります。

<?php $field = get_field( $field_name, $post_id, $format_value ); ?>

$field_name
取得する入力フィールドの「フィールド名」を指定します。必須項目です。
$post_id
取得するPOST IDを指定します。省略可能で、その場合現在表示中のページのPOST IDを取得します。
$format_value
取得した値をフォーマット対応にするかどうかを選択します。
falseを指定するとDBの情報をそのまま出力します。

get_field_object()

フィールドグループで登録した情報も含めてカスタムフィールドの値を取得できる関数です。ほぼほぼ上記2つで処理を行うことが可能なので使うことはほとんどありませんが、
選択肢系のフィールドの選択しの項目でキーと値を別々にした場合は
get_field_object()を使います。

詳しくは「Advanced Custom Fieldsの関数を本気出して解説してみた」という記事を投稿予定ですのでこうご期待。

今回は表示させるだけですので、
下記のコードを表示させたい場所に書きます。

<?php the_field('text'); ?>

buki_004_09

無事表示されましたね!

カスタムフィールドの紐づけ

さて、今回は投稿に紐づけてカスタムフィールドを表示させましたが、
カスタム投稿や固定ページに紐づけたい!という場合でもACFで簡単に設定できます。

buki_004_10

オプションで表示

順序番号

1つの投稿に複数のカスタムフィールドを設置するときにその順番を指定できます。
0が一番上で、数値が増えていくにつれて順番が下になります。

位置

カスタムフィールドを設置する位置です。
High (after title)
投稿のタイトルと本文の間に設置します。
Normal (after content)
投稿の後に設置します(デフォルト)。
Side
右サイドに設置されます。

Style

入力フォームのデザインを変更します。
WP metaboxにすると枠がつき、少しおしゃれになります。
Seamless (no metabox)
buki_004_11
Standard (WP metabox)
buki_004_12

画面に表示しない

投稿画面に表示しないものを設定できます。
最初に見たときは表示しないなら作らなければいいのでは?

と思われるかもしれませんが、
これは管理者が複数いる場合などに使います。

以上ACFの使い方基礎編でした!
今回はテキストを出力しただけですが、
次回以降紹介する様々なフィールドタイプと関数を組み合わせることによって、
自由自在にカスタムフィールドを使いこなせるようになります!

ちなみに公式サイトは(英語ですが)様々な情報が載っているので
ご参考までに紹介しておきます。

https://www.advancedcustomfields.com/

それではまた次回!
よろしくお願いいたします!

\ SNSでシェア /

WRITER

keishibuki

制作 keishibuki

新潟生まれ、新潟育ちの新潟Boy。
95年生まれのラストゆとり世代。

専門学校に通いながらアルバイトとして働いていたが、
2017年度の春で晴れて正社員にランクアップ。

TAGS