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.
信頼性が高くハイパフォーマンスな              テーマ開発テクニックでライバルに差をつけろ!         速くてちゃんと動くテーマの作り方!                      2012年11月3日            ...
自己紹介12年11月5日月曜日
✓ 和歌山県の串本町という田舎でフリーランス                してます。              ✓ デジタルキューブという会社のバックエンドエ                ンジニアとしても仕事してます。           ...
設計やバックエンドの開発を行いました。12年11月5日月曜日
本日のAWSハンズオンで!12年11月5日月曜日
WordPressのプラグイン作ってます。12年11月5日月曜日
twitter: @miya000112年11月5日月曜日
ブログ: http://firegoby.jp/12年11月5日月曜日
✓ WordCamp Kobe 2011              ✓ WordCamp Tokyo 2011              ✓ PHPカンファレンス関西 2012              ✓ WordBeach Nagoya 2...
きょうの内容12年11月5日月曜日
✓ テンプレートタグの互換性の話       ✓ これは簡単!Theme Checkによるテーマのテスト       ✓ Theme Unit TestでCSSの不具合を効率良くもぐら         たたき!       ✓ 高速に表示される...
テンプレートタグの                 互換性のお話12年11月5日月曜日
ご存知ですか?         これから紹介するテンプレートタグは               非推奨です。12年11月5日月曜日
bloginfo( url )12年11月5日月曜日
☓              bloginfo( url )12年11月5日月曜日
☓              bloginfo( url )               home_url()              を使いましょう。12年11月5日月曜日
bloginfo( stylesheet_uri )12年11月5日月曜日
☓              bloginfo( stylesheet_uri )12年11月5日月曜日
☓              bloginfo( stylesheet_uri )         get_stylesheet_uri()            を使いましょう。12年11月5日月曜日
add_custom_background()12年11月5日月曜日
☓              add_custom_background()12年11月5日月曜日
☓              add_custom_background()              add_theme_support($feature, $args)                  を使いましょう。12年11月5日月曜日
みんなが使ってるはずのプラグインが          期待通りに動かないことありますよ                 ね?12年11月5日月曜日
多くの場合、              古いテンプレートタグを              使っているのが原因です。12年11月5日月曜日
最新のテンプレートタグを              Codex等で追いかけるのは大変。12年11月5日月曜日
実は簡単にチェックする方法が              ちゃんと用意されてるんです。12年11月5日月曜日
Theme Checkを使えば                テンプレートタグを               覚えなくてもオッケー!12年11月5日月曜日
Theme Check について12年11月5日月曜日
✓ WordPress テーマが Codex(WordPressの                決まり)に準拠してるかどうかをチェックす                るためのプラグイン              ✓ WordPress コア...
✓ 公式ディレクトリに登録されるテーマは、こ                のテストに合格することが義務付けられてい                ます!12年11月5日月曜日
theme-checkでググってね!12年11月5日月曜日
使い方は超簡単です。12年11月5日月曜日
✓ まず、wp-config.phpを修正してデバッグモー                ドに。              ✓ 本番環境でこのまま放置しておくことはやめ                たほうがいいのでご注意!           ...
✓ プラグインをインストール。              ✓ 管理画面の「外観」-「Theme Check」へ移                動              ✓ テストしたいテーマを選んで「テスト実行!」            ...
なんかいっぱいでてきたー!12年11月5日月曜日
✓ エラーが出たら、グーグル先生に聞いちゃいま                しょう!              ✓ 対処方法がわかればひとつずつモグラたた                き!              ✓ 最悪フォーラムに聞い...
theme-checkの注意点12年11月5日月曜日
✓ 子テーマを使ってる場合は、親テーマもチェ                ックしたほうがいいです。              ✓ 親テーマに警告が出た場合は、親テーマを書                き換えずに子テーマで吸収する感じで。  ...
✓ 必ずしもすべての警告に問題があるわけでは                ないです。                passed the tests は合格って意味です。                      RECOMMENDEDは推奨...
✓ このテストは頑張ってもぐらたたきをすれ                ば、テーマに必要な要件をひととおり知るこ                とができるので、とても勉強になります。              ✓ 本を何時間もかけて読むよりは...
テーマ   ユニットテスト12年11月5日月曜日
このテストもCodexで定められた                由緒正しいテストです。          http://codex.wordpress.org/Theme_Unit_Test12年11月5日月曜日
このテストの目的はCSSの              動作確認をすることです!12年11月5日月曜日
テストの手順12年11月5日月曜日
✓ http://megumi-manuals.com/ にアクセス。              ✓ 右側のメニューの「インポートテストデータ」                をダウンロード。12年11月5日月曜日
✓ インポートデータをダウンロードしたら解凍              ✓ 管理画面の「ツール」ー「インポート」の中                にある「WordPress」を選択して、解凍し                た.xmlをインポ...
✓ インポートが完了すると、約20ページの固                定ページと約30ページの投稿がインポート                されます。              ✓ あとは、それらを順番に確認してモグラたた       ...
12年11月5日月曜日
12年11月5日月曜日
12年11月5日月曜日
12年11月5日月曜日
ただし残念なお知らせ12年11月5日月曜日
現在インポートデータはリニューアル中の    ため画像のリンクが切れてしまいます...。    たぶんHTML5に対応するんじゃないかと    個人的に予想しております。12年11月5日月曜日
✓ このテストを使用すると、お客さんにテーマのレビュ        ーをするときも印象がいいよ!      ✓ 文字アタリ文字アタリ文字アタリ文字アタリ文字アタ        リ文字アタリ文字アタリ文字アタリ文字アタリ よりも        ず...
高速に表示される   テーマの作り方12年11月5日月曜日
CSSはJavaScriptよりも               先に読み込みましょう。12年11月5日月曜日
✓ ブラウザはCSSのダウンロードが完了するま                で何も表示しません。              ✓ でもJavaScriptはダウンロードが完了しなく                ても表示を開始します。12年11...
ファイルの数をなるべく               減らしましょう!12年11月5日月曜日
✓ CSSはなるべく1つのファイルにまとめましょう!      ✓ @import はなるべく避けましょう!      ✓ 小さな画像はCSSスプライトでまとめましょう!12年11月5日月曜日
wp_enqueue_style()              wp_enqueue_script()               を使いこなしましょう!12年11月5日月曜日
✓ これらを使うとキャッシュ系のプラグインや                CDNのサービスなどと相性がとても良くなり                ます。12年11月5日月曜日
そうそう                          CDNといえば!              ja.wpbooster.net12年11月5日月曜日
よくある誤解12年11月5日月曜日
get_stylesheet_uri()                     とか          bloginfo( stylesheet_uri )         つかうよりも直書きしちゃったほうが               早く...
✓ これらの値はWordPressが呼び出された時点                でまとめて取得されていますので、この記述                を省いてもデータベースへのアクセスは減りま                せん。    ...
そうそう                          CDNといえば!              ja.wpbooster.net12年11月5日月曜日
ありがとうございました!12年11月5日月曜日
Upcoming SlideShare
Loading in …5
×

