「WordPressで学ぶPHP(4)通信編」を発売しました。
本書は、「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造編」「WordPressで学ぶPHP(3)関数編」の続編にあたり、Webブラウザとサーバー(PHP)との通信と、PHPから他のサーバーに通信することについて解説します。
横型カレンダープラグイン for WordPress(WP2.3/2.5対応版)
以前に「横型カレンダープラグイン for WordPress」を公開していました。
ただ、WordPress 2.3で使うと、年のところに「N」の文字が表示されるというご指摘がありました。
そこで、この点を修正しました。
なお、WordPress 2.3.3日本語版と、WordPress 2.5RC2で動作を確認しました。
1.旧版の削除
旧版のプラグインをご利用になっていた方は、まずそれを削除します。
WordPressの「wp-content」→「plugins」ディレクトリにある「horizontal_calendar.php」を削除してください。
2.プラグインのインストール
横型カレンダーのプラグインは、以下からダウンロードします。
プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション(寄付)を行っていただけると幸いです。
ドネーションの方法は、こちらのページをご参照ください。
また、このプラグインの他にも、いくつかのプラグインを配布しています。
配布中のプラグインは、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; }