WordPressのテーマをBlueprint CSSで作る

このエントリーをはてなブックマークに追加
はてなブックマーク - WordPressのテーマをBlueprint CSSで作る
Facebook にシェア

WordPressのテーマをいじるのなんて3年ぶりぐらいなので、当時購入したリファレンス本と今のデフォルトテーマにあるテーマ実装を見比べながらテーマ作りをしてました。

昔は条件分け、繰り返しの記述ばかりで、テンプレートがカオスになりがちだったけど、テンプレート関数が充実してきてかなり楽になってる印象。

例えば、スレッド形式にできたり複雑化していたコメントも、

<?php wp_list_comments();?>

だけで表示され、後はスタイルシートで味付けするだけでお手軽ですね。

本題のテーマ作り、

Blueprint CSSはCSSのフレームワーク(ブラウザ間の表示差違をなくすリセットや、グリッドデザインが簡単にできたり便利!)なんですが、それをWordPressのテーマにあわせると幸せになれそうなのでやってみた。下にポイントをいくつか。

デフォルトテーマを使う

公開されてる自由に使えるテーマって沢山あるんだけど、国際化されてなくて日本語に対応させるだけで面倒。なので、デフォルトテーマを新しいテーマフォルダにコピーして使うのが楽。

不要なファイルを削除

私の場合は、

  • index.phpを基準にsingle.php、archive.php、search.php、comments.php、footer.php、header.php、sidebar.php、page.phpの各テンプレート
  • 国際化ファイルをフックするfunctions.php
  • 日本語用ja.mo、ja.po、kubrick.pot
  • スタイルシートとしてstyle.css

これくらいしか使わない。

必要になったときにあとから足せばいいやって考え。

Blueprint CSSの設置

テーマフォルダ以下にcss/blueprint/ としてファイルを置いた。

呼び出しは、header.php に

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

ってデフォルトのスタイルシートを呼び出してるところの前に挿入すればok。

デザインレイアウトの変更

header.php (footer.phpで閉じてね)に

<div class="container">

って記述すれば、Blueprint CSSのグリッド構造スタートの合図。containerクラスの幅が標準で950pxなので、それが気に入らない場合は、style.css のほうで上書き定義してやる(Blueprint CSS本体を修正しない!)。

メインコンテンツとサイドバーを分けるためのグリッド構造はお好みで、
index.php(single.php、archive.php、search.phpも同様) では、

<div class="span-14 colborder">
(中身)
</div>

sidebar.phpでは、

<div class="span-5 last">
(中身)
</div>

これでおしまい。簡単でしょ。

CSSの調整

あとは、style.css で必要ないものを削除して(幅の絶対指定など)、見た目の調整に移ればいい。

Blueprint CSS化しちゃえば、今後新しい異端なブラウザが登場してもCSSハックとか覚える必要なく、Blueprint CSSをバージョンアップさえすればいいし、
何より、どこでも同じCSSが通用するのが非常にキモチいい。おすすめです。

タグ: , ,

コメントは受け付けていません。