Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
アプリケーションプラットホームとしての           WordPress                2013/03/16              WordBench Osaka              Takayuki Miyau...
自己紹介13年3月17日日曜日
✓ 和歌山県の串本町っていうすごい田舎にすんで                ます。13年3月17日日曜日
✓ フリーで仕事してますが、株式会社デジタルキューブ        のバックエンドエンジニアとしても仕事してます。              デジタルキューブは、Amazon Web Serviceの                   公認コ...
プラグイン作ってます!        ✓ WP Total Hacks           まもなくスロバキア語                                      に対応        ✓ TinyMCE Templat...
開発にたずさわりました!13年3月17日日曜日
twitter: @miya000113年3月17日日曜日
blog: firegoby.jp13年3月17日日曜日
今日のお題13年3月17日日曜日
WordPressで作れるのはブログや                  企業サイドだけじゃない!              アプリケーションプラットホーム                としてのWordPress!13年3月17日日曜日
✓ 小さなプラグインを組み合わせてレゴのように                サービスを作ろう!              ✓ プラグインとテーマを上手に分離してプログラ                マとデザイナーの分業をうまくやろう!   ...
✓ ただし、とてもプラグラマーチックな話なの                でかなり省略します。              ✓ 詳しく知りたい方は、ソースを見てください。13年3月17日日曜日
サンプルプラグインのダウンロード               http://bit.ly/wbosaka13年3月17日日曜日
サンプルサイト              http://bit.ly/wbosaka-demo13年3月17日日曜日
ログイン画面を              バリバリにカスタマイズする13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              たとえばメンバー制の              サービスを作る場合13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ✓ まずユーザー登録の機能が必要だね。                => WordPressに最初からあるじゃん。              ✓ ロ...
デモサイト: http://bit.ly/wbosaka-demo          というわけでサンプルのプラグインを              作ってきました。13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo       ウインドウのサイズに合わせて伸び縮みする背景画像           さらにスライドにもなってるんだぜー13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo    ✓ このプラグインでやってることは概ね以下の2つです。        ‣ ログイン画面にカスタムCSSとカスタムJSを適用。        ‣ サインアップ時などにユーザ...
デモサイト: http://bit.ly/wbosaka-demo              - login-costomizer                - login-customizer.php	 //	 プラグイン本体      ...
デモサイト: http://bit.ly/wbosaka-demo                3つのフックを使ってます!              ✓ login_enqueue_scripts                ログイン画面に...
デモサイト: http://bit.ly/wbosaka-demo   ✓ あと、includes/pluggable.phpでユーザーに送信される     メールの本文をカスタマイズしてます。13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              実際に運用する際には画像とかCSSとかは               ケースバイケースで変わりますよね。13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              おや?13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              フィルターフックを              仕込んどきました!13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ✓ たとえば文章とか画像のパスとかにはフィル                ターフックを仕込んでおくと、テーマ側で後か                ...
デモサイト: http://bit.ly/wbosaka-demo              テーマのfunctions.phpによるカスタマイズ例                    http://bit.ly/13YT5Ls13年3月17...
デモサイト: http://bit.ly/wbosaka-demo13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ここまでのまとめ13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ✓ 細かいことはフィルターフックでお茶を濁して                実装に集中!              ✓ デザイナーさんは apply...
デモサイト: http://bit.ly/wbosaka-demo              ✓ デザイナーのみなさんフィルターフックを覚え                たらカスタマイズの幅が広がります! apply_filters(‘my_...
デモサイト: http://bit.ly/wbosaka-demo              ✓ そして何よりも!                フックを適切に仕込めば、そのプラグインを                どこでも流用できるじゃん!...
デモサイト: http://bit.ly/wbosaka-demo              WordPressのRewrite APIを                    マスターして              パーマリンクの魔術師になろ...
デモサイト: http://bit.ly/wbosaka-demo                       意外と簡単です。              add_rewrite_endpoint( demo , EP_ROOT);13年3月1...
デモサイト: http://bit.ly/wbosaka-demo              ただしコツがある!13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo         add_rewrite_endpoint( demo , EP_ROOT);      で、http://example.com/demo/ でアクセスできます...
デモサイト: http://bit.ly/wbosaka-demo              パーマリンク設定はキャッシュされてるので               キャッシュを初期化する必要があります。                   flu...
デモサイト: http://bit.ly/wbosaka-demo              そして超大事なこと!13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo                   キャッシュのフラッシュは              プラグインを有効化した時に1度だけ行う!                  regist...
デモサイト: http://bit.ly/wbosaka-demo              もうひとつ13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              register_deactivation_hook() を使って               プラグインを無効化した時にも初期化!         ...
デモサイト: http://bit.ly/wbosaka-demo              残りは3つのフックで13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              この3つのフックにアクションを追加する13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo                  init フックで、もう一回、              add_rewrite_endpoint() を実行!         ただし自分を...
デモサイト: http://bit.ly/wbosaka-demo              query_vars フックで demo を追加してあげる13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo                                コンテンツを出力              template_redirect フックでコンテンツを出力13年3月...
デモサイト: http://bit.ly/wbosaka-demo              この条件分岐で true ならそのURLでアクセスが                     あったということ13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              http://example.com/demo/hogehoge              みたいな不要なURLでは、404を返す。13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              コンテンツを出力するところ              exit で止めちゃうとこがミソ13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo          つまりWordPressのテンプレート          タグがそのまんま使えちゃうんです!13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ここまでのまとめ13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ✓ add_rewrite_endpoint() という関数で、                WordPressから独立したウェブアプリが作れ   ...
デモサイト: http://bit.ly/wbosaka-demo              ✓ ってことはですね。サービスサイトとサービ                スそのものをまったく別々に開発出来ます!              ✓ デ...
デモサイト: http://bit.ly/wbosaka-demo              サービスを作っちゃおう!13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo                  つくったサービス              オレオレEvernoteみたいなサービ                     スです。13年3月...
デモサイト: http://bit.ly/wbosaka-demo              自慢じゃないですが、               1日で作りました。                (自慢ですけど)13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              カスタム投稿タイプ使ってます!13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              コンテンツの保存はこれだけ。13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              コンテンツの出力はこれだけ。                htmlはエスケープした上で    the_content っていうフィルターフックを通し...
デモサイト: http://bit.ly/wbosaka-demo              なんで the_content フィルターを                     通したんだ?13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ✓ oEmbedやショートコ                ードが使えるから超簡                単に外部サービスのコ         ...
デモサイト: http://bit.ly/wbosaka-demo              まとめ13年3月17日日曜日
デモサイト: http://bit.ly/wbosaka-demo              ✓ WordPressを使うと他にもメリットはいっぱ                い!               ‣ 多言語化が簡単!      ...
ありがとうございました!13年3月17日日曜日
Upcoming SlideShare
Loading in …5
×

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

7,286 views

Published on

2013/03/16 のWordBench

Published in: Technology

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

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

×