Wordbench鹿児島@さくらハウス

1. WordBench 鹿児島@さくらハウス
WordPress テーマ Habakiri と
公式ディレクトリへのテーマ登録

2. キタジマタカシ
inc2734
フリーランス Web デザイナー / プログラマー
WordBench 長崎 モデレーター

6. WordCamp Kansai 2015
実行委員、スピーカー
WordPress で行う継続的インテグレーション
のススメ

9. 【質問】
公式ディレクトリからテーマ
をダウンロードして
使ったことがある方

11. 公式テーマディレクトリとは
• WordPress.org が運営するテーマ配布サイト
• テーマレビュアーのチェックを受けたテーマ
のみが掲載。 → 野良テーマより安全で信頼できる
• 公式ディレクトリで配布されているテーマは
ダッシュボードからインストール可能。

12. 【質問】
そのテーマをカスタマイズし
たくなったとき、どのように
カスタマイズしますか？

13. テーマを直接カスタマイズすると…
• WordPress のテーマは、作者により定期的にアッ
プデートされます。
• アップデートすると、そのテーマは最新版のテー
マにまるっと入れ替わります。
• つまり、直接テーマをカスタマイズしている場合、
アップデートすると、そのカスタマイズは全て無
くなります！

15. そうならないためには
どうすれば良いか

16. 「子テーマ」を作ればOK！

17. 子テーマ
• 特定のテーマを親としたテーマのこと。
• 子テーマは親のテンプレートを継承するので、
親テーマの機能やデザイン等を引き継ぐこと
ができる。
• 子テーマにテンプレートを作成すれば、親の
テンプレートを上書きできる。

18. 親テーマ 子テーマ
style.css
single.php
index.php
page.php
home.php
front-page.php
header.php
sidebar.php
footer.php
functions.php
….
style.css *
single.php
index.php
page.php
home.php
front-page.php
header.php
sidebar.php
footer.php
functions.php
….
子テーマにテンプレートが
ない場合は親テーマのものが
使用される。
☓
子テーマにテンプレートが
ある場合は親テーマのものは
使用されない。
閲覧者

19. 理想的な親テーマとは

20. 親テーマに向いていないテーマ
• id セレクタや !important を連発していて子テー
マから上書きしにくい CSS
• フックが用意されておらず、カスタマイズする
にはテンプレートを上書きするしかない
• functions.php が 機能の削除や上書きに対応し
ていない

21. 理想的な親テーマ
• カスタマイザーで基本的な部分の設定ができる。
→ 全てをコードで書かなくても良くて簡単。
• CSS の詳細度が弱い。
→ 子テーマから CSS で上書きしやすい。
• テンプレートを継承しなくてもカスタマイズできる。
→ アップデートの影響を子テーマに与えにくい。
• functions.php に記述してある機能を削除・上書きしやすい。
→ テーマの汎用性が高い。

22. これらを踏まえ、
最近テーマをつくりました。

24. Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php

25. Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php

28. カスタマイザーでおおまかな設定ができる
• CSS やテンプレートを編集する必要無く色の
変更やレイアウトの変更ができる。
• カスタマイザーでできる部分はカスタマイザー
に任せておけば、アップデートの影響を受け
にくい。

29. Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php

30. ページテンプレート
• 固定ページのレイアウトを選択できる機能の
こと。
• Habakiri には初めから6つのページテンプレー
トが用意されています。
( 現在アップデート申請中の 2.0.0 では7つ )

32. Habakiri のページテンプレート
• 右サイドバー（デフォルト）
• 左サイドバー
• トップページ用の空テンプレート
• スライドショーつきのテンプレート
• 1カラム（固定幅）
• 1カラム（リキッド幅）
• サイドバーなし

33. ページテンプレート
• この中に適当なものがあれば、わざわざテン
プレートを上書き・編集する必要がありませ
ん。

34. 親テーマ（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）
アップデート
一部だけ変更するために
コピーして上書き
☓

35. Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php

36. フックとは
• 特定の文字列を書き換えたり、特定の位置に
任意の処理やHTMLを挿入したりできる仕組み
のこと。
• 任意の場所に HTML を追加したい場合、フッ
クを使えばテンプレートを上書き・編集しな
くても HTML を追加できる。

