Home / Diary / サイトリニューアルに関する覚書

サイトリニューアルに関する覚書

ブログツール

Wordpress 2.3を使用。2.5はプラグインの仕様が変わってしまったので、使用するプラグイン全てが対応するまで見送る方向。

なぜWordpress？

便利だから。特にページ作成機能。普及しているのでプラグインも多い。

欠点はコードのカオスっぷり。統一感の無さが泣ける。ってか1.xの頃から全く変わってないのは呆れるわ。

サイトをどのように弄ったか

静的生成廃止

テンプレートに修正が入ると全ページ出力し直さなければならない
時間指定投稿ができない
キャッシュ系の機能とプラグインが豊富になってきた

などなどの理由により。

レイアウト

サイドバーを取り払い、エラスティックにしてAutoPagerizeにも対応。なるべくシンプルになるように心がけた。

キャッシュの利用

Wordpressを素のままで扱うとSQLクエリの過多でサーバーが重くなってしまうので、積極的にキャッシュを利用するようにした。

具体的にはWordpressに標準で備わっているオブジェクトキャッシュ。さらにプラグインのWP Super cacheを導入。極力データベースへアクセスしないようにした。

この時点でトップページを開いた時に要する時間は初回2秒前後、キャッシュ後0.3秒前後。

サイトの構成が安定したら一部ファイルにmod_expireを設定して、クライアント側でのキャッシュも行ってもらうつもり。レイアウトに使っている画像なんかは特に。

画像の連結

縦と横のサイズが固定されている要素に繰り返さないで表示する画像は連結できるので、RPGツクールのマップチップの如く、ひたすら連結。

参考：icon_chip.png

トータルサイズは微増するが、httpアクセスが激減するという効果があるので実に有効。ページのローディングを妨げないようになる。

サイズが固定されていなくても、条件次第ではチップに組み込むことが可能だったりする。要工夫。

この手法はCSS Spriteとか言うらしい。

JavaScriptの積極的廃止

自分が常にJavaScriptをオフにしていることもあるが、サイトに仕込まれているJavaScriptはよほどのことが無い限り必要ではない、もしくは、無くてもいいようにサイトを設計すべきだと判断した。

というわけで、現在入れているのはGoogle Analytics等のアクセス解析のみ。

あと、JavaScriptじゃないけど「なかのひと」も外した。たまにしか見なかったし、表示するスペースが無かったので。

目次の自動生成

本文からH1～H6の見出しを取得して、それらへのアンカーをリストで表示するようにした。コードはこなかじ。

<?php
if( is_archive( ) && !$already_out ) {
    $already_out = true;
    $header_list = array( );

    foreach( $posts as $p ) {
        array_push( $header_list, "1. [" . preg_replace( '/\[(.*?)\]\(.*?\)/', "$1", $p->post_title ) . "](#p" . $p->ID . ")" );
    }
}
if( is_page( ) ) {
    $header_cnt = 1;
    $header_list = array( );

    function getHeader( $matches ) {
        global $header_cnt, $header_list;
        $title = preg_replace( '/^\s|\s$/', "", preg_replace( '/\[(.*?)\]\(.*?\)/', "$1", $matches[2] ) );
        $tab = str_repeat( "\t", strlen( $matches[1] ) - 2 );
        $anchor = $matches[3] ? $matches[3] : "h" . $header_cnt++;

        array_push( $header_list, $tab . "1. [" . $title . "](#" . $anchor . ")" );
        return $matches[1] . " " . $title . " {#" . $anchor . "}";
    }

    if( $page > count( $pages ) )
        $page = count( $pages );

    $pages[$page-1] = preg_replace( '/\r\n|\r|\n/', "\n", $pages[$page-1] );
    preg_replace_callback('{
    ^(\#{2,6})
    [ ]*
    (.+?)
    (?:[ ]+\{\#([-_:a-zA-Z0-9]+)\})?
    $
    }xm','getHeader', $pages[$page-1] );
}
?>
<?php if( count( $header_list ) > 0 ) : ?>
<div class="index">
<p>目次</p>
<?php
$header_html = Markdown( join( $header_list, "\n" ) );
echo $header_html;
?>

要はMarkdownテキストから見出し部分（行頭が#の連続）を取得して、それらの頭に数字を付けて無理やり順序付きリストにしてからMarkdownに放り込んでいる。idが指定されていないなら自動で付加。