Download as PDF, PPTX
![APPROACHES
まとめ
アレンジしやすさ
[base/starter テーマ]
ガイドラインを満たした基礎テーマと
なるので工数短縮。デザインをフォーク
または子テーマで仕上げる前提なので ス
アレンジしやすい。
長所：顧客要望に応えすい。
長所：親テーマに大きく依存する。 フ 短所：開発に時間がかかる。
短所：開発工数が短縮できる。 初心者には難しい。
子
子 子テーマ ス スクラッチ フ テーマフレームワーク 開発工数](https://image.slidesharecdn.com/themeapproach-130219091158-phpapp02/85/slide-56-320.jpg)
テーマ作成のアプローチ
- 1. テーマ作成のアプローチ 2013/02/17 瀬戸 貴弘
- 2. 瀬戸 貴弘 Twitter : @as_chachamaru Facebook : as.chachamaru 職業 : システムエンジニア WordPress暦 ブログ開始 Ver2.6～ 本格的な勉強 2012年2月～
- 3. APPROACHES 今回のキーワード 子テーマ スクラッチ テーマフレームワーク
- 4. APPROACHES 例えばこんな人は？ WordPressでサイト構築したい！ HTMLやCSS得意じゃないしな・・・ 自分のことｗ デザインセンスもないし (￣Д￣；；
- 5. APPROACHES 公式ディレクトリなどから 完成しているテーマ探すのがはやい！ http://wordpress.org/extend/themes/
- 6. APPROACHES アレンジしたくなる #content { margin: 0 34% 0 7.6%; width: 58.4%; background-color:red; } 使っているといろいろアレンジしたくなるものです。。 例えばstyle.cssのファイルを直接書き換えてコンテンツ部分背景を赤にしてみた！
- 7. APPROACHES アレンジしたくなる #content { margin: 0 34% 0 7.6%; 直接ファイルの上書きはしない方がいい！ width: 58.4%; background-color:red; }
- 8. APPROACHES アレンジしたくなる #content { width: 58.4%; なぜ？ margin: 0 34% 0 7.6%; background-color:red; }
- 9. APPROACHES アレンジしたくなる #content { margin: 0 34% 0 7.6%; width: 58.4%; background-color:red; } テーマは WordPressコアのバージョンアップ対応やバグ修正で どんどん更新する。誤って更新しちゃうと。。。 WordPerssは親切なのでテーマに更新があると、管理パネルで知らせてくれる。
- 10. APPROACHES アレンジしたくなる #content { margin: 0 34% 0 7.6%; アレンジが全て吹っ飛ぶ (ﾉﾟρﾟ)ﾉ ｫｫｫ･･ｫ･･ｫ･ width: 58.4%; background-color:red; } テーマの最新バージョンで上書きされる。
- 11. 新テーマにしちゃおう！ APPROACHES と考えがちですが。。。 アレンジしたくなる #content { margin: 0 34% 0 7.6%; width: 58.4%; background-color:red; テーマ情報 } 書き換えちゃえ！ Style.css の冒頭の数行を書き換えるだけで新テーマにできる。
- 12. APPROACHES アレンジしたくなる #content { margin: 0 34% 0 7.6%; やらない方がいい！ width: 58.4%; background-color:red; } 自分の新テーマにしてしまえば、テーマの更新はないですが・・・
- 13. 新テーマにしちゃおう！ APPROACHES と考えがちですが。。。 アレンジしたくなる #content { 元となるテーマのバージョンアップができなくなる margin: 0 34% 0 7.6%; width: 58.4%; background-color:red; } ・WordPressコアのバージョンアップ対応は自分で。 ・テーマの不具合対応も自分で。 全自己責任
- 14. APPROACHES アレンジしたくなる #content { どうすれば？ margin: 0 34% 0 7.6%; width: 58.4%; background-color:red; }
- 15. APPROACHES アレンジしたくなる #content { margin: 0 34% 0 7.6%; 子テーマ width: 58.4%; background-color:red; おすすめ }
- 16. 子テーマ APPROACHES テーマは 親子関係が作れる 親子関係 親テーマ 子テーマ
- 17. 子テーマ APPROACHES アレンジしたくなる #content { margin: 0 34% 0 7.6%; width: 58.4%; background-color:red; } 親テーマのディレクトリ名 子供の名前は「Twenty Eleven Kid」。親の名前は「Twenty Eleven」です。
- 18. 子テーマ APPROACHES アレンジしたファイルは 子テーマに置く 親子関係 親テーマ 子テーマ 先ほどと同様ファイルを書き換えますが、書き換えたファイルの置き場所が違う。上書きしない！
- 19. 子テーマ APPROACHES 子テーマが使える範囲は 親テーマ ＋ 子テーマ 同じファイル名があれば 子テーマ優先 親テーマ 子テーマ
- 20. 子テーマ APPROACHES 実質ファイルの上書き 親テーマ 子テーマ
- 21. 子テーマ APPROACHES 親テーマ 子テーマは 更新しても 影響受けない 親テーマ 子テーマ 親テーマはテーマ開発者に更新させればいい！アレンジ部分だけ自分で管理。
- 22. APPROACHES アレンジしたくなる #content { 親テーマがどのように更新されるか margin: 0 34% 0 7.6%; width: 58.4%; わからないので更新したら全体チェックは必要！ background-color:red; }
- 23. APPROACHES 子テーマ 親テーマの機能を継承し、その機能にさらに機能 長所 を追加したりその機能を調整したりする 短時間で簡単にカスタマイズできる。 親テーマをバージョンアップしても子テーマの変更は 維持される。
- 24. APPROACHES 子テーマ 親テーマの機能を継承し、その機能にさらに機能 短所 を追加したりその機能を調整したりする 親テーマに大きく依存する。 親テーマ解析のために時間必要（開発者の癖）。 アレンジが多すぎるとほとんど書き換えて子テーマ使 う意味あるの？
- 25. APPROACHES 子テーマ アレンジしやすさ 子 開発工数 CSSだけ変更など変更点を最小限に済ませれば非常に開発工数が短縮できる。
- 26. APPROACHES 例えばこんな人は？ お客さんの要望に極力応えたい UIが先に決まってぴったしのテーマが 見つからない ゼロから作らないと気がすまない！
- 27.
- 28. スクラッチ APPROACHES 管理パネルでいろいろ設定したり、投稿できるよね
- 29. スクラッチ APPROACHES テーマに反映できる？
- 30. スクラッチ APPROACHES どうやって反映していいかわからない！ 何をしていいかわからない！ テーマ作成のガイドラインがある！ http://wpdocs.sourceforge.jp/Theme_Review
- 31. スクラッチ APPROACHES 本体機能の組み込む テンプレートタグ 例えば機能の組み込み
- 32. スクラッチ APPROACHES ガイドラインは公式ディレクトリに 公開するためのテーマ作成用 無理に全部適応する必要はないが、 信頼・安定したテーマ作成の参考になる
- 33. スクラッチ APPROACHES ガイドラインに従って1つ1つ確認していくと時間がかかる。 だからといってチェックしないで、 お客さんからのクレームで修正すると信頼を落とす。 そこで Theme-Check プラグイン
- 34. スクラッチ APPROACHES 【Theme-Check】 ガイドラインに従ってチェックしてくれる。 （必須・警告・推奨・情報など）
- 35. スクラッチ APPROACHES Theme-Check プラグイン 効率よくテーマを開発できる！ Theme-Checkはあくまでチェックなのでガイドラインに従った組み込みは勉強必要
- 36. APPROACHES スクラッチ 何も無い状態からコードを記述していくこと 長所 細かいところまで制御できる。 顧客の要望に応えやすい。
- 37. APPROACHES スクラッチ 何も無い状態からコードを記述していくこと 短所 時間がかかる。 テーマ作成に知識が必要。 ※テンプレート階層、プラグイン API フックなど HTML、CSSやJavascriptの知識も必要。
- 38. APPROACHES スクラッチ アレンジしやすさ ス 子 開発工数 ゼロから作くるから好きなように。。でも時間かかるよ
- 39. APPROACHES テーマ作成のアプローチ アレンジしやすさ ス テーマが完成しすぎて 開発に時間がかかり お客さんの要望が多い すぎる。素人には難しい。 と使いにくい。 子 子 子テーマ ス スクラッチ 開発工数
- 40. APPROACHES テーマ作成のアプローチ アレンジしやすさ ス ここの段階が あれば便利だな！ ？ 子 子 子テーマ ス スクラッチ 開発工数
- 41. APPROACHES テーマ作成のアプローチ アレンジしやすさ ス テーマフレームワーク フ 子 子 子テーマ ス スクラッチ 開発工数
- 42. テーマフレームワーク APPROACHES "Theme Framework" という言葉は 現在２つの意味を持つ http://codex.wordpress.org/Theme_Frameworks
- 43. テーマフレームワーク APPROACHES "Theme Framework" という言葉は 現在２つの意味を持つ 1 テーマの開発を助長するのに使われる "ドロップイン"コードライブラリ 2 他のテーマにフォークされる、または親テーマテン プレートとして使われるようなスタンドアローンの base/starterテーマ http://codex.wordpress.org/Theme_Frameworks
- 44. テーマフレームワーク APPROACHES A "drop-in" code library framework スタンドアローンテーマではない。 functions.phpファイルに組み込むことによって テーマをブートストラップする。 日本語ドキュメントがほとんどない。 有料が多い。 こんなのがあるんだと頭の片隅にでも
- 45. テーマフレームワーク APPROACHES Base/Starter Theme スタンドアローンテーマではある。 テーマ開発をすばやく・柔軟にできる土台として設計。 一般に親テーマになるように提供される。子テーマ機能 を使ってテーマ開発を行う。 最近よく耳にするスターターテーマはこれのこと
- 46. Base/Starter Theme APPROACHES スタンドアローンテーマ （一般のテーマ） Base/Starter Theme 親テーマに スタンドアローン なれるよ テーマだよ 技術的にスタンドアローンテーマなら子テーマに対する親テーマとして使える。何が違うの？
- 47. Base/Starter Theme APPROACHES スタンドアローンテーマ （一般のテーマ） Base/Starter Theme 親テーマになること、フォークされことに特化！
- 48. Base/Starter Theme APPROACHES スタンドアローンテーマ （一般のテーマ） Base/Starter Theme 【特化】 現状のまま使うこともできるが、サイトデザインを仕上げるようなCSSスタイルや他の要素が欠けてい ることがある。なぜならそのような要素は子テーマやフォークされる/派生テーマで加えられることを意 図されている。
- 49. APPROACHES Base/Starter Theme アレンジしやすさ ゼロでもなく完成もしていないテーマ。 ス ガイドラインに沿ってある程度枠組み作って あげるからデザインは仕上げてください。 フ 子 子 子テーマ ス スクラッチ フ テーマフレームワーク 開発工数
- 50. Base/Starter Theme APPROACHES 現状のまま使うこともできるが、サイトデザインを仕上げるようなCSSスタイルや他の要素が欠けてい ることがある。なぜならそのような要素は子テーマやフォークされる/派生テーマで加えられることを意 図されている。 Underscores: Automattic社が開発したスターターテーマ
- 51. Base/Starter Theme APPROACHES ジェネレータを使って新規テーマを作成できる
- 52. Base/Starter Theme APPROACHES _s を Theme-Checkでチェックしてみた。WARNINGが1つあり。
- 53. Base/Starter Theme APPROACHES style.css headerから取り除く WARNING: Found wrong tag, remove from your style.css header.
- 54. Base/Starter Theme APPROACHES テストに合格！ ガイドラインに沿ったベーステーマとなる。
- 55. Base/Starter Theme APPROACHES _s をそのまま表示。デザイン装飾が全くない。 サイトデザインはフォークまたは子テーマで仕上げる。
- 56. APPROACHES まとめ アレンジしやすさ [base/starter テーマ] ガイドラインを満たした基礎テーマと なるので工数短縮。デザインをフォーク または子テーマで仕上げる前提なので ス アレンジしやすい。 長所：顧客要望に応えすい。 長所：親テーマに大きく依存する。 フ 短所：開発に時間がかかる。 短所：開発工数が短縮できる。 初心者には難しい。 子 子 子テーマ ス スクラッチ フ テーマフレームワーク 開発工数
- 57. APPROACHES 所感 初心者の方は余計な装飾がなくソースがみやすいスターターテーマ で勉強すればわかりやすいと思います。ガイドラインに沿った最低 限の組み方が学べます。 WordPressを使った案件が多いなら、業種にあったオリジナルのスタータ テーマを作るのもいいかも。お客さんごとのアレンジは子テーマですると開 発効率も上がります。 WordPressのテーマアプローチは、予算・工数・要望などにより最適なもは 違います。アプローチの選択肢に、テーマフレームワーク（スタータテー マ・機能拡張ライブラリなど）もあることを覚えておきましょう！
- 58.