僕の WordPress テーマ制作のワークフロー ( 仕事編 )

この記事は Habakiri Advent Calendar 2015 16日目の記事です。もういよいよネタ切れでまた1日空けてしまいましたが、北海道のハムさんが「デザインから WordPress のテーマ作成までの自分のワークフローを見直す」という記事を書かれていたので、ここぞとばかりに便乗したいと思います。

まずは静的 HTML の制作から?いきなりテーマ制作?

結論から言うと、僕はいきなりテーマ制作派です。理由は単純で、静的 HTML と WordPress テーマのテンプレート、ほとんど同じようなコードになるのに、二度同じことをするのがめんどくさいからです。案件によって、静的 HTML の納品も必要、ということであればもちろん静的 HTML からやりますが、基本的にはデザインデータを頂いて後はお任せ、みたいなことが多いので、いきなりテーマからやることがほとんどになります。

もちろん、もしコーディングもチーム作業で PHP が苦手という方がいる場合は静的 HTML からが良いとか、その人その人の制作環境によって最適な方法は変わってきますね。

静的 HTML から制作する場合に問題になりそうだなと思っていること

静的 HTML からやるときに1つ問題になりそうだなと思っているのが、静的 HTML と WordPress テーマの二重管理が必要になってしまうという点です。Sass を例にだすとわかりやすいと思うのですが、.scss でコーディングして .css を生成しているのに、メンバーや自分が間違ってコンパイル済みの .css を直接編集してしまい、また別の誰かが .scss をコンパイルして先祖返り…みたいな感じで、本来であれば常に静的 HTML を書き換えた後にそれをテーマにも反映する、ということをしないといけないはずなのに、それを忘れていきなりテーマに変更を加えてしまうとウワーってなっちゃうみたいな。

固定ページ問題

ハムさんの記事の中で、「固定ページなどの管理画面入力が前提のページは手間」という部分がありました。

固定ページは各ページ固有にデザインを当てるケースも少なくなかったりするので、その場合は専用のマークアップをページに登録したうえでスタイルを当てる作業が発生するので、HTMLの反映の手間が発生してしまいます。

これは確かにその通りで、皆さんどうやっているんだろうといつも気になっています。僕はもう直接管理画面のエディタにごりごり HTML 書くことも多いですが、複雑な場合は一旦page-xxx.phpのような固定ページのテンプレートを作ってそこでコーディング、問題ないようだったらコンテンツ部分を管理画面にコピペ、という場合もあります。

そもそもの問題として、WordPress のエディタは HTML が非常に書きづらいですし、そもそも CMS のコンテンツエディタに HTML を直接書くこと自体が本来であればどうなん?というのもあるので、これはブログツールから進化してきた WordPress の宿命かもしれません。

具体的なワークフロー

いきなりテーマ制作から行うと前述しましたが、具体的には、子テーマを使うことが多いです。特に指定がなければ Habakiri の子テーマですね。子テーマ NG な場合だと Habakiri をベースにカスタマイズすることもありますが、一般的には _s とかが多いのでしょうか?僕はベーステーマみたいなのはほとんど使ったことがないので、一般的にはどのように制作が行われているのかは気になるところです。機会があればぜひ情報交換させてほしいです m(_ _)m

余談:最近気づいた、盲点だったこと

子テーマで制作していて僕が一番ストレスに感じるのは、親テーマの CSS の詳細度が強すぎる場合です。足りないスタイルを足すのは全然当たり前で良いのですが、「不要なスタイルを打ち消すためにスタイルを追加する」というのが何だか嫌だなと感じますし、詳細度が強いとこの打ち消す作業もスムーズにいかず凄くストレスです。

で、そんなに親テーマの CSS がストレスなら、親テーマの CSS を読み込まなければええやん!ということに最近気付きました。親テーマの PHP、HTML だけ拝借して CSS は全て自前実装。これが意外に快適で、なぜ今まで気づかなかったんだ…と思ったのでした。

ちなみに、Habakiri の場合もwp_deregister_style()で CSS を外すことができますが、Habakiri のように特定の CSS フレームワークがベースになっているものは HTML 内にそのフレームワークの class が埋め込まれてしまっているので、この方法はあまり相性が良くないかもしれません(使ってもいないのに.col-md-9みたいなのが HTML 中にあるのは気持ち悪いなという意味で…)。

この投稿へのコメント

コメントはありません。

コメントを残す

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

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

トラックバック URL