WordPressテーマ化する前提のデザインやHTML・cssコーディングについてです。
何度もテーマ化していると誰でもテーマ化を見据えてHTMLとcssを書くようになると思います。ただ2回目くらいだとまだまだ見えない点が多いはず。
私の場合後から大幅に修正したり手戻りが発生したりしがちでした。
現在はテーマ化するとわかっている場合はデザイン、HTML・cssのそれぞれの段階でそれ前提に作業をするためこういうことが少なくなりました。もっとも全然完ぺきではなく毎回何かしらは抜け落ちていて後から対応していますが。
ともかく例として今の自分の意識はこんな感じというのを書いてみます。
デザインカンプをWPテンプレートベースで
まずはデザインの時点でどこまでWordPressを意識するかです。
カンプの時点でテンプレート名ベースでパターンを準備します。理由はhtmlをテンプレート名ベースで作ったほうがphpに置き換えるときにスムーズだからです。
いつも以下のような感じです。
メインでデザインする4パターン。
- front-page.php →トップページ
- single.php →コンテンツ投稿用
- page.php →会社概要など更新頻度が低いページ
- archive.php →いろいろ一覧
pageはなるべく一つのテンプレートでOKなようにします。もちろん必要があれば無理はしませんが、まとめる方向のほうが結果的にデザインの統一性も自然に保ちやすいです。
他によく使うテンプレートです。「お知らせ」や「トピックス」などがある場合はカスタム投稿使用で以下2つ。
- single-topics.php
- archive-topics.php
加えて軽視しがちな以下をしっかりデザインしておいた方が後がラクです。
- 404.php
- search.php（必要な場合）
- tag.phpやtaxonomy.phpなど（必要な場合）
WordPressのテンプレートベースで考えると、デザインパターンが自然に網羅できます。
HTMLコーディングとディレクトリ
続いてHTMLコーディングの時点でのWordPress化意識です。
ページのテンプレート分離
先述のようにデザインカンプの時点でほぼwpテンプレート分けの完成形が見えているのが理想ですが、遅くともHTMLコーディング開始前にはどのページが共通したデザインでいけるのか分類します。
例えば「記事一覧」と「ニュース一覧」は同じアーカイブのテンプレートで行けるのか、別々なのかなど。テンプレを別々にする場合でも大枠がほぼ一緒ならcssクラスの付け替えだけで済みそうか、などです。
また多くのページに共通するものはheaderに書くこと。まあ普通は自然にそうなっているとは思いますが。
jQuery
まずはjQueryの書き方、$()ではなくjQuery()。
あとは自前のjQueryで行くかWordPress側に乗っかるかです。はじめてテーマ化する場合などは前者がわかりやすくていいと思います。というか私はほとんど前者しかやっていないですが問題を感じたことはないので今後もそれでいこうと思います。変にWordPress側を活用しようとするよりも、そのまま行く方がテーマ化がスムーズです。
置換箇所をしっかり把握する
以下わりと行き当たりばったりで作業していますが、本来あらかじめ必要箇所を洗い出してからのほうがスムーズにいきそうです。
- パスの置換…どこのパスを書き換える必要があるのがマークしておくとテーマ化した直後がスムーズになるかもしれません。また絶対パスと相対パスの混在などは避けておいた方がわかりやすいですし一括の置き換えがしやすいです。
- ループの設置場所…あらかじめここはループというのをコメントアウトで書いておくと作業量と作業位置があとで分かりやすいかもしれません。その他ループを書きやすい形でHTMLコーディング。
具体的にはコメントアウトの活用、ついでに数の把握、作業時間の見積もり、一覧表化など。もっともいずれも書く手間のほうが多そうではあります。一応これの狙いは置換やループ設置作業に入ったときに単純作業状態にすることで脳みその消耗が抑えられそう、ということです。
テーマ化を見据えたcssの書き方
最後にテーマ化を見据えたcssの記述です。
まずはwpテーマ化に限らずcssの心がけです。
- できるだけ詳細度に頼らない。個別のclassをつける。
- classは命名ルールを作ってできるだけ守る（長いphpループが挟まると分かりにくくなることがあるので意外と大切と思っている。）
加えてテーマ化前提のcssでは以下を特に意識します。
- 管理画面から本文を書くことになるテンプレート（特に投稿）のcssには装飾用のclassを使わない。投稿のhやliなどはすべて単独で書く。逆に言うと単独のhやliなどは投稿のために使う。
- 代わりにトップやアーカイブのhやliはclassをつけたり詳細度を上げることで対応する。
ともかく投稿優先。なぜ投稿テンプレートを当てるページが優先か、これにはビジュアルエディターが関係してきます。
記事編集時のビジュアルエディターのcssはstyle.cssではなく、editor-style.cssが当たることになっています。つまりビジュアルエディターの見た目を本番側に合わせたかったらまずeditor-style.cssというのを用意する必要があります（あとfunctions.phpで有効化する）。
このeditor-style.cssを一番早く、間違いを起こさずに作る方法はstyle.cssをマルっとコピーです。
ただ私の経験的にはこの方法でビジュアルエディターの表示が本番側と一発で一致したことはありません。最近はかなり近くできるようになりましたが、最初のころはほとんど反映されませんでした。
原因としてこういうのがダメです。※投稿のh2にきかせたい場合
.con-wrap h2{ margin: 1rem; }これはビジュアルエディターでは.con-wrapというクラスが反映されないためです。
つまり最初のように書いてしまっていたらeditor-style.cssを作る際にわざわざ下のように直さないといけません。
h2{ margin: 1rem; }もちろんhだけではなくliやpなど全部そうです。
この調整を後からやるとたいへんですし、間違えてしまう可能性もあります。また後からstyle.css側を変更・修正した際にeditor-style.cssの更新を忘れることも多いでしょう。
というわけでstyle.cssをマルっとコピーで済ませるのがベスト。
マルっとコピーしても本番側と一致するeditor-style.cssにするためにはcssコーディングの段階で投稿を優先しておくべし、という話です。
ちなみに投稿以外についても書くと優先順位はだいたいこうなります（作るサイトによるので一概には言えない）。
投稿＞カスタム投稿・固定ページ＞トップページ・アーカイブ
右に行くと管理画面から本文を書いたりはないです。そのため当然ビジュアルエディターを意識しなくていい。
つまりh2を例にするとこんな感じになります。あくまで単独で書くのは投稿用。その他のページは詳細度を上げて対応。
投稿用 h2{ }
トップページ用 .top-wrap h2{ }
あるいはトップページのh2にはもれなくclassをつけてそのclassに対して書く。
投稿用 h2{ }
トップページ用 .h2-top{ }
プロパティを合わせたり、場合によっては打ち消したりしないと影響が及ぶかもしれないです。
いずれにしてもトップページからコーディングして下層ページに進むパターンを主にしていると、よほど意識していない限りいつも失敗しがちです。
style.cssの場所
小さいことですが、style.cssの場所です。最初からindex.htmlなどと同階層にしておきます。cssフォルダなどを作成して中に入れていてもルートディレクトリに移動しなければならないからです。
その他のcssはheadから呼ぼうが、style.cssから呼ぼうがさほど手間ではないので気にしていません。
コメント