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

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

2012年11月3日WordCamp Osaka 2012at 天満研修センター

宮内隆行

速くてちゃんと動くテーマの作り方！

12年11月5日月曜日

自己紹介


✓ 和歌山県の串本町という田舎でフリーランスしてます。

✓ デジタルキューブという会社のバックエンドエンジニアとしても仕事してます。

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


設計やバックエンドの開発を行いました。


本日のAWSハンズオンで！


WordPressのプラグイン作ってます。


twitter: @miya0001


ブログ： http://firegoby.jp/


✓ WordCamp Kobe 2011

✓ WordCamp Tokyo 2011

✓ PHPカンファレンス関西 2012

✓ WordBeach Nagoya 2012

✓ WordCamp Tokyo 2012

WordCampでは、今回で4回連続でセッションさせて頂きます。

ありがとうございます。


きょうの内容


✓ テンプレートタグの互換性の話

✓ これは簡単！Theme Checkによるテーマのテスト

✓ Theme Unit TestでCSSの不具合を効率良くもぐらたたき！

✓ 高速に表示されるテーマを開発するためのポイント


テンプレートタグの互換性のお話


ご存知ですか？

これから紹介するテンプレートタグは非推奨です。


bloginfo(‘url’)


bloginfo(‘url’)☓


bloginfo(‘url’)☓home_url()を使いましょう。


bloginfo(‘stylesheet_uri’)


bloginfo(‘stylesheet_uri’)☓


bloginfo(‘stylesheet_uri’)☓get_stylesheet_uri() を使いましょう。


add_custom_background()


add_custom_background()☓


add_custom_background()☓add_theme_support($feature, $args)

を使いましょう。


みんなが使ってるはずのプラグインが期待通りに動かないことありますよ

ね？


多くの場合、古いテンプレートタグを使っているのが原因です。


最新のテンプレートタグをCodex等で追いかけるのは大変。


実は簡単にチェックする方法がちゃんと用意されてるんです。


Theme Checkを使えばテンプレートタグを覚えなくてもオッケー！


Theme Check について12年11月5日月曜日

✓ WordPress テーマが Codex（WordPressの決まり）に準拠してるかどうかをチェックするためのプラグイン

✓ WordPress コアとあわせて最新バージョンがリリースされています。

✓ 開発者は本家のエライ人たち


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


theme-checkでググってね！


使い方は超簡単です。


✓ まず、wp-config.phpを修正してデバッグモードに。

✓ 本番環境でこのまま放置しておくことはやめたほうがいいのでご注意！

define(‘WP_DEBUG’, true);


✓ プラグインをインストール。

✓ 管理画面の「外観」-「Theme Check」へ移動

✓ テストしたいテーマを選んで「テスト実行!」をクリック！


なんかいっぱいでてきたー！


✓ エラーが出たら、グーグル先生に聞いちゃいましょう！

✓ 対処方法がわかればひとつずつモグラたたき！

✓ 最悪フォーラムに聞いちゃえ！


theme-checkの注意点


✓ 子テーマを使ってる場合は、親テーマもチェックしたほうがいいです。

✓ 親テーマに警告が出た場合は、親テーマを書き換えずに子テーマで吸収する感じで。（これは逆に上級なテクニックが必要）


✓ 必ずしもすべての警告に問題があるわけではないです。

passed the tests は合格って意味です。

RECOMMENDEDは推奨って意味。WordPressコアの旧バージョンとの互換性保持のために古いタグをあえて使ってることも多い。


✓ このテストは頑張ってもぐらたたきをすれば、テーマに必要な要件をひととおり知ることができるので、とても勉強になります。

✓ 本を何時間もかけて読むよりはるかに簡単！しかも常に最新情報！


テーマユニットテスト


このテストもCodexで定められた由緒正しいテストです。

http://codex.wordpress.org/Theme_Unit_Test




このテストの目的はCSSの動作確認をすることです！


テストの手順


✓ http://megumi-manuals.com/ にアクセス。

✓ 右側のメニューの「インポートテストデータ」をダウンロード。


http://megumi-manuals.com/

http://megumi-manuals.com/

✓ インポートデータをダウンロードしたら解凍

✓ 管理画面の「ツール」ー「インポート」の中にある「WordPress」を選択して、解凍した.xmlをインポート！


✓ インポートが完了すると、約２０ページの固定ページと約３０ページの投稿がインポートされます。

✓ あとは、それらを順番に確認してモグラたたき！


ただし残念なお知らせ


現在インポートデータはリニューアル中のため画像のリンクが切れてしまいます...。

たぶんHTML5に対応するんじゃないかと個人的に予想しております。


✓ このテストを使用すると、お客さんにテーマのレビューをするときも印象がいいよ！

✓ 文字アタリ文字アタリ文字アタリ文字アタリ文字アタリ文字アタリ文字アタリ文字アタリ文字アタリよりもずっと見栄えがいいですよね。

✓ CSSの作業も順番にモグラたたきをするだけで良くなるので、効率が良くなります！


高速に表示されるテーマの作り方


CSSはJavaScriptよりも先に読み込みましょう。


✓ ブラウザはCSSのダウンロードが完了するまで何も表示しません。

✓ でもJavaScriptはダウンロードが完了しなくても表示を開始します。


ファイルの数をなるべく減らしましょう！


✓ CSSはなるべく１つのファイルにまとめましょう！

✓ @import はなるべく避けましょう！

✓ 小さな画像はCSSスプライトでまとめましょう！


wp_enqueue_style()wp_enqueue_script()を使いこなしましょう！


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


ja.wpbooster.net

そうそうCDNといえば！


よくある誤解


get_stylesheet_uri()とか

bloginfo(‘stylesheet_uri’)つかうよりも直書きしちゃったほうが

早くなるんじゃね？


✓ これらの値はWordPressが呼び出された時点でまとめて取得されていますので、この記述を省いてもデータベースへのアクセスは減りません。

✓ 一部のCDNとかキャッシュ系プラグインはこれらを使ってることが前提で設計されてるので、いろいろと問題が生じます。

✓ 期待通りに動かないプラグインとか出てきますよ。


ja.wpbooster.net

そうそうCDNといえば！


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


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

Technology

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