新着情報の日付の表示を変更してみる
WordPressの管理画面のメニュー「設定」>「一般」の中に「日付フォーマット」という箇所があります。
表示は上の画像のように、「年月日」の表記や「-(ハイフン)」「/(スラッシュ)」などの表記に変更することが可能です。 今回は日付フォーマットについてのおさらいと、いろいろな日付の表示について紹介できればと思います。
今回の記事の目的
- 日付と時刻の書式をおさらいする
- 日付のフォーマットに「時間」を追加してみる
- テンプレートに反映してみる
普段日付フォーマットを触ることはないかもしれませんが、もし表記を変えることがあれば是非参考にしてみてください。 例えば、日にちの表示で「1日」ではなく「01日」のように1桁の場合に”ゼロ”を付けたい、ということがデザイン上数字を揃えたくなるということがあるかもしれません。 また、その反対で”ゼロ”を付けたくない、ということもあるかもしれませんね。(実際に私はありました・・・!) そういったカスタマイズの必要がある場合は、ここで日付フォーマットをおさらいしておきましょう!
WordPressの日付と時刻の書式をみてみる
- l = 曜日(小文字の L)
- n = 月。
- j = 日にち。
- S = 英語で日にちにつける接尾辞 (1st, 2nd, 15th の st, nd, th)
- Y = 4桁の年(小文字の y を使うと2桁になる)
日 d 日。先頭にゼロをつける。 01 から 31 j 日。先頭にゼロをつけない。 1 から 31 S 英語形式の序数を表す2文字のサフィックス。
jと一緒に使用できる。1stや 2nd , 3rd , 15thなどに含まれる、st, nd, rd または th。 曜日 l フルスペル形式。(小文字の ‘L’) Sunday から Saturday D 3文字のテキスト形式。 Mon から Sun 月 m 数字。先頭にゼロをつける。 01 から 12 n 数字。先頭にゼロをつけない。 1 から 12 F フルスペルの文字。 January から December M 3文字形式。 Jan から Dec 年 Y 4桁の数字。 例: 1999 または 2003 y 2桁の数字。 例: 99 または 03 時刻 a 午前または午後(小文字) am または pm A 午前または午後(大文字) AM または PM g 時。12時間単位。先頭にゼロを付けない。 1 から 12 h 時。12時間単位。先頭にゼロをつける。 01 から 12 G 時。24時間単位。先頭にゼロを付けない。 0 から 23 H 時。24時間単位。先頭にゼロをつける。 00 から 23 i 分。先頭にゼロをつける。 00 から 59 s 秒。先頭にゼロをつける。 00 から 59 T タイムゾーンの略称 例: EST, MDT … 全ての日付/時刻 c ISO 8601 2004-02-12T15:19:21+00:00 r RFC 2822 Thu, 21 Dec 2000 16:01:07 +0200
上記の引用のように、意外と多くの表示の方法が用意されています。 また、管理画面だけでなく、WordPressのタグを使って時刻を表示させる場合にも書式は有効です。
<?php the_time('l, F jS, Y') ?> Friday, September 24th, 2004
意外と知らない方も多いかもしれませんが、WordPress Codexの「日付と時刻の書式」は、管理画面の日付フォーマットのエリアにリンクがあるんです。
私も最近まで知りませんでした・・・。 それでは、少し例をみていきましょう。
時間とAM/PMの表記をする
g:i a 12:50 am
英語の表記
l, F jS, Y Saturday, November 6th, 2010
生年月日と投稿時刻、午前午後までを表示
Y年m月d日 g時i分 A 2015年11月06日 12時50分 AM
午前午後はAM/PMと表示されますが、年月日と日本語を入れることも可能です。 それでは、WordPressの管理画面で時刻を設定してみましょう。
「日付フォーマット」に書式を入力する
冒頭の今回の目的にあったような”日付のエリアに時刻も一緒に掲載したい場合”は、「日付フォーマット」のカスタムを選択し、「Y-n-j H:i:s」に変更することで実現可能です。 この場合、表示は「2015-10-5 18:34:35」のようになります。
テンプレートに反映してみる
これまでの作業をWordPressの画面でおこなうと、実際に時刻まで表示することができますが、多くのテンプレートは日付までしか想定していないため、時刻が入ることで2行になってしまうことがあります。
まとめ
「日付フォーマット」は普段あまり気にしない機能かもしれませんが、意外と使い道があるかもしれません。 今回の内容をまとめていくと・・・。
- 意外と多い日付と時刻の書式
- 日付のフォーマットで表示を変更できる
- テンプレートで利用する場合は、見た目をCSSで調整する
テンプレートでのカスタマイズはカスタム内容や日付・時刻の表示設定で変わってきますが、こういった「CSS」でのデザイン調整はブログの運用ではよくみられることですね。 念のためカスタマイズ前にはバックアップはしっかり取っておきましょう。