WordBench仙台2013年3月勉強会（座談会）での発表資料です。 2013.3.26 改訂

1. WordPress テーマ
カスタマイズ 基本の「き」
五十嵐和恵（@gatespace_k）

2. Who are you?
五十嵐和恵
(株)デジタルキューブ（通称め組）のエンジニア
@gatespace_k
http://gatespace.jp/
WordPress日本語フォーラム世話役（通称おかん）
WordBench仙台モデレーター
JAWS-UG 仙台
網元起動隊

3. 網元起動隊よろしくね（宣伝）
https://www.facebook.com/GHOSTINTHEAMIMOTO
https://aws.amazon.com/marketplace/pp/B00G2DMZJ8
↑からAWSに網元でWordPress環境を起動したら誰でもなれるよ

4. お品書き
WordPressのテーマについて
準備1:開発環境を用意しよう
準備2:WordPressをデバッグモードにする
準備3:テストデータ（Theme unit test data）
準備4:テーマチェックプラグイン
公式テーマのガイドライン
テーマ開発4つアプローチ

5. お断り
テーマカスタマイズの準備のお話です。
テンプレートタグやテーマファイルには、
ほとんど触れません。
実際に制作会社などでお仕事されている方には
退屈な内容かもしれません。

6. テーマについて

7. テーマの役割
見栄え
マークアップ
CSS
機能
ウィジェット
カスタムメニュー など

8. テーマの入手
http://wordpress.org/extend/themes/
公式ディレクトリが基本
2,402テーマ（2013.3.26現在）
審査を通ったテーマのみ配布
ライセンスはGPL
有料でもGPLライセンスのもの
で販売しているサイトの紹介も
ある
http://wordpress.org/themes/
commercial/

9. テーマカスタマイズのための準備1
開発環境を用意しよう

10. WordPressはダッシュボード（管理画面）でテーマを編集できるが、
やらない方がよい

11. ダッシュボードから
テーマ編集のあるある
うっかりタイポ → 500エラー → サイトが真っ白
→ 管理画面にもログイン・表示できない
→ バックアップもない ＼(^o^)／ｵﾜﾀ
テーマファイルはPHPなので大変危険です

12. 開発環境1 :
テスト用（ステージング）サーバー
できれば公開するサーバーと同じ環境
PHP（モジュール or CGI版）
MySQL
難しければ PC or Mac にローカルサーバーを用意
XAMMP（Win、Mac、Linux）
MAMP（Mac）
Virtual Box + Vagrant の VCCW ←New!

13. 開発環境2 : エディタ
UTF-8(BOMなし) で保存できるエディタ
Win : TeraPad、秀丸エディタ など
メモ帳（Notepad）は使っちゃダメ！
Mac : mi、JeditX など

14. 開発環境3 :
最低限用意しておきたいブラウザ
Internet Explorer（可能な限り対応したいバージョン全て）
Firefox ・ Chrome ・ Safari
ブラウザやバージョンによってHTML5、CSS、
JavaScript（jQuery）の対応状況が異なる
WindowsとMacではデバイスフォントも異なる

15. 開発環境3 :
各ブラウザの開発者ツール
HTMLのマークアップやCSSの適用状態の確認
JavaScriptのデバッグ
!
幅を狭くしたい、リンクや背景の色を変えたい
文字の大きさを変えたい
→それはWordPressではなく、CSSの問題！

16. Internet Explorer
開発者モード（F12）

17. Firefox
Web開発ツール or Firebug

18. Chrome
デベロッパーツール

19. テーマカスタマイズのための準備2
デバッグモード
ここからはテスト用のサーバーで行う内容
本番環境ではやっちゃダメ

20. デバッグモード
wp-config.php の
define( WP_DEBUG , false); を
define( WP_DEBUG , true); に
エラー内容が表示される

21. テーマカスタマイズのための準備3
テストデータのインポート

22. テストデータ
日本語
https://raw.github.com/jawordpressorg/theme-test-data-ja/master/
wordpress-theme-test-date-ja.xml
英語
https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-
data.xml
いずれも「ツール」→「インポート」でインポート
http://wpdocs.sourceforge.jp/
%E3%83%86%E3%83%BC%E3%83%9E%E3%83%A6%E3%83%8B%
E3%83%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88
VCCW なら設定値で自動でインポートされる

23. テストデータの内容
「作られる可能性のある」様々な投稿
画像、ギャラリー、投稿内でHTMLタグが使われた場合
予約投稿、下書きなどの投稿の状態
カテゴリー、タグ、日別アーカイブ
たくさんのカテゴリー・タグが指定された投稿
タイトルのない投稿、本文の無い投稿 など

