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, 親テーマfunctions.phpのaction, filterを子テーマでremove

WordPress3.0から使える親テーマ機能。
便利なんだけど、親テーマのfunctions.phpで設定されているactionやfilterを子テーマでremoveする方法が分からず悶々としてたけど、ようやく方法が分かりました。

本家Forum : [resolved] can i create child functions.php file for twentyten?
http://wordpress.org/support/topic/can-i-create-child-functionsphp-file-for-twentyten?replies=26

Adeptris さんによれば
after_setup_themeを使えば良いらしい。

/** Tell WordPress to run child_theme_setup()
when the 'after_setup_theme' hook is run.
*/
add_action( 'after_setup_theme', 'child_theme_setup' );
 
/** This function will hold our new calls and over-rides */
if ( !function_exists( 'child_theme_setup' ) ):
function child_theme_setup() {
 
}
endif;

関数 child_theme_setup にremoveを書けば対応できました。
感謝感謝です。

WordPress, 子テーマのための親テーマ作成の心構え – functions.php その2

親テーマ functions.php に add_filter されている関数を子テーマで変更することは困難を極めます。

読み込む順序が
1.子テーマ functions.php
2.親テーマ functions.php
になるからです。

これだと、いくら子テーマ functions.php で remove_filter しても意味がありません。
理論的には何らかの hook を使い最後の最後に remove_filter することは可能かもしれませんが、ワンクリック・インストールのWordPressらしくない解決方法に思えます。

親テーマの functions.php の関数は 全て functions_exists 判定 を入れることを必須条件にしてもらいたいものです。
そうすれば、子テーマでの変更はあっけないほど簡単にできます。
同名の関数を書けば良いだけですから。

Twenty Ten も一部の関数にしか判定が入っておらず不満が残ります。
というか、3.0対応テーマ作成の見本となるべきテーマなので早急に改善して欲しいです。

子テーマの子、孫テーマもありかな。

そうなると、配布テーマの functions.php の関数も 全て functions_exists 判定 が必須ですね。

update 2010-09-22
子テーマでremoveする方法があるので functions_exists が必須という訳では無さそうです。
でも、用意してくれてるとかなり嬉しい。

WordPress, 親テーマfunctions.phpのaction, filterを子テーマでremove

WordPress, wp_nav_menuのbefore, after と link_before, link_after

wp_nav_menuのbefore, after と link_before, link_after 用法が誤解を生みそうな件。

$before
(文字列) (オプション) リンクテキストの前のテキスト
初期値: なし

$after
(文字列) (オプション) リンクテキストの後のテキスト
初期値: なし

$link_before
(文字列) (オプション) リンクの前のテキスト
初期値: なし

$link_after
(文字列) (オプション) リンクの後のテキスト
初期値: なし

before と link_before の説明がどうもすっきりしない。

Usage:

<?php wp_nav_menu( array(
    'link_before' => '<span class="link_before">', 'link_after' => '</span>', 
    'before' => '<span class="before">', 'link_after' => '</span>', 
    'theme_location' => 'primary', 'depth' => '1' )
 );

Output:

<div class="menu">
    <ul>
        <li>
            <span class="before">
                <a href="/"><span class="link_before">Home</span></a>
            </span>
        </li>
    </ul>
</div>

出力結果をみても逆な気がしてしょうがない。