Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
夜のハンズオン資料
Search
Hitoshi Omagari
August 27, 2016
Technology
3
250
夜のハンズオン資料
がんばるたまへ
Hitoshi Omagari
August 27, 2016
Tweet
Share
More Decks by Hitoshi Omagari
See All by Hitoshi Omagari
WordPress「超」スピードアップ術 ~のろまなカメと呼ばれないために~
jim912
1
300
君はパーマリンク沼を知っているか?
jim912
0
8.8k
Rewrite Endpoint活用のススメ - WordPressで作る食べ○グ系サイト-
jim912
1
520
Other Decks in Technology
See All in Technology
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
480
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
470
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
190
どう買う?Azure
kuniteru
1
190
依存ライブラリはどこに?
takesection
0
110
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
160
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
やっていきテスト
k6s4i53rx
0
160
AWS アーキテクチャクイズ
yuu26
2
700
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Unsuck your backbone
ammeep
661
56k
The Mythical Team-Month
searls
214
42k
It's Worth the Effort
3n
180
27k
How GitHub (no longer) Works
holman
301
140k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Git: the NoSQL Database
bkeepers
PRO
421
63k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Statistics for Hackers
jakevdp
789
220k
Transcript
Rewrite Endpoint Hands-on WordPressで作る食べ◦グ系サイト リライトエンドポイント普及委員会 大曲 仁・小川 果純
大曲 仁 自己紹介 2 プライム・ストラテジー 執行役員CTO WordPress日本語フォーラム世話役(不定期出現中) プラグインを(他人が作ったのも含め)そこそこ開発 様々な異名を保持(そろそろ勘弁して。。)
小川 果純 自己紹介 3 プライム・ストラテジー Webディレクター 兼 Webエンジニア WordCamp Kansai
2016 スピーカー ポテチ、ピザをはじめとしたジャンクフードマニア メタ研究科。齧歯目カピバラ属らばー。
はじめに 4 本ハンズオンの目的は、 ・リライトエンドポイントの動作の理解 ・運用方法の改善の体験 ・プラグインを用いた実装方法の体験 です。
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 0.事前準備
環境準備 6 テスト可能な環境を用意してください。 パーマリンクが利用可能であることと、 テーマとして、Twenty Sixteen が 利用可能となっていることが必要です。
環境準備 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 以下のプラグインをダウンロードして、順次インストールと 有効化を行います。
環境準備 9 以下のプラグインをダウンロードして、順次インストールと 有効化を行います。
環境準備 10 メニューに「お店」「Endpoints」「Smart Custom Fields」が 追加されていることを確認
環境準備 11 お店投稿タイプの表示ができるよう、リライトルール再生成のため 一旦、パーマリンク設定のページにアクセスします。
環境準備 12 確認のため、お店の個別投稿ページが表示できるか確認します。 また、個別投稿ページのURLのあとに menu を付加して 404 と なることを確認しておきます。
環境準備 13 • プラグイン、サンプル店舗設定データ https://github.com/jim912/endpoint-handson-input-sample プラグインや表示テスト向けサンプル店舗の設定データ • サンプル店舗用画像 http://endpoint.test.warna.info/wp-content/uploads/2016/08/xountain.zip サンプル店舗画像
最後にプラグインの設定、およびサンプルデータをダウンロード しておきます。
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 「Endpoints」メニューから一覧画面を開き、「新規追加」 リンクから、新しいリライトエンドポイントの追加を行います。 ① ②
リライトエンドポイントの登録 16 以下、4つの内容でのエンドポ イント登録を行います。 ① ② タイトル :メニュー 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 リライトエンドポイントが登録されると、一覧に表示されます。
リライトエンドポイントの登録 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 Endpoint Type の Custom 設定について 今回の登録時に数値を8192としたのは、既存のエンドポイントと 重複しないようにしたかったため。 この数値は、register_post_type
の rewrite パラメータの ep_mask で指定可能。 ショップ投稿タイプ登録プラグイン内コードより
リライトエンドポイントの登録 20 先ほど 404 となった menu ページにアクセスして個別投稿と 同じ表示となることを確認します。
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 お店投稿タイプの編集画面で、メニュー、ギャラリー、レビュー、 マップ、クーポンの登録ができるようにします。 「 Smart Custom Fields 」メニューから一覧画面を開き、 「新規追加」リンクから、新しい設定の追加を行います。
① ②
お店編集画面の作成 23 以下の内容にて、設定の入力を行います。(1/3) 繰り返し :有効 グループ名 :menu-group タイプ :テキスト 名前
:menu ラベル :メニュー名 タイプ :テキスト 名前 :price ラベル :価格 タイプ :テキスト 名前 :menu_comment ラベル :一口コメント タイトル :お店情報
お店編集画面の作成 24 繰り返し :有効 グループ名 :gallery タイプ :画像 名前 :menu_images
ラベル :メニュー画像 プレビューサイズ :thumbnail 繰り返し :有効 グループ名 :reviews タイプ :テキストエリア 名前 :review ラベル :レビュー 行数 :5 以下の内容にて、設定の入力を行います。(2/3)
お店編集画面の作成 25 繰り返し :無効 タイプ :画像 名前 :map ラベル :アクセスマップ
プレビューサイズ :medium 繰り返し :無効 タイプ :画像 名前 :coupon ラベル :クーポン プレビューサイズ :full 以下の内容にて、設定の入力を行います。(3/3)
お店編集画面の作成 26 設定を入力したら、「表示条件」の「お店」にチェックをして、 「公開」ボタンをクリックします。 ① ②
お店編集画面の作成 27 お店の編集画面に「お店情報」 の設定欄が追加され、 ・メニュー名 ・価格 ・一口コメント ・メニュー画像 ・レビュー ・アクセスマップ
・クーポン の設定項目があることを確認し ます。
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 Twenty Sixteen の子テーマである、ハンズ用オンテーマを ダウンロードし、インストールと有効化を行います。 https://github.com/jim912/endpoint-handson-theme
対応テーマの適用 30 お店の個別投稿ページを表示し、各エンドポイントのページが 表示されるかを確認 これらのリンクが404にならず 表示されるか確認する。
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 お店の「新規追加」メニューより、表示検証用のお店の追加を 行う。設定内容は以下の通り。 タイトル :◦ウンテン パーマリンク :xountain アイキャッチ画像 :xountain-exterior.jpg
お店データの設定 33 以下の内容にて、メニューデータの設定を行う。 メニュー名 :甘口小倉抹茶スパ 価格 :800 一口コメント : 小倉単体では、それなりに美味。苦めの抹茶パスタとホイップクリーム、そしてコ
テコテの油がユーのストマックを確実に地獄に誘う。 メニュー名 :甘口バナナスパ 価格 :800 一口コメント : ホイップクリームとチョコソース、滴る油のコンビネーションは、マウンテンのチ ョモランマ。 メニュー名 :甘口メロンスパ 価格 :800 一口コメント : ホイップクリームのボリューム感とはうらはらに、甘口スパの中では谷川岳クラス 。ただし、山をなめてはいけない。油断は禁物である。
お店データの設定 34 メニュー画像 : menu_image_01.jpg メニュー画像 : menu_image_02.jpg メニュー画像 :
menu_image_03.jpg 以下の内容にて、メニュー画像の設定を行う。
お店データの設定 35 以下の内容にて、レビューの設定を行う。 レビュー : この量、そして小倉抹茶スパの不味さ。 ええ、おいしいナスみそミートスパで小倉抹茶の不味さへの怒りをクールダウンしつ つ、両方とも完食しました。 すごいおなかいっぱい。 レビュー
: 見た目とは違い色の割には味が濃くないです。 (抹茶スパに比べればかもしれませんが) 中には2~3センチ角に切ったメロンが数個入っています。 このメロンが意外とさっぱりしていて気分転換としてはもってこいです。 (最初コイツが厄介だと思い先に片付けようとしたのですがw)
お店データの設定 36 以下の内容にて、アクセスマップ、クーポンの設定を行う。 アクセスマップ :map.jpg クーポン :coupon.jpg
お店データの設定 37 個別投稿ページにアクセスして、設定した表示が反映されるかを 確認する。
38 おつかれさまでした!!!!!