Habakiriをカスタマイズしてみての感想・躓いた箇所

WordPressテーマ「Habakiri」の初期状態のまま公開して二週間経ちました。シンプルながら見やすいデザインで割と気に入ってはいますが、いくらなんでもシンプルすぎる&Habakiriテーマの使い勝手というものを調査するためにもちょっとだけいじってみました。その感想について書いてみます。ちょっと独特というか、やろうと思って戸惑う人も多いのではないかと思うので。

※以下は、自分が閲覧した2016.2.25時点でのマニュアルに間違いがあったという内容なのですが、その後マニュアルが修正されたため、現在は問題ないと思います。詳しくは下記「追記2」をご覧ください。

公式マニュアルに潜む罠

とりあえずこの話からしたい! これ絶対引っかかるだろ、罠だろって思ったところがあるんですよ。

えー、まずですね。自分はこれまでwordpressの案件ではだいたいunderscoresを元にテーマファイルにがしがし書き加えて作っていたので、そもそも子テーマを使ったカスタマイズというもの自体が初めてでした。

というわけで、全くわからないので最初から公式マニュアルに頼りっきりで始めていくことにしました。まずは子テーマの作成方法を参照してその通りにやってみて「お、できたできた!そうかそうかこの感じで上書きしていけばいいのだな」と。で、その次「Habakiri の functions.php」へ進んでみて、「子テーマで Habakiri の functions.php を継承する」という箇所のソースコードをそのまま(何の疑いもなく)子テーマのfunctions.phpにコピペしてみて、「ほうほう、これでコピーライト書き換えられるのか」と表示させてみたところ…。うーむ、変わらねぇ

あれ?何か間違ったかな?とか思うじゃないですか。でもこれって一般的なPHPの継承をやってるだけだから別に変じゃないよな? 関数名間違ってるのかな?と思って親のfunctions.phpを参照してthe_copyright()を探し出してコピペ(今思えばここで関数の中身をちゃんと見ておけば気づくこともできたんだけどね…)。うーん、変わらんね。

だんだんちょっと自信がなくなってきます。publicってこれ書いていいんだっけ?staticが違うのか?と不安になって色々消したり足したりしてみるも、何度やっても変わらず。なんでやー!とだいぶ心が折れる。一応ここを飛ばしてその次のフィルターフック、アクションフックをちょっと試してみて、とりあえずこっちは使えるな、と。とはいえやっぱここが上手くいかないのが気持ち悪い、なんか答えが欲しい。

と、ここまできてふとfooter.phpがどうなっているかを見てみる。するとこんなソースが飛び込んできました。

<div class="copyright">
 <div class="container">
 <?php get_template_part( 'modules/copyright' ); ?>
 <!-- end .container --></div>
 <!-- end .copyright --></div>

???

ようやく疑念が湧いてきて、テーマファイル全体をthe_copyright()で検索。

habakiri_src

 

うむ。この関数そもそも使われてねぇ。

ということで、自分と同じ轍を踏む人がいないように一応書いてみました。これで結構時間浪費したな…。その後、公式をよく読んでみたら「大幅にパワーアップした Habakiri 2.0.0 が公開されました。」というところにちゃんと書いてありました。

下記のメソッドは全て非推奨になりました。これまで下記のメソッドで呼び出していたモジュールは、get_template_part( 'modules/モジュール名' )で呼び出されるようになりました。この変更で、モジュールの HTML 等を変更したい場合は functions.php のクラスを継承せずに、子テーマでテンプレートを用意すれば良いようになりました。

で、実際カスタマイズの具合はどうなのか?

話を戻しますが。このHabakiriのカスタマイズの仕方なんですけど、公式の子テーマでテンプレート上書きすればアップデートしても大丈夫っていうけど本当にそう言い切って良いのか?Habakiriの設計思想といった記事を読んでみまして、やっぱりこれは推奨されている通り極力テンプレートファイルは上書きせずに行った方が良いのかな、と。

箇条書きするとこんな感じになりますね。

  • 単純に見た目を整えるならCSSを上書き
  • 大幅にレイアウトを変えたいならテーマカスタマイザーから
  • 何か要素を付け足したいならfunctions.phpにadd_actionを書いてechoする。もしくはadd_filterで丸ごと書き換えれる部分もあり。

ということで、これで大体は対応できるような気もしますが、やっぱりテンプレートファイルを上書きしないという前提でやると限度というか、対応できない部分もあるのかなとも思いました。具体例を一つ挙げるとですね…。

※以下も同じく、2016.2.25時点で存在していたバグについて書いているのですが、こちらも修正対応していただけるとのことです。詳しくは下記「追記2」をご覧ください。

グローバルナビを設定してないのにハンバーガーボタンが出てきてしまう問題

僕これはHabakiriで唯一ツメが甘いなって思ったところなんですけど、ブログ開設して間もないころにスマホからアクセスしてみたんですよ。で、右上にハンバーガーボタンがある、と。お、そういえばスマホの時のメニューってどうやって出てくるんだ?って思ってタッチしてみるも、全く動かない。ん?あれ、これバグじゃね?なんだよー、って思って、検証してみようと再びPCから開いてみてから気づいたんですけど、そもそもメニューなんて作ってないじゃん。

ふーむ。これやっぱ直したいな、と思ってソースを見てみたわけですね。まずはheader.php。

<?php get_template_part( 'modules/gnav' ); ?>
 <div id="responsive-btn"></div>

次に呼び出されているテンプレートのmodules/gnav.php。

<?php if ( has_nav_menu( 'global-nav' ) ) : ?>
<nav class="global-nav js-responsive-nav nav--hide" role="navigation">
 <?php
 wp_nav_menu( array(
 'theme_location' => 'global-nav',
 'depth' => 0,
 ) );
 ?>
<!-- end .global-nav --></nav>
<?php endif; ?>

これ、本来なら<div id="responsive-btn"></div><?php if ( has_nav_menu( 'global-nav' ) ) : ?> ... <?php endif; ?>の中に入るべきものじゃないかと思うんですよね。ただ、そう直したいものの、これはさすがに上書きするしかないよなー、と。修正箇所がheader.phpとmodules/gnavi.phpの二つにまたがってしまっている上に、モジュールの方はまだいいとしてもheader.phpはそれなりに重要なファイルだろうから、これを上書きして更新反映されないようにしてしまうのはやっぱ趣旨に反しているのかなーと。

で、悩んだ末に結局どうしたかというと、自分はまぁしばらくメニューは作らないかなと思ったので、単純にcssでdisplay:none !important;と書いて消してしまいました。メニュー作りたくなったら復活させればいいや、と。自分でやったこと忘れないようにブログに書いておこう、と(笑)。

(なんか偉そうに「バグ見つけてやったぜ!」的な感じで書いてしまいましたが、もしかして自分がわかってないだけで、あえてそうしているようなものだったりするんでしょうか…。そうだったら恥ずかしいな…。)

まとめ

と、いうわけでHabakiriテーマのカスタマイズを探ってみたわけですが、感想としては、やっぱり有能な使いやすいテーマであることは間違いないかなと思います。まぁ前述の通り、極力親テーマに影響が出ないようなカスタマイズをするとなると限度もあるのかなと思いますが、別に絶対テンプレートを上書きしちゃいけないということでもないんですから、どうしてもという時は上書きしちゃえばいいのですよ。更新反映されなくなったとしても、そこは普通に子テーマで作ったり、ブランクテーマから作った時だって同じことなのですから(これ言ったら元も子もないな)。

それよりも、すでにこれだけパーツとして出来上がっているという点で、単純にフレームワークとして優秀だなと思います。最初にフォトショだとかでがっちりデザインを作り込んで、それを元にHTMLを組んでいくみたいなワークフローで作るには向いていないかもしれないですが、最初からこのHabakiriのテーマカスタマイザーを使って大体のモックだけ作って方向を決めて、そこから細部を肉付けしていくみたいなやり方なら結構使えるかな、と。やっぱり今後そういうやり方が主流になっていくのでしょうねー、なんて。bootstrapがそもそもそういうものですもんね。

で、結局自分がやったカスタマイズは以下です。

ま、気が向いたらもっと色々やりますって。今はまだこんなもんですよ。ちなみに結局コピーライトのところは開発者様に敬意を表してってことでそのままにしておきました。

※追記

なんか改めて見てみたら雲の写真が入ったヘッダーが全然いけてなかったので削除しました。全体を空っぽい青背景にしておいてタイトルにtext-shadowで雲っぽい影を入れてみたら割といい感じになったのでこれでいきたいと思います。

※追記2 (2016.3.11)

Habakiri開発者のキタジマタカシさんがこの記事を読まれたらしく、Twitterで言及してくださいました。

ありがとうございます!
そして、確かに…。自分、ソーシャルコーディング的なものに関わったりしたことがないので、そういう発想全く無かったです(汗。今後、Github上に公開されているコードでこういったバグなどを見つけた場合はむしろ積極的に直接提言をしていった方が良いのだなと学びました。

と、いうことでマニュアルの方は既に修正されている&ハンバーガーボタンの方もいずれ修正してくださるとのことです。
キタジマ様ありがとうございました!そしてこれからもお世話になります!!

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


この投稿へのトラックバック

トラックバックはありません。

トラックバック URL