信頼性が高くハイパフォーマンスな
テーマ開発テクニックでライバルに差をつけろ！
速くてちゃんと動くテーマの作り方！
2012年11月3日
WordCamp Osaka 2012
at 天満研修センター
宮内 隆行
12年11月5日月曜日

自己紹介
12年11月5日月曜日

✓ 和歌山県の串本町という田舎でフリーランス
してます。
✓ デジタルキューブという会社のバックエンドエ
ンジニアとしても仕事してます。
デジタルキューブは、Amazon Web Serviceの
公認コンサルタントです。
12年11月5日月曜日

設計やバックエンドの開発を行いました。
12年11月5日月曜日

本日のAWSハンズオンで！
12年11月5日月曜日

WordPressのプラグイン作ってます。
12年11月5日月曜日

twitter: @miya0001
12年11月5日月曜日

ブログ： http://firegoby.jp/
12年11月5日月曜日

✓ WordCamp Kobe 2011
✓ WordCamp Tokyo 2011
✓ PHPカンファレンス関西 2012
✓ WordBeach Nagoya 2012
✓ WordCamp Tokyo 2012
WordCampでは、
今回で4回連続でセッションさせて頂きます。
ありがとうございます。
12年11月5日月曜日

きょうの内容
12年11月5日月曜日

✓ テンプレートタグの互換性の話
✓ これは簡単！Theme Checkによるテーマのテスト
✓ Theme Unit TestでCSSの不具合を効率良くもぐら
たたき！
✓ 高速に表示されるテーマを開発するためのポイント
12年11月5日月曜日

テンプレートタグの
互換性のお話
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日月曜日

✓ 公式ディレクトリに登録されるテーマは、こ
のテストに合格することが義務付けられてい
ます！
12年11月5日月曜日

theme-checkでググってね！
12年11月5日月曜日

使い方は超簡単です。
12年11月5日月曜日

✓ まず、wp-config.phpを修正してデバッグモー
ドに。
✓ 本番環境でこのまま放置しておくことはやめ
たほうがいいのでご注意！
define( WP_DEBUG , true);
12年11月5日月曜日

✓ プラグインをインストール。
✓ 管理画面の「外観」-「Theme Check」へ移
動
✓ テストしたいテーマを選んで「テスト実行!」
をクリック！
12年11月5日月曜日

なんかいっぱいでてきたー！
12年11月5日月曜日

✓ エラーが出たら、グーグル先生に聞いちゃいま
しょう！
✓ 対処方法がわかればひとつずつモグラたた
き！
✓ 最悪フォーラムに聞いちゃえ！
12年11月5日月曜日

theme-checkの注意点
12年11月5日月曜日

✓ 子テーマを使ってる場合は、親テーマもチェ
ックしたほうがいいです。
✓ 親テーマに警告が出た場合は、親テーマを書
き換えずに子テーマで吸収する感じで。
（これは逆に上級なテクニックが必要）
12年11月5日月曜日

✓ 必ずしもすべての警告に問題があるわけでは
ないです。
passed the tests は合格って意味です。
RECOMMENDEDは推奨って意味。
WordPressコアの旧バージョンとの互換性保持の
ために古いタグをあえて使ってることも多い。
12年11月5日月曜日

✓ このテストは頑張ってもぐらたたきをすれ
ば、テーマに必要な要件をひととおり知るこ
とができるので、とても勉強になります。
✓ 本を何時間もかけて読むよりはるかに簡単！
しかも常に最新情報！
12年11月5日月曜日

テーマ
ユニットテスト
12年11月5日月曜日

このテストもCodexで定められた
由緒正しいテストです。
http://codex.wordpress.org/Theme_Unit_Test
12年11月5日月曜日

このテストの目的はCSSの
動作確認をすることです！
12年11月5日月曜日

テストの手順
12年11月5日月曜日

✓ http://megumi-manuals.com/ にアクセス。
✓ 右側のメニューの「インポートテストデータ」
をダウンロード。
12年11月5日月曜日

✓ インポートデータをダウンロードしたら解凍
✓ 管理画面の「ツール」ー「インポート」の中
にある「WordPress」を選択して、解凍し
た.xmlをインポート！
12年11月5日月曜日

✓ インポートが完了すると、約２０ページの固
定ページと約３０ページの投稿がインポート
されます。
✓ あとは、それらを順番に確認してモグラたた
き！
12年11月5日月曜日

12年11月5日月曜日

12年11月5日月曜日

12年11月5日月曜日

12年11月5日月曜日

ただし残念なお知らせ
12年11月5日月曜日

現在インポートデータはリニューアル中の
ため画像のリンクが切れてしまいます...。
たぶんHTML5に対応するんじゃないかと
個人的に予想しております。
12年11月5日月曜日

✓ このテストを使用すると、お客さんにテーマのレビュ
ーをするときも印象がいいよ！
✓ 文字アタリ文字アタリ文字アタリ文字アタリ文字アタ
リ文字アタリ文字アタリ文字アタリ文字アタリ よりも
ずっと見栄えがいいですよね。
✓ CSSの作業も順番にモグラたたきをするだけで良くな
るので、効率が良くなります！
12年11月5日月曜日

高速に表示される
テーマの作り方
12年11月5日月曜日

CSSはJavaScriptよりも
先に読み込みましょう。
12年11月5日月曜日

✓ ブラウザはCSSのダウンロードが完了するま
で何も表示しません。
✓ でもJavaScriptはダウンロードが完了しなく
ても表示を開始します。
12年11月5日月曜日

ファイルの数をなるべく
減らしましょう！
12年11月5日月曜日

✓ CSSはなるべく１つのファイルにまとめましょう！
✓ @import はなるべく避けましょう！
✓ 小さな画像はCSSスプライトでまとめましょう！
12年11月5日月曜日

wp_enqueue_style()
wp_enqueue_script()
を使いこなしましょう！
12年11月5日月曜日

✓ これらを使うとキャッシュ系のプラグインや
CDNのサービスなどと相性がとても良くなり
ます。
12年11月5日月曜日

そうそう
CDNといえば！
ja.wpbooster.net
12年11月5日月曜日

よくある誤解
12年11月5日月曜日

get_stylesheet_uri()
とか
bloginfo( stylesheet_uri )
つかうよりも直書きしちゃったほうが
早くなるんじゃね？
12年11月5日月曜日

✓ これらの値はWordPressが呼び出された時点
でまとめて取得されていますので、この記述
を省いてもデータベースへのアクセスは減りま
せん。
✓ 一部のCDNとかキャッシュ系プラグインはこ
れらを使ってることが前提で設計されてるの
で、いろいろと問題が生じます。
✓ 期待通りに動かないプラグインとか出てきま
すよ。
12年11月5日月曜日

そうそう
CDNといえば！
ja.wpbooster.net
12年11月5日月曜日

ありがとうございました！
12年11月5日月曜日