ライバルに差をつけろ！真夏のカスタム○○○猛特訓ゼミ！[ WordFes Nagoya 2013 ]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

でもこれだけだと物足りない時も
24
どこに記事を
書けばいいの？
あれ？先日発売した
新商品の情報ってのせた？
カテゴリ分けにも
限界が...
商品情報とお知らせ
明らかに内容が違うけど...
商品紹介のページに
何かけばいいか教えて～
固定...

この物足りなさを解消するのが
【カスタム○○○】なのだっ！
25
どこに記事を
書けばいいの？
あれ？先日発売した
新商品の情報ってのせた？
カテゴリ分けにも
限界が...
商品情報とお知らせ
明らかに内容が違うけど...
商品紹介のページに
...

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

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

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

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

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

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

ワークショップ
32
70min.

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

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

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

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

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

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

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

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

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

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

4310min.

WordFesCafe
チームごとに修正するURLが異なるので注意！
http://wordfes-nagoya.cloudapp.net/ws01/
http://wordfes-nagoya.cloudapp.ne...

完成イメージを見てみよう
WordFesCafe 完成形
http://wordfes-nagoya.cloudapp.net/finish/
【管理画面も見てみよう】
http://wordfes-nagoya.cloudapp.net/fi...

時間があれば
少し休憩
46

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

今回使用するプラグイン
Custom Post Type UI
カスタム投稿タイプ、カスタムタクソノミー
を追加するためのプラグイン
Advanced Custom Fields
を追加するためのプラグイン
48
今回のワー...

495min.

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

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

52
■サポートのチェックボックス
Title
Editor
Excerpt
Custom Fields
CreateCustomPostType
ボタンを押して登録完了ですっ！

5310min.

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

55
【管理画面】
Custom Post Types → 新規追加
■分類名
menu-category
■ラベル、単数形のラベル
メニューカテゴリー
■利用する投稿タイプ
メニュー
Advanced Opt...

56
■階層
「True」に変更
カスタム分類作成ボタンを
押して登録完了ですっ！

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

5810min.

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

60
（カスタムフィールド）
自由入力
（エディタで代用）
料金
メニュー画像
（カスタムフィールド）
名称（タイトルで代用）
カフェメニュー専用の入力画面
あらかじめ入力する項目が
決まっていれば、
WEBの...

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

62
■フィールドラベル
メニュー料金
■フィールド名
menu-price
■フィールドタイプ
テキスト
■フォーマット
No Formatting
「メニュー料金」
登録用フィールド

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

64
「 menu 」を選択

65
■画面に表示しない
公開ボタンを押して
登録完了ですっ！

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

6710min.

68
【管理画面】
外観 → メニュー
右上の表示オプションの
【メニューカテゴリー】
にチェックを入れる

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

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

7110min.

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

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%B...

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%B...

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

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

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

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

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

動作確認しよう！
805min.

ワークショップ終了
81

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

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

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

ライバルに差をつけろ！ 真夏のカスタム○○○猛特訓ゼミ！[ WordFes Nagoya 2013 ]