WordPress, テーマの選び方

簡単にインストールできるWordPress。
あっという間に終わるインストールのあとはテーマをどうするか決めないといけません。
ガリゴリとゼロから作ってみるのも楽しいけど、色々な人が作ったテーマを試してみるのも勉強になります。

WordPress 3 からは子テーマが作れるので、子テーマで自分なりの改造を施すと何もかも自分で作るより時間の短縮にもなります。

星の数ほどあるテーマの中から選ぶのが大変、あとで泣きをみないように改造しやすくてイケテルテーマを探さなくては・・・

どこで選ぶ

無難に公式テーマ配布ディレクトリでしょうか。
Free Themes Directory

公式ディレクトリ以外でも優れたテーマが配布されていたりしますが、リスクはそれなりに高くなると覚悟した方が良いかもしれません。
テーマのソースを見ることができるスキルは必要になると思います。
悪質な難読化コードを埋め込んでいる例もあるようですから。

何を基準に選ぶ

見た目(外観・デザイン)はCSSなどのスキルがあればどうとでもなるので配布されている時の見た目は関係ない気がします。

それよりも・・・

1.CSS(style.css)を見ましょう
CSSのでき(精度)が低いとあとで泣く目にあいます。

■ グローバルリセットが入っている

* {
	padding:0;
	margin:0;
	outline:0;
}

上側に空く余白がデザイン上不自然になるのを防ぐためWeb デザインでは広く使われている手法でもあるのですが、WordPressではリセットしこのままにしておくと困ったことが起こります。
ビジュアルエディタ上の1行空きが、ブラウザ出力時に反映されなくなります。
WordPressはビジュアルエディタ上の1行空きは、ブラウザ出力時にpタグで囲むことにより表現しようとします。
リセットされたままだと自分が入力した文章が入力時の見た目と出力時では違う矛盾が生じてしまいます。
さらに、入力者から1行空ける方法を奪い取ってしまいます。

*リセット後にp, h1~h6タグなどのもともと行を空けるブロック要素へ bottom プロパティの再設定がされていれば◯
Twenty Tenはグロバールリセットに近い形でほぼ全てのタグの padding, margin を 0 にしていますが再度設定しなおしています。

グローバルリセットをしそのまま放置しているテーマはWordPressへの理解度が低いと思わずにいられません。

■ ループ出力の Class, ID の設定の仕方

/* × */
.alignleft {
}
/* ◯ */
#content .alignleft {
}

CSSスキルに疑念が生じます。

2.Javascriptの読み込み
■ Javascriptの読み込みがハードコードされている。
Javascriptの読み込みはテンプレートタグ wp_enqueue_script でするべきであり、ハードコードしているテーマは他の部分でも信用度は低くせざるを得ません。
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

■ jQueryを “no conflict” mode で使用していない。
WordPress添付のjQueryは “no conflict” mode で提供されています。
ほとんどのプラグイン、テーマはそれに従っています。
そんなことも知らないなら、他もどうなのと考えちゃいます。

3.custom-menuが使える
カスタムメニューはWordPRess 3 から追加された機能です。
グローバルナビやサイドメニュー、フッターナビなどを自在に作れるとても便利な便利な機能です。
この機能が使えないテーマは選択する意味がないように思えます。

4.$wpdbを使ったSQLが使われてたら△
テンプレートタグ、関数で対応していないことをデータベースを直接操作してしまおうとする高度なワザなのですが……..
将来のWordPressのアップグレードでDB構造が変わったりすると困ることがあります。
素早く対応してくれたら良いのですが・・・
いざとなったら自分でメンテナンスしますな覚悟は必要だと思います。

WordPress 3.0, Twenty Ten Theme 1.1 登場で何が変わった??

WordPressを3.0にすると、テーマも自動アップデートできて便利。
数日前に標準添付の Twenty Ten が 1.1 だよ、「自動アップデート」する??なメッセージが出てたので[ポチ]っとしました。
でも、プラグインと違って Change Log が見つからなたったので、何が変わったのか分からず少々不安な気持ちにもなりました。

仕組み自体が始まったばかりなので色んなことがこれから良くなっていくとは思います。

同じことを思った人はいるみたいでした。
WordPress 3.0 Twenty Ten Theme Updated
ここに詳しく書かれていました。

Andrew Nacin さんが Forum で答えてるよ、ということらしいです。
Changes Twentyten 1.0 >> 1.1

trac に diff があるから見てみたら、とも書いてあります。
http://core.trac.wordpress.org/log/branches/3.0/wp-content/themes/twentyten/
view changes

style.css (73 diffs)
functions.php (1 diff)
loop.php (1 diff)
page.php (2 diffs)
languages/twentyten.pot (12 diffs)
editor-style.css (4 diffs)
header.php (1 diff)
attachment.php (1 diff)

syle.css は記述方法を揃えるために「改行」や「スペース」の変更とプロパティ設定順の変更がされているようです。
あと、いくつかのバグがFixされていました。
nav-menus.php メニューに関するもの。
attachment.php, style.css メディア表示に関するもの。
位かなぁー。
ほとんどがタイポや表記の統一をしようとしているようでした。
こうやってテーマも進化していくのはいいことだと思う。

で、やっぱりチェンジ・ログがあると便利だと思います。
次のアップデートの時にはあるといいな。

update 2010-07-25 16:28
@odessy さんがブログにまとめてくれてます。
Twenty Ten 1.1 の変更点とアップデートの注意点

moファイルをアップしなおさないとメニューが英語表記のままになっちゃってるんですね。
今から、アップロードしておこう。

update 2010-08-03
大きな変更が抜けてました。
title の出力部分が大幅に変わっています。
表示そのものは変わってませんが、1.0 の時は functions.php にオリジナル関数を書いて wp_titleadd_filter していたのが、1.1 では関数を廃止しコードをtitleタグ間へ直書きになっています。

header.php を子テーマへコピーしてカスタマイズしている場合は、1.1版をコピーし再度カスタマイズが必要になります。

これが、親・子テーマの限界なんだなぁ。
親テーマに大幅な変更が加えられると、改造した子テーマへ影響があるかどうか調べないといけない、しょうがないけど。。。

update 2010-08-11
WordPress 3.0.1 ja へアップグレードした方は Twenty Tenも言語ファイル(mo)付きなので改めてmoファイルをアップロードしなくていいです。

WordPress 3.0 + Twenty Ten + 子テーマでリニューアル

WordPress 3.0 にアップグレードし標準テンプレートの Twenty Ten を使用しサイトをリニューアルしました。
少し style.css を書き換えたかったので「子テーマ」を使いオリジナルの CSS をオーバーライドしました。

Codex 子テーマ : http://wpdocs.sourceforge.jp/Child_Themes

子テーマを使うことによりオリジナルのテンプレートを書き換えること無く改造が可能になります。

テーマのアップグレード機能もある現在は、オリジナルファイルを残しておかないとテーマ・アップグレードのたびに書換作業が発生してしまいメンドイことになってしまいます。

Codex に詳しく書かれているので使用は難しくありません。

子テーマフォルダを themes 配下に任意の名前で作成します。
作成したフォルダに style.css を作成します。
style.css に以下のコメントを設定します。

via : Codex

/*
Theme Name:     Kid
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Ten theme for WordPress
Author:         Demetris
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        0.1.0
*/

Theme Name (必須) 子テーマ名
Theme URI (任意) 子テーマのウェブページ
Description (任意) テーマの説明。例: わたしの最初の子テーマ。ワーイ!
Author URI (任意) 作者のウェブページ
Author (任意) 作者の名前
Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc

コメントに続けてオリジナルの style.css を import させます。

@import url('../twentyten/style.css');

これで、オリジナルの style.css を読込んで上書き設定が可能になります。

テンプレートタグを使う時に少し注意が必要かもしれません。
wp-syntax プラグインの wp-syntax.css はテーマフォルダに配置するとコチラを優先して読込む設定になっているのですが、親テーマの twentyten フォルダに置かないといけませんでした。

TEMPLATEPATH, get_bloginfo("template_url") は 親テーマ を返しているようでした。

他にも注意すべき点があるようです、Codexを良く読んで使いましょう。
既存のテーマファイルを改造して使いたい時は子テーマを使うのが便利です。