[HTML]HTML作成時からWordPressのテンプレートを考える

以前、チームでWordPressサイトを作成した際にWordPress未経験の方がHTML/CSSの雛形を作り私がWordPressのテンプレートへと変換していく事があり、その際に通常のHTML作成時とは異なる部分が多々あり、それを共有していたので同じような状況の際の参考になればと思います。

HTMLの構成

WordPressのテンプレートパーツは大きく分けて、4つになると思います。

  • ヘッダー
  • コンテンツ
  • サイトバー
  • フッター

HTMLから作成する場合はこの4つのパーツを考えながら作成していくとテンプレート化は容易になると思います。

sample.html
<html lang="ja">
<head></head>
<body>
 <header>ヘッダー</header>
 <main>
  <div class="l-content">
  <!-- ここからそれぞれのコンテンツ -->
  </div>
  <aside class="l-side">
  <!-- ここからサイドバーのコンテンツ -->
  </aside>
 </main>
 <footer>フッター</footer>
</body>
</html>

簡易的な骨組みではありますが、class="l-content"class="l-side"でレイアウトのスタイルを当てて、下層ページは全て共通の形として作成していくのが私の場合だと多いです。

トップページと下層ページ

大抵の場合、トップページと下層ページのデザインは異なる場合があると思います。
この場合はWordPress側でhome.phpでトップと下層を分ける事が可能なので、別々のものとして作成しても良いと思います。
ただし、ヘッダーフッターはなるべく共通のものを使用した方がコードの見通しが良いので、トップページと下層ページ両方で同じヘッダーフッターを使うと意識すると良いでしょう。
トップページにしかない要素がある場合は、コメントアウトを活用しどこからどこまでが下層ページと違うのか、明確にしておきましょう。

大きく異なる場合は、一度WordPressの担当の人に相談してどのように作成すればいいか話し合うのがいいと思います。

下層ページのコンテンツ部分

下層ページのレイアウトは全ページ共通かと思われます。各ページのコンテンツ、スタイルは以下のような形が望ましいです。

mainタグからl-contentクラスは固定してしまい、レイアウトのスタイルだけを設定します。
各ページのスタイルは、l-contentクラス以下から設定しましょう。後述するCSSの扱いに関係します。

under_page.html
<main>
 <!-- contents -->
 <div class="l-content">
   <!-- ここから各下層ページ毎のコンテンツ/スタイルを設定する -->
 </div>
 <!-- end of contents -->

 <aside class="l-side">
 </aside>
</main>

文字の数の扱い

WordPressでは、ユーザーが自由にテキストを書き込める為、様々な文字数でテストしてレイアウトが崩れないかチェックした方が良いです。例えば、タイトル部分が長くなった時、1行で収まると想定していた場合は崩れてしまいます。
2行や3行になる可能性も十分にあり得るので、記事の一覧などはチェックしておくと良いでしょう。

アイキャッチなどの画像の扱い

HTML作成時は、コンテンツはコピーで画像なども使い回しをすると思いますがWordPressにテンプレート化した際にどういったサイズで入るのか、またアイキャッチがなかった場合の処理の仕方などもHTMLの段階で決めておきたい項目です。

CSSの扱い

最初に述べたように、4つのパーツとして考えるのが良いのでそれぞれのスタイルは他のパーツと依存しないようにスタイル設定が望ましいです。

よくある事ですが、クラス名と連動して背景画像やスタイルが発生する場合、特定のページ以外(考えられる例として404ページや新しいカテゴリ、新しいページをWordPress側で作成した場合など)の時のデフォルト値を設定しておきましょう。
カテゴリ名をクラスと連動させる場合は、半角英数字ハイフンのみしか設定できないので注意が必要です。
※カテゴリ名では自由に設定が可能ですが、スペースの混入、日本語などの可能性があるのであまり現実的ではないと思います。

次によくあるのが、WordPressの自動整形によるスタイル崩れです。
投稿部分は自動でpタグ、brタグが混入します。また整形機能の無効化も出来るのでWordPressの担当と決めていくと良いと思います。

汎用クラスを作る

何回か登場するクラスやレイアウトは汎用クラス化にして、ページの複製を容易にしていく事を目指しましょう。
例えば、複数のフォームが存在する場合等、項目は違えどレイアウト、フォーマットは同じなので共通化させるなどが考えられます。

また、記事詳細ページではWordPressがコードを自動整形したり、画像の回り込みで特定のクラスが付くので確認してなるべく同じようにスタイルを当てておくと良いと思います。

jQueryについて

WordPressのjQueryはコンフリクトを防ぐ為にjQuery.noConflict()が使われており、$のままでは使用できないようになっています。

sample.js
jQuery(function() {
 jQuery("p").css("color","red");
});
// もしくは
jQuery(function() {
 $("p").css("color","red");
});

またWordPressのプラグインでjQueryを使うものは、WordPressのデフォルトのjQueryを想定して作成されています。
なるべくデフォルトのjQueryまま使用するのがプラグイン関連の問題が起きづらくなるので、jQueryを使用する際はこの事に気をつけて実装しましょう。

ある程度jQueryやJavascriptで行っていたものは、CSS3でも表現出来る事が多いのでなるべくCSSなどでカバー出来る範囲はCSSで処理した方がサイト軽量化や高速化に繋がります。

まとめ

いかがだったでしょうか。HTMLからWordPressのテンプレート化まで一人でしてしまう事が多かったので、気づかなかったのですが様々な事を想定してHTMLを作成していました。ここからさらに、プラグインの事も考慮しつつ組んでいたり。。デザインや状況によって大きく異なる事がありますので制作の前にWordPress担当と話し合い、問題が起きそうな部分を解消しておきましょう!

Share

参考になれば、是非シェアをお願いします!フォロー、Feedlyの登録もよろしくお願いします:)