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

WordPressにはカレンダーを表示する「get_calendar()」という関数が標準で搭載されています。
今回は、このget_calendar()を使って出力されるカレンダーについて確認とアレンジをしてみます。
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;
}
終わりに
実際にget_calendar()を記述する場合、ウィジェットやフッターに記述する場合が多いかと思われます。
その際は、tableタグにheightやwidth等該当のプロパティについて記述して頂ければOKです。
ディスカッション
コメント一覧
まだ、コメントがありません