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

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

2013/03/16WordBench Osaka

Takayuki Miyauchi@miya0001

13年3月17日日曜日

自己紹介


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


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

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


✓ WP Total Hacks

✓ TinyMCE Template

✓ Child Pages Shortcode

✓ Nginx Cache Controller

プラグイン作ってます！

まもなくスロバキア語に対応

14ヶ国語目です！


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


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_errorsadminとかrootとか、登録してほしくないユーザー名を拒否



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



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



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


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



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

‣ パスとか

‣ 文章とか



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





ここまでのまとめ



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

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

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



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

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/ でアクセスできます！



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

flush_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におまかせ！



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


Technology

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