Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
...
理想的な親テーマとは
親テーマに向いていないテーマ
• id セレクタや !important を連発していて子テー
マから上書きしにくい CSS
• フックが用意されておらず、カスタマイズする
にはテンプレートを上書きするしかない
• functions.php ...
理想的な親テーマ
• カスタマイザーで基本的な部分の設定ができる。

→ 全てをコードで書かなくても良くて簡単。
• CSS の詳細度が弱い。

→ 子テーマから CSS で上書きしやすい。
• テンプレートを継承しなくてもカスタマイズできる。...
これらを踏まえ、
最近テーマをつくりました。
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootst...
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootst...
カスタマイザーでおおまかな設定ができる
• CSS やテンプレートを編集する必要無く色の
変更やレイアウトの変更ができる。
• カスタマイザーでできる部分はカスタマイザー
に任せておけば、アップデートの影響を受け
にくい。
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootst...
ページテンプレート
• 固定ページのレイアウトを選択できる機能の
こと。
• 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 と互換性が無い
状態の s...
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootst...
フックとは
• 特定の文字列を書き換えたり、特定の位置に
任意の処理やHTMLを挿入したりできる仕組み
のこと。
• 任意の場所に HTML を追加したい場合、フッ
クを使えばテンプレートを上書き・編集しな
くても HTML を追加できる。
habakiri_before_entry_content
habakiri_after_sidebar_widget_area
habakiri_after_entry_content
habakiri_before_entry_meta
h...
    /\___/ヽ   ヽ
   /    ::::::::::::::::\ つ
  . |  ,,---   ---、 .:::| わ
  |  、_(o)_,:  _(o)_, :::|ぁぁ
.   |    ::<      .::...
たくさんのフック
• Habakiri にはたくさんのフックが用意されて
いる。
• フックを使えばテンプレートを上書き・編集
しなくて良いので、親テーマがアップデート
してもその影響を受けにくい。
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• たくさんのフック
• Bootst...
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 cla...
Bootstrap
• 世界中で使われているので情報がたくさん。
• 自分で1から CSS を書かなくても、ルールに
そって HTML を書いていくだけでおおまかな
レイアウトが完成する。
• あとは調整する CSS を書き足していけばOK
Habakiri
• レスポンシブデザイン
• 公式ディレクトリ掲載テーマ
• HTML5 + CSS3 +
Microformats
• カスタマイザーでおおまかな
設定ができる
• ページテンプレート
• Bootstrap
• たくさんの...
クラスベースの functions.php
• 一般的な functions.php は関数がフラットに並ぶ構成。

→ 親テーマのつくりによっては関数を上書きできない。

→ コードが冗長になりがち。
• Habakiri の functio...
PHPのクラスは難しそう…
大丈夫です
マニュアルあります!
http://habakiri.2inc.org
なぜ公式ディレクトリで
テーマを公開したの?
いろいろなメリットが
あるからです!
公式ディレクトリに掲載するメリット
• テーマレビュアーのチェックを受けることができる。

→ 品質の保証。自分だけでは気づかない不具合も見つかる。
• 多くのユーザーに使ってもらえる。

→ エッジケースでの不具合報告があることも。
• ユー...
公式ディレクトリにテーマを
掲載するには
公式ディレクトリへのテーマ掲載の流れ
• テーマをつくる
• 公式ディレクトリにテーマをアップロード
• レビュワーがアサインされるまで待つ(2週間∼1ヶ月?)
• レビューされ、修正点があれば trac ( 掲示板みたいなところ ) でやりと...
難しそう…?
これだけ抑えておけば(多分)大丈夫
• 超基本的なテーマ制作のルールは守る
• PHP、JS のエラーがあると NG
• PHPのクラス名、関数名などには接頭辞をつける
• 100% GPL
• 翻訳対応 ( 対応さえしておけば日本語でも OK...
もっと簡潔に言えば
• 当たり前のことを当たり前にやる
• 難しいことをしない
それでも難しい…?
子テーマでもOK
• 特定のテーマの子テーマでも公式ディレクトリに登
録できます。
• 基本的な機能やデザインは親テーマで完成されてい
るので、CSS を追加するだけでもOK
Nu2013 nifl
独自テーマなら、まずは _s
• _S は Automattic が開発し
たスターターテーマ。
• 基本的な設定や翻訳対応な
どが施されている。
• 必要な部分だけカスタマイ
ズしたり、CSS を追加する
だけでOK
http://under...
テーマができたらここに突撃!
テーマ制作の参考になる資料
• WordPress公式テーマ登録のための5ステップ

http://www.slideshare.net/mignonstyle/wordpress5-38514853
• テーマレビューチームに学ぶテーマ制作の...
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
Upcoming SlideShare
Loading in …5
×

WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録

4,541 views

Published on

Wordbench鹿児島@さくらハウス

Published in: Internet
  • Be the first to comment

WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録

  1. 1. WordBench 鹿児島@さくらハウス WordPress テーマ Habakiri と
 公式ディレクトリへのテーマ登録
  2. 2. キタジマタカシ inc2734 フリーランス Web デザイナー / プログラマー WordBench 長崎 モデレーター
  3. 3. WordCamp Kansai 2015 実行委員、スピーカー
 WordPress で行う継続的インテグレーション のススメ
  4. 4. 【質問】 公式ディレクトリからテーマ をダウンロードして
 使ったことがある方
  5. 5. 公式テーマディレクトリとは • WordPress.org が運営するテーマ配布サイト • テーマレビュアーのチェックを受けたテーマ のみが掲載。 → 野良テーマより安全で信頼できる • 公式ディレクトリで配布されているテーマは ダッシュボードからインストール可能。
  6. 6. 【質問】 そのテーマをカスタマイズし たくなったとき、どのように カスタマイズしますか?
  7. 7. テーマを直接カスタマイズすると… • WordPress のテーマは、作者により定期的にアッ プデートされます。 • アップデートすると、そのテーマは最新版のテー マにまるっと入れ替わります。 • つまり、直接テーマをカスタマイズしている場合、 アップデートすると、そのカスタマイズは全て無 くなります!
  8. 8. そうならないためには どうすれば良いか
  9. 9. 「子テーマ」を作ればOK!
  10. 10. 子テーマ • 特定のテーマを親としたテーマのこと。 • 子テーマは親のテンプレートを継承するので、 親テーマの機能やデザイン等を引き継ぐこと ができる。 • 子テーマにテンプレートを作成すれば、親の テンプレートを上書きできる。
  11. 11. 親テーマ 子テーマ 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 …. 子テーマにテンプレートが ない場合は親テーマのものが 使用される。 ☓ 子テーマにテンプレートが ある場合は親テーマのものは 使用されない。 閲覧者
  12. 12. 理想的な親テーマとは
  13. 13. 親テーマに向いていないテーマ • id セレクタや !important を連発していて子テー マから上書きしにくい CSS • フックが用意されておらず、カスタマイズする にはテンプレートを上書きするしかない • functions.php が 機能の削除や上書きに対応し ていない
  14. 14. 理想的な親テーマ • カスタマイザーで基本的な部分の設定ができる。
 → 全てをコードで書かなくても良くて簡単。 • CSS の詳細度が弱い。
 → 子テーマから CSS で上書きしやすい。 • テンプレートを継承しなくてもカスタマイズできる。
 → アップデートの影響を子テーマに与えにくい。 • functions.php に記述してある機能を削除・上書きしやすい。
 → テーマの汎用性が高い。
  15. 15. これらを踏まえ、 最近テーマをつくりました。
  16. 16. Habakiri • レスポンシブデザイン • 公式ディレクトリ掲載テーマ • HTML5 + CSS3 + Microformats • カスタマイザーでおおまかな 設定ができる • ページテンプレート • たくさんのフック • Bootstrap • クラスベースの functions.php
  17. 17. Habakiri • レスポンシブデザイン • 公式ディレクトリ掲載テーマ • HTML5 + CSS3 + Microformats • カスタマイザーでおおまかな 設定ができる • ページテンプレート • たくさんのフック • Bootstrap • クラスベースの functions.php
  18. 18. カスタマイザーでおおまかな設定ができる • CSS やテンプレートを編集する必要無く色の 変更やレイアウトの変更ができる。 • カスタマイザーでできる部分はカスタマイザー に任せておけば、アップデートの影響を受け にくい。
  19. 19. Habakiri • レスポンシブデザイン • 公式ディレクトリ掲載テーマ • HTML5 + CSS3 + Microformats • カスタマイザーでおおまかな 設定ができる • ページテンプレート • たくさんのフック • Bootstrap • クラスベースの functions.php
  20. 20. ページテンプレート • 固定ページのレイアウトを選択できる機能の こと。 • Habakiri には初めから6つのページテンプレー トが用意されています。
 ( 現在アップデート申請中の 2.0.0 では7つ )
  21. 21. Habakiri のページテンプレート • 右サイドバー(デフォルト) • 左サイドバー • トップページ用の空テンプレート • スライドショーつきのテンプレート • 1カラム(固定幅) • 1カラム(リキッド幅) • サイドバーなし
  22. 22. ページテンプレート • この中に適当なものがあれば、わざわざテン プレートを上書き・編集する必要がありませ ん。
  23. 23. 親テーマ(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) アップデート 一部だけ変更するために コピーして上書き ☓
  24. 24. Habakiri • レスポンシブデザイン • 公式ディレクトリ掲載テーマ • HTML5 + CSS3 + Microformats • カスタマイザーでおおまかな 設定ができる • ページテンプレート • たくさんのフック • Bootstrap • クラスベースの functions.php
  25. 25. フックとは • 特定の文字列を書き換えたり、特定の位置に 任意の処理やHTMLを挿入したりできる仕組み のこと。 • 任意の場所に HTML を追加したい場合、フッ クを使えばテンプレートを上書き・編集しな くても HTML を追加できる。
  26. 26. 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
  27. 27.     /\___/ヽ   ヽ    /    ::::::::::::::::\ つ   . |  ,,---   ---、 .:::| わ   |  、_(o)_,:  _(o)_, :::|ぁぁ .   |    ::<      .::|あぁ    \  /( [三] )ヽ ::/ああ    /`ー-----―´\ぁあ
  28. 28. たくさんのフック • Habakiri にはたくさんのフックが用意されて いる。 • フックを使えばテンプレートを上書き・編集 しなくて良いので、親テーマがアップデート してもその影響を受けにくい。
  29. 29. Habakiri • レスポンシブデザイン • 公式ディレクトリ掲載テーマ • HTML5 + CSS3 + Microformats • カスタマイザーでおおまかな 設定ができる • ページテンプレート • たくさんのフック • Bootstrap • クラスベースの functions.php
  30. 30. Bootstrap • Twitter が開発した CSS フレームワーク。 • ルールにそって CSS クラスをつけることで簡 単にレスポンシブデザインを実装できる。 • ボタンなどの汎用的なパーツもいろいろ。
  31. 31. <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サイズ以上のとき に * 列のグリッド幅を使うか
  32. 32. Bootstrap • 世界中で使われているので情報がたくさん。 • 自分で1から CSS を書かなくても、ルールに そって HTML を書いていくだけでおおまかな レイアウトが完成する。 • あとは調整する CSS を書き足していけばOK
  33. 33. Habakiri • レスポンシブデザイン • 公式ディレクトリ掲載テーマ • HTML5 + CSS3 + Microformats • カスタマイザーでおおまかな 設定ができる • ページテンプレート • Bootstrap • たくさんのフック • クラスベースの functions.php
  34. 34. クラスベースの functions.php • 一般的な functions.php は関数がフラットに並ぶ構成。
 → 親テーマのつくりによっては関数を上書きできない。
 → コードが冗長になりがち。 • Habakiri の functions.php はクラスで構成。
 → 子テーマからの継承・上書きが直感的。
 → コードもシンプルに整理しやすい。
  35. 35. PHPのクラスは難しそう…
  36. 36. 大丈夫です
  37. 37. マニュアルあります! http://habakiri.2inc.org
  38. 38. なぜ公式ディレクトリで テーマを公開したの?
  39. 39. いろいろなメリットが あるからです!
  40. 40. 公式ディレクトリに掲載するメリット • テーマレビュアーのチェックを受けることができる。
 → 品質の保証。自分だけでは気づかない不具合も見つかる。 • 多くのユーザーに使ってもらえる。
 → エッジケースでの不具合報告があることも。 • ユーザーはダッシュボードから簡単にアップデート可能。
 → そのテーマを使っているサイト全てに簡単に機能追加や
   不具合修正を適用できる。
  41. 41. 公式ディレクトリにテーマを 掲載するには
  42. 42. 公式ディレクトリへのテーマ掲載の流れ • テーマをつくる • 公式ディレクトリにテーマをアップロード • レビュワーがアサインされるまで待つ(2週間∼1ヶ月?) • レビューされ、修正点があれば trac ( 掲示板みたいなところ ) でやりとり • OK がでたらテーマの承認権限があるキーレビュワーが最終チェック • 問題なければ公開待ちに(2週間∼1ヶ月?) • 公開!
  43. 43. 難しそう…?
  44. 44. これだけ抑えておけば(多分)大丈夫 • 超基本的なテーマ制作のルールは守る • PHP、JS のエラーがあると NG • PHPのクラス名、関数名などには接頭辞をつける • 100% GPL • 翻訳対応 ( 対応さえしておけば日本語でも OK ) • プラグインテリトリーを犯さない
  45. 45. もっと簡潔に言えば • 当たり前のことを当たり前にやる • 難しいことをしない
  46. 46. それでも難しい…?
  47. 47. 子テーマでもOK • 特定のテーマの子テーマでも公式ディレクトリに登 録できます。 • 基本的な機能やデザインは親テーマで完成されてい るので、CSS を追加するだけでもOK Nu2013 nifl
  48. 48. 独自テーマなら、まずは _s • _S は Automattic が開発し たスターターテーマ。 • 基本的な設定や翻訳対応な どが施されている。 • 必要な部分だけカスタマイ ズしたり、CSS を追加する だけでOK http://underscores.me/
  49. 49. テーマができたらここに突撃!
  50. 50. テーマ制作の参考になる資料 • 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/

×