wordpress テーマ habakiri と公式ディレクトリへのテーマ登録
TRANSCRIPT
WordBench 鹿児島@さくらハウス
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
キタジマタカシ
inc2734
フリーランス Web デザイナー / プログラマー WordBench 長崎 モデレーター
WordCamp Kansai 2015
実行委員、スピーカーWordPress で行う継続的インテグレーション のススメ
【質問】 公式ディレクトリからテーマ
をダウンロードして使ったことがある方
公式テーマディレクトリとは
• WordPress.org が運営するテーマ配布サイト
• テーマレビュアーのチェックを受けたテーマのみが掲載。 → 野良テーマより安全で信頼できる
• 公式ディレクトリで配布されているテーマはダッシュボードからインストール可能。
【質問】 そのテーマをカスタマイズしたくなったとき、どのようにカスタマイズしますか？
テーマを直接カスタマイズすると…
• WordPress のテーマは、作者により定期的にアップデートされます。
• アップデートすると、そのテーマは最新版のテーマにまるっと入れ替わります。
• つまり、直接テーマをカスタマイズしている場合、アップデートすると、そのカスタマイズは全て無くなります！
そうならないためには どうすれば良いか
「子テーマ」を作ればOK！
子テーマ
• 特定のテーマを親としたテーマのこと。
• 子テーマは親のテンプレートを継承するので、親テーマの機能やデザイン等を引き継ぐことができる。
• 子テーマにテンプレートを作成すれば、親のテンプレートを上書きできる。
親テーマ 子テーマ
style.css single.php index.php page.php home.php front-page.php header.php sidebar.php footer.php functions.php ….
style.css * single.phpindex.php page.php home.php front-page.php header.php sidebar.php footer.php functions.php ….
子テーマにテンプレートが ない場合は親テーマのものが 使用される。
☓子テーマにテンプレートが ある場合は親テーマのものは 使用されない。
閲覧者
理想的な親テーマとは
親テーマに向いていないテーマ
• id セレクタや !important を連発していて子テーマから上書きしにくい CSS
• フックが用意されておらず、カスタマイズするにはテンプレートを上書きするしかない
• functions.php が 機能の削除や上書きに対応していない
理想的な親テーマ
• カスタマイザーで基本的な部分の設定ができる。
→ 全てをコードで書かなくても良くて簡単。
• CSS の詳細度が弱い。
→ 子テーマから CSS で上書きしやすい。
• テンプレートを継承しなくてもカスタマイズできる。
→ アップデートの影響を子テーマに与えにくい。
• functions.php に記述してある機能を削除・上書きしやすい。
→ テーマの汎用性が高い。
これらを踏まえ、 最近テーマをつくりました。
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 + Microformats
• カスタマイザーでおおまかな設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 + Microformats
• カスタマイザーでおおまかな設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php
カスタマイザーでおおまかな設定ができる
• CSS やテンプレートを編集する必要無く色の変更やレイアウトの変更ができる。
• カスタマイザーでできる部分はカスタマイザーに任せておけば、アップデートの影響を受けにくい。
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 + Microformats
• カスタマイザーでおおまかな設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php
ページテンプレート
• 固定ページのレイアウトを選択できる機能のこと。
• Habakiri には初めから6つのページテンプレートが用意されています。( 現在アップデート申請中の 2.0.0 では7つ )
Habakiri のページテンプレート
• 右サイドバー（デフォルト）
• 左サイドバー
• トップページ用の空テンプレート
• スライドショーつきのテンプレート
• 1カラム（固定幅）
• 1カラム（リキッド幅）
• サイドバーなし
ページテンプレート
• この中に適当なものがあれば、わざわざテンプレートを上書き・編集する必要がありません。
親テーマ（Ver 1.0） 子テーマ
style.css single.php index.php ….
single.php
アップデートの内容によっては構造が大幅に変わり Ver 2.0 の single.php と互換性が無い
状態の single.php を使っている状態なって
しまっているかも…
style.css single.php index.php ….
親テーマ（Ver 2.0） アップデート
一部だけ変更するために コピーして上書き
☓
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 + Microformats
• カスタマイザーでおおまかな設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php
フックとは
• 特定の文字列を書き換えたり、特定の位置に任意の処理やHTMLを挿入したりできる仕組みのこと。
• 任意の場所に HTML を追加したい場合、フックを使えばテンプレートを上書き・編集しなくても HTML を追加できる。
habakiri_before_entry_contenthabakiri_after_sidebar_widget_area
habakiri_after_entry_content
habakiri_before_entry_meta
habakiri_after_entry_meta
habakiri_before_contents_content
habakiri_after_contents_content
habakiri_before_header_content
habakiri_after_header_content
habakiri_before_footer_content
habakiri_after_footer_content
habakiri_before_container habakiri_before_global_navigationhabakiri_after_global_navigation
habakiri_before_sidebar_widget_area
habakiri_after_title
habakiri_before_title
/＼＿＿_／ヽ ヽ ／ ::::::::::::::::＼ つ . | ,,--- ---､ .:::| わ | ､_(o)_,: _(o)_, :::|ぁぁ . | ::< .::|あぁ ＼ /( [三] )ヽ ::／ああ ／｀ー-----―´＼ぁあ
たくさんのフック
• Habakiri にはたくさんのフックが用意されている。
• フックを使えばテンプレートを上書き・編集しなくて良いので、親テーマがアップデートしてもその影響を受けにくい。
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 + Microformats
• カスタマイザーでおおまかな設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php
Bootstrap
• Twitter が開発した CSS フレームワーク。
• ルールにそって CSS クラスをつけることで簡単にレスポンシブデザインを実装できる。
• ボタンなどの汎用的なパーツもいろいろ。
<div class=“container”> <div class=“row”> <div class=“col-md-4”> 1カラム目 </div> <div class=“col-md-4”> 2カラム目 </div> <div class=“col-md-4”> 3カラム目 </div> </div> </div>
Bootstrap
col-xs-* スマホサイズ以上のとき
col-sm-* タブレットサイズ以上のとき
col-md-* PCサイズ以上のとき
col-lg-* ワイドPCサイズ以上のとき
に
* 列のグリッド幅を使うか
Bootstrap
• 世界中で使われているので情報がたくさん。
• 自分で1から CSS を書かなくても、ルールにそって HTML を書いていくだけでおおまかなレイアウトが完成する。
• あとは調整する CSS を書き足していけばOK
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 + Microformats
• カスタマイザーでおおまかな設定ができる
• ページテンプレート
• Bootstrap
• たくさんのフック
• クラスベースの functions.php
クラスベースの functions.php
• 一般的な functions.php は関数がフラットに並ぶ構成。→ 親テーマのつくりによっては関数を上書きできない。→ コードが冗長になりがち。
• Habakiri の functions.php はクラスで構成。→ 子テーマからの継承・上書きが直感的。→ コードもシンプルに整理しやすい。
PHPのクラスは難しそう…
大丈夫です
なぜ公式ディレクトリで テーマを公開したの？
いろいろなメリットが あるからです！
公式ディレクトリに掲載するメリット
• テーマレビュアーのチェックを受けることができる。
→ 品質の保証。自分だけでは気づかない不具合も見つかる。
• 多くのユーザーに使ってもらえる。
→ エッジケースでの不具合報告があることも。
• ユーザーはダッシュボードから簡単にアップデート可能。
→ そのテーマを使っているサイト全てに簡単に機能追加や
不具合修正を適用できる。
公式ディレクトリにテーマを掲載するには
公式ディレクトリへのテーマ掲載の流れ
• テーマをつくる
• 公式ディレクトリにテーマをアップロード
• レビュワーがアサインされるまで待つ（2週間～1ヶ月？）
• レビューされ、修正点があれば trac ( 掲示板みたいなところ ) でやりとり
• OK がでたらテーマの承認権限があるキーレビュワーが最終チェック
• 問題なければ公開待ちに（2週間～1ヶ月？）
• 公開！
難しそう…？
これだけ抑えておけば（多分）大丈夫
• 超基本的なテーマ制作のルールは守る
• PHP、JS のエラーがあると NG
• PHPのクラス名、関数名などには接頭辞をつける
• 100% GPL
• 翻訳対応 ( 対応さえしておけば日本語でも OK )
• プラグインテリトリーを犯さない
もっと簡潔に言えば
• 当たり前のことを当たり前にやる
• 難しいことをしない
それでも難しい…？
子テーマでもOK
• 特定のテーマの子テーマでも公式ディレクトリに登録できます。
• 基本的な機能やデザインは親テーマで完成されているので、CSS を追加するだけでもOK
Nu2013 nifl
独自テーマなら、まずは _s
• _S は Automattic が開発したスターターテーマ。
• 基本的な設定や翻訳対応などが施されている。
• 必要な部分だけカスタマイズしたり、CSS を追加するだけでOK
http://underscores.me/
テーマができたらここに突撃！
テーマ制作の参考になる資料
• WordPress公式テーマ登録のための5ステップhttp://www.slideshare.net/mignonstyle/wordpress5-38514853
• テーマレビューチームに学ぶテーマ制作のベストプラクティスhttp://www.slideshare.net/NSKW/learning-from-theme-review-requirements
• Word pressはじめの一歩 テーマ作成ハンズオンhttp://www.slideshare.net/HideOkamoto/word-press-50840466
• THEME REVIEW HANDBOOK : Requiredhttps://make.wordpress.org/themes/handbook/review/required/