wordpress テーマカスタマイズ 基本の「き」
DESCRIPTION
WordBench仙台2013年3月勉強会（座談会）での発表資料です。 2013.3.26 改訂TRANSCRIPT
Who are you?五十嵐和恵
(株)デジタルキューブ（通称め組）のエンジニア
@gatespace_k
http://gatespace.jp/
WordPress日本語フォーラム世話役（通称おかん）
WordBench仙台モデレーター
JAWS-UG 仙台
網元起動隊
網元起動隊よろしくね（宣伝） https://www.facebook.com/GHOSTINTHEAMIMOTO
https://aws.amazon.com/marketplace/pp/B00G2DMZJ8 ↑からAWSに網元でWordPress環境を起動したら誰でもなれるよ
お品書きWordPressのテーマについて
準備1:開発環境を用意しよう
準備2:WordPressをデバッグモードにする
準備3:テストデータ（Theme unit test data）
準備4:テーマチェックプラグイン
公式テーマのガイドライン
テーマ開発4つアプローチ
お断り
テーマカスタマイズの準備のお話です。
テンプレートタグやテーマファイルには、ほとんど触れません。
実際に制作会社などでお仕事されている方には退屈な内容かもしれません。
テーマについて
テーマの役割見栄え
マークアップ
CSS
機能
ウィジェット
カスタムメニュー など
テーマの入手http://wordpress.org/extend/themes/
公式ディレクトリが基本
2,402テーマ（2013.3.26現在）
審査を通ったテーマのみ配布
ライセンスはGPL
有料でもGPLライセンスのもので販売しているサイトの紹介もあるhttp://wordpress.org/themes/commercial/
テーマカスタマイズのための準備1開発環境を用意しよう
WordPressはダッシュボード（管理画面）でテーマを編集できるが、
やらない方がよい
ダッシュボードからテーマ編集のあるある
うっかりタイポ → 500エラー → サイトが真っ白
→ 管理画面にもログイン・表示できない
→ バックアップもない ＼(^o^)／ｵﾜﾀ
テーマファイルはPHPなので大変危険です
開発環境1 : テスト用（ステージング）サーバー
できれば公開するサーバーと同じ環境
PHP（モジュール or CGI版）
MySQL
難しければ PC or Mac にローカルサーバーを用意
XAMMP（Win、Mac、Linux）
MAMP（Mac）
Virtual Box + Vagrant の VCCW ←New!
開発環境2 : エディタ
UTF-8(BOMなし) で保存できるエディタ
Win : TeraPad、秀丸エディタ などメモ帳（Notepad）は使っちゃダメ！
Mac : mi、JeditX など
開発環境3 :最低限用意しておきたいブラウザ
Internet Explorer（可能な限り対応したいバージョン全て）
Firefox ・ Chrome ・ Safari
ブラウザやバージョンによってHTML5、CSS、JavaScript（jQuery）の対応状況が異なる
WindowsとMacではデバイスフォントも異なる
開発環境3’ :各ブラウザの開発者ツール
HTMLのマークアップやCSSの適用状態の確認
JavaScriptのデバッグ
!
幅を狭くしたい、リンクや背景の色を変えたい
文字の大きさを変えたい
→それはWordPressではなく、CSSの問題！
Internet Explorer開発者モード（F12）
FirefoxWeb開発ツール or Firebug
Chromeデベロッパーツール
テーマカスタマイズのための準備2デバッグモード
ここからはテスト用のサーバーで行う内容 本番環境ではやっちゃダメ
デバッグモード
wp-config.php のdefine(‘WP_DEBUG’, false); を define(‘WP_DEBUG’, true); に
エラー内容が表示される
テーマカスタマイズのための準備3テストデータのインポート
テストデータ日本語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 なら設定値で自動でインポートされる
テストデータの内容
「作られる可能性のある」様々な投稿
画像、ギャラリー、投稿内でHTMLタグが使われた場合
予約投稿、下書きなどの投稿の状態
カテゴリー、タグ、日別アーカイブ
たくさんのカテゴリー・タグが指定された投稿
タイトルのない投稿、本文の無い投稿 など
テーマカスタマイズのための準備4テーマチェックプラグインを使おう
テーマチェックプラグインTheme-Check
http://wordpress.org/plugins/theme-check/元は公式テーマの審査基準のチェック用 テンプレートファイルの有無 スタイルシートでWordPressが付与するクラスの対応がされているか テンプレートタグが適切に実装されているか（非推奨コードが使われていないか） 必須（推奨）の機能が組み込まれているか セキュリティや互換性に関するチェック など
対処療法（モグラたたき）で確認や修正を行うよりはずっと効率が良い
公式テーマのガイドライン公式テーマに申請しなくても 知っておきたいガイドライン
Theme Reviewhttp://codex.wordpress.org/Theme_Review
ユニークな名前（関数、テキストドメイン）
プラグインのテリトリー
テンプレートタグやフック
WordPressで生成されたCSSクラスのサポート
テーマテンプレートファイル
GPL互換ライセンス など
テーマ開発4つアプローチようやくテーマを開発（カスタマイズ）する
準備ができたので・・・。
最大の注意点
「公式ディレクトリで配布されているテーマ（デフォルトテーマを含む）」を直接カスタマイズしちゃダメ！
公式ディレクトリのテーマは自動アップデートの対象。アップデートすると、オリジナルに変更を加えた箇所が無かったことに！
テーマ開発4つアプローチ
出典：テーマ開発4つアプローチ http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/
アプローチ 長所 短所
スクラッチ開発 コントロールできる 制作に時間がかかる
子テーマ すばやく機能を取り入れられる
親テーマへの依存が大きい
フレームワーク 多機能 慣れるまで時間が必要
スターター・テーマ 学習しやすい 元テーマが更新されても継承はない
スクラッチ開発
イチから自分でつくる
必ず入れなければならない
テンプレートタグ
スタイル（クラス）
子テーマhttp://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E
オリジナルのテーマの機能などをベースに、追加・変更したい部分のみをカスタマイズ
テーマの関数（functions.php）の改変には癖がある
気がつくと親テーマと同じぐらいのテーマファイル・・・
テーマフレームワーク
学習コストが高い（WordPressのテーマ作成＋フレームワーク独自のもの）
英語しか情報がない
スターター・テーマ
改変することが前提
WordPressのテーマに必要な設定はされている
子テーマと違い、 元のテーマが更新されても継承しない
それぞれ長所・短所があるので使い分けよう
今日の資料・出典(1)スターターテーマ _s を使ってWordPressのテーマをつくる（準備編・補足） http://gatespace.jp/2013/01/07/underscores01/
テーマの入手
WordPress › Free WordPress Themes（公式テーマディレクトリ） http://wordpress.org/extend/themes/
Commercially Supported GPL Themeshttp://wordpress.org/themes/commercial/
今日の資料・出典(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
今日の資料・出典(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/
今日の資料・出典(4)テーマチェック
WordPress › Theme-Check « WordPress Plugins http://wordpress.org/extend/plugins/theme-check/
公式テーマガイドライン
Theme Reviewhttp://codex.wordpress.org/Theme_Review
テーマ開発4つアプローチhttp://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/