![Page 1: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/1.jpg)
ライバルに差をつけろ!
カスタム○○○ 猛特訓ゼミ!!!
WordFes Nagoya 2013実行委員
小野隆士( twitter:@onocom )
真夏の
1
![Page 2: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/2.jpg)
ワークショップデータ
ワークショップで使用したデータは以下からダウンロード頂けます。
http://onocom.net/wordfes/2013/workshop_files.zip
おまけの壁紙付いてるよ!→
2
![Page 3: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/3.jpg)
3
本日の時間割り
20min. カスタム○○○入門(座学)
70min. ワーク ショップ
説明
カスタム○○○の設定
カスタム○○○用のテンプレート作成
動作確認
Total :90min.
途中で適宜休憩を入れます。
![Page 4: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/4.jpg)
カスタム○○○入門
4 20min.
![Page 5: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/5.jpg)
今回紹介するカスタム○○○
5
カスタム投稿タイプ
カスタムタクソノミー
カスタムフィールド
![Page 6: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/6.jpg)
カスタム○○○を 理解するための前置き
6
![Page 7: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/7.jpg)
突然ですが...問題です
アナタは、飲料メーカーのマーケティング担当です。
日本全国のショッピングセンターを飛び回って、
各店の飲料担当者からアンケートを集めています。
アンケート用紙として用いるなら
AかBのどちらが適切でしょうか?
7
![Page 8: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/8.jpg)
アンケート用紙として適切なのは?
A:何も書かれていない紙 B:質問内容が記載された紙
8
![Page 9: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/9.jpg)
誰にでも回答してもらえる方法を
9
アンケート用紙にあらかじめ
質問を羅列しておけば、
回答者は迷うこと無くアンケートに回答できますね。
![Page 10: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/10.jpg)
続けて第二問
全国から回収したアンケートは、
後日、都道府県別に集計しようと思います。
アンケート用紙の保存方法として適切なのは、
AかBのどちらでしょうか?
10
![Page 11: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/11.jpg)
保存方法として適切なのは?
A:とにかくバインダーに綴じる B:都道府県ごとに仕切りを付けてバインダーに綴じる
11
![Page 12: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/12.jpg)
仕切りをつけると管理しやすい
12
アンケートをあらかじめ都道府県別にまとめておけば、
集計がとても簡単ですね。
![Page 13: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/13.jpg)
最終問題
新商品の味をきめるために
お客様からアンケートを採ることになりました。
アンケート用紙の保存方法として適切なのは、
AかBのどちらでしょうか?
13
![Page 14: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/14.jpg)
保存方法として適切なのは?
A:先ほどと同じバインダーにまとめて綴じる
B:別のバインダーを買ってきてそちらに綴じる
14
![Page 15: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/15.jpg)
別々のバインダだと管理しやすい
15
バインダを分けて管理することで、
アンケート混入を防いだり、
集計漏れを防いだりできますね。
![Page 16: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/16.jpg)
現実
WordPressの記事管理を 現実に置き換えたら
16
![Page 17: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/17.jpg)
WordPressの記事管理を 現実に置き換えたら
WordPressには最初から2つの
バインダが存在します。
17
![Page 18: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/18.jpg)
最初から存在する2つのバインダ
18
![Page 19: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/19.jpg)
最初から存在する2つのバインダ
「投稿」バインダ 「固定ページ」バインダ
19
![Page 20: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/20.jpg)
「投稿」バインダ
日記など、思いのままに書き込むことに向いている。
日付順に綴じられる。
用紙は白紙なので自由度が高い。
反面、スキルが無いと難しく感じることも。
20
![Page 21: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/21.jpg)
「投稿」バインダ
「カテゴリー」
という仕切りを使って、
情報を整理できる。
「タグ」
という付箋を使って、
目印を付けられる。
21
![Page 22: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/22.jpg)
「固定ページ」バインダ
好きな順に綴じられるので、
人に読んでもらう情報を
書くことに適している。
用紙は白紙なので自由度が高い。
反面、スキルが無いと難しく感じることも。
22
![Page 23: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/23.jpg)
「固定ページ」バインダ
「ページテンプレート」
ページごとにデザインを切り替えられる。
「ページ階層」
ページの親子関係を設定できる。
23
![Page 24: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/24.jpg)
でもこれだけだと物足りない時も
24
どこに記事を 書けばいいの?
あれ?先日発売した 新商品の情報ってのせた?
カテゴリ分けにも 限界が...
商品情報とお知らせ 明らかに内容が違うけど...
商品紹介のページに 何かけばいいか教えて~
固定ページにも商品情報があるし、投稿にも新商品の
情報が...
Oh...もう載ってた... 折角記事書いたのに。
例えば服屋さんの場合... HTMLの知識無いから レイアウトがバラバラ...
![Page 25: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/25.jpg)
この物足りなさを解消するのが 【カスタム○○○】なのだっ!
25
どこに記事を 書けばいいの?
あれ?先日発売した 新商品の情報ってのせた?
カテゴリ分けにも 限界が...
商品情報とお知らせ 明らかに内容が違うけど...
商品紹介のページに 何かけばいいか教えて~
固定ページにも商品情報があるし、投稿にも新商品の
情報が...
Oh...もう載ってた... 折角記事書いたのに。
例えば服屋さんの場合... HTMLの知識無いから レイアウトがバラバラ...
![Page 26: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/26.jpg)
26
カスタム投稿タイプ カスタムフィールド カスタムタクソノミー
オリジナルのバインダを 作って記事を管理できます。
カスタム○○○で WordPressがさらに便利に
だれでも簡単に入力できる 専用用紙を作れます。
専用のカテゴリーやタグを 作って効率よく記事を 管理できます!
![Page 27: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/27.jpg)
WordPressのバインダを増やせます。
27
「投稿」 「固定ページ」 「商品情報」
カスタム投稿タイプ
![Page 28: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/28.jpg)
専用の用紙を作れます。
28
「商品情報」用紙 商品情報には、写真と金額はのせなきゃ。あとは自由に書いてくれればいいや。
カスタムフィールド
自由入力
金額
![Page 29: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/29.jpg)
専用の仕切りや付箋を作れます。
29
商品専用の仕切り・付箋
商品をカテゴリごとに整理しておきたい ↓
「商品カテゴリ」を作ろう!
商品のサイズの付箋を貼っておきたい ↓
「商品サイズタグ」を作ろう!
カスタムタクソノミー
![Page 30: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/30.jpg)
カスタム○○○イメージ
30
カスタム投稿タイプ カスタムフィールド カスタムタクソノミー
![Page 31: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/31.jpg)
実例を見てみよう!
31
セッション スポンサーバナー 投稿 固定ページ 動画
WordFesのサイトはこうなっています http://wordfes.org
![Page 32: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/32.jpg)
ワークショップ
32 70min.
![Page 33: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/33.jpg)
33
はぁい、それでは今から皆さんにぃ~ ワークショップをしてもらいまぁ~す。
![Page 34: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/34.jpg)
ご協力ください。 ワークショップ成功のためには 皆様の協力が不可欠です。 次の点にご協力ください。
34
Attention Please
![Page 35: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/35.jpg)
3人で1チーム。 1チーム1台のパソコンを支給します。 チームリーダーを決めた後、 チーム名を決めてください。
35
Attention Please
![Page 36: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/36.jpg)
口喧嘩上等。 チーム内での語り合い大歓迎!! 殴り合いをしない程度に、 仲良くワークショップを進めましょう。
36
Attention Please
![Page 37: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/37.jpg)
時間厳守。 ワークショップは時間との勝負。 遅いと鬼講師からムチが飛びます。 作業所要時間は左下に表示します。
37
Attention Please
![Page 38: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/38.jpg)
鬼講師は絶対。 先生のいうことはよく聞きましょう。 居眠りしたら評価下がっちゃうよ~。
38
Attention Please
![Page 39: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/39.jpg)
小野 隆士 稲葉 智宏 山田さおり
39
本日の鬼講師陣
![Page 40: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/40.jpg)
アナタはカフェのサイト運営を任されています。 ある日、カフェのオーナーからこんな依頼がありました。 カスタム○○○を使って解決しましょう!
40
本日のお題
依頼
特記事項
カフェのメニューをサイトに掲載したい。
・カフェのメニューは頻繁に変わる。 ・オーナーも更新したい。 ・オーナーには制作の知識は無い。
![Page 41: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/41.jpg)
リニューアル計画
41
現状のサイトを把握しよう
カスタム投稿タイプを追加しよう
カスタムタクソノミーを追加しよう
カスタムフィールドを追加しよう
次へすすむ
![Page 42: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/42.jpg)
リニューアル計画
42
グローバルナビを修正しよう
記事を表示させよう
動作確認しよう
完成
![Page 43: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/43.jpg)
現状のサイトを把握しよう
43 10min.
![Page 44: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/44.jpg)
現状のサイトを把握しよう
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
![Page 45: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/45.jpg)
完成イメージを見てみよう
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
![Page 46: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/46.jpg)
時間があれば
少し休憩
46
![Page 47: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/47.jpg)
使用するプラグインを有効化しよう
47 5min.
![Page 48: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/48.jpg)
今回使用するプラグイン
Custom Post Type UI カスタム投稿タイプ、カスタムタクソノミー を追加するためのプラグイン
Advanced Custom Fields カスタムフィールド を追加するためのプラグイン
48
今回のワークショップでは、以下のプラグインを使用します。 管理画面にログインして有効化しましょう!
![Page 49: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/49.jpg)
カスタム投稿タイプを追加しよう
49 5min.
![Page 50: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/50.jpg)
カスタム投稿タイプを追加しよう
50
カスタム投稿タイプ 「 メニュー 」
カフェのメニューを管理する 「メニュー」カスタム投稿タイプ を作ります!
![Page 51: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/51.jpg)
カスタム投稿タイプを追加しよう
51
【管理画面】 Custom Post Types → 新規追加
■投稿タイプ名 menu ■ラベル、単数形のラベル メニュー
Advanced Options クリック
![Page 52: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/52.jpg)
カスタム投稿タイプを追加しよう
52
■サポートのチェックボックス Title Editor Excerpt Custom Fields
CreateCustomPostType ボタンを押して登録完了ですっ!
![Page 53: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/53.jpg)
カスタムタクソノミーを追加しよう
53 10min.
![Page 54: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/54.jpg)
カスタムタクソノミーを追加しよう
54
カフェのメニューを分類する 「メニューカテゴリー」 カスタムタクソノミーを作ります!
カスタムタクソノミー 「メニューカテゴリー」
![Page 55: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/55.jpg)
カスタムタクソノミーを追加しよう
55
【管理画面】 Custom Post Types → 新規追加
■分類名 menu-category
■ラベル、単数形のラベル メニューカテゴリー
■利用する投稿タイプ メニュー
Advanced Options クリック
![Page 56: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/56.jpg)
カスタムタクソノミーを追加しよう
56
■階層 「True」に変更
カスタム分類作成ボタンを 押して登録完了ですっ!
![Page 57: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/57.jpg)
カスタムタクソノミーを追加しよう
57
ドリンクメニュー スラッグ: drink
フードメニュー スラッグ:food
メニュー→メニューカテゴリーから 以下のカテゴリを追加しましょう!
![Page 58: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/58.jpg)
カスタムフィールドを追加しよう
58 10min.
![Page 59: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/59.jpg)
カスタムフィールド
カスタムフィールドを追加しよう
59
カフェのメニューを入力するための カスタムフィールドを作ります!
メニュー画像と料金を
入力できるようにしましょう。
![Page 60: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/60.jpg)
カスタムフィールドを追加しよう
60
(カスタムフィールド)
自由入力 (エディタで代用)
料金
メニュー画像 (カスタムフィールド)
名称 (タイトルで代用)
カフェメニュー専用の入力画面
あらかじめ入力する項目が 決まっていれば、 WEBの知識が無いオーナー も簡単に更新できる!
![Page 61: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/61.jpg)
カスタムフィールドを追加しよう
61
【管理画面】 カスタムフィールド→ 新規追加
■フィールドラベル
メニュー画像 ■フィールド名
menu-image ■フィールドタイプ
画像 ■戻り値
画像ID
「メニュー画像」 登録用フィールド
![Page 62: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/62.jpg)
カスタムフィールドを追加しよう
62
■フィールドラベル
メニュー料金
■フィールド名
menu-price
■フィールドタイプ
テキスト
■フォーマット
No Formatting
「メニュー料金」 登録用フィールド
![Page 63: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/63.jpg)
カスタムフィールドを追加しよう
63
こんな感じになったかな? フィールド名に誤りがないかを絶対確認しておこう! あとタイトルには「メニュー」と入れておこう!
![Page 64: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/64.jpg)
カスタムフィールドを追加しよう
64
「 menu 」を選択
![Page 65: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/65.jpg)
カスタムフィールドを追加しよう
65
■画面に表示しない
カスタムフィールド
公開ボタンを押して 登録完了ですっ!
![Page 66: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/66.jpg)
記事の試し書きをしよう
66 5min.
![Page 67: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/67.jpg)
グローバルナビを修正しよう
67 10min.
![Page 68: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/68.jpg)
グローバルナビを修正しよう
68
【管理画面】 外観 → メニュー
右上の表示オプションの 【メニューカテゴリー】 にチェックを入れる
![Page 69: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/69.jpg)
グローバルナビを修正しよう
69
メニューカテゴリーを以下のよう にグローバルナビに追加 ドリンクメニュー ├ ドリンクメニュー └ フードメニュー
![Page 70: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/70.jpg)
グローバルナビを修正しよう
70
ナビゲーションラベルを以下のように修正 CafeMenu ├ Drink └ Food
![Page 71: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/71.jpg)
記事を表示させよう
71 10min.
![Page 72: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/72.jpg)
記事を表示させよう
カスタム○○○を思い通りに表示させるためには、
専用のテンプレートを追加する必要があります!
どんなテンプレートファイルを作れば良いかは、
テンプレート階層図をチェックしましょう!
72
![Page 73: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/73.jpg)
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
![Page 74: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/74.jpg)
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
![Page 75: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/75.jpg)
今回作るテンプレート
メニューカテゴリー毎の一覧用テンプレート
taxonomy-menu-category.php (taxonomy-タクソノミー名.php)
メニュー詳細ページ用テンプレート
single-menu.php (single-投稿タイプ名.php)
75
![Page 76: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/76.jpg)
すでにこちらにできております。
テーマフォルダ内の以下のファイルから
_ を取り除いてアップロードしましょう。
_taxonomy-menu-category.php
_single-menu.php
76
![Page 77: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/77.jpg)
テンプレートファイルの 内容を見てみよう
77
![Page 78: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/78.jpg)
重要なテンプレートタグ
カスタムフィールドの値を取得するためのタグ
(今日覚えるのはこれだけ!)
get_post_meta (記事ID, カスタムフィールド名, 単一フラグ);
78
![Page 79: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/79.jpg)
カスタムフィールド取得サンプルコード
// price というカスタムフィールドの値を取得する
$price = get_post_meta(get_the_ID(), "price", true);
// カスタムフィールドの値を表示する
echo $price;
79
![Page 80: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/80.jpg)
動作確認しよう!
80 5min.
![Page 81: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/81.jpg)
ワークショップ終了
81
![Page 82: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/82.jpg)
ワークショップ環境について
今回のワークショップ環境は、最近流行りのクラウドサーバ、
Windows Azureで構築しています。
具体的な構築方法は以下の資料がわかりやすいです。
ぜひトライしてみてくださいっ!
Windows Azure kaasanイメージについて http://www.slideshare.net/mazdachihiro/windows-azure-kaasan
82
![Page 83: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/83.jpg)
謝辞
ワークショップ環境構築にあたり多大なるご協力を頂きました。
この場を借りてお礼申し上げます。
日本マイクロソフト株式会社
武田 正樹 様
ITかあさん
松田 千尋 様
83
![Page 84: ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]](https://reader033.vdocuments.site/reader033/viewer/2022061206/5483e1c4b07959520c8b4a4a/html5/thumbnails/84.jpg)
ありがとうございました!
84