Advanced Custom Fieldで作る便利な更新機能付のWordpressサイト-前編
今日は私がWordpressで更新機能付のサイトを作るときにいつも使っているWordpressのプラグイン、「Advanced Custom Field」を紹介したいと思います。ちょっと説明が長くなるので前編と後編に分けたいと思います。インストールは管理画面の「プラグイン」の項目から「Advanced Custom Field」と検索すれば出てくるので、そこから追加できます。こちらの「Advanced Custom Field」はプラグインなのですが、それに独自でアドオンとして機能を追加できるので、「Advanced Custom Field」で検索するとそのアドオンも一緒に出てきて、なかなか本体がでてきません（笑）。
なので、こちらの公式サイトからダウンロードしてプラグインフォルダにアップロードして追加してもいいでしょう。
こういった、カスタムフィールドを拡張できるプラグインには他にも日本製の「Custom Field Template」というのもありますが、私はこちらのほうが使いやすいのでこっちを使っています。
では実際に使い方を解説したいと思います。
今回は仮に、家具を扱う会社のサイトを作るとして商品紹介ページに更新機能をつける想定で
説明をしたいと思います。
こんな感じのページのイメージです。
まずは、私の場合は更新機能を作るときにはまず「カスタム投稿タイプ」から作ります。（多分、ほとんどの人がそうかな？）カスタム投稿タイプのついてはこちらなどから参考にしていただければと思います。この「カスタム投稿タイプ」を簡単に作れて管理できる「Custom Post Type UI」というプラグインもありますが、私はあんまりいっぱいプラグイン入れるのがいやなので、「Functions.php」に直接書いています。どっちを使うかはその人の好みで全然問題ないと思います。簡単に作るならプラグイン使ったほうがいいかな？
[php]
/* カスタム投稿タイプの追加 */
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'products', /* post-type */
array(
'labels' => array(
'name' => __( '商品' ),
'singular_name' => __( '商品' )
),
'public' => true,
'menu_position' =>5,
)
);
}
[/php]
こんな感じでFunctions.phpに追加しました。
そして「カスタム投稿タイプ」で新しい投稿タイプを作ったら、（今回は「商品」という名前のカスタム投稿タイプを作成しました。）
「Advanced Custom Field」の管理メニューに進みます。管理画面に「カスタムフィールド」って項目があると思います。
そして、「新規追加」より新しいフィールドグループを追加します。
すると入力する項目が表示されます。
今回の場合は商品の名前はそのまま、「カスタム投稿タイプ」の投稿画面の、
タイトルに入力してもらいます。
なので、カスタムフィールドとして商品名を追加する必要はありません。
そのほかの「画像」「説明文」「値段」「商品のサイズ」を
カスタムフィールドの項目として追加していきます。
画像のように上から順に入力していきます。必須の項目だけ赤枠と説明を書きました。
とりあえず、ここの部分だけ入力したら投稿ページで表示されるようになります。
必須以外の部分は今回は説明を省きたいと思います。
そして、順に入力していったものが下記の画像になります。
これで、次にカスタム投稿タイプの投稿画面で使えるようにするために、
下にある「位置」というボックスから「商品」のカスタム投稿タイプを選択してあげます。
先ほどカスタム投稿タイプをFunctions.phpで追加した際の
[php firstline="4"]register_post_type( 'products', /* post-type */[/php]
の「products」の部分が選択する項目になります。
そして、こちらを選択したらそのまま保存してもいいのですが、
私の場合使わない投稿画面のボックスは極力削除したいので（そのほうが入力する方も迷わないかなと）
投稿画面のいらない項目を非表示にする設定をします。一番下のボックス「オプション」より設定できます。
そして、すべて入力したら右上にある「更新」ボタンを押して設定を保存します。
ぽっちっとな。
そして、さきほどカスタム投稿タイプとして追加した管理画面の「商品」メニューに進みます。
そして「新規追加」で投稿画面を表示すると下のように先ほど「Advanced Custom Field」から追加した
入力項目が表示されています。
これで商品の投稿画面ができあがりました。あとは、画面のとおり入力し投稿を追加していくだけです。
追加したらこんな感じになると思います。
これで投稿画面が完成したので、次回は後編で実際に入力した投稿をサイトに表示させる手順を紹介したいと思います。
後編はこちら
コメント