【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

30Jul2012

[WordPress]投稿日時をおしゃれにカスタマイズ

先週ty’s empty f’logはデザインリニューアルしました。

その中でブログネタになりそうな製作工程がいくつかありましたので、当分WordPressカスタマイズ記事が続くことでしょう 笑

今回は、投稿日時の表示を”おしゃれ”に表示する方法。

左側の日付が表示されている部分です。
記事タイトルのスクリーンショット

正方形の領域に日付を表示させるデザインは汎用性が高いですので、CSSごと公開します。
どんどん使ってください!

※極力シンプルに紹介するため、要点以外の説明は可能な限り省きます。自分でカスタムした際に動かなかったら「適切なファイルを編集しているか?」「ループ内で使用しているか?」など、今回詳しく説明していない箇所を疑ってください^^

1. テーマ内で日付を表示させるthe_time関数

投稿記事は動的に生成されますので、テーマファイル内に「日付をゲット」という意味のPHPを記述する必要があります。

例えば各記事ページをカスタムする場合は、テーマフォルダ内「single.php」というファイルを編集します。

※WordPressのテンプレートテーマ構造についてはこちらの記事がオススメ。
[WordPress] 最初に覚えるテンプレートテーマの構造

日付を取得するには以下の関数を使用します。

the_time関数

<?php the_time('Y年n月j日'); ?>

(‘ ‘)内を変更することによって、好みの出力を得る事ができます。

使用できるパラメーター(引数:ひきすう)は以下。

d 01~31 (頭に0が入る)
j 1~31
S 1st,2nd….
曜日 I 日曜日~土曜日(英語版:Sunday~Saturday)
D 日~土(英語版:Sun~Sat)
m 01~12 (頭に0が入る)
n 1~12
F 1月~12月(英語版:January~December)
M 1月~12月(英語版:Jan~Dec)
Y 2010,2011,2012…
y 10,11,12…
午前/午後 a am/pm
A AM/PM
g 1~12
h 01~12
H 00~23
i 00~59
s 00~59
タイムゾーン T EST,MDT…
その他 c ISO8601形式 (2012-7-30T12:10:58+09:00)
r RFC2822形式 (Sun,30 Jul 2012 12:10:58+0900)
G GMTでのUNIXタイムスタンプ

※参考:WordPress関数リファレンスガイド

↓このように使います

the_timeの使い方

今回のデザインでは「(頭に0のついた)日付」「(英語のフルスペルで)月」を使用します。

日付を01~31で表示する場合の引数は「d」ですね。

月の英語表記は・・・と。。。 

ここで、問題発覚。

日本語環境では「月」の英語表記ができません!!

2. 日本語環境で月を英語表記にする

調べたら必ず答えが見つかるのがWordPressの最大の強み。

早速調べてみると、参考になる記事が続々登場します。

WordPressのthe_date()やthe_time()で日付を英語で表示出来なくなったのでget_post_time()を使った

WordPressの投稿日付を英語で表示する|the_date()⇒get_post_time()

続々登場した中から最もシンプルな方法を紹介しているのが上記記事。

内容を要約すると the_time関数の代わりにget_post_time関数を使う。という事。

<?php echo get_post_time('F'); ?>

the_time関数と比較すると、以下のようになります。

<?php get_time('F'); ?> //→表示は"7月"
<?php echo get_post_time('F'); ?> //→表示は"July”

3. 実際にphpで製作してみよう!

では実際にテンプレートファイルをカスタマイズしてみます。
各投稿記事ページを編集する場合、single.phpです。

※しつこいですが、テンプレートテーマ構造を理解していない場合はこちらを先に。。。
[WordPress] 最初に覚えるテンプレートテーマの構造

コードの中にthe_time関数、get_the_time関数、the_date関数など、投稿日時をゲットしている箇所があるはずですので、そこらへんを変更してみましょう。
HTML/CSSを理解していればPHPはなんとなく解かりますので、レッツチャレンジ!!

※変更するまえにsingle.phpをコピーしてbackup_single.phpなど、バックアップファイルを作っておきましょう。

記事タイトルのスクリーンショット

黒い四角の部分を、まずはHTML/CSSで製作してみます。

<div class="title-date">
  <span class="title-date-day">30</span>
  <span class="title-date-month">July</span>
</div>

CSSでボックスを黒塗りにしたり、”日”のフォントを大きくしたり、いろいろ調節します。
※実際のコードからfloatやmarginなど環境により大きく変わる指定を省きました。

.title-date {
	text-align:center;
	width:70px;
	height:60px;
	padding:5px 0;
	background-color:#000;
	color:#FFF;
}
.title-date-day {
	display:block;
	height:40px;
	font-size:40px;
	line-height:35px;
	overflow:hidden;
}
.title-date-month {
	display:block;
	height:20px;
	overflow:hidden;
	font-size:14px;
	line-height:14px;
}

デザインが整ったら、最初のHTMLをPHPで書き換えましょう。

<div class="title-date">
  <span class="title-date-day"><?php the_time('d') ?></span>
  <span class="title-date-month"><?php echo get_post_time('F'); ?></span>
</div>
HTMLを見てみると、”日”と”月”にspanを使い、わざわざdisplay:blockでブロック要素に変換しています。
これは「pは単語ではなく文章」というHTMLのルールに則っているからです。
Pで作っても何も変わりませんし、むしろブロック要素に変換する手間が省ける気がしますが、このへんは僕の製作ポリシーです^^;

関連記事