WordPressのget_calendar()を参考にボタン型のカレンダーを作る

WordPressのget_calendar()を参考にボタン型のカレンダーを作る

PHPでカレンダーを作りたくて、リンクじゃなくてボタンにして、クリックした日付を取得したくて、WordPressのget_calendar()を改造して使ってみたメモ。何かの用途へのヒントにでもなれば幸いです。


枠組み

2~5行目は下準備。タイムゾーンを合わせて、まずは現在の日にちを$dateという変数に入れておきます。7行目に入る記述はのちほど。

18行目で日付が出力されます。最初にページが開いた時は本日、カレンダーがクリックされたら、その日付が入るようにします。

21行目でカレンダーを出力します。get_rsv_calendar()という独自の関数を作って、指定した年と月のものを出力させます。

どんな構造のカレンダーが欲しいのか

本題に入る前に、htmlとしてどんな形のカレンダーを出力させたいのか考えてみます。

既存のものを見てみる

WordPressでカレンダーと言えば、get_calendar()というテンプレートタグがありますよね。当月の投稿リンク付きのカレンダーが出力されます。このテンプレートタグの実態はwp-includes/general-template.phpに書いてあって、出力されたhtmlは(私の環境では)こんな感じでした。

ここまでのテンプレートがあるんですから、これを使わない手はないですよねー! でも投稿へのリンクが出したいわけではなくて、日付部分はsubmitボタンにして、どのボタンが押されたか特定しないといけないとなると…

こんな形で出力したい

日付の情報をhidden属性で持たせて、ボタンのvalueを日にして、こんな形にして出せばいいのか、な? これなら、

さっきコードのこの部分を、

こう書くことで、クリックされたボタンと同じform内のhidden属性、dateという名前の「YYYY-MM-DD」というvalueを取得できます。これを、冒頭で現在の日付を格納した$dateへ上書きすることによって、クリックした日付を表示できる、という流れになります。

もうちょっと省コードで

上記のコードでも良いと思うのですが、formとhidden属性と、同じことを書いてる部分が多すぎるような…。。もうちょっと軽くならないかなぁと調べてみたところ、

こんな書き方が!ありがとうございます!!

このようにボタン名の配列に日付情報を持たせれば、

取得部分はこんな風に書けば良いんじゃないでしょうか。formの記述も1月分で1組にまとめられて、スッキリしました!

カレンダーの関数を作る

では、上記の形のhtmlを出力すべく、関数をつくります。

get_calendar()のカスタマイズ

wp-includes/general-template.phpにあるのをコピーしてきて、get_rsv_calendar(年, 月, YYYY-MM-DD)という関数で呼び出せるよう修正してみます。

functions.php

カスタマイズしたものがこちら。長くてすみません…! 週の始まりをいつにするとかそういう一般設定からできるところも極力残しています。

呼び出すget_rsv_calendar(年, 月, YYYY-MM-DD)の3つめの引数の日付と一致するtdにはid=”current”を、本日のtdにはid=”today”を付加するので、CSSで色を調整できます。

WPじゃない場合

さらに、普通のPHPで動かしたいとき用に、上記のコードからWP特有の部分を外したものがこちら。

これで、WPじゃなくてもカレンダーが出力されます。

ブラウザで見てみる

ちゃんと実装できてれば、現時点ではこのような形になるはず。(CSSによって見え方は違います。)

140429-2

ちゃんとカレンダーがボタンで出来てますね。クリックして動作を確かめてみましょう。日付が反映されればOKです!

CSSでテキストリンクっぽく

CSSをこんなふうに書いてみると、

140429-3

カレンダーっぽくなりました。クリックした日と本日に色がつきます。もちろん色はお好みで。

なお、

この部分を

と書けば、カレンダーが横並びになります。

今月から3ヶ月分出力する

さて、だいたいこれでOKなのですが、3ヶ月分出したいからと言って

と、書くわけにはいかないですよね。ここも変数で書いてみます。

このように書くことで、本日の日付から計算してカレンダーを取得してくれます。8行目の数値を変えれば、何ヶ月分でも取得できます。

140429-4

キャプチャはこんな感じ。以上ですー!

公開日:2014/04/29
更新日:2014/05/22

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

当サイトはスパム対策のため Akismet プラグインを利用しています。コメントデータの処理方法はこちらをご参照ください。

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)