37. habakiri_before_entry_content
habakiri_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_navigation
habakiri_after_global_navigation
habakiri_before_sidebar_widget_area
habakiri_after_title
habakiri_before_title

38. /＼＿＿_／ヽ ヽ
／ ::::::::::::::::＼ つ
. | ,,--- ---､ .:::| わ
| ､_(o)_,: _(o)_, :::|ぁぁ
. | ::< .::|あぁ
＼ /( [三] )ヽ ::／ああ
／｀ー-----―´＼ぁあ

39. たくさんのフック
• Habakiri にはたくさんのフックが用意されて
いる。
• フックを使えばテンプレートを上書き・編集
しなくて良いので、親テーマがアップデート
してもその影響を受けにくい。

40. Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootstrap
• クラスベースの functions.php

41. Bootstrap
• Twitter が開発した CSS フレームワーク。
• ルールにそって CSS クラスをつけることで簡
単にレスポンシブデザインを実装できる。
• ボタンなどの汎用的なパーツもいろいろ。

43. <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サイズ以上のとき
に
* 列のグリッド幅を使うか

44. Bootstrap
• 世界中で使われているので情報がたくさん。
• 自分で1から CSS を書かなくても、ルールに
そって HTML を書いていくだけでおおまかな
レイアウトが完成する。
• あとは調整する CSS を書き足していけばOK

45. Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• Bootstrap
• たくさんのフック
• クラスベースの functions.php

46. クラスベースの functions.php
• 一般的な functions.php は関数がフラットに並ぶ構成。
→ 親テーマのつくりによっては関数を上書きできない。
→ コードが冗長になりがち。
• Habakiri の functions.php はクラスで構成。
→ 子テーマからの継承・上書きが直感的。
→ コードもシンプルに整理しやすい。

47. PHPのクラスは難しそう…

48. 大丈夫です

49. マニュアルあります！
http://habakiri.2inc.org

50. なぜ公式ディレクトリで
テーマを公開したの？

51. いろいろなメリットが
あるからです！

52. 公式ディレクトリに掲載するメリット
• テーマレビュアーのチェックを受けることができる。
→ 品質の保証。自分だけでは気づかない不具合も見つかる。
• 多くのユーザーに使ってもらえる。
→ エッジケースでの不具合報告があることも。
• ユーザーはダッシュボードから簡単にアップデート可能。
→ そのテーマを使っているサイト全てに簡単に機能追加や
不具合修正を適用できる。

53. 公式ディレクトリにテーマを
掲載するには

54. 公式ディレクトリへのテーマ掲載の流れ
• テーマをつくる
• 公式ディレクトリにテーマをアップロード
• レビュワーがアサインされるまで待つ（2週間∼1ヶ月？）
• レビューされ、修正点があれば trac ( 掲示板みたいなところ ) でやりとり
• OK がでたらテーマの承認権限があるキーレビュワーが最終チェック
• 問題なければ公開待ちに（2週間∼1ヶ月？）
• 公開！

55. 難しそう…？

56. これだけ抑えておけば（多分）大丈夫
• 超基本的なテーマ制作のルールは守る
• PHP、JS のエラーがあると NG
• PHPのクラス名、関数名などには接頭辞をつける
• 100% GPL
• 翻訳対応 ( 対応さえしておけば日本語でも OK )
• プラグインテリトリーを犯さない

57. もっと簡潔に言えば
• 当たり前のことを当たり前にやる
• 難しいことをしない

58. それでも難しい…？

59. 子テーマでもOK
• 特定のテーマの子テーマでも公式ディレクトリに登
録できます。
• 基本的な機能やデザインは親テーマで完成されてい
るので、CSS を追加するだけでもOK
Nu2013 nifl

60. 独自テーマなら、まずは _s
• _S は Automattic が開発し
たスターターテーマ。
• 基本的な設定や翻訳対応な
どが施されている。
• 必要な部分だけカスタマイ
ズしたり、CSS を追加する
だけでOK
http://underscores.me/

61. テーマができたらここに突撃！

62. テーマ制作の参考になる資料
• 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 : Required
https://make.wordpress.org/themes/handbook/review/required/