WordPressのカスタムフィールドをすぐに作成できるプラグイン「Advanced Custom Fields」がとても便利だったので紹介します。
WordPress案件も多くなってきたので、このプラグインを使ってぜひ開発を柔軟かつスムーズに進めていければと思います。知っている方もこれから調べながら使ってみようという方も参考になればと思います。
WordPressの投稿編集画面に任意の項目を追加したり、編集することができるようにするためのプラグインとなっていて、サイト運営者がソースを編集することなく、投稿ができるようになるプラグインです。
効率的かつ、スムーズに記事運用ができるようになるので参考にしてみてください。
・Advanced Custom Fieldsがインストールできる
・WordPressに強くなる
まずはAdvanced Custom Fieldをインストールする
Advanced Custom Fieldsインストールはこちらからしてください。
無料版と有料版があると思いますが、今回の記事は無料版で進めて行こうと思います。
無料版でも問題なく使用ができますが、有料版は以下のプラグインが付与されています。
・The Repeater Field（繰り返しフィールド/リピーターフィールド）
・The Gallery Field（ギャラリーフィールド）
・The Flexible Content Field（柔軟コンテンツ）
・Clone field（クローンフィールド）
・Options Page（オプションページ）
これだけみてもよくわからないと思うので、各プラグインの紹介は次回にしますね。
有料版の価格は以下の通りです。
$100 – マルチライセンス（複数のサイトにインストール可）
$25 – シングルライセンス（一つのサイトだけインストール可）
無料でも十分に機能を発揮できますが、有料版はいろいろと応用が効きそうで便利ですね！
[quads id=1]
Advanced Custom Fieldでフィールドグループを作成する
Advanced Custom Fieldを有効化しましょう。Wordpressの他のプラグインと同じで、「プラグイン > 新規追加」に遷移して、「Advanced Custom Fields」を有効化をクリックします。これで管理画面のメニューに項目が表示されると思います。
管理画面のメニューから「カスタムフィールド > 新規追加」をクリックします。
下記のような画面になりますのでひとつずつ説明していきますね。
フィールドを追加する
フィールドグループを入力します。ここではわかりやすい名前にしてください。サイトの構築者だけでなく、サイト運営者でもわかりやすくしてあげるといいと思います。(ぱっと見てわかる状態がベストです)
「フィールドを追加」をクリックして、フィールドの項目を表示させます。
ここで重要なのはフィールドラベル、フィールド名、フィールドタイプの3つになります。
赤く※がついている部分ですね。
重要なのは3つの項目
フィールドラベルは編集画面で表示される名前です。ここをしっかり決めないとどのカスタムフィールドかわからなくなりますので、わかりやすい名前がいいです。
フィールド名は実際にPHPに組み込む時に使用する値名になります。これもわかりやすい名前がベターだと思います。
フィールドタイプはそのカスタムフィールドの種類になります。ここでは端折ってしまいますが、テキストを入力する項目、電話番号を入力する数字のみのテキスト項目だったり、ラジオボタンやGoogleMapなどカスタムフィールドの種類を選択する部分になりますね。
とりあえず、この3つだけ設定すれば動きますので、先に進んでいきましょう！
[quads id=1]
作成したカスタムフィールドを任意の投稿画面に表示させる
カスタムフィールドってやっぱりどういうことだ？という方に説明しますが、こんな感じです。↓↓↓
ブログを運用していて、文章の下に必ずキャッチコピーを入れたいけど、記事に直接書くとしんどいし、管理が大変。
入力項目を項目で作成しておいて運用しやすくしよう！
といった感じです。すいません・・説明下手ですね・・
話を戻しますが、上記でカスタムフィールドを作成しましたが、どのページにカスタムフィールドを表示させるか設定をしましょう。記事ページなのか、固定ページカスタムフィールドを表示するのか指定します。
「ページ」が固定ページになり、「投稿タイプ」が記事ページになります。そこから自分でルールを決めて どの投稿タイプにどのカスタムフィールドを表示させるかをここで設定することができます。
カスタムフィールド値を出力する
あともう少しです！指定したフィールドグループの投稿タイプのテンプレートを編集し、カスタムフィールドのフィールド値を出力します。
作成したカスタムフィールドのフィールド名をここで使用することになります。
僕の場合は下記で指定しました。
この「hogehoge」を使って出力したいファイルと要素の部分に記述します。
ブログを運用していて、文章の下にかならずキャッチコピーを入れたいけど、記事に直接書くとしんどいし、管理が大変。
だったらキャッチコピーは別で入力項目化して運用しやすくしよう！
<?php $txtm01 = get_field(‘hogehoge’); ?>
例にするとこんな感じです
ブログを運用していて、文章の下にかならずキャッチコピーを入れたいけど、記事に直接書くとしんどいし、管理が大変。
だったらキャッチコピーは別で入力項目化して運用しやすくしよう！
<div>
<p><?php $txtm01 = get_field(‘hogehoge’); ?></p>
</div>
上のような感じでokです！記述方法がわからないよって人はこちらを参考に調べてみてください。http://wpdocs.osdn.jp/Main_Page
投稿画面全体がお見せできないのですが、指定したページの投稿画面にこのように項目が追加されていると思います。
個人的に思うコト
Advanced Custom Fieldsって難しい！と思っていましたが、プラグインを使っていくと思い通りのサイトを作成していくことが可能になります。ただ、プラグインも便利ですがwordpressのバージョンが上がるごとに予期せぬエラーやプラグイン同士の競合もあったりするので注意が必要です。
web制作の参考になればと思いますー！