24. テーマカスタマイズのための準備4
テーマチェックプラグインを使おう

25. テーマチェックプラグイン
Theme-Check
http://wordpress.org/plugins/theme-check/
元は公式テーマの審査基準のチェッ
ク用
テンプレートファイルの有無
スタイルシートでWordPressが付与
するクラスの対応がされているか
テンプレートタグが適切に実装され
ているか（非推奨コードが使われて
いないか）
必須（推奨）の機能が組み込まれて
いるか
セキュリティや互換性に関するチェッ
ク など
対処療法（モグラたたき）で確認や
修正を行うよりはずっと効率が良い

26. 公式テーマのガイドライン
公式テーマに申請しなくても
知っておきたいガイドライン

27. Theme Review
http://codex.wordpress.org/Theme_Review
ユニークな名前
（関数、テキストドメイン）
プラグインのテリトリー
テンプレートタグやフック
WordPressで生成されたCSS
クラスのサポート
テーマテンプレートファイル
GPL互換ライセンス など

28. テーマ開発4つアプローチ
ようやくテーマを開発（カスタマイズ）する
準備ができたので・・・。

29. 最大の注意点
「公式ディレクトリで配布されているテーマ（デ
フォルトテーマを含む）」を直接カスタマイズ
しちゃダメ！
公式ディレクトリのテーマは自動アップデー
トの対象。
アップデートすると、オリジナルに変更を加
えた箇所が無かったことに！

30. テーマ開発4つアプローチ
出典：テーマ開発4つアプローチ
http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/
アプローチ 長所 短所
スクラッチ開発 コントロールできる 制作に時間がかかる
子テーマ
すばやく機能を
取り入れられる
親テーマへの依存が
大きい
フレームワーク 多機能 慣れるまで時間が必要
スターター・テーマ 学習しやすい
元テーマが更新されて
も継承はない

31. スクラッチ開発
イチから自分でつくる
必ず入れなければならない
テンプレートタグ
スタイル（クラス）

32. 子テーマ
http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E
オリジナルのテーマの機能などをベースに、
追加・変更したい部分のみをカスタマイズ
テーマの関数（functions.php）の改変には
癖がある
気がつくと親テーマと同じぐらいの
テーマファイル・・・

33. テーマフレームワーク
学習コストが高い
（WordPressのテーマ作成＋フレームワーク独
自のもの）
英語しか情報がない

34. スターター・テーマ
改変することが前提
WordPressのテーマに必要な設定はされている
子テーマと違い、
元のテーマが更新されても継承しない

35. それぞれ長所・短所があ
るので使い分けよう

36. 今日の資料・出典(1)
スターターテーマ _s を使ってWordPressのテーマを
つくる（準備編・補足）
http://gatespace.jp/2013/01/07/underscores01/
テーマの入手
WordPress › Free WordPress Themes（公式テー
マディレクトリ）
http://wordpress.org/extend/themes/
Commercially Supported GPL Themes
http://wordpress.org/themes/commercial/

37. 今日の資料・出典(2)
ローカル環境
ローカル環境（XAMPP）にWordPressをインストー
ルする手順
http://wp.yat-net.com/?p=3507
図解！MacにWordPressのテスト環境を構築できる
MAMPの設定手順
http://05step.com/2012/10/09/mac-local-mamp/
VCCW（VirtualBox + Vagrant）
https://github.com/miya0001/vagrant-chef-
centos-wordpress

38. 今日の資料・出典(3)
WordPressのデバッグモード
http://gatespace.jp/2012/07/20/wordpress-debugging/
Codex : テーマユニットテスト
http://wpdocs.sourceforge.jp/
%E3%83%86%E3%83%BC%E3%83%9E%E3%83%A6%E3%83%8B%E3%83
%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88
日本語
https://raw.github.com/jawordpressorg/theme-test-data-ja/master/
wordpress-theme-test-date-ja.xml
英語
https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-
data.xml
WordPressでテーマを作る際のテーマユニットテストのススメ
http://firegoby.jp/archives/

39. 今日の資料・出典(4)
テーマチェック
WordPress › Theme-Check « WordPress Plugins
http://wordpress.org/extend/plugins/theme-check/
公式テーマガイドライン
Theme Review
http://codex.wordpress.org/Theme_Review
テーマ開発4つアプローチ
http://ja.naoko.cc/2012/12/02/wordpress-theme-
development-approach/