【PHP】カレンダーを表示するテンプレートタグget_calendar()を使ってカレンダーをカスタマイズ

2019年5月12日2019年5月13日

WordPressにはカレンダーを表示する「get_calendar()」という関数が標準で搭載されています。

今回は、このget_calendar()を使って出力されるカレンダーについて確認とアレンジをしてみます。

1. get_calendar関数について
2. 実際に表示した場合
3. カレンダーをカスタマイズ
4. 終わりに

get_calendar関数について

前述の通り、カレンダーを表示する関数です。
以下の情報をどうするか決定する、2つの引数が存在します

略称で表示するか（英語表記の場合）※基本的に英語版のWordPressの場合に引数を指定する
画面に出力するか、プログラム内の変数にデータとして渡すか

今回は、「日本語表記が前提＋そのまま表示」なので、引数を指定せずデフォルトで話を進めていきます。

実際に表示した場合

以下の記述でカレンダーが表示されます。

<?php get_calendar(); ?>

画面上では以下のように表示されます。
こちらのカレンダーについて、次の項からアレンジを加えていきます。

カレンダーをカスタマイズ

デフォルトの状態から、罫線等を加えるカスタマイズを行います。
最終的には、以下のような形にします。

get_calendar()で表示されたカレンダー（4月）のHTML表記を見てみると、以下の通りです。
<table>タグで管理されています。

<table id="wp-calendar">
	<caption>2019年4月</caption>
	<thead>
	<tr>
		<th scope="col" title="月曜日">月</th>
		<th scope="col" title="火曜日">火</th>
		<th scope="col" title="水曜日">水</th>
		<th scope="col" title="木曜日">木</th>
		<th scope="col" title="金曜日">金</th>
		<th scope="col" title="土曜日">土</th>
		<th scope="col" title="日曜日">日</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
		<td colspan="3" id="prev" class="pad"> </td>
		<td class="pad"> </td>
		<td colspan="3" id="next"><a href="#">5月 »</a></td>
	</tr>
	</tfoot>
	<tbody>
	<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
	<tr>
		<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
	</tr>
	<tr>
		<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
	</tr>
	<tr>
		<td>22</td><td><a href="#" aria-label="2019年4月23日 に投稿を公開">23</a></td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
	</tr>
	<tr>
		<td>29</td><td>30</td>
		<td class="pad" colspan="5"> </td>
	</tr>
	</tbody>
	</table>

こちらのタグに対し、以下のCSSを記述します。
基本的にコピペでOKです。

#wp-calendar{
border-collapse:collapse;
}
#wp-calendar th,#wp-calendar td{
padding:2px 2px;
border:solid 1px blue;
}
#wp-calendar tfoot td{
border:none;
}
#wp-calendar tfoot #prev{
text-align:left;
}
#wp-calendar tfoot #next{
text-align:right;
}