2013年8月31日(土)に開催された、WordFes Nagoya 2013のセッション【ライバルに差をつけろ！真夏のカスタム○○○猛特訓ゼミ！】の資料です。 カスタム投稿タイプ、カスタムフィールド、カスタムタクソノミーをワークショップ形式で学びました。 詳細 ： http://2013.wordfes.org/article/session/s2-f11/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■ワークショップで使用したファイル http://onocom.net/wordfes/2013/workshop_files.zip ※おまけの壁紙つきです。

1. ライバルに差をつけろ！
カスタム○○○
猛特訓ゼミ!!!
WordFes Nagoya 2013実行委員
小野隆士（ twitter:@onocom ）
真夏の
1

2. ワークショップデータ
ワークショップで使用したデータは以下からダウンロード頂けます。
http://onocom.net/wordfes/2013/workshop_files.zip
おまけの壁紙付いてるよ！→
2

3. 3
本日の時間割り
20min. カスタム○○○入門（座学）
70min.
ワーク
ショップ
説明
カスタム○○○の設定
カスタム○○○用のテンプレート作成
動作確認
Total ：90min.
途中で適宜休憩を入れます。

4. カスタム○○○入門
4
20min.

5. 今回紹介するカスタム○○○
5
カスタム投稿タイプ
カスタムタクソノミー
カスタムフィールド

6. カスタム○○○を
理解するための前置き
6

7. 突然ですが...問題です
アナタは、飲料メーカーのマーケティング担当です。
日本全国のショッピングセンターを飛び回って、
各店の飲料担当者からアンケートを集めています。
アンケート用紙として用いるなら
AかBのどちらが適切でしょうか？
7

8. アンケート用紙として適切なのは？
A:何も書かれていない紙 B:質問内容が記載された紙
8

9. 誰にでも回答してもらえる方法を
9
アンケート用紙にあらかじめ
質問を羅列しておけば、
回答者は迷うこと無くアンケート
に回答できますね。

10. 続けて第二問
全国から回収したアンケートは、
後日、都道府県別に集計しようと思います。
アンケート用紙の保存方法として適切なのは、
AかBのどちらでしょうか？
10

11. 保存方法として適切なのは？
A:とにかくバインダーに綴じる
B:都道府県ごとに仕切りを付けて
バインダーに綴じる
11

12. 仕切りをつけると管理しやすい
12
アンケートをあらかじめ都道府県
別にまとめておけば、
集計がとても簡単ですね。

13. 最終問題
新商品の味をきめるために
お客様からアンケートを採ることになりました。
アンケート用紙の保存方法として適切なのは、
AかBのどちらでしょうか？
13

14. 保存方法として適切なのは？
A:先ほどと同じバインダーにまとめ
て綴じる
B:別のバインダーを買ってきてそち
らに綴じる
14

15. 別々のバインダだと管理しやすい
15
バインダを分けて管理することで、
アンケート混入を防いだり、
集計漏れを防いだりできますね。

16. 現実
WordPressの記事管理を
現実に置き換えたら
16

17. WordPressの記事管理を
現実に置き換えたら
WordPressには最初から２つの
バインダが存在します。
17

18. 最初から存在する２つのバインダ
18

19. 最初から存在する２つのバインダ
「投稿」バインダ 「固定ページ」バインダ
19

20. 「投稿」バインダ
日記など、思いのままに書
き込むことに向いている。
日付順に綴じられる。
用紙は白紙なので自由度
が高い。
反面、スキルが無いと難し
く感じることも。
20

21. 「投稿」バインダ
「カテゴリー」
という仕切りを使って、
情報を整理できる。
「タグ」
という付箋を使って、
目印を付けられる。
21

22. 「固定ページ」バインダ
好きな順に綴じられるので、
人に読んでもらう情報を
書くことに適している。
用紙は白紙なので自由度
が高い。
反面、スキルが無いと難し
く感じることも。
22

23. 「固定ページ」バインダ
「ページテンプレート」
ページごとにデザインを切り
替えられる。
「ページ階層」
ページの親子関係を設定
できる。
23

24. でもこれだけだと物足りない時も
24
どこに記事を
書けばいいの？
あれ？先日発売した
新商品の情報ってのせた？
カテゴリ分けにも
限界が...
商品情報とお知らせ
明らかに内容が違うけど...
商品紹介のページに
何かけばいいか教えて～
固定ページにも商品情報が
あるし、投稿にも新商品の
情報が...
Oh...もう載ってた...
折角記事書いたのに。
例えば服屋さんの場合...
HTMLの知識無いから
レイアウトがバラバラ...

25. この物足りなさを解消するのが
【カスタム○○○】なのだっ！
25
どこに記事を
書けばいいの？
あれ？先日発売した
新商品の情報ってのせた？
カテゴリ分けにも
限界が...
商品情報とお知らせ
明らかに内容が違うけど...
商品紹介のページに
何かけばいいか教えて～
固定ページにも商品情報が
あるし、投稿にも新商品の
情報が...
Oh...もう載ってた...
折角記事書いたのに。
例えば服屋さんの場合...
HTMLの知識無いから
レイアウトがバラバラ...

