カレンダーウィジェットをAjaxで切り替える

カレンダーウィジェットをAjaxで切り替える - カレンダー部分だけを更新する

説明

ウィジェットベースでテーマを構築していてカレンダーを表示してみた。標準では、前月や次月のリンク先はそれぞれの月のアーカイブページとなっているのだが、記事を探すだけであればカレンダー部分だけを更新するほうが便利なのではと考え、そのアイデアを実装してみた。
実装は「カレンダーウィジェットのリンク部分の変更」、「リンククリック時のJavaScript関数の追加」、「更新するカレンダー部分のレスポンス対応」の3パートに分かれる。 まずはカレンダーウィジェットの前月や次月のリンクをJavaScriptで対応する部分。これはwidgets_initアクションで行うのがいいと思い、functions.phpに次のように追加。
add_action( 'widgets_init', 'mytheme_widgets_init' );

function mytheme_widgets_init() {
	add_filter( 'get_calendar', 'mytheme_get_calendar' );
}

function mytheme_get_calendar( $out ) {
	return str_replace( ' id="next"><a ', ' id="next"><a onclick="update_calendar(this.href); return false;" ', 
		str_replace( ' id="prev"><a ', ' id="prev"><a onclick="update_calendar(this.href); return false;" ', $out ) );
}
これでウィジェットのカレンダーにて、前月および次月のリンクをクリックすると、JavaScriptのupdate_calendar関数が呼び出されるようになる。update_calendar関数のパラメータでthis.hrefを指定することで、前月または次月アーカイブのリンク先のURLを渡しているのが、今回のポイントの1つ。実際のupdate_calendar関数は、次の通りだ。
function update_calendar( dateurl ) {
	$.ajax( {
		url: dateurl+'?ajax',
		dataType: 'html',
		success: function( data ) {
			$( '#calendar_wrap' ).html( data );
		}
	} );
}
パラメータdateurlの中身は月アーカイブのURLになるので、それに'?ajax'を追加。そのレスポンスをidがcalendar_wrapの中身と差し替えている。このidがcalendar_wrapは、カレンダーウィジェットによって生成されるdivタグである(ここではjQueryを利用している)。 残りは月アーカイブの対応部分。これは使用しているテーマによって修正するファイルが変わってくる。月アーカイブの表示をarchive.phpで対応しているなら、archive.phpの冒頭に次の記述を追加する。
if ( is_month() && array_key_exists( 'ajax', $_GET ) ) {
	get_calendar();
	exit;
}
get_calendar関数は、カレンダーウィジェットで利用されているもので、投稿記事のリンクを含んだカレンダー内容をtableタグで表示・出力する。get_calendar関数には表示したい年月を指定するパラメータはないが、月アーカイブページで呼び出すことで年月の指定は特別操作する必要はない。 実際に適用したサイトは「こちら」。少しでも投稿記事の閲覧が増えるようになるといいんだけどね。

関連

  • add_action - アクション関数を追加する
  • add_filter - フィルター関数を追加する
  • get_calendar - カレンダーを表示する
  • is_month - 月別アーカイブページか調べる

お勧めコンテンツ

has_action(2011年2月18日 登録)

mixed has_action( $tag, [ mixed $function_to_check = false ] )
WordPressタグにアクションが登録されているか調べる。

get_archives_link(2012年3月6日 登録)

string get_archives_link( string $url, string $text [ , string $format = 'html' [ , string $before = '' [ , string $after = '' ] ] ] )
アーカイブページのリンクテキストを取得する。

wp_dropdown_pages(2015年4月27日 登録)

string wp_dropdown_pages( [ mixed $args = '' ] )
ドロップダウン形式の固定ページリストを表示または取得する。

wp_unschedule_event(2014年5月26日 登録)

void wp_unschedule_event( int $timestamp, string $hook [ , array $args = array() ] )
登録済みのアクションをスケジュールから外す。

wp_localize_script(2017年5月25日 登録)

bool wp_localize_script( string $handle, string $object_name, array $l10n )
スクリプト向けの変数を追加する。

最終更新日時 : 2011-08-22 14:09