Embed Size (px)
Citation preview
WordBash Kyoto vol.1
Habakiri Advent Calendar 2015 総まとめ！
キタジマタカシ
inc2734
フリーランス Web デザイナー / プログラマー
モンキーレンチ - http://2inc.org WordBench 長崎 モデレーター
WordCamp Kansai 2015
実行委員、スピーカーWordPress で行う継続的インテグレーションのススメ
WordCamp Tokyo 2015
スピーカーWP-CLIとWordPress公式ディレクトリを活用した
爆速サイト構築術
-インストールからデザイン、ページ作成までを10分で！-
Habakiri Advent Calendar とは
• http://www.adventar.org/calendars/1227
• 公式ディレクトリ掲載テーマ「Habakiri」について
12/1～12/25 まで皆で記事を書き続けるという無謀な企画
• 書くたびに減り続けるいいねに悲しみながら、たくさんの方にご参加いただき、25記事中11記事を僕が書いたものの何とか完走！
Habakiri Advent Calendar で
Habakiri のことはだいたい わかるので、
今回はそれを10分に圧縮して ご紹介したいと思います。
Habakiri を作った理由
12/1 私はなぜ Habakiri を作ろうと思ったのか
http://habakiri.2inc.org/blog/2015/12/01/340/
Habakiri を作った理由
• 毎回1からフルスクラッチ→ つくるのめんどくせ
• 自作のスターターテーマをベースに制作→ 納品済みサイトにパッチ適用するのめんどくせ
• _sなどの既存のスターターテーマをベースに制作→ 把握するのめんどくせ
• 公式ディレクトリ掲載テーマの子テーマで制作→ アップデートの適用が超簡単やん！
Habakiri を公開してみて
12/2 WordPress 公式テーマディレクトリで、仕事で使うベーステーマを公開するメリットとデメリット
http://habakiri.2inc.org/blog/2015/12/02/351/
Habakiri を公開してみて
• 納品済みサイトへのアップデート適用が簡単
• テーマレビュワーにレビューしてもらえる
• 公開されるまで時間がかかる（アップデートは最近早くなった）
• Habakiri の仕事が入ってきた（儲ったとは言ってない）
• コードを見られるの恥ずかしい（テーマは直したくても後方互換性を考えると直せない部分が多い）
Habakiri の設計思想
12/3 Habakiri の設計思想
http://habakiri.2inc.org/blog/2015/12/03/360/
Habakiri の設計思想
• 子テーマでの制作をストレス無く行えるようにしたい
• ポピュラーなライブラリを含める→ Boostrap、Slick、Font Awesome → どうせ使うなら初めから入っていたほうが効率的
• CSS をストレス無く書けるようにする→ なるべく詳細度を低く→ 直感的に上書きしやすいように
Habakiri の設計思想
• なるべくコードを書かなくてすむ工夫→ カスタマイザーでさまざまな設定
• テンプレートをなるべく上書きしないですむ設計→ 大量のアクションフック→ テンプレートをなるべく細かく分割
• 叩かれているものも「どういう考えで作ったのか」というところを見聞きすると結構ちゃんと理由があったりするので、開発者の方はどんどん出して欲しいです（僕が喜びます）
子テーマ問題
12/4 子テーマでテンプレート上書きすればアップデートしても大丈夫っていうけど本当に
そう言い切って良いのか？ http://habakiri.2inc.org/blog/2015/12/04/371/
子テーマ問題
• 子テーマ機能はすごく良い仕組みだけど、親テーマが後方互換性が無いアップデートを行った場合は問題がでることがある。
• だから子テーマにさえしておけば絶対に安心ということは無い。
• Habakiri も過去にやらかしてます…
カスタマイザー
12/5 カスタマイザーで設定するのがめんどくさい？Habakiri ならコードで設定できます
http://habakiri.2inc.org/blog/2015/12/05/382/
12/6 Theme Customization API をそのまま使うと冗長で辛くなってきたのでもっと楽できるクラスを作った話http://habakiri.2inc.org/blog/2015/12/06/386/
カスタマイザー
• いちいちカスタマイザーで設定するのもめんどくさいので、Habakiri はフックで初期値を変更できるようになっています。
• カスタマイザーの実装は普通にやると結構冗長で面倒です。そのため Habakiri ではカスタマイザーを実装するためのクラスを作りました。
→ Habakiri 以外のテーマにも組み込めます。
僕以外にもたくさんの方に記事を書いて頂きました。
• 松山に半移住しようと思ったことと日々の生活を、ちまちまブログに書いてる。（ねこみみ隊長らしい。）http://nekomimi-taicho.com/archives/24884/
• 最近Habakiriのテーマをいじって勉強したのでその時の感想など。（tz_blog）http://blog.466548.org/2015/12/08/habakiri2015-memo/
• アドオンでHabakiriをお手軽カスタマイズしよう（ぴんくいろにっき）https://blog.hinaloe.net/2015/12/12/customize-habakiri-with-add-ons/
• HabakiriのPHPファイルがコーディングスタンダードに沿っているか調べてみた（WP-kyoto）http://wp-kyoto.net/check-habakiri-allow-wpcs/
• 予算ないサイトにHabakiri使ったら想像を超えてて草すらも生えない件（micc
のみっくみくなブログ（仮）） http://miccweb.net/wp/blog/2015/12/23/habakiri/
• Habakiriでオレオレテーマをサクッとレスポンシブにできたお話＋アルファ（SIGNAL-G） http://kita-kado.sakura.ne.jp/habakiri-advent/
• Habakiriを使ったことないけど使いたい僕が使ってないのに魅力を語る（GOUTEN.NET）http://blog.gouten.net/article/habakiri-advent-calendar-2015/
• Habakiriの子テーマで案件に対応してみた話（wald-grun.biz）http://wald-grun.biz/etc/5673/
• Hanakiriを使って自社のブログメディアをリニューアルするとき気をつけたこと（studiobrain.net）http://www.studiobrain.net/2015/12/22/10640
• ”php初心者なわたしでもHabakiriのおかげで体裁良く作ることが出来ました。”
• “これらのアドオン（デザインスキン）はプラグインとして製作されているため、使用すれば、なんと子テーマを使わずに&コードを弄ることなく色々なカスタマイズが出来てしまうんですね！”
• ”北島さん凄いわ、北島さんかっけーーーー、これを10回位言いたくなります。”
• ”レスポンシブテーマつくるのが苦手なデザイナーさんには助かるテーマ”
• ”子テーマでありながらテンプレートの上書きがほとんど発生しない構築を可能にしています。”
Habakiri ベースのサイトも 紹介頂きました。
ぼちぼち http://bochi2.net/
制作のワークフロー
12/16 僕の WordPress テーマ制作のワークフロー( 仕事編 )
http://habakiri.2inc.org/blog/2015/12/16/410/
制作のワークフロー
• 北海道のハムさんの記事への便乗記事デザインから WordPress のテーマ作成までの自分のワークフローを見直す（HAM MEDIA MEMO）https://h2ham.net/wordpress-coding-flow
• まず静的が組むか、いきなりテーマを作るかというお話。
• Habakiri 関係ない…
• でもこの案件は Habakiri を親でやる、とか使うテーマが決まっている場合はいきなりテーマを作るほうが良いと思います。
Habakiri のここがダメ
12/24 Habakiri のここがダメ
http://habakiri.2inc.org/blog/2015/12/24/416/
Habakiri のここがダメ
• やりすぎ問題カスタマイザー、ヘッダーレイアウト、グローバルナビゲーション、Bootstrap
• Prefix 問題 CSS の class 名、テンプレートパーツ、メソッド名
• あまり考えずにやってしまったことディレクトリ構成、マークアップ
• さらなる汎用化ができた部分テンプレートパーツの読み込みをフック経由に
• 今年は Habakiri とは別に、上記を解決したもっと薄いテーマを開発したいなと…
テーマは名前をつけるのが一番難しい！
12/25 テーマは名前をつけるのが一番難しい！
http://habakiri.2inc.org/blog/2015/12/25/424/
テーマは名前をつけるのが 一番難しい！• Habakiri は有効化するだけでデザインを適用できるプラグイン、デザインスキンを
販売しています。それらの名前は、Ginger、Rocky、Coco
• 実はこれはアメリカで人気の犬の名前ランキングからとったのです！
• どうでもいい…
最後に、皆さんが気になっているであろう疑問にお応えします！
ページビューは増えた？
変化なし！
アドオンの売上上がりましたよね？
ほとんど売れてません！いい加減にしてください！
