2014年11月 第16回ゼロから始めるWordPress勉強会「WordPressで作る世界遺産サイト｜カスタムフィールドとカスタム投稿編」でのプレゼン資料です。 サンプルで世界遺産のサイトを作りました。 http://www.world-ht.net/worldheritage/mont-saint-michel/ カスタムフィールドとカスタム投稿に絞って説明をしています。 カスタムフィールドは、WebAPIにパラメタを与えたり、キャッチ画像を設定したりできて、拡張性が高いです。 商品の名称や価格を設定すれば、商品やサービスの一覧も作ることができます。 なによりも、テンプレート化（雛形化）できるので入力作業が簡単になるのもよいと思います。 カスタム投稿は、基本の投稿と完全に分類できてしまうことがよいです。 スタッフブログを運営しながら、商品やサービスの投稿もするなど、１つのWordPressで完全に分離して管理できます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ## WordPressの勉強会について 次の勉強会を定期的に運営または講師をしています。 ◆ゼロから始めるWordPress勉強会 DoorKeeper：　http://coedo-wordpress.doorkeeper.jp/ 公式サイト：　http://zerokarawp.com/ Facebook：　https://www.facebook.com/groups/194782003975961/ ◆WordPressもくもく倶楽部 DoorKeeper：　http://wp-moku.doorkeeper.jp/

1. WordPressで作る世界遺産サイト
カスタムフィールドとカスタム投稿編
Ticklecode.
Yoshinori Kobayashi 1
第16回ゼロから始めるWordPress勉強会 14.11.19

2. 生まれは 奈良県 です。 2
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only

3. 3
http://wp-moku.doorkeeper.jp/events/17299
次回、WordPressもくもく会（自主勉強会）12月7日！
小林が書籍を学習したり、サイト制作をしたりする集中日が欲しかった。
WordPressもくもく会（自主勉強会）を開催しています！
作業に行き詰っている方を皆でフォローすることで、共に学習効果を高めたい。

4. アジェンダ
１．カスタムフィールドについて
２．カスタム投稿について
３．まとめ 4

5. 5
デモで全体的にご説明。

6. １．カスタムフィールドについて 6

7. まず、WordPressの基本投稿機能の確認 7

8. 投 稿
固定ページ
WordPressの基本投稿機能
本文、カテゴリー、タグ 8

9. カスタムフィールドとは
重要なキーワード（商品名、単価、位置情報 etc）
を通常の投稿内容と分離させて、個別に設定し、
個別にテーマで出力することができる機能。 9

10. 投稿内容に複数のカスタムフィールドが設定可能
カスタムフィールドは、１つ投稿内容と紐づいている。 10

11. 名前：ProfileName
投稿記 事とカスタムフィールドの繋がり
値：Kobayashi
投稿記事１
世界遺産の旅行に行く前の・・・・
投稿記事２
世界遺産の特集を組みました・・・
名前：ProfileName
値：Ninomiya
カスタムフィールド
カスタムフィールド
投稿記事３
世界遺産が最も多い国は・・・
名前：ProfileName
カスタムフィールド
値：Kawata 11

12. カスタムフィールドの設定
投稿画面で、「名前」と「値」を設定。 12

13. カスタムフィールドの出力
get_post_meta($post->ID,”ProfileName”,true);
WordPress Codex カスタムフィールドの使い方
書式：
get_post_meta(記事のID,カスタムフィールド名,true);
出力には、 get_post_meta を使う。テーマに記載。
参考： 13

14. カスタムフィールドの問題点
・雛形がないので他のWordPressへカスタムフィールドの設定を移 行するのが困難
・名前がそのまま、フィールド名になる。管理用の名称、例えば 「プロフィール名前」を付加しながら、プログラムでは ProfileNameを使えない。
・テキストフォーマットでしか入力できない。
たとえば、チェックボックス、選択、日付入力などできない。
そこで・・ 14

15. Advanced Custom Fields プラグイン
https://wordpress.org/plugins/advanced-custom-fields/
公式ディレクトリ 15

16. デモで説明 16