26. 26
カスタム投稿タイプ カスタムフィールド カスタムタクソノミー
オリジナルのバインダを
作って記事を管理できます。
カスタム○○○で
WordPressがさらに便利に
だれでも簡単に入力できる
専用用紙を作れます。
専用のカテゴリーやタグを
作って効率よく記事を
管理できます！

27. WordPressのバインダを増やせます。
27
「投稿」 「固定ページ」 「商品情報」
カスタム投稿タイプ

28. 専用の用紙を作れます。
28
「商品情報」用紙 商品情報には、写真と金額はのせなきゃ。
あとは自由に書いてくれればいいや。
カスタムフィールド
自由入力
金額

29. 専用の仕切りや付箋を作れます。
29
商品専用の仕切り・付箋
商品をカテゴリごとに整理しておきたい
↓
「商品カテゴリ」を作ろう！
商品のサイズの付箋を貼っておきたい
↓
「商品サイズタグ」を作ろう！
カスタムタクソノミー

30. カスタム○○○イメージ
30
カスタム投稿タイプ カスタムフィールド カスタムタクソノミー

31. 実例を見てみよう！
31
セッション スポンサーバナー投稿 固定ページ 動画
WordFesのサイトはこうなっています
http://wordfes.org

32. ワークショップ
32
70min.

33. 33
はぁい、それでは今から皆さんにぃ～
ワークショップをしてもらいまぁ～す。

34. ご協力ください。
ワークショップ成功のためには
皆様の協力が不可欠です。
次の点にご協力ください。
34
Attention Please

35. 3人で１チーム。
1チーム１台のパソコンを支給します。
チームリーダーを決めた後、
チーム名を決めてください。
35
Attention Please

36. 口喧嘩上等。
チーム内での語り合い大歓迎!!
殴り合いをしない程度に、
仲良くワークショップを進めましょう。
36
Attention Please

37. 時間厳守。
ワークショップは時間との勝負。
遅いと鬼講師からムチが飛びます。
作業所要時間は左下に表示します。
37
Attention Please

38. 鬼講師は絶対。
先生のいうことはよく聞きましょう。
居眠りしたら評価下がっちゃうよ～。
38
Attention Please

39. 小野 隆士
稲葉 智宏
山田さおり
39
本日の鬼講師陣

40. アナタはカフェのサイト運営を任されています。
ある日、カフェのオーナーからこんな依頼がありました。
カスタム○○○を使って解決しましょう！
40
本日のお題
依頼
特記事項
カフェのメニューをサイトに掲載したい。
・カフェのメニューは頻繁に変わる。
・オーナーも更新したい。
・オーナーには制作の知識は無い。

41. リニューアル計画
41
現状のサイトを把握しよう
カスタム投稿タイプを追加しよう
カスタムタクソノミーを追加しよう
カスタムフィールドを追加しよう
次へすすむ

42. リニューアル計画
42
グローバルナビを修正しよう
記事を表示させよう
動作確認しよう
完成

43. 現状のサイトを把握しよう
4310min.

44. 現状のサイトを把握しよう
WordFesCafe
チームごとに修正するURLが異なるので注意！
http://wordfes-nagoya.cloudapp.net/ws01/
http://wordfes-nagoya.cloudapp.net/ws02/
http://wordfes-nagoya.cloudapp.net/ws03/
http://wordfes-nagoya.cloudapp.net/ws04/
ワークショップ用サーバは停止しました。
44

45. 完成イメージを見てみよう
WordFesCafe 完成形
http://wordfes-nagoya.cloudapp.net/finish/
【管理画面も見てみよう】
http://wordfes-nagoya.cloudapp.net/finish/wp-admin/
ワークショップ用サーバは停止しました。
HTMLファイルですが、以下からイメージを確認できます。
http://onocom.net/wordfes/2013/finish/index.html
45

46. 時間があれば
少し休憩
46

47. 使用するプラグインを有効化しよう
475min.

48. 今回使用するプラグイン
Custom Post Type UI
カスタム投稿タイプ、カスタムタクソノミー
を追加するためのプラグイン
Advanced Custom Fields
カスタムフィールド
を追加するためのプラグイン
48
今回のワークショップでは、以下のプラグインを使用します。
管理画面にログインして有効化しましょう！

49. カスタム投稿タイプを追加しよう
495min.

50. カスタム投稿タイプを追加しよう
50
カスタム投稿タイプ
「 メニュー 」
カフェのメニューを管理する
「メニュー」カスタム投稿タイプ
を作ります！

51. カスタム投稿タイプを追加しよう
51
【管理画面】
Custom Post Types → 新規追加
■投稿タイプ名
menu
■ラベル、単数形のラベル
メニュー
Advanced Options
クリック

52. カスタム投稿タイプを追加しよう
52
■サポートのチェックボックス
Title
Editor
Excerpt
Custom Fields
CreateCustomPostType
ボタンを押して登録完了ですっ！

53. カスタムタクソノミーを追加しよう
5310min.

