横型カレンダープラグイン for WordPress(WP2.3/2.5対応版)

以前に「横型カレンダープラグイン for WordPress」を公開していました。
ただ、WordPress 2.3で使うと、年のところに「N」の文字が表示されるというご指摘がありました。
そこで、この点を修正しました。

なお、WordPress 2.3.3日本語版と、WordPress 2.5RC2で動作を確認しました。

↓WordPress 2.5RC2での表示

1.旧版の削除

旧版のプラグインをご利用になっていた方は、まずそれを削除します。
WordPressの「wp-content」→「plugins」ディレクトリにある「horizontal_calendar.php」を削除してください。

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

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

HorizontalCalendar_1_01.zip

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

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

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

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

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

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

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

<?php get_calendar_horizontal(); ?>

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

・
・
・
<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>

<?php get_calendar_horizontal(); ?>

<hr />

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

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

この横型カレンダーでは、カレンダー内の各要素に以下のような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;
}
#wp-calendar-horizontal a:hover {
    text-decoration : underline;
}
#wp-calendar-horizontal .saturday,
#wp-calendar-horizontal .saturday a {
    color : #00ffff;
}
#wp-calendar-horizontal .sunday,
#wp-calendar-horizontal .sunday a {
    color : #ff0000;
}
#today {
    background-color : #cccccc;
    border : 1px solid #000000;
}