今回は、僕のWordPressサイト構築のテンプレートデザインを紹介します。
WordPressがMovableTypeより便利だと感じる点として、テンプレートを編集した直後に、変更が反映されるという点です。
なので、制作側に関してはWPの方がよりスピーディーに開発できると思うのですが、WPのテンプレートはphpになっており、テンプレートタグ以外にも自分で関数を作ったりできるため、柔軟性が高いものの、構造を弄り過ぎると理解しにくくなる傾向があります。
今では、CSS + (X)HTML によるウェブデザインが浸透してきましたが、構造設計がずさんな場合、意味の分からないクラスやIDが乱発を招き、せっかくのMVCの分離の理念が崩壊してしまいます。
しかし、ひとつのサイトを作る度に、毎回いちから堅牢で柔軟性に富んだ構造を設計するのは大変ですし、時間もかかり過ぎてしまいます。ウェブ制作に慣れた人であれば、自分の構造パターンができあがっているかもしれませんが、僕はWPでサイト制作するのであれば、Sandbox テーマを元に構造設計を行なう事をお勧めします。
Sandboxは他のテーマと比べて何が違うの?
このテーマの最大の特徴は、自動的に分かりやすい class や id を適切に割り振ってくれる所にあります。
例えば、トップページであれば、body class="wordpress y2008 m06 d13 h10 home loggedin" の様に、
また、ブログカテゴリであれば、body class="wordpress y2008 m06 d13 h10 archive category category-blog loggedin" という class が body 要素にセットされます。
自動的に意味付けされた class や id がセットされるHTML要素は、body と div id="post-{n}" と li id="comment-{n}" ({n} は WordPress システム内における id)の3つの部分です。
セマンティクスな class と id についての詳しい説明は、Miyoshiさんの記事Sandbox テーマとSandbox 1.2をお読み下さい。
つまり、これを使えば、
-
.home div#header {
-
background-color: LightBlue;
-
color: Black;
-
}
-
.category-blog div#header {
-
background-color: LightGoldenRodYellow;
-
color: Black;
-
}
-
.page div#header {
-
background-color: LightGray;
-
color: Black;
-
}
という様に、CSS だけでヘッダーのスタイルを自由に変更できます。このサイトも、背景画像を変える事で、トップとそれ以外のページでロゴのサイズを切り分けています。
サイドバーは Widgets で管理したい
サイドバーは、直接 sidebar.php を直接編集するよりも、せっかくテーマがWidgetsに対応しているのであれば、管理画面のデザイン > ウィジェットで管理したいです。
例えば、ホームとブログカテゴリと、それ以外のページで、サイドバーの表示を変更したい場合はどうすればよいのでしょうか。
それには、まず sidebar.php に簡単な分岐を入れてあげましょう。
-
<div class="sidebar">
-
<ul class="xoxo">
-
-
<?php
-
foreach((get_the_category()) as $cat) {
-
$cat_id = $cat->cat_ID ;
-
break ;
-
}
-
-
if ( is_home() ) {
-
}
-
elseif ( is_category('1') ) {
-
// category blog
-
}
-
elseif ( is_single() && $cat_id=="1" ) {
-
// single category blog
-
}
-
else {
-
}
-
?>
-
</ul>
-
</div><!-- .sidebar -->
!dynamic_sidebar(1) というのは、現在のウィジットで選択できるサイドバー1 のことです。この例ではサイドバー3まで使用しています。
しかし、Sandbox テーマでは標準で2個のサイドバーしか使えませんので、3個目を使えるようにする必要があります。
サイドバーを増やすには、functions.php の370行目付近、
-
// Table for how many? Two? This way, please.
-
register_sidebars( 3, $p );
register_sidebars() の数字を好きな数に変更するだけです。サイドバーを左右に設置したければ、sidebar-2.php というファイルを作成して、どのページでどのサイドバーを使うのかを指定して、
-
<?php get_sidebar() ?>
-
<?php include(TEMPLATEPATH . '/sidebar-2.php'); ?>
テーマの中で、この様に呼び出せば、2本のサイドバーもウィジットで管理する事ができる様になります。class は div class="sidebar-2" とでもしておきましょう。
まとめ、Sandbox はまだまだ進化していっています
他のテーマと違い、出来上がったスタイルを提供するのではなく、カスタマイズし易い構造を提供してくれる SandboxはWordPressの成長に共なって、バージョンアップされています。
また、全く構造に独自の変更を加えなければ、Sandbox Designs Competitionというギャラリーに投稿できます。色々な作品を見て、インスピレーションを得るのにも大いに役立つでしょう。
次回は、スタイル編集についてもう少し掘り下げて紹介します。
One Trackback
[...] 今回は、僕のスタイル編集について紹介します。前回の今時の WordPress サイト構築法 (テンプレート編)の続きですので、併せて読むと理解しやすいかもしれません。 [...]