どうも、ナオです。本日は「Advanced Custom Fields」というプラグインの使い方について解説をしていきたいと思います。

 

「Advanced Custom Fields」を利用すれば、

・WordPressの管理画面を使いやすくカスタマイズできる
・編集画面に表示されるフィールドを見やすくできる

などの事が可能になりサイト制作をより効率的に行うことが出来るようになります。

 

「Advanced Custom Fields」は無料で利用することができますので、是非最後までご覧になっていって下さい。

 

「Advanced Custom Fields」の使い方

 

1.WordPressの管理画面から「プラグイン」→「新規追加」「プラグインの検索欄」より「Advanced Custom Fields」で検索して下さい。

「Advanced Custom Fields」がインストールされたら有効化をしましょう。

 

 

2.「Advanced Custom Fields」の有効化を行った後、管理画面左側のメニューから「カスタムフィールド」→「カスタムフィールド」を選択してください。

 

 

3.「新規追加」をクリックして下さい。

 

 

4.以下の画像の記入欄にフィールドグループの名前を入力し(今回はフィールドと入力しました)、「フィールドを追加」をクリックして下さい。

 

 

 

5.「フィールドラベル」に入力された文字は記事作成画面で投稿者に示されます。

 

 

 

・「フィールド名」は先ほど設定したフィールド名を入力して下さい。

「フィールド記入のヒント」「フィールドラベル」と同じように記事作成時、投稿者に表示されます。管理者以外の人が使用する時のために分かりやすい説明を入力しておくと便利です。特に入力する必要がなければ空欄のままでも大丈夫です。

「必須か?」「はい」にしたフィールドが必須項目となりますので、未入力の状態となり公開できなくなります。

「デフォルト値」は初期値のことです。

 

 

 

「フィールドを閉じる」クリックすることでそのフィールドの設定画面を閉じることが出来ます。フィールドを追加したい場合は「フィールドを追加」をクリックすれば行うことが可能です。

 

6.必要事項を全て入力したら「公開」をクリックして下さい。

7.記事の作成画面を見ますと、「画像」「テキスト」を入力する要素が追加されました。

 

 

 

設定内容をsingle.phpに配置

 

1.それでは「Advanced Custom Fields」の新規フィールドで作成した項目をサイトに反映させるためにコードを挿入していきます。

「外観」→「テーマの編集」をクリックして下さい。

 

 

2.単一記事の投稿を編集していきます。右にある要素の中から「個別投稿(single.php)」をクリックして下さい。

 

 

コードを挿入する場所は使用しているテーマによって違ってきますのでご注意ください。

フィールドを使用する際のテンプレートは「Advanced Custom Fields」の公式サイトから「Documentaition」→「Field Types」に書かれていますので下のリンクからご確認ください。

「Advanced Custom Fields」

 

実際にページに反映させるためにはそれぞれのフィールドタイプに合うコードを表示したいページに設置していく必要があります。ここで先ほど設定した「フィールド名」を使用します。

例えばテキストのフィールドタイプだと「<?php the_field(‘フィールド名’,$post->ID); ?>」のコードを表示したいテンプレートに追加していきます。

 

今回は単一記事の投稿[single.php]に追加しますので、フィールド名の部分に先ほど設定した名前を入力して下さい。

 

 

3.カスタムフィールドがサイト上に反映されるかどうかを確認していきます。投稿画面より「画像とテキスト」を追加して下さい。その後「公開」をクリックしましょう。

 

 

 

以上の操作を行うことで画像とテキストをサイトに公開する事が出来ます。
カスタムフィールドを表示する場所は「テーマの編集」でコードを挿入した場所によって違ってきますのでご注意ください。

 

最後に

 

今回は、「Advanced Custom Fields」の使い方について解説してきましたがいかがでしたでしょうか?

 

「Advanced Custom Fields」を使うことで記事編集画面に表示されるフィールドが見やすくなり、使いやすくカスタマイズをする事が出来るようになります。

作業効率をアップさせるためにも「Advanced Custom Fields」を是非導入してみて下さいね^^

 

それでは!