夜のハンズオン資料

がんばるたまへ

Transcript

1. Rewrite Endpoint Hands-on WordPressで作る食べ◦グ系サイト リライトエンドポイント普及委員会 大曲 仁・小川 果純
2. 大曲 仁 自己紹介 2 プライム・ストラテジー 執行役員CTO WordPress日本語フォーラム世話役（不定期出現中） プラグインを（他人が作ったのも含め）そこそこ開発 様々な異名を保持（そろそろ勘弁して。。）
3. 小川 果純 自己紹介 3 プライム・ストラテジー Webディレクター 兼 Webエンジニア WordCamp Kansai 2016 スピーカー ポテチ、ピザをはじめとしたジャンクフードマニア メタ研究科。齧歯目カピバラ属らばー。
4. はじめに 4 本ハンズオンの目的は、 ・リライトエンドポイントの動作の理解 ・運用方法の改善の体験 ・プラグインを用いた実装方法の体験 です。
5. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 5 ０．事前準備
6. 環境準備 6 テスト可能な環境を用意してください。 パーマリンクが利用可能であることと、 テーマとして、Twenty Sixteen が 利用可能となっていることが必要です。
7. 環境準備 7 • Rewrite Endpoint Master https://ja.wordpress.org/plugins/rewrite-endpoint-master/ リライトエンドポイント管理 • Smart Custom Fields https://ja.wordpress.org/plugins/smart-custom-fields/ 編集画面カスタマイズ • ショップ投稿タイプ登録プラグイン https://github.com/jim912/endpoint-handson-post-type-plugin/ ハンズオン用お店投稿タイプ登録 以下のプラグインをダウンロードして、順次インストールと 有効化を行います。
8. 環境準備 8 以下のプラグインをダウンロードして、順次インストールと 有効化を行います。
9. 環境準備 9 以下のプラグインをダウンロードして、順次インストールと 有効化を行います。
10. 環境準備 10 メニューに「お店」「Endpoints」「Smart Custom Fields」が 追加されていることを確認
11. 環境準備 11 お店投稿タイプの表示ができるよう、リライトルール再生成のため 一旦、パーマリンク設定のページにアクセスします。
12. 環境準備 12 確認のため、お店の個別投稿ページが表示できるか確認します。 また、個別投稿ページのURLのあとに menu を付加して 404 と なることを確認しておきます。
13. 環境準備 13 • プラグイン、サンプル店舗設定データ https://github.com/jim912/endpoint-handson-input-sample プラグインや表示テスト向けサンプル店舗の設定データ • サンプル店舗用画像 http://endpoint.test.warna.info/wp-content/uploads/2016/08/xountain.zip サンプル店舗画像 最後にプラグインの設定、およびサンプルデータをダウンロード しておきます。
14. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 14 2．リライトエンドポイントの登録
15. リライトエンドポイントの登録 15 「Endpoints」メニューから一覧画面を開き、「新規追加」 リンクから、新しいリライトエンドポイントの追加を行います。 ① ②
16. リライトエンドポイントの登録 16 以下、４つの内容でのエンドポ イント登録を行います。 ① ② タイトル ：メニュー Endpoint Name ：menu Endpoint Type ：Custom 8192 タイトル ：写真ギャラリー Endpoint Name ：photo Endpoint Type ：Custom 8192 タイトル ：口コミ・評価 Endpoint Name ：review Endpoint Type ：Custom 8192 タイトル ：地図・クーポン Endpoint Name ：map Endpoint Type ：Custom 8192
17. リライトエンドポイントの登録 17 リライトエンドポイントが登録されると、一覧に表示されます。
18. リライトエンドポイントの登録 18 Endpoint Type の Custom 設定について 標準で選択可能なEndpoint Typeについては、2の倍数の数値が 割り当てられており。これらの合算の数値を指定可能。 Permalink 1 Attachment 2 Date 4 Year 8 Month 16 Day 32 Root 64 Comments 128 Search 256 Category 512 Tag 1024 Author 2048 Pages 4096 Archives 3612 (Date + Year + Month +Day + Categories + Tag + Author) All 8191 (Author までの加算)
19. リライトエンドポイントの登録 19 Endpoint Type の Custom 設定について 今回の登録時に数値を8192としたのは、既存のエンドポイントと 重複しないようにしたかったため。 この数値は、register_post_type の rewrite パラメータの ep_mask で指定可能。 ショップ投稿タイプ登録プラグイン内コードより
20. リライトエンドポイントの登録 20 先ほど 404 となった menu ページにアクセスして個別投稿と 同じ表示となることを確認します。
21. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 21 3．お店編集画面の作成
22. お店編集画面の作成 22 お店投稿タイプの編集画面で、メニュー、ギャラリー、レビュー、 マップ、クーポンの登録ができるようにします。 「 Smart Custom Fields 」メニューから一覧画面を開き、 「新規追加」リンクから、新しい設定の追加を行います。 ① ②
23. お店編集画面の作成 23 以下の内容にて、設定の入力を行います。（1/3） 繰り返し ：有効 グループ名 ：menu-group タイプ ：テキスト 名前 ：menu ラベル ：メニュー名 タイプ ：テキスト 名前 ：price ラベル ：価格 タイプ ：テキスト 名前 ：menu_comment ラベル ：一口コメント タイトル ：お店情報
24. お店編集画面の作成 24 繰り返し ：有効 グループ名 ：gallery タイプ ：画像 名前 ：menu_images ラベル ：メニュー画像 プレビューサイズ ：thumbnail 繰り返し ：有効 グループ名 ：reviews タイプ ：テキストエリア 名前 ：review ラベル ：レビュー 行数 ：5 以下の内容にて、設定の入力を行います。（2/3）
25. お店編集画面の作成 25 繰り返し ：無効 タイプ ：画像 名前 ：map ラベル ：アクセスマップ プレビューサイズ ：medium 繰り返し ：無効 タイプ ：画像 名前 ：coupon ラベル ：クーポン プレビューサイズ ：full 以下の内容にて、設定の入力を行います。（3/3）
26. お店編集画面の作成 26 設定を入力したら、「表示条件」の「お店」にチェックをして、 「公開」ボタンをクリックします。 ① ②
27. お店編集画面の作成 27 お店の編集画面に「お店情報」 の設定欄が追加され、 ・メニュー名 ・価格 ・一口コメント ・メニュー画像 ・レビュー ・アクセスマップ ・クーポン の設定項目があることを確認し ます。
28. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 28 4．対応テーマの適用
29. 対応テーマの適用 29 Twenty Sixteen の子テーマである、ハンズ用オンテーマを ダウンロードし、インストールと有効化を行います。 https://github.com/jim912/endpoint-handson-theme
30. 対応テーマの適用 30 お店の個別投稿ページを表示し、各エンドポイントのページが 表示されるかを確認 これらのリンクが404にならず 表示されるか確認する。
31. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 31 5．お店データの設定
32. お店データの設定 32 お店の「新規追加」メニューより、表示検証用のお店の追加を 行う。設定内容は以下の通り。 タイトル ：◦ウンテン パーマリンク ：xountain アイキャッチ画像 ：xountain-exterior.jpg
33. お店データの設定 33 以下の内容にて、メニューデータの設定を行う。 メニュー名 ：甘口小倉抹茶スパ 価格 ：800 一口コメント ： 小倉単体では、それなりに美味。苦めの抹茶パスタとホイップクリーム、そしてコ テコテの油がユーのストマックを確実に地獄に誘う。 メニュー名 ：甘口バナナスパ 価格 ：800 一口コメント ： ホイップクリームとチョコソース、滴る油のコンビネーションは、マウンテンのチ ョモランマ。 メニュー名 ：甘口メロンスパ 価格 ：800 一口コメント ： ホイップクリームのボリューム感とはうらはらに、甘口スパの中では谷川岳クラス 。ただし、山をなめてはいけない。油断は禁物である。
34. お店データの設定 34 メニュー画像 ： menu_image_01.jpg メニュー画像 ： menu_image_02.jpg メニュー画像 ： menu_image_03.jpg 以下の内容にて、メニュー画像の設定を行う。
35. お店データの設定 35 以下の内容にて、レビューの設定を行う。 レビュー ： この量、そして小倉抹茶スパの不味さ。 ええ、おいしいナスみそミートスパで小倉抹茶の不味さへの怒りをクールダウンしつ つ、両方とも完食しました。 すごいおなかいっぱい。 レビュー ： 見た目とは違い色の割には味が濃くないです。 (抹茶スパに比べればかもしれませんが) 中には２～３センチ角に切ったメロンが数個入っています。 このメロンが意外とさっぱりしていて気分転換としてはもってこいです。 (最初コイツが厄介だと思い先に片付けようとしたのですがｗ)
36. お店データの設定 36 以下の内容にて、アクセスマップ、クーポンの設定を行う。 アクセスマップ ：map.jpg クーポン ：coupon.jpg
37. お店データの設定 37 個別投稿ページにアクセスして、設定した表示が反映されるかを 確認する。
38. 38 おつかれさまでした！！！！！