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

ブログツール

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

なぜWordpress?

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

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

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

静的生成廃止

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

などなどの理由により。

レイアウト

サイドバーを取り払い、エラスティックにして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じゃないけど「なかのひと」も外した。たまにしか見なかったし、表示するスペースが無かったので。

関連するエントリの表示

表示にはプラグインのSimple Tagsを利用。

タグの設定が甘い上に少ないので微妙に関連していないようなエントリも表示されている気がするが、そのうち解決すると思うので放置中。

目次の自動生成

本文から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が指定されていないなら自動で付加。

URLについて

ワードプレス標準の動的URL設定が融通がきかないので結局mod_rewriteでゴリゴリ書いた。

はてなブックマークの注目エントリーを表示

最初はJSONとか考えたが、HTMLにしてしまうのが最もシンプル且つ効率的(どうせ再利用しないし)だと判断した。

スクリプトの中身はPraggerのRSS::loadで読み込んで適当に数を絞ってるだけ。

ブックマークコメントを表示

JavaScriptを使わずにブックマークコメントを表示を参照。

利用しているプラグイン

WP-PageNavi

Pager、いわゆるカテゴリ等のページで現在のページ番号と前後及び始端終端の番号を表示するやつ、といえば分かるだろうか。Google検索の最下部のアレとか。

スタイルは以下のページから拝借した。

Some styles for your pagination

Akismet

スパム対策として広く使われているプラグイン。要登録。

Spam Karma

こちらもスパム対策。投稿者の投稿頻度、ページを開いてから投稿するまでの時間、内容に含まれるURLの数などなど、様々な手法で評価してスパムかどうかを判断することができる。

Simple Tags

Wordpress標準のタグ機能を拡張するプラグイン。タグクラウドの表示や一括編集、関連したエントリの表示等ができる。

WP Super Cache

一度出力したページをキャッシュすることで、次回以降のDBアクセス時間を無くし、表示までの時間を大幅に短縮することができるプラグイン。何かとDBアクセスを行うWordpressには必須のプラグイン。

PHP Markdown Extra

Markdown記法でエントリを記述できるようになる。可読性が高く、DBも微妙にスリム化できる。このプラグインを通さないようなテキストまでMarkdown記法を使ってしまうほど愛用している。

利用していないが注目したプラグイン

Breadcrumb Navigation XT

パンくずリストを表示するプラグイン。サイトURL設計が微妙にアレなので結局このプラグインからコードを拝借してパンくずリストを生成するようにした。

WP-Amazon

投稿時にAmazonから商品を検索して記事の中に商品の画像とリンクをD&Dでサクっと入れることができるようになるプラグイン。Operaで動かなかったので見送り。

テキストを画像に変換するプラグインwp-DJTR

自分の好きなフォントで表示できるというのは非常に魅力的だったが、画像だらけになるのは嫌なので結局使わなかった。

今後の方針

  • 旧ページを新レイアウトへ以降
  • Wordpressのアップグレード
  • サイト内に自分用wikiを置きたい