17. Advanced Custom Fields プラグインの設定イメージ 17

18. 投稿画面での入力イメージ 18

19. テーマテンプレートでの出力
http://www.advancedcustomfields.com/resources/#field-types
使用方法は、以下のページで詳しくまとめられている。
$value = get_field( “name" );
カスタムフィールドでの値の取得
<?php the_field(“name”); ?>
カスタムフィールドでの値の表示 19

20. Advanced Custom Fields プラグイン 特徴
・設定のエクスポートやインポートが可能なので、移行しやすい
・フィールドラベル（管理用）、フィール ド名（プログラム用）が分かれているので、 見やすい。
・入力フォーマットが数十種類 あり、柔軟に対応できる。 20

21. ２．カスタム投稿について 21

22. 投 稿
固定ページ
WordPressの基本投稿機能 22
本文、カテゴリー、タグ

23. 情報整理をどうするか・・・。
サイト構成
トップ、問い合わせ
世界遺産紹介
運営者ブログ
ホテル情報
旅行、航空券情報 23

24. サイト構成
トップ、問い合わせ
世界遺産紹介
運営者ブログ
ホテル情報
旅行、航空券情報
⇒投稿
⇒固定ページ
情報の性質に合わせて、機能を割り振る。
基本機能だけでは・・・ 24

25. サイト構成
トップ、問い合わせ
世界遺産紹介
運営者ブログ
ホテル情報
旅行、航空券情報
⇒投稿
⇒固定ページ
カスタム投稿でオリジナルの投稿を割り振る。
⇒世界遺産
⇒ホテル
⇒旅行・航空券 25

26. カスタム投稿を追加した管理画面
専用の投稿画面を設けることができる。 26

27. カスタム投稿の管理画面への追加方法
functions.php に以下の記述を追加
function register_cpt_worldheritage() {
// 投稿タイプ：世界遺産 worldheritage
register_post_type('worldheritage',array(
'labels' => array('name' => '世界遺産'),
'public' => true, // 公開
'menu_position' => 4, // 管理画面での順位
'supports' => array('title','editor','custom-fields'),
));
// カテゴリ： 地 域 area
register_taxonomy('area','worldheritage',
array('labels' => array('name' => '地 域'),'hierarchical' => true,));
// タグ： 種類タグ type
register_taxonomy('type','worldheritage',
array('labels' => array('name' => '種類タグ'),'hierarchical' => false,));
} 27

28. カスタム投稿用の出力テンプレート
テンプレート階層のルールから、カスタム投稿は
single-$posttype.php ⇒ single.php ⇒ index.php を順番でテンプレートを探す。
Template_Hierarchy.png 28

29. カスタム投稿（世界遺産）用の出力テンプレート
single-$posttype.php
functions.php で register_post_type(‘worldheritage’,array(・・・を指定 した。このときの worldheritage が投稿タイプになる。
single-worldheritage.php
これが、カスタム投稿（世界遺産）のときだけ 適用されるテンプレート 29

30. http://www.world-ht.net/worldheritage/mont-saint-michel/
サンプルサイト 30

31. ３．まとめ 31

32. カスタムフィールド
・投稿内容と分離として、情報を設定できる
・Advanced Custom Fields プラグイン が使いやすい
カスタム投稿
・通常の投稿画面とは別に、専用の投稿画面が作成できる。
⇒ これにより、サイトが飛躍的に拡張できる。
・テンプレート階層の理解が必要。
・投稿の内容を出力するには、テンプレートのカスタマイズが必要。 32

33. WordPressのカスタム投稿タイプでメンバー紹介ページを作成 | Webクリエイターボックス
WordPress Codex カスタム投稿タイプ
カスタム投稿タイプとカスタムタクソノミーまとめ｜ KoToRi Blog
参考になる記事まとめ 33

34. 参考図書
WordPressユーザーのためのPHP入門 はじめから、ていねいに
基礎からのWordPress
(BASIC LESSON For Web Engineers)
現場でかならず使われている
WordPressデザインのメソッド 34

35. ご清聴、ありがとうございました。 35