Downloaded 33 times
アプリケーションプラットホームとしてのWordPress
- 1. アプリケーションプラットホームとしての WordPress 2013/03/16 WordBench Osaka Takayuki Miyauchi @miya0001 13年3月17日日曜日
- 2.
- 3. ✓ 和歌山県の串本町っていうすごい田舎にすんで ます。 13年3月17日日曜日
- 4. ✓ フリーで仕事してますが、株式会社デジタルキューブ のバックエンドエンジニアとしても仕事してます。 デジタルキューブは、Amazon Web Serviceの 公認コンサルタントです。 13年3月17日日曜日
- 5. プラグイン作ってます！ ✓ WP Total Hacks まもなくスロバキア語 に対応 ✓ TinyMCE Template 14ヶ国語目です！ ✓ Child Pages Shortcode ✓ Nginx Cache Controller 13年3月17日日曜日
- 6.
- 7.
- 8.
- 9.
- 10. WordPressで作れるのはブログや 企業サイドだけじゃない！ アプリケーションプラットホーム としてのWordPress！ 13年3月17日日曜日
- 11. ✓ 小さなプラグインを組み合わせてレゴのように サービスを作ろう！ ✓ プラグインとテーマを上手に分離してプログラ マとデザイナーの分業をうまくやろう！ ✓ BuddyPress？なにそれ？ 13年3月17日日曜日
- 12. ✓ ただし、とてもプラグラマーチックな話なの でかなり省略します。 ✓ 詳しく知りたい方は、ソースを見てください。 13年3月17日日曜日
- 13. サンプルプラグインのダウンロード http://bit.ly/wbosaka 13年3月17日日曜日
- 14. サンプルサイト http://bit.ly/wbosaka-demo 13年3月17日日曜日
- 15. ログイン画面を バリバリにカスタマイズする 13年3月17日日曜日
- 16. デモサイト: http://bit.ly/wbosaka-demo たとえばメンバー制の サービスを作る場合 13年3月17日日曜日
- 17. デモサイト: http://bit.ly/wbosaka-demo ✓ まずユーザー登録の機能が必要だね。 => WordPressに最初からあるじゃん。 ✓ ログインとかのUIは？ => WordPressに最初からあるじゃん。 ✓ セキュリティは？ => WordPressはパスワードとか暗号化して 保存してるし、セッションとかもおまかせで いいんじゃん。 13年3月17日日曜日
- 18. デモサイト: http://bit.ly/wbosaka-demo というわけでサンプルのプラグインを 作ってきました。 13年3月17日日曜日
- 19. デモサイト: http://bit.ly/wbosaka-demo ウインドウのサイズに合わせて伸び縮みする背景画像 さらにスライドにもなってるんだぜー 13年3月17日日曜日
- 20. デモサイト: http://bit.ly/wbosaka-demo ✓ このプラグインでやってることは概ね以下の2つです。 ‣ ログイン画面にカスタムCSSとカスタムJSを適用。 ‣ サインアップ時などにユーザーに送信されるメールのカスタマイ ズ 13年3月17日日曜日
- 21. デモサイト: http://bit.ly/wbosaka-demo - login-costomizer - login-customizer.php // プラグイン本体 - cover-photos // スライド画像 - includes - pluggable.php // メールのカスタマイズ - js // JavaScript - css // CSS 13年3月17日日曜日
- 22. デモサイト: http://bit.ly/wbosaka-demo 3つのフックを使ってます！ ✓ login_enqueue_scripts ログイン画面にCSSとJavaScriptを適用 ✓ login_footer スライド用の画像の配列のJavaScriptを出力 ✓ registration_errors adminとかrootとか、登録してほしくないユ ーザー名を拒否 13年3月17日日曜日
- 23. デモサイト: http://bit.ly/wbosaka-demo ✓ あと、includes/pluggable.phpでユーザーに送信される メールの本文をカスタマイズしてます。 13年3月17日日曜日
- 24. デモサイト: http://bit.ly/wbosaka-demo 実際に運用する際には画像とかCSSとかは ケースバイケースで変わりますよね。 13年3月17日日曜日
- 25. デモサイト: http://bit.ly/wbosaka-demo おや？ 13年3月17日日曜日
- 26. デモサイト: http://bit.ly/wbosaka-demo フィルターフックを 仕込んどきました！ 13年3月17日日曜日
- 27. デモサイト: http://bit.ly/wbosaka-demo ✓ たとえば文章とか画像のパスとかにはフィル ターフックを仕込んでおくと、テーマ側で後か ら変更できるので、実装に集中できますよ！ ‣ 数字とか ‣ パスとか ‣ 文章とか 13年3月17日日曜日
- 28. デモサイト: http://bit.ly/wbosaka-demo テーマのfunctions.phpによるカスタマイズ例 http://bit.ly/13YT5Ls 13年3月17日日曜日
- 29.
- 30. デモサイト: http://bit.ly/wbosaka-demo ここまでのまとめ 13年3月17日日曜日
- 31. デモサイト: http://bit.ly/wbosaka-demo ✓ 細かいことはフィルターフックでお茶を濁して 実装に集中！ ✓ デザイナーさんは apply_filters っていうのを 見つけたらしめしめと思うべし！ ✓ 実は公式ディレクトリ上のプラグインでも隠れ フックはいっぱいあります！ 13年3月17日日曜日
- 32. デモサイト: http://bit.ly/wbosaka-demo ✓ デザイナーのみなさんフィルターフックを覚え たらカスタマイズの幅が広がります！ 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’; } 正規表現っていうのを使って置換もできますけど、 それはプログラマーに頼んじゃおう！ 13年3月17日日曜日
- 33. デモサイト: http://bit.ly/wbosaka-demo ✓ そして何よりも！ フックを適切に仕込めば、そのプラグインを どこでも流用できるじゃん！ オレオレプラグインをいくつか用意すれば、 レゴのように組み合わせていろいろ作れそうですよね！ 13年3月17日日曜日
- 34. デモサイト: http://bit.ly/wbosaka-demo WordPressのRewrite APIを マスターして パーマリンクの魔術師になろう！ 13年3月17日日曜日
- 35. デモサイト: http://bit.ly/wbosaka-demo 意外と簡単です。 add_rewrite_endpoint( demo , EP_ROOT); 13年3月17日日曜日
- 36. デモサイト: http://bit.ly/wbosaka-demo ただしコツがある！ 13年3月17日日曜日
- 37. デモサイト: http://bit.ly/wbosaka-demo add_rewrite_endpoint( demo , EP_ROOT); で、http://example.com/demo/ でアクセスできます！ 13年3月17日日曜日
- 38. デモサイト: http://bit.ly/wbosaka-demo パーマリンク設定はキャッシュされてるので キャッシュを初期化する必要があります。 flush_rewrite_rules(); 13年3月17日日曜日
- 39. デモサイト: http://bit.ly/wbosaka-demo そして超大事なこと！ 13年3月17日日曜日
- 40. デモサイト: http://bit.ly/wbosaka-demo キャッシュのフラッシュは プラグインを有効化した時に1度だけ行う！ register_activation_hook() はそのためのフックです！ 13年3月17日日曜日
- 41. デモサイト: http://bit.ly/wbosaka-demo もうひとつ 13年3月17日日曜日
- 42. デモサイト: http://bit.ly/wbosaka-demo register_deactivation_hook() を使って プラグインを無効化した時にも初期化！ 忘れると意味不明なことになります。。。 13年3月17日日曜日
- 43. デモサイト: http://bit.ly/wbosaka-demo 残りは3つのフックで 13年3月17日日曜日
- 44. デモサイト: http://bit.ly/wbosaka-demo この3つのフックにアクションを追加する 13年3月17日日曜日
- 45. デモサイト: http://bit.ly/wbosaka-demo init フックで、もう一回、 add_rewrite_endpoint() を実行！ ただし自分を無効化するときには、なにもしない！ 13年3月17日日曜日
- 46. デモサイト: http://bit.ly/wbosaka-demo query_vars フックで demo を追加してあげる 13年3月17日日曜日
- 47. デモサイト: http://bit.ly/wbosaka-demo コンテンツを出力 template_redirect フックでコンテンツを出力 13年3月17日日曜日
- 48. デモサイト: http://bit.ly/wbosaka-demo この条件分岐で true ならそのURLでアクセスが あったということ 13年3月17日日曜日
- 49. デモサイト: http://bit.ly/wbosaka-demo http://example.com/demo/hogehoge みたいな不要なURLでは、404を返す。 13年3月17日日曜日
- 50. デモサイト: http://bit.ly/wbosaka-demo コンテンツを出力するところ exit で止めちゃうとこがミソ 13年3月17日日曜日
- 51.
- 52. デモサイト: http://bit.ly/wbosaka-demo つまりWordPressのテンプレート タグがそのまんま使えちゃうんです！ 13年3月17日日曜日
- 53. デモサイト: http://bit.ly/wbosaka-demo ここまでのまとめ 13年3月17日日曜日
- 54. デモサイト: http://bit.ly/wbosaka-demo ✓ add_rewrite_endpoint() という関数で、 WordPressから独立したウェブアプリが作れ ます。 ✓ でもWordPressの機能はそのまま使えます！ 13年3月17日日曜日
- 55. デモサイト: http://bit.ly/wbosaka-demo ✓ ってことはですね。サービスサイトとサービ スそのものをまったく別々に開発出来ます！ ✓ デプロイは、管理画面からアップロードする だけ！ 13年3月17日日曜日
- 56. デモサイト: http://bit.ly/wbosaka-demo サービスを作っちゃおう！ 13年3月17日日曜日
- 57. デモサイト: http://bit.ly/wbosaka-demo つくったサービス オレオレEvernoteみたいなサービ スです。 13年3月17日日曜日
- 58. デモサイト: http://bit.ly/wbosaka-demo 自慢じゃないですが、 1日で作りました。 (自慢ですけど) 13年3月17日日曜日
- 59. デモサイト: http://bit.ly/wbosaka-demo カスタム投稿タイプ使ってます！ 13年3月17日日曜日
- 60. デモサイト: http://bit.ly/wbosaka-demo コンテンツの保存はこれだけ。 13年3月17日日曜日
- 61. デモサイト: http://bit.ly/wbosaka-demo コンテンツの出力はこれだけ。 htmlはエスケープした上で the_content っていうフィルターフックを通してます！ 13年3月17日日曜日
- 62. デモサイト: http://bit.ly/wbosaka-demo なんで the_content フィルターを 通したんだ？ 13年3月17日日曜日
- 63. デモサイト: http://bit.ly/wbosaka-demo ✓ oEmbedやショートコ ードが使えるから超簡 単に外部サービスのコ ンテンツが表示されち ゃうからです！ ✓ 一方でユーザーが入力 したHTMLはエスケー プしてます！ 13年3月17日日曜日
- 64. デモサイト: http://bit.ly/wbosaka-demo まとめ 13年3月17日日曜日
- 65. デモサイト: http://bit.ly/wbosaka-demo ✓ WordPressを使うと他にもメリットはいっぱ い！ ‣ 多言語化が簡単！ ‣ くわしい人がいっぱい！ ‣ セキュリティはWordPressにおまかせ！ 13年3月17日日曜日
- 66.