WordPress ホームページビルダー17

Custom Field Templateの導入

更新日:

WordPressには、カスタムフィールドという便利な機能がついています。特定の項目や画像などのデータを入力し、一定の規則に則って表示することが出来ます。つまり、WordPressのダッシュボードからあらかじめ決めておいた「商品名」「メーカー名」など入力項目を、その通りに埋めていけば、いつも決まった見た目のページができあがる。というようなことが、簡単にできます。

このカスタムフィールドの各入力項目を簡単な方法で作成することが出来るプラグイン、Custom Field Templateを導入して、使い心地を試してみたいと思います。

1. それでは、ダッシュボードから、プラグイン→新規追加とクリックし、検索窓に『Custom Field Template』と入力して、プラグインの検索ボタンをクリックします。

2. 一番上に表示された『Custom Field Template』のいますぐインストールをクリックし、インストール後、プラグインを有効化をクリックします。

3. ダッシュボードの設定メニューエリア内にカスタムフィールドテンプレートというメニューが追加されていますので、これをクリックします。

4. まず、テンプレートタイトルに分かり易い名前を入力します。今回は、『商品情報』にしてみました。

5. テンプレートインストラクションは、適当にテンプレートの説明を入力します。未記入でも構いません。

6. 投稿タイプは、カスタム投稿タイプを使用しますので、両方にチェックを入れます。

7. カスタムポストタイプは、このカスタムフィールドテンプレートを使用するカスタムポストタイプを記述します。複数使用する場合は、カンマ区切りで複数指定します。ホームページビルダーで作成したカスタムポストタイプの商品(item)とトップページの最新情報のお知らせ(news)を指定しておきます。

8. PostID、カテゴリーID、ページテンプレートファイル名は、とりあえず使用しませんので、空白のままにしておきます。

wordpress229

9. 次が肝心のテンプレートコンテンツです。これを指定することで、各コンテンツがメタ情報として、データベーステーブル(postmeta)に追加されます。

wordpress230

10. 今回は下記のように指定してみます。

[メーカー]
 type = text
 size = 35
[商品名]
 type = text
 size = 35
[商品説明]
 type = textarea
 rows = 4
 cols = 40
 tinyMCE = true
 htmlEditor = true
 mediaButton = true
[単価]
 type = text
 size = 35
[画像]
 type = file

11. 設定が完了したら、『オプションを更新する』ボタンをクリックします。

12. それでは、実際に登録してみましょう。新規→商品で、カスタム投稿タイプの商品を新規作成します。

13. 表題を入力したら、いつもの本文箇所は未記入で、下の方へ移動します。

wordpress231

14. カスタムフィールドテンプレートと記述されたエリアがありますので、そこに商品情報を入力します。

wordpress232

15. 『公開』ボタンをクリックすれば、商品情報は登録されます。

16. サイトを表示してみます。表題しか表示されていません。

wordpress233

17. 商品名をクリックしても表題(商品名)しか、表示されません。

wordpress234

18. 肝心の商品情報はどこへ行ったのでしょう。心配しなくても大丈夫です。WordPressでは、カスタムフィールドで作成した付属の情報をメタ情報として別のデータベーステーブルに保存するような仕様になっています。

19. 下記が今登録したカスタム投稿タイプ(商品)のポスト情報です。IDが1930になっているのを覚えておいて下さい。

wordpress235

20.  次に、下記が今のポスト情報と関連しているメタ情報(データベーステーブル名:wp1_postmeta)です。つまり、post_idが1930のデータが先程カスタムフィールドテンプレートで登録したデータです。

wordpress236

21. このメタ情報は、get_post_meta()やget_post_custom()で取得することが出来ます。この辺はWordPressの関数リファレンスを見ていただけば分かると思います。

22. 下記に簡単な表示例を記述しておきます。テーブルを使用してレイアウトしていますが、CSSが得意な方は、CSSでレイアウトすることをお奨めします。

<?php
 //画像のリンク先の取得
 $img_id=get_post_meta($post->ID,'画像',true);
 if($img_id){
 $img=get_post($img_id,'ARRAY_A');
 $src=$img['guid'];
 }
 //全メタ情報の取得
 $fields=get_post_custom($post->ID);
 echo '<table>';
 echo '<tr>';
 echo '<td rowspan="4">';
 //画像の表示
 echo '<img src='.$src.' height="150">';
 echo '</td>';
 foreach($fields as $name => $value) {
 //Wordpress特殊情報と画像情報の除外
 if(!(preg_match("/^_/", $name)) && $name!== '' && $name!='画像') {
 echo '<td>';
 echo $name;
 echo '</td>';
 echo '<td>';
 echo $value[0];
 echo '</td>'; 
 }
 }
echo '</tr>';
echo '</table>'; 
?>

23. 下記のようになりました。

wordpress237

24. Custom Field Templateは導入したばかりで、まだ使いこなせてはいませんが、使いこなせるようになったらまた再度ご紹介したいと思います。

25. 尚、カスタムフィールドを使うには、若干PHPの知識が必要になってきます。次回のホームページビルダーには、カスタムテンプレートだけでは無く、カスタムフィールドもPHPの知識をほとんど必要とせずに、簡単に使いこなせるようにバージョンアップしてくれることを期待しています。

本日は以上です。

-WordPress, ホームページビルダー17

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.