54. カスタムタクソノミーを追加しよう
54
カフェのメニューを分類する
「メニューカテゴリー」
カスタムタクソノミーを作ります！
カスタムタクソノミー
「メニューカテゴリー」

55. カスタムタクソノミーを追加しよう
55
【管理画面】
Custom Post Types → 新規追加
■分類名
menu-category
■ラベル、単数形のラベル
メニューカテゴリー
■利用する投稿タイプ
メニュー
Advanced Options
クリック

56. カスタムタクソノミーを追加しよう
56
■階層
「True」に変更
カスタム分類作成ボタンを
押して登録完了ですっ！

57. カスタムタクソノミーを追加しよう
57
ドリンクメニュー
スラッグ： drink
フードメニュー
スラッグ：food
メニュー→メニューカテゴリーから
以下のカテゴリを追加しましょう！

58. カスタムフィールドを追加しよう
5810min.

59. カスタムフィールド
カスタムフィールドを追加しよう
59
カフェのメニューを入力するための
カスタムフィールドを作ります！
メニュー画像と料金を
入力できるようにしましょう。

60. カスタムフィールドを追加しよう
60
（カスタムフィールド）
自由入力
（エディタで代用）
料金
メニュー画像
（カスタムフィールド）
名称 （タイトルで代用）
カフェメニュー専用の入力画面
あらかじめ入力する項目が
決まっていれば、
WEBの知識が無いオーナー
も簡単に更新できる！

61. カスタムフィールドを追加しよう
61
【管理画面】
カスタムフィールド→ 新規追加
■フィールドラベル
メニュー画像
■フィールド名
menu-image
■フィールドタイプ
画像
■戻り値
画像ID
「メニュー画像」
登録用フィールド

62. カスタムフィールドを追加しよう
62
■フィールドラベル
メニュー料金
■フィールド名
menu-price
■フィールドタイプ
テキスト
■フォーマット
No Formatting
「メニュー料金」
登録用フィールド

63. カスタムフィールドを追加しよう
63
こんな感じになったかな？
フィールド名に誤りがないかを絶対確認しておこう！
あとタイトルには「メニュー」と入れておこう！

64. カスタムフィールドを追加しよう
64
「 menu 」を選択

65. カスタムフィールドを追加しよう
65
■画面に表示しない
カスタムフィールド
公開ボタンを押して
登録完了ですっ！

66. 記事の試し書きをしよう
665min.

67. グローバルナビを修正しよう
6710min.

68. グローバルナビを修正しよう
68
【管理画面】
外観 → メニュー
右上の表示オプションの
【メニューカテゴリー】
にチェックを入れる

69. グローバルナビを修正しよう
69
メニューカテゴリーを以下のよう
にグローバルナビに追加
ドリンクメニュー
├ ドリンクメニュー
└ フードメニュー

70. グローバルナビを修正しよう
70
ナビゲーションラベルを以下の
ように修正
CafeMenu
├ Drink
└ Food

71. 記事を表示させよう
7110min.

72. 記事を表示させよう
カスタム○○○を思い通りに表示させるためには、
専用のテンプレートを追加する必要があります！
どんなテンプレートファイルを作れば良いかは、
テンプレート階層図をチェックしましょう！
72

73. 73
詳細はWikiページを見ると良いですよ～。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
taxonomy-$taxonomy.php
single-$posttype.php
archive-$posttype.php

74. 74
詳細はWikiページを見ると良いですよ～。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
taxonomy-$taxonomy.php
single-$posttype.php
archive-$posttype.php

75. 今回作るテンプレート
メニューカテゴリー毎の一覧用テンプレート
taxonomy-menu-category.php
（taxonomy-タクソノミー名.php）
メニュー詳細ページ用テンプレート
single-menu.php
（single-投稿タイプ名.php）
75

76. すでにこちらにできております。
テーマフォルダ内の以下のファイルから
_ を取り除いてアップロードしましょう。
_taxonomy-menu-category.php
_single-menu.php
76

77. テンプレートファイルの
内容を見てみよう
77

78. 重要なテンプレートタグ
カスタムフィールドの値を取得するためのタグ
(今日覚えるのはこれだけ！)
get_post_meta
(記事ID, カスタムフィールド名, 単一フラグ);
78

79. カスタムフィールド取得サンプルコード
// price というカスタムフィールドの値を取得する
$price = get_post_meta(get_the_ID(), "price", true);
// カスタムフィールドの値を表示する
echo $price;
79

80. 動作確認しよう！
805min.

81. ワークショップ終了
81

82. ワークショップ環境について
今回のワークショップ環境は、最近流行りのクラウドサーバ、
Windows Azureで構築しています。
具体的な構築方法は以下の資料がわかりやすいです。
ぜひトライしてみてくださいっ！
Windows Azure kaasanイメージについて
http://www.slideshare.net/mazdachihiro/windows-azure-kaasan
82

83. 謝辞
ワークショップ環境構築にあたり多大なるご協力を頂きました。
この場を借りてお礼申し上げます。
日本マイクロソフト株式会社
武田 正樹 様
ITかあさん
松田 千尋 様
83

84. ありがとうございました！
84