信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!

4,406 views

Published on

2012/11/3に開催されたWordCamp Osakaのセッションで使用した資料です。

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!

  1. 1. 信頼性が高くハイパフォーマンスな テーマ開発テクニックでライバルに差をつけろ! 速くてちゃんと動くテーマの作り方! 2012年11月3日 WordCamp Osaka 2012 at 天満研修センター 宮内 隆行12年11月5日月曜日
  2. 2. 自己紹介12年11月5日月曜日
  3. 3. ✓ 和歌山県の串本町という田舎でフリーランス してます。 ✓ デジタルキューブという会社のバックエンドエ ンジニアとしても仕事してます。 デジタルキューブは、Amazon Web Serviceの 公認コンサルタントです。12年11月5日月曜日
  4. 4. 設計やバックエンドの開発を行いました。12年11月5日月曜日
  5. 5. 本日のAWSハンズオンで!12年11月5日月曜日
  6. 6. WordPressのプラグイン作ってます。12年11月5日月曜日
  7. 7. twitter: @miya000112年11月5日月曜日
  8. 8. ブログ: http://firegoby.jp/12年11月5日月曜日
  9. 9. ✓ WordCamp Kobe 2011 ✓ WordCamp Tokyo 2011 ✓ PHPカンファレンス関西 2012 ✓ WordBeach Nagoya 2012 ✓ WordCamp Tokyo 2012 WordCampでは、 今回で4回連続でセッションさせて頂きます。 ありがとうございます。12年11月5日月曜日
  10. 10. きょうの内容12年11月5日月曜日
  11. 11. ✓ テンプレートタグの互換性の話 ✓ これは簡単!Theme Checkによるテーマのテスト ✓ Theme Unit TestでCSSの不具合を効率良くもぐら たたき! ✓ 高速に表示されるテーマを開発するためのポイント12年11月5日月曜日
  12. 12. テンプレートタグの 互換性のお話12年11月5日月曜日
  13. 13. ご存知ですか? これから紹介するテンプレートタグは 非推奨です。12年11月5日月曜日
  14. 14. bloginfo( url )12年11月5日月曜日
  15. 15. ☓ bloginfo( url )12年11月5日月曜日
  16. 16. ☓ bloginfo( url ) home_url() を使いましょう。12年11月5日月曜日
  17. 17. bloginfo( stylesheet_uri )12年11月5日月曜日
  18. 18. ☓ bloginfo( stylesheet_uri )12年11月5日月曜日
  19. 19. ☓ bloginfo( stylesheet_uri ) get_stylesheet_uri() を使いましょう。12年11月5日月曜日
  20. 20. add_custom_background()12年11月5日月曜日
  21. 21. ☓ add_custom_background()12年11月5日月曜日
  22. 22. ☓ add_custom_background() add_theme_support($feature, $args) を使いましょう。12年11月5日月曜日
  23. 23. みんなが使ってるはずのプラグインが 期待通りに動かないことありますよ ね?12年11月5日月曜日
  24. 24. 多くの場合、 古いテンプレートタグを 使っているのが原因です。12年11月5日月曜日
  25. 25. 最新のテンプレートタグを Codex等で追いかけるのは大変。12年11月5日月曜日
  26. 26. 実は簡単にチェックする方法が ちゃんと用意されてるんです。12年11月5日月曜日
  27. 27. Theme Checkを使えば テンプレートタグを 覚えなくてもオッケー!12年11月5日月曜日
  28. 28. Theme Check について12年11月5日月曜日
  29. 29. ✓ WordPress テーマが Codex(WordPressの 決まり)に準拠してるかどうかをチェックす るためのプラグイン ✓ WordPress コアとあわせて最新バージョンが リリースされています。 ✓ 開発者は本家のエライ人たち12年11月5日月曜日
  30. 30. ✓ 公式ディレクトリに登録されるテーマは、こ のテストに合格することが義務付けられてい ます!12年11月5日月曜日
  31. 31. theme-checkでググってね!12年11月5日月曜日
  32. 32. 使い方は超簡単です。12年11月5日月曜日
  33. 33. ✓ まず、wp-config.phpを修正してデバッグモー ドに。 ✓ 本番環境でこのまま放置しておくことはやめ たほうがいいのでご注意! define( WP_DEBUG , true);12年11月5日月曜日
  34. 34. ✓ プラグインをインストール。 ✓ 管理画面の「外観」-「Theme Check」へ移 動 ✓ テストしたいテーマを選んで「テスト実行!」 をクリック!12年11月5日月曜日
  35. 35. なんかいっぱいでてきたー!12年11月5日月曜日
  36. 36. ✓ エラーが出たら、グーグル先生に聞いちゃいま しょう! ✓ 対処方法がわかればひとつずつモグラたた き! ✓ 最悪フォーラムに聞いちゃえ!12年11月5日月曜日
  37. 37. theme-checkの注意点12年11月5日月曜日
  38. 38. ✓ 子テーマを使ってる場合は、親テーマもチェ ックしたほうがいいです。 ✓ 親テーマに警告が出た場合は、親テーマを書 き換えずに子テーマで吸収する感じで。 (これは逆に上級なテクニックが必要)12年11月5日月曜日
  39. 39. ✓ 必ずしもすべての警告に問題があるわけでは ないです。 passed the tests は合格って意味です。 RECOMMENDEDは推奨って意味。 WordPressコアの旧バージョンとの互換性保持の ために古いタグをあえて使ってることも多い。12年11月5日月曜日
  40. 40. ✓ このテストは頑張ってもぐらたたきをすれ ば、テーマに必要な要件をひととおり知るこ とができるので、とても勉強になります。 ✓ 本を何時間もかけて読むよりはるかに簡単! しかも常に最新情報!12年11月5日月曜日
  41. 41. テーマ ユニットテスト12年11月5日月曜日
  42. 42. このテストもCodexで定められた 由緒正しいテストです。 http://codex.wordpress.org/Theme_Unit_Test12年11月5日月曜日
  43. 43. このテストの目的はCSSの 動作確認をすることです!12年11月5日月曜日
  44. 44. テストの手順12年11月5日月曜日
  45. 45. ✓ http://megumi-manuals.com/ にアクセス。 ✓ 右側のメニューの「インポートテストデータ」 をダウンロード。12年11月5日月曜日
  46. 46. ✓ インポートデータをダウンロードしたら解凍 ✓ 管理画面の「ツール」ー「インポート」の中 にある「WordPress」を選択して、解凍し た.xmlをインポート!12年11月5日月曜日
  47. 47. ✓ インポートが完了すると、約20ページの固 定ページと約30ページの投稿がインポート されます。 ✓ あとは、それらを順番に確認してモグラたた き!12年11月5日月曜日
  48. 48. 12年11月5日月曜日
  49. 49. 12年11月5日月曜日
  50. 50. 12年11月5日月曜日
  51. 51. 12年11月5日月曜日
  52. 52. ただし残念なお知らせ12年11月5日月曜日
  53. 53. 現在インポートデータはリニューアル中の ため画像のリンクが切れてしまいます...。 たぶんHTML5に対応するんじゃないかと 個人的に予想しております。12年11月5日月曜日
  54. 54. ✓ このテストを使用すると、お客さんにテーマのレビュ ーをするときも印象がいいよ! ✓ 文字アタリ文字アタリ文字アタリ文字アタリ文字アタ リ文字アタリ文字アタリ文字アタリ文字アタリ よりも ずっと見栄えがいいですよね。 ✓ CSSの作業も順番にモグラたたきをするだけで良くな るので、効率が良くなります!12年11月5日月曜日
  55. 55. 高速に表示される テーマの作り方12年11月5日月曜日
  56. 56. CSSはJavaScriptよりも 先に読み込みましょう。12年11月5日月曜日
  57. 57. ✓ ブラウザはCSSのダウンロードが完了するま で何も表示しません。 ✓ でもJavaScriptはダウンロードが完了しなく ても表示を開始します。12年11月5日月曜日
  58. 58. ファイルの数をなるべく 減らしましょう!12年11月5日月曜日
  59. 59. ✓ CSSはなるべく1つのファイルにまとめましょう! ✓ @import はなるべく避けましょう! ✓ 小さな画像はCSSスプライトでまとめましょう!12年11月5日月曜日
  60. 60. wp_enqueue_style() wp_enqueue_script() を使いこなしましょう!12年11月5日月曜日
  61. 61. ✓ これらを使うとキャッシュ系のプラグインや CDNのサービスなどと相性がとても良くなり ます。12年11月5日月曜日
  62. 62. そうそう CDNといえば! ja.wpbooster.net12年11月5日月曜日
  63. 63. よくある誤解12年11月5日月曜日
  64. 64. get_stylesheet_uri() とか bloginfo( stylesheet_uri ) つかうよりも直書きしちゃったほうが 早くなるんじゃね?12年11月5日月曜日
  65. 65. ✓ これらの値はWordPressが呼び出された時点 でまとめて取得されていますので、この記述 を省いてもデータベースへのアクセスは減りま せん。 ✓ 一部のCDNとかキャッシュ系プラグインはこ れらを使ってることが前提で設計されてるの で、いろいろと問題が生じます。 ✓ 期待通りに動かないプラグインとか出てきま すよ。12年11月5日月曜日
  66. 66. そうそう CDNといえば! ja.wpbooster.net12年11月5日月曜日
  67. 67. ありがとうございました!12年11月5日月曜日

×