終了したイベントを自動的に過去のイベントにする

2012/05/16追記・修正

@jim0912さんよりご指摘を頂きましたのでhome.phpのソースを修正しております。ありがとうございます。

https://twitter.com/#!/jim0912/status/202175365601439744

var_dump(date( 'Y/m/d H:i:s' )); //string '2012/05/15 15:06:01' (length=19)<br />
var_dump(date_i18n( 'Y/m/d H:i:s' )); //string '2012/05/16 00:06:01' (length=19)

上記をvar_dumpしたところ確かにdate()だとズレてますね。(2012/05/16 0時頃確認)
というわけでdate_i18n()を使いましょう。
関数リファレンス/date i18n – WordPress Codex 日本語版


先日おじゃましたWordBench神戸分科会の「案件で詰まっていることを晒してみる」であった以下の質問に答えてみました。
詳細については案件で詰まっていることを晒してみる #wbkobe – by shigemk2を参照。

トップページにイベントの部分があるけど、終わったら「過去のイベント」に移行したいこれを自動化するにはどうしたらよいのだろうか。

覚えている限りの仕様としては

  • トップの「開催中のイベント」に”2012/05/14~2012/06/01 イベント名”形式で出力
  • 終了したものに関しては「過去のイベント」部分に同様の形式で出力

という訳で思い浮かんだのがカスタムフィールドを用いて開催日・終了日を設定、終了日の値を元に振り分けるというもの。

Custom Field Templateプラグイン設定

カスタムフィールドの設定はCustom Field Templateプラグインに任せることに。
インストール後、”設定 > カスタムフィールドテンプレート > テンプレートコンテンツ”に以下を記述。

[start_date]<br />
type = textfield<br />
label = 開始日<br />
date = true<br />
dateFirstDayOfWeek = 0<br />
dateFormat = yyyy/mm/dd<br />
startDate = (new Date()).asString()</p>
<p>[end_date]<br />
type = textfield<br />
label = 終了日<br />
date = true<br />
dateFirstDayOfWeek = 0<br />
dateFormat = yyyy/mm/dd<br />
startDate = (new Date()).asString()

投稿ページのカスタムフィールドテンプレートに開催日・終了日のDatepickerが追加されたのでイベント日時はここで設定。

home.phpの設定

出力部分に関しては以下の通り。meta_queryでカスタムフィールドの値を元に検索しています。meta_queryの使い方に関しては query_posts(WP_Queryクラス)でカスタムフィールドを使う:WordPress私的マニュアル を参照。

&lt;section&gt;<br />
	&lt;h1&gt;開催中のイベント&lt;/h1&gt;<br />
	&lt;?php<br />
	$current_date = date_i18n( 'Y/m/d' );<br />
	$args = array(<br />
		'meta_query' =&gt; array(<br />
			array(<br />
				'key' =&gt; 'end_date',<br />
				'value' =&gt; $current_date,<br />
				'compare' =&gt; '&gt;=',<br />
				'type' =&gt; 'DATE'<br />
			)<br />
		)<br />
	);<br />
	$output = '';<br />
	query_posts( $args );<br />
	if ( have_posts() ) :<br />
		$output .= '&lt;dl&gt;';<br />
		while ( have_posts() ) : the_post();<br />
			$output .= '&lt;dt&gt;' . get_post_meta( $post-&gt;ID, 'start_date', true ) . '~' . get_post_meta( $post-&gt;ID, 'end_date', true ) . '&lt;/dt&gt;';<br />
			$output .= '&lt;dd&gt;' . get_the_title() . '&lt;/dd&gt;';<br />
	endwhile;<br />
		$output .= '&lt;/dl&gt;';<br />
		echo $output;<br />
		wp_reset_query();<br />
	else :<br />
		// イベントがない場合の処理<br />
		echo '&lt;p&gt;イベントないよ~&lt;/p&gt;';<br />
	endif;<br />
	?&gt;<br />
&lt;/section&gt;&lt;!-- /section --&gt;<br />
&lt;section&gt;<br />
	&lt;h1&gt;終了したイベント&lt;/h1&gt;<br />
	&lt;?php<br />
	$current_date = date_i18n( 'Y/m/d' );<br />
	$args = array(<br />
		'meta_query' =&gt; array(<br />
			array(<br />
				'key' =&gt; 'end_date',<br />
				'value' =&gt; $current_date,<br />
				'compare' =&gt; '&lt;',<br />
				'type' =&gt; 'DATE'<br />
			)<br />
		)<br />
	);<br />
	$output = '';<br />
	query_posts( $args );<br />
	if ( have_posts() ) :<br />
		$output .= '&lt;dl&gt;';<br />
		while ( have_posts() ) : the_post();<br />
			$output .= '&lt;dt&gt;' . get_post_meta( $post-&gt;ID, 'start_date', true ) . '~' . get_post_meta( $post-&gt;ID, 'end_date', true ) . '&lt;/dt&gt;';<br />
			$output .= '&lt;dd&gt;' . get_the_title() . '&lt;/dd&gt;';<br />
	endwhile;<br />
		$output .= '&lt;/dl&gt;';<br />
		echo $output;<br />
		wp_reset_query();<br />
	else :<br />
		// イベントがない場合の処理<br />
		echo '&lt;p&gt;イベントないよ~&lt;/p&gt;';<br />
	endif;<br />
	?&gt;<br />
