最近、ウィジェットは入れるは JavaScript でひゅんひゅん動くはで、WordPress 近代化が図られている(!?)このサイトですが、何を隠そう IE8 でみるとおかしかったのです。 しょうがないので、IE7 エミュレーションしていたのですが、気にくわなかったのでついにテーマを書き直すことに!

テーマといえばおでこさんでおなじみ、Thematic テーマフレームワーク。 目標は、旧 hiromasa.another を style.css と functios.php だけで再現すること、、、、なのでご覧のサイトは既に Thematic 版になっていますが見た目はほとんど変わっていません :)。

Thematic とはなんじゃという方や、初めて使う方はおでさんのスライドが良いっす!

テーマフレームワークは、WordPress のお約束的な部分が既にできていて、それに対して追加設定をするような形でテーマを構築していくものです。 ループなど基本的なことはもちろん、コアやプラグインが要求するようなテーマの仕様がきちんと設定されています。

まっさらからフルスクラッチすると忘れがちな部分や大変な部分が既に構築済みなので、PHP コードに関して楽ができます。 また、ぼくのような CSS がよく分からないものにも、リセットや段組などのノウハウ的な部分が盛り込まれていますので便利に感じました。

新しいテーマの構築は、style.css への CSS の追加適応とたくさんの位置に配置できるウィジェットでほぼ望みのサイトはできると思いますが、「ウィジェットが配置できないところに何かを出したい」とか、「表示文言を変えたい」とかいったときに、さらに追加で２つの方法をとることができます。

ひとつは Thematic 本体から修正したいテンプレートファイルをコピーしてきて書き換えること。 もうひとつは、WordPress のフックの仕組みをつかって functions.php でプログラム的に書き換えることです。

どちらの方法をとっても良いと思いますが、ここでは後者を紹介してみます。

style.css と functions.php だけでサイトを構築するのは極端ですが、functions.php 作戦はファイルを修正するより楽にできる部分もありますので、いくつかのコードが参考になれば。

まず基本的なところですが、Thematic の本体にはあちこちで do_action もしくは apply_filter をしているところがります。 これを自分の functions.php に追加したプログラムでフックして動作を書き換えるイメージです。 どんなフックがあるかは、修正対象部分の Thematic 本体のプログラムを追っていけば大抵は見つけることができます。

以下、そんなコードの例です。（自分のテーマ内の functions.php にかきます）

パターン1。 どっかに何かを追加。

hiromasa.another のヘッダには kougabu さんのサムネイルが４つでていますが、このようなことをするには Thematic 本体で do_action をしているところをみつけて、そこに echo で HTML を差し込みます。（ここでは thematic_header というフックを使いました）

/*************************************************************

 * ブログヘッダー部分に kougabu のサムネイルいれる

 *************************************************************/

function head_kougabu() {

    echo '<div id="header-kougabu">' . "\n";

    echo '<ul style="display: inline;">' . "\n";

    kougabu_get_images('before=<li style="display: inline;">

        &post_id=662&count=4&max_width=70&max_height=70');

    echo '</ul>' . "\n";

    echo '</div>' . "\n";

}

add_action('thematic_header', 'head_kougabu', 6);

パターン2。 不要な文字列を削除。

たとえば、記事の下に出ている記事情報メタ文字列を消すコードです。 ここではついでに消したトラックバック URL を別な場所（コメントフォームの下に動かしています）

/*************************************************************

 * トラックバックの URL をコメントフォームの下に移動

 *************************************************************/

function trackback_add_url() {

    echo '<div id="trackbacks">' . "\n";

    echo '<h3>Trackback</h3>' . "\n";

    echo '<p>' . trackback_url() . '</p>' . "\n";

    echo '</div>' . "\n";

}

function trackback_delete_default($content) {

    return '';

}

add_action('thematic_belowcomments', 'trackback_add_url');

add_filter('thematic_postfooter', 'trackback_delete_default');

パターン３。 不要なフックの削除。

ある状態の時に、Thematic にデフォルトで登録してあるフックを呼ばなく(delete)する場合です。 たとえば、シングルページの時はナビゲーションを出さない、など。 ポイントはいきなり remove_action するのではなく、template_redirect くらいまで実行を遅延させることです。

自分の functions.php は Thematic の functions.php より先に呼ばれます。 なので、いきなり remove は無理、なのです。 で、 init くらいでもいいかなって感じなのですが、ここだとまだ is_single が確定できてないので、適当に  template_redirect でやってみました。

/*************************************************************

 * 不要なナビゲーション削除

 *************************************************************/

function navigation_delete_post() {

    remove_action('thematic_navigation_above', 'thematic_nav_above', 2);

    if(!is_single()) return;

    remove_action('thematic_navigation_below', 'thematic_nav_below', 2);

}

add_action('template_redirect', 'navigation_delete_post');

パターン４。 ある特定ページだけサイドバーを消す。

ここのサイトの Gallery ページでやっている部分です。 Thematic のコードを追っていくと制御できるコードがありました。 thematic_sidebar に false を返すとサイドバーが非表示になるようです。

/*************************************************************

 * ギャラリーページだったらサイドバーをなし

 *************************************************************/

function kougabu_delete_sidebar() {

    $show = true;

    // kougabu page : 182

    if(is_page('182')) {

        $show = false;

    }

    return $show;

}

add_filter('thematic_sidebar', 'kougabu_delete_sidebar');

パターン５。 パターン２といっしょですが、ある文字列を修正加工。

フッター文字列にクエリー数をだしています。

/*************************************************************

 * フッターにクエリー数

 *************************************************************/

function fotter_add_query($content) {

    global $wpdb;

    $timer = "({$wpdb->num_queries} queries.";

    $timer .= timer_stop(false) . "seconds.)";

    return $content . ' ' . $timer;

}

add_filter('thematic_footertext', 'fotter_add_query');

などなど。

ここのサイトでは他にも、記事タイトルにカレンダーだしてり、いろいろしていますがパターンはほぼ全ていっしょです。 🙂

ひとつだけ違うのが、コメント、トラックバック・ピンバックの表示で、Thematic 標準ではそれぞれ分けた形で表示となるのですが、hiromasa.another はずらっと並べる形にしていたので、それは comment.php をコピーして修正しています。

functions.php でも無理矢理やればできたのですが、おそらくは Thematic 作者さんの意図外でしたのでやめました。 こういうときは素直にいったほうが良さそうです。 🙂

てなわけで、

[tegaki]できた～[/tegaki]

何を隠そう、ぼくは CSS がなんちゃってしか分からないのでそちらに時間がかかりました。。 まだおかしいところありますが、とりあえず。。

制作は Linux 上の Firefox で確認。 一応、IE6 もそれなりにでるようにしています。 ぼくは VMWare 上の XP をわざと IE6 のままにしていてそれを、Unity で Linux のデスクトップにだして確認する方法をとっています。

テーマフレームワークは CSS さくさくできる方なら、WordPress がそれほど分からなくてもテーマつくれちゃいますね。 あとは、PHP をつかって細かい差し込みをしていくイメージでしょうか。

ためしてがってん。 🙂

がってん、がってん、がってん。