横型カレンダープラグイン for WordPress

2008年3月28日　追記
WordPress 2.3／2.5をお使いの方は、新バージョンをご利用ください。

2007年4月24日　追記
このプラグインは、WordPress 2.1.xにのみ対応しています。
申し訳ありませんが、2.0.xでは正しく動作しません。

Blogにカレンダーを表示している方は、結構多いと思います。
かつては、一般的な表形式のカレンダーが多かったですが、サイドバー上のスペースをそれなりに取ることから、バナーの下に横型のカレンダーを表示する形式もよく見られるようになりました。

WordPressにもカレンダーを出力するタグ（get_calendar）がありますが、このタグは表形式のカレンダーを出力するものです。
WordPress用の横型カレンダーを検索してみましたが、なぜかまだないようでした。

そこで、WordPress用の横型カレンダープラグインを作ってみました。

↓横型カレンダーの表示例

1.プラグインのインストール

横型カレンダーのプラグインは、以下からダウンロードします。

HorizontalCalendar_1_00.zip

プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション（寄付）を行っていただけると幸いです。
ドネーションの方法は、こちらのページをご参照ください。

また、このプラグインの他にも、いくつかのプラグインを配布しています。
配布中のプラグインは、Movable Type Plugin Directoryのページをご参照ください。

Movable Typeのプラグイン開発等のドキュメント「Movable Type Developer's Guide Volume 1」も販売しています。
ご自分でプラグインを作ってみたい方に、ぜひお勧めしたい一冊です。
詳細は特設ページをご覧ください。

ダウンロードしたファイルを解凍すると、「horizontal_calendar.php」というファイルができます。
このファイルを、WordPressの「wp-content」→「plugins」ディレクトリにアップロードします。
そして、WordPressの管理ページにログインし、プラグインのページでこのプラグインを有効化します。

↓横型カレンダープラグインを有効化したところ

2.テンプレートの書き換え

次に、横型カレンダーを表示したい位置に、以下のタグを入れます。

<?php get_calendar_horizontal(); ?>

通常は、ヘッダーのテンプレート（header.php）にカレンダーを追加します。
例えば、WordPress MEの標準のテンプレート（EasyAll）の場合だと、ヘッダーの最後の方に、以下の赤字の行を追加します。

・
・
・
<div id="navcontainer">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>

<?php get_calendar_horizontal(); ?>

<div id="content">
<!-- end header -->

また、get_calendarタグで表形式のカレンダーを表示するようにしていた場合は、テンプレートからget_calendarタグを削除して、表形式のカレンダーが表示されないようにします。

3.スタイルシートの書き換え

この横型カレンダーでは、カレンダー内の各要素に以下のようなIDを割り当てています。

ID	IDが割り当てられる要素
wp-calendar-horizontal	カレンダー全体を囲むp要素
cal-month	今月の月名の部分のspan要素
cal-prev-month	前月の月名の部分のspan要素
cal-next-month	次月の月名の部分のspan要素
today	今日の日付の部分のspan要素

また、要素によっては以下のクラスを割り当てます。

クラス	クラスが割り当てられる要素
saturday	土曜日の日付のspan要素
sunday	日曜日の日付のspan要素

スタイルシートのテンプレートを書き換えて、これらのIDやクラスの記述を追加することで、カレンダーの見た目をカスタマイズすることができます。
お使いのテーマに合わせて、スタイルシートをカスタマイズしてお使いください。

例えば、このエントリーにあげたサンプルのカレンダーでは、スタイルシートに以下のような記述を追加しています。

#wp-calendar-horizontal {
    margin : 0;
    padding : 3px 0;
    text-align : center;
    font-size : 75%;
}
.saturday, .saturday a {
    color : #00ffff;
}
.saturday a {
    text-decoration : underline;
}
.sunday, .sunday a {
    color : #ff0000;
}
.sunday a {
    text-decoration : underline;
}
#today {
    background-color : #cccccc;
    border : 1px solid #000000;
}

4.「MT用Flashカレンダー for WordPress」も近日公開予定

Kinarie＆May様で配布されている「MT用横型フラッシュカレンダー」は、Flashを使った横型カレンダーで、Movable Typeユーザーに良く使われています。
このFlashカレンダーをWordPressで使うためのカスタマイズ方法も、近日公開する予定です。