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

ライバルに差をつけろ！

カスタム○○○ 猛特訓ゼミ!!!

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

どこに記事を 書けばいいの？

あれ？先日発売した 新商品の情報ってのせた？

カテゴリ分けにも 限界が...

商品情報とお知らせ 明らかに内容が違うけど...

商品紹介のページに 何かけばいいか教えて～

固定ページにも商品情報があるし、投稿にも新商品の

情報が...

Oh...もう載ってた... 折角記事書いたのに。

例えば服屋さんの場合... HTMLの知識無いから レイアウトがバラバラ...

この物足りなさを解消するのが 【カスタム○○○】なのだっ！

25

どこに記事を 書けばいいの？

あれ？先日発売した 新商品の情報ってのせた？

カテゴリ分けにも 限界が...

商品情報とお知らせ 明らかに内容が違うけど...

商品紹介のページに 何かけばいいか教えて～

固定ページにも商品情報があるし、投稿にも新商品の

情報が...

Oh...もう載ってた... 折角記事書いたのに。

例えば服屋さんの場合... HTMLの知識無いから レイアウトがバラバラ...

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

グローバルナビを修正しよう

記事を表示させよう

動作確認しよう

完成

現状のサイトを把握しよう

43 10min.

現状のサイトを把握しよう

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

完成イメージを見てみよう

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

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

47 5min.

今回使用するプラグイン

Custom Post Type UI カスタム投稿タイプ、カスタムタクソノミー を追加するためのプラグイン

Advanced Custom Fields カスタムフィールド を追加するためのプラグイン

48

今回のワークショップでは、以下のプラグインを使用します。 管理画面にログインして有効化しましょう！

カスタム投稿タイプを追加しよう

49 5min.

カスタム投稿タイプを追加しよう

50

カスタム投稿タイプ 「 メニュー 」

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

カスタム投稿タイプを追加しよう

51

【管理画面】 Custom Post Types → 新規追加

■投稿タイプ名 menu ■ラベル、単数形のラベル メニュー

Advanced Options クリック

カスタム投稿タイプを追加しよう

52

■サポートのチェックボックス Title Editor Excerpt Custom Fields

CreateCustomPostType ボタンを押して登録完了ですっ！

カスタムタクソノミーを追加しよう

53 10min.

カスタムタクソノミーを追加しよう

54

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

カスタムタクソノミー 「メニューカテゴリー」

カスタムタクソノミーを追加しよう

55

【管理画面】 Custom Post Types → 新規追加

■分類名 menu-category

■ラベル、単数形のラベル メニューカテゴリー

■利用する投稿タイプ メニュー

Advanced Options クリック

カスタムタクソノミーを追加しよう

56

■階層 「True」に変更

カスタム分類作成ボタンを 押して登録完了ですっ！

カスタムタクソノミーを追加しよう

57

ドリンクメニュー スラッグ： drink

フードメニュー スラッグ：food

メニュー→メニューカテゴリーから 以下のカテゴリを追加しましょう！

カスタムフィールドを追加しよう

58 10min.

カスタムフィールド

カスタムフィールドを追加しよう

59

カフェのメニューを入力するための カスタムフィールドを作ります！

メニュー画像と料金を

入力できるようにしましょう。

カスタムフィールドを追加しよう

60

（カスタムフィールド）

自由入力 （エディタで代用）

料金

メニュー画像 （カスタムフィールド）

名称 （タイトルで代用）

カフェメニュー専用の入力画面

あらかじめ入力する項目が 決まっていれば、 WEBの知識が無いオーナー も簡単に更新できる！

カスタムフィールドを追加しよう

61

【管理画面】 カスタムフィールド→ 新規追加

■フィールドラベル

メニュー画像 ■フィールド名

menu-image ■フィールドタイプ

画像 ■戻り値

画像ID

「メニュー画像」 登録用フィールド

カスタムフィールドを追加しよう

62

■フィールドラベル

メニュー料金

■フィールド名

menu-price

■フィールドタイプ

テキスト

■フォーマット

No Formatting

「メニュー料金」 登録用フィールド

カスタムフィールドを追加しよう

63

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

カスタムフィールドを追加しよう

64

「 menu 」を選択

カスタムフィールドを追加しよう

65

■画面に表示しない

カスタムフィールド

公開ボタンを押して 登録完了ですっ！

記事の試し書きをしよう

66 5min.

グローバルナビを修正しよう

67 10min.

グローバルナビを修正しよう

68

【管理画面】 外観 → メニュー

右上の表示オプションの 【メニューカテゴリー】 にチェックを入れる

グローバルナビを修正しよう

69

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

グローバルナビを修正しよう

70

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

記事を表示させよう

71 10min.

記事を表示させよう

カスタム○○○を思い通りに表示させるためには、

専用のテンプレートを追加する必要があります！

どんなテンプレートファイルを作れば良いかは、

テンプレート階層図をチェックしましょう！

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%B1%A4

taxonomy-$taxonomy.php

single-$posttype.php

archive-$posttype.php

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

今回作るテンプレート

メニューカテゴリー毎の一覧用テンプレート

taxonomy-menu-category.php （taxonomy-タクソノミー名.php）

メニュー詳細ページ用テンプレート

single-menu.php （single-投稿タイプ名.php）

75

すでにこちらにできております。

テーマフォルダ内の以下のファイルから

_ を取り除いてアップロードしましょう。

_taxonomy-menu-category.php

_single-menu.php

76

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

77

重要なテンプレートタグ

カスタムフィールドの値を取得するためのタグ

(今日覚えるのはこれだけ！)

get_post_meta (記事ID, カスタムフィールド名, 単一フラグ);

78

カスタムフィールド取得サンプルコード

// price というカスタムフィールドの値を取得する

$price = get_post_meta(get_the_ID(), "price", true);

// カスタムフィールドの値を表示する

echo $price;

79

動作確認しよう！

80 5min.

ワークショップ終了

81

ワークショップ環境について

今回のワークショップ環境は、最近流行りのクラウドサーバ、

Windows Azureで構築しています。

具体的な構築方法は以下の資料がわかりやすいです。

ぜひトライしてみてくださいっ！

Windows Azure kaasanイメージについて http://www.slideshare.net/mazdachihiro/windows-azure-kaasan

82

謝辞

ワークショップ環境構築にあたり多大なるご協力を頂きました。

この場を借りてお礼申し上げます。

日本マイクロソフト株式会社

武田 正樹 様

ITかあさん

松田 千尋 様

83

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

84