&lt;/section&gt;&lt;!-- /section --&gt;

ちゃちゃっと書いたのでいろいろ問題あるかもですねー。

Custom Field Templateプラグインでajaxzip3を使う

進めている案件で使うかもしれないのでメモです。(既にありそうなネタだけど)
カスタムフィールド拡張プラグイン Custom Field Template と郵便番号検索API ajaxzip3 を使って、投稿のカスタムフィールドに郵便番号を入力したら住所が出るようにします。
それぞれの詳しい使い方については本家を参照下さい。

カスタムフィールドコンテンツ登録

“設定 > カスタムフィールドテンプレート”のコンテンツ部分に以下を記述します。

[zipcode]<br />
type = text<br />
size = 10<br />
label = 郵便番号</p>
<p>[pref]<br />
type = text<br />
size = 10<br />
label = 都道府県</p>
<p>[addr]<br />
type = text<br />
size = 50<br />
label = 市町村区

投稿に郵便番号・都道府県・市町村区の入力欄が表示されました。

郵便番号を入力したら自動的に都道府県・市町村区に住所が入力されるようにします。

ajaxzip3読み込み、JavaScript記述

ajaxzip3の設置方法を見ると

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
でスクリプトを読み込み
&lt;input type=&quot;text&quot; name=&quot;zip01&quot; size=&quot;10&quot; maxlength=&quot;8&quot; onKeyUp=&quot;AjaxZip3.zip2addr(this,'','pref01','addr01');&quot;&gt;<br />
&lt;input type=&quot;text&quot; name=&quot;pref01&quot; size=&quot;20&quot;&gt;<br />
&lt;input type=&quot;text&quot; name=&quot;addr01&quot; size=&quot;60&quot;&gt;
のonKeyUpイベント実行時にname属性”pref01″,”addr01″のフィールドに値を入力しているようなのでJavaScriptを追加する事に。

JavaScriptの記述箇所は”設定 > カスタムフィールドテンプレート”のテンプレートインストラクションになります。

JavaScriptを記述する前にカスタムフィールドのname値が必要なので投稿ページのソースを見ておきます。

&lt;dl id=&quot;dl_zipcode0_0&quot; class=&quot;dl_text&quot;&gt;<br />
	&lt;dt&gt;&lt;span&gt;&lt;label for=&quot;zipcode0_0&quot;&gt;zipcode&lt;/label&gt;&lt;/span&gt;&lt;/dt&gt;<br />
	&lt;dd&gt;&lt;p class=&quot;label&quot;&gt;郵便番号&lt;/p&gt;&lt;input id=&quot;zipcode0_0&quot; name=&quot;zipcode[0][]&quot; value=&quot;&quot; type=&quot;text&quot; size=&quot;10&quot; /&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
&lt;dl id=&quot;dl_pref1_0&quot; class=&quot;dl_text&quot;&gt;<br />
	&lt;dt&gt;&lt;span&gt;&lt;label for=&quot;pref1_0&quot;&gt;pref&lt;/label&gt;&lt;/span&gt;&lt;/dt&gt;<br />
	&lt;dd&gt;&lt;p class=&quot;label&quot;&gt;都道府県&lt;/p&gt;&lt;input id=&quot;pref1_0&quot; name=&quot;pref[1][]&quot; value=&quot;&quot; type=&quot;text&quot; size=&quot;10&quot; /&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
&lt;dl id=&quot;dl_addr2_0&quot; class=&quot;dl_text&quot;&gt;<br />
	&lt;dt&gt;&lt;span&gt;&lt;label for=&quot;addr2_0&quot;&gt;addr&lt;/label&gt;&lt;/span&gt;&lt;/dt&gt;<br />
	&lt;dd&gt;&lt;p class=&quot;label&quot;&gt;市町村区&lt;/p&gt;&lt;input id=&quot;addr2_0&quot; name=&quot;addr[2][]&quot; value=&quot;&quot; type=&quot;text&quot; size=&quot;50&quot; /&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;
都道府県は”pref[1][]”、市町村区は”addr[2][]”なので先の設置例の”pref01″、”addr01″部分を置き換えます。

また、記述例ではonKeyUpイベントをinput要素に記述していますがCustom Field Templateでの設定方法がよく分からなかったので郵便番号入力フィールドのid、”zipcode0_0″を使いjQueryで処理したいと思います。

というわけでテンプレートインストラクションに以下を記述して完成。

&lt;script src=&quot;http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;<br />
&lt;script&gt;<br />
jQuery(function(){<br />
	jQuery('#zipcode0_0').keyup(function(e){<br />
		AjaxZip3.zip2addr(this,'','pref[1][]','addr[2][]');<br />
	});<br />
});<br />
&lt;/script&gt;

郵便番号を入力すると無事住所が自動入力されました。

出来てしまうと簡単でしたがフィールドへの入力、name属性じゃなくてid属性を使うものと勘違いしてたので “AjaxZip3.zip2addr(this,”,’pref1_0′,’addr2_0′);” と指定してしまい躓きました…

参考サイト