• Like
ライバルに差をつけろ! 真夏のカスタム○○○猛特訓ゼミ![ WordFes Nagoya 2013 ]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 1,773 views
Published

2013年8月31日(土)に開催された、WordFes Nagoya 2013のセッション【ライバルに差をつけろ!真夏のカスタム○○○猛特訓ゼミ!】の資料です。 …

2013年8月31日(土)に開催された、WordFes Nagoya 2013のセッション【ライバルに差をつけろ!真夏のカスタム○○○猛特訓ゼミ!】の資料です。

カスタム投稿タイプ、カスタムフィールド、カスタムタクソノミーをワークショップ形式で学びました。
詳細 : http://2013.wordfes.org/article/session/s2-f11/

━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ワークショップで使用したファイル
http://onocom.net/wordfes/2013/workshop_files.zip
※おまけの壁紙つきです。

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,773
On SlideShare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
19
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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には最初から2つの バインダが存在します。 17
  • 18. 最初から存在する2つのバインダ 18
  • 19. 最初から存在する2つのバインダ 「投稿」バインダ 「固定ページ」バインダ 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チーム。 1チーム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