アプリケーションプラットホームとしてのWordPress

アプリケーションプラットホームとしての
WordPress

2013/03/16
WordBench Osaka

Takayuki Miyauchi
@miya0001

13年3月17日日曜日

自己紹介


✓ 和歌山県の串本町っていうすごい田舎にすんで
ます。


✓ フリーで仕事してますが、株式会社デジタルキューブ
のバックエンドエンジニアとしても仕事してます。

デジタルキューブは、Amazon Web Serviceの
公認コンサルタントです。


プラグイン作ってます！

✓ WP Total Hacks まもなくスロバキア語
に対応
✓ TinyMCE Template 14ヶ国語目です！

✓ Child Pages Shortcode

✓ Nginx Cache Controller


開発にたずさわりました！


twitter: @miya0001


blog: firegoby.jp


今日のお題


WordPressで作れるのはブログや
企業サイドだけじゃない！

アプリケーションプラットホーム
としてのWordPress！


✓ 小さなプラグインを組み合わせてレゴのように
サービスを作ろう！

✓ プラグインとテーマを上手に分離してプログラ
マとデザイナーの分業をうまくやろう！

✓ BuddyPress？なにそれ？


✓ ただし、とてもプラグラマーチックな話なの
でかなり省略します。

✓ 詳しく知りたい方は、ソースを見てください。


サンプルプラグインのダウンロード

http://bit.ly/wbosaka


サンプルサイト

http://bit.ly/wbosaka-demo


ログイン画面を
バリバリにカスタマイズする


デモサイト: http://bit.ly/wbosaka-demo

たとえばメンバー制の
サービスを作る場合



✓ まずユーザー登録の機能が必要だね。
=> WordPressに最初からあるじゃん。

✓ ログインとかのUIは？
=> WordPressに最初からあるじゃん。

✓ セキュリティは？
=> WordPressはパスワードとか暗号化して
保存してるし、セッションとかもおまかせで
いいんじゃん。



というわけでサンプルのプラグインを
作ってきました。



ウインドウのサイズに合わせて伸び縮みする背景画像
さらにスライドにもなってるんだぜー



✓ このプラグインでやってることは概ね以下の2つです。
‣ ログイン画面にカスタムCSSとカスタムJSを適用。

‣ サインアップ時などにユーザーに送信されるメールのカスタマイ
ズ



- login-costomizer
- login-customizer.php // プラグイン本体
- cover-photos // スライド画像
- includes
- pluggable.php // メールのカスタマイズ
- js // JavaScript
- css // CSS



3つのフックを使ってます！

✓ login_enqueue_scripts
ログイン画面にCSSとJavaScriptを適用

✓ login_footer
スライド用の画像の配列のJavaScriptを出力

✓ registration_errors
adminとかrootとか、登録してほしくないユ
ーザー名を拒否



✓ あと、includes/pluggable.phpでユーザーに送信される
メールの本文をカスタマイズしてます。



実際に運用する際には画像とかCSSとかは
ケースバイケースで変わりますよね。



おや？



フィルターフックを
仕込んどきました！



✓ たとえば文章とか画像のパスとかにはフィル
ターフックを仕込んでおくと、テーマ側で後か
ら変更できるので、実装に集中できますよ！
‣ 数字とか

‣ パスとか

‣ 文章とか



テーマのfunctions.phpによるカスタマイズ例
http://bit.ly/13YT5Ls



ここまでのまとめ



✓ 細かいことはフィルターフックでお茶を濁して
実装に集中！

✓ デザイナーさんは apply_ﬁlters っていうのを
見つけたらしめしめと思うべし！

✓ 実は公式ディレクトリ上のプラグインでも隠れ
フックはいっぱいあります！



✓ デザイナーのみなさんフィルターフックを覚え
たらカスタマイズの幅が広がります！

apply_filters(‘my_login_stylesheet_uri’, ‘http://example.com/style.css’);

add_filter(‘my_login_stylesheet_uri’, ‘my_theme_style’);

function my_theme_style($stylesheet) {
return ‘http://example.com/my-style.css’;
}

正規表現っていうのを使って置換もできますけど、
それはプログラマーに頼んじゃおう！



✓ そして何よりも！
フックを適切に仕込めば、そのプラグインを
どこでも流用できるじゃん！

オレオレプラグインをいくつか用意すれば、
レゴのように組み合わせていろいろ作れそうですよね！



WordPressのRewrite APIを
マスターして
パーマリンクの魔術師になろう！



意外と簡単です。
add_rewrite_endpoint( demo , EP_ROOT);



ただしコツがある！



add_rewrite_endpoint( demo , EP_ROOT);
で、http://example.com/demo/ でアクセスできます！



パーマリンク設定はキャッシュされてるので
キャッシュを初期化する必要があります。
ﬂush_rewrite_rules();



そして超大事なこと！



キャッシュのフラッシュは
プラグインを有効化した時に1度だけ行う！
register_activation_hook()
はそのためのフックです！



もうひとつ



register_deactivation_hook() を使って
プラグインを無効化した時にも初期化！
忘れると意味不明なことになります。。。



残りは3つのフックで



この3つのフックにアクションを追加する



init フックで、もう一回、
add_rewrite_endpoint() を実行！

ただし自分を無効化するときには、なにもしない！



query_vars フックで demo を追加してあげる



コンテンツを出力

template_redirect フックでコンテンツを出力



この条件分岐で true ならそのURLでアクセスが
あったということ


http://example.com/demo/hogehoge
みたいな不要なURLでは、404を返す。


コンテンツを出力するところ
exit で止めちゃうとこがミソ


つまりWordPressのテンプレート
タグがそのまんま使えちゃうんです！



✓ add_rewrite_endpoint() という関数で、
WordPressから独立したウェブアプリが作れ
ます。

✓ でもWordPressの機能はそのまま使えます！



✓ ってことはですね。サービスサイトとサービ
スそのものをまったく別々に開発出来ます！

✓ デプロイは、管理画面からアップロードする
だけ！



サービスを作っちゃおう！



つくったサービス

オレオレEvernoteみたいなサービ
スです。



自慢じゃないですが、
1日で作りました。
(自慢ですけど)



カスタム投稿タイプ使ってます！



コンテンツの保存はこれだけ。



コンテンツの出力はこれだけ。
htmlはエスケープした上で
the_content っていうフィルターフックを通してます！



なんで the_content フィルターを
通したんだ？



✓ oEmbedやショートコ
ードが使えるから超簡
単に外部サービスのコ
ンテンツが表示されち
ゃうからです！

✓ 一方でユーザーが入力
したHTMLはエスケー
プしてます！



まとめ



✓ WordPressを使うと他にもメリットはいっぱ
い！
‣ 多言語化が簡単！

‣ くわしい人がいっぱい！

‣ セキュリティはWordPressにおまかせ！


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


アプリケーションプラットホームとしてのWordPress

Recommended

Recommended

More Related Content

Similar to アプリケーションプラットホームとしてのWordPress

Similar to アプリケーションプラットホームとしてのWordPress (19)

More from Takayuki Miyauchi

More from Takayuki Miyauchi (20)

Recently uploaded

Recently uploaded (9)

アプリケーションプラットホームとしてのWordPress