カフェ『 DRIP 』

サイトURL：https://portfolio.dewdropblog.com/drip/

カフェ用完全自作WordPressテンプレートのデモサイトです。

■概要

WordPressテンプレート作りの練習で、管理側の機能の充実を目指した作品です。

各画像・動画、コンセプト・アクセスの文字列全ては利用者が自由に変更できるようにしています。
商品MENUとPICK UPはウィジェットにより幾つでも登録可能です。

また、管理画面カスタムフィールド、カスタムウィジェットのウェジェットエリアを使いやすいように、見た目を整えています。

カフェとして必須のメニュー掲載や、コンセプト、アクセス情報の他に、BLOG投稿、NEWS投稿機能をつけています。

■使用言語

HTML・CSS・JavaScript（jQuery）・PHP（WordPress）

■GitHub

https://github.com/num33dewdrop/cafe

■変更可能箇所（カスタムフィールド）

・固定ページ各画像・動画・固定ページコンセプト・固定ページアクセス情報・固定ページGoogleMAP登録 TOP画面の至るところをカスタマイズできます。コンセプトに合わせた画像や動画で使う人によっての個性が出せればと思います。

■BLOG投稿（デフォルト投稿）

BLOG機能もあり、記事を書けます。記事を書きPICKUP項目（ウィジェット）に登録することで、訪問者に『見せたい』記事をTOP画面に表示できます。登録は幾つでも可能です。

■ニュース投稿（カスタム投稿）

BLOG投稿とは別に、ニュース投稿もできます。投稿したニュースは新着順にタイトルのみTOP画面に表示されます。お知らせや、キャンペーン等の告知に使えます。 NEWSもPICKUP項目（ウィジェット）に登録することができます。重要なお知らせ、キャンペーンの広告として使えるよう想定しました。

■その他機能

・MENU登録（カスタムウィジェット）・CONTACTフォーム機能

■苦労点・まとめ

ウィジェット登録時に、画像のURLをinputタグに保存しています。しかし、管理画面のプレビュー画像は元画像によって大きさが異常になったり、見た目や使い勝手が悪くなることがありました。そのため、管理画面のスタイルを調整する作業を行いましたが、WordPressの自動レンダリングされるiframe内の画像のために非常に難航しました。試行錯誤の結果、functions.phpでwp_headフックを使用して、WordPress内部で使用される定数IFRAME_REQUESTを判定し、IFRAME_REQUESTが定義されている場合（現在の要求がiframe内で行われている場合）のみ、管理画面にstyleタグを挿入する方法で問題を解決しました。今後も管理画面の編集を含め、さらなるスキル向上を図り、ユーザビリティの高いサイトを構築することを目指します。