[WP] カレンダーをカスタマイズ

タグ :

WordPress カスタマイズについてまとめるシリーズです。
今回は、カレンダーのカスタマイズについてまとめます。

wp_calendar_image

WordPress デフォルトのカレンダー機能を用いると、表示されている「前月」と「次月」をクリックすると月別アーカイブのページに遷移する仕様になってしまいます。
今回はこの「前月」と「次月」のクリックでページ遷移させることなく、カレンダーの 表示が切り替わるというプラグインの設定をまとめたいと思います。
さらに、そのプラグインをカスタマイズして、「前月」と「次月」の部分を上部の年月日の横に表示させるようにする方法をまとめます。

プラグインの設定

カレンダーのプラグインには「AJAX Calendar」というものを使用します。
以下のサイトよりダウンロードします。

サイト「http://urbangiraffe.com/plugins/ajax-calendar/

ダウンロードしたフォルダごとサーバ環境へアップロードします。下記赤字参照。

必要なファイルは PHP ファイルのみです。「locale」というフォルダは言語指定で使用する場合もありますが、無くても動作します。

設置が完了したら WordPress 内で設定を行います。
管理画面の「外観」の「ウィジェット」を開きます。そこで「AJAX Calendar」という項目が追加されているので、それをデフォルトの「カレンダー」という項目と置き換えて設定します。

wp_calendar_plugin1 wp_calendar_plugin2

設定の「Title」にはカレンダー表示のタイトルを記入します。「Category IDs」には今回は全てのカテゴリー内の記事を表示させたいので、何も記入せずに保存します。

これで設定完了です。ブラウザで確認してみましょう。
「前月」と「次月」をクリックすると画面遷移せず、カレンダー表示がその月の表示に切り替わるはずです。

表示のカスタマイズ

本来はこのままで OK となりますが、「前月」と「次月」がカレンダーの下部に表示されているのが気に食わなかったので、カスタマイズして変更しようと思います。
カスタマイズには、WordPress のコアファイルである「wp-includes/general-template.php」を編集するのが手っ取り早いですが、今後 WordPress をアップロードしたりしたときに、いちいち編集し直すのは面倒くさいので、ダウンロードしたプラグインファイルを編集したいと思います。

編集するファイルは先程ダウンロードして設置した「ajax-calendar.php」です。そもそも、このファイルでどうやって画面遷移をさせないようにしているかというと、wp でカレンダーを取得してくる関数「get_calendar()」で取得してきた文字列の a タグ部分を文字列置換により js コードを挿入しているだけでした。なので、同じようにカレンダー表示用の文字列を取得し、文字列置換などにより、表示順序を変更させることにしました。
ファイルの 76 行目辺りにある関数「get_calendar()」を変更します。変更内容は以下になります。

[ コード ]
function get_calendar() {
	global $wpdb, $m, $monthnum, $year, $wp_locale, $posts;
	add_filter( 'query', array( &$this, 'modify_calendar_query' ) );
	$text = get_calendar( true, false );
	remove_filter( 'query', array( &$this, 'modify_calendar_query' ) );

	$cap = substr($text, strpos($text, '<caption>') + 9, 11);
	if(!strpos($cap, '月')) {
		$cap = substr($text, strpos($text, '<caption>') + 9, 12);
	}
	$cap = '<caption>'.$cap;
	$out = $cap;
	if(strpos($text, '&laquo; ')) {
		$apos = strpos($text, '<td colspan="3" id="prev">');
		$apos += strlen('<td colspan="3" id="prev">');
		$sub = substr($text, $apos);
		$bpos = strpos($sub, '</a>');
		$ref = substr($text, $apos + 3, $bpos);
		$ref = '<a '.'onclick="microAjax(this.href + \'?ajax=true\',show_micro_ajax); return false" '.$ref;
		$prev = substr($text, strpos($text, '&laquo; '), 12);
		if(!strpos($prev, '月')) {
			$prev = substr($text, strpos($text, '&laquo; '), 13);
		}
		$prev = $ref.$prev.'</a>';
		$out .= $prev;
	}
	if(strpos($text, ' &raquo;')) {
		$apos = strpos($text, '<td colspan="3" id="next">');
		$apos += strlen('<td colspan="3" id="next">');
		$sub = substr($text, $apos);
		$bpos = strpos($sub, '</a>');
		$ref = substr($text, $apos + 3, $bpos);
		$ref = '<a '.'onclick="microAjax(this.href + \'?ajax=true\',show_micro_ajax); return false" '.$ref;
		$next = substr($text, strpos($text, ' &raquo;') - 4, 12);
		if(!strpos($next, '月')) {
			$next = substr($text, strpos($text, ' &raquo;') - 5, 13);
		}
		$next = $ref.$next.'</a>';
		$out .= $next;
	}
	$out .= '</caption>';
	$text = str_replace($cap, $out, $text);

	return $text;
}
function get_calendar() {
	global $wpdb, $m, $monthnum, $year, $wp_locale, $posts;
	add_filter( 'query', array( &$this, 'modify_calendar_query' ) );
	$text = get_calendar( true, false );
	remove_filter( 'query', array( &$this, 'modify_calendar_query' ) );

	$text = str_replace( '<td colspan="3" id="next"><a', '<td colspan="3" id="next"><a onclick="microAjax(this.href + \'?ajax=true\',show_micro_ajax); return false"', $text );
	$text = str_replace( '<td colspan="3" id="prev"><a', '<td colspan="3" id="prev"><a onclick="microAjax(this.href + \'?ajax=true\',show_micro_ajax); return false"', $text );

	return $text;
}
#wp-calendar tfoot {
	display: none;
}
詳しい説明は後述します。
変更前コードの 7,8 行目がカレンダー表示用文字列を置換している部分なので、この部分を変更します。

コード解説

変更した PHP コードについて説明します。

[ 7行目〜12行目 年月文字列の取得 ]
$cap = substr($text, strpos($text, '<caption>') + 9, 11);
if(!strpos($cap, '月')) {
	$cap = substr($text, strpos($text, '<caption>') + 9, 12);
}

カレンダー上部に表示する「2013年4月」とかいう文字列を取得します。年月文字列の文字数バイトは一桁月の場合は 11 バイトで、二桁月の場合は 12 バイトとなっているので、文字列切り出し関数である「substr()」により年月文字列を取得します。二桁月であった場合 11 バイトで取得すると最後の「月」という文字列が取得できないので、分岐処理にて取得できていない場合には二桁月であると判定させています。

[ 13行目〜23行目 前月文字列の取得 ]
if(strpos($text, '&laquo; ')) {

前月文字列を取得するために、特殊文字「«」を目印にしています。文字列検索関数「strpos()」により特殊文字の位置を取得します。前月の表示が無い場合は 0 が返ってくるので分岐から外れます。

$apos = strpos($text, '<td colspan="3" id="prev">');
$apos += strlen('<td colspan="3" id="prev">');
$sub = substr($text, $apos);
$bpos = strpos($sub, '</a>');

デフォルトの前月表示で使用しているテーブルタグの「td」を目印にその終端位置を取得し、変数「$apos」に格納します。さらにその「td」の中身の a タグの終端位置を取得し、変数「$bpos」に格納します。これにより「$apos」から「$bpos」までの文字列が前月の a タグ文字列となります。

$ref = substr($text, $apos + 3, $bpos);
$ref = '<a '.'onclick="microAjax(this.href + \'?ajax=true\',show_micro_ajax); return false" '.$ref;

上記で取得した位置情報により a タグ文字列を取得し、JS のクリックイベントを付加して変数「$ref」に格納します。クリックイベントの処理内容は変更前のコード部分をコピーしました。

$prev = substr($text, strpos($text, '&laquo; '), 12);
if(!strpos($prev, '月')) {
	$prev = substr($text, strpos($text, '&laquo; '), 13);
}
$prev = $ref.$prev.'</a>';

前月の表示文字列と上記で取得した a タグ情報を組み合わせて表示用の文字列を変数「$prev」に格納します。

[ 27行目〜40行目 次月文字列の取得 ]
if(strpos($text, ' &raquo;')) {

次月文字列を取得するために、特殊文字「»」を目印にしています。文字列検索関数「strpos()」により特殊文字の位置を取得します。次月の表示が無い場合は 0 が返ってくるので分岐から外れます。
後の処理は前月取得時と同様の処理なので割愛します。

[ 42行目 文字列置換 ]
$text = str_replace($cap, $out, $text);

年月文字列部分に「前月」と「次月」を付加して表示するように変換します。文字列置換関数「str_replace()」により出力用変数「$text」の年月文字列格納変数「$cap」の部分を「前月」と「次月」表示用文字列格納変数「$out」に変換します。

[ CSS デフォルト表示の非表示化 ]

デフォルトの下部に表示されている「前月」と「次月」の部分は、CSS で非表示にします。PHP ファイルで削除した方がカッコいいのですが、できなかったので妥協しました。。。

まとめ

表示の微調整は CSS にて行えばよいと思います。だったら最初から CSS だけでやればいいじゃないか、という意見は置いておいて。。。

今回はかなり強引に変換させてしまいましたが、きっともっと簡単にできる方法があると思います。さらに人様のプラグインをいじって変更させてしまっているので、あまりよろしくありません。だったら公開するな、と言いたいところですが、結構頑張ったので載せさせてください。。。

とまあ、色々と問題はありますが、今回のように WordPress のカスタマイズは他にも如何様にもできます。色々なカスタマイズを施して、オリジナルのブログを作りましょう。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed