WordPress の各記事に日付を表示するようにしてみた

このエントリーをはてなブックマークに追加

ブログの各エントリーに日付を表示していなかったのですが、いつ書いたエントリーかわからない状態だったので、それぞれのエントリーに日付を表示するようにしました。

ちょっと目立たせて入れてしまった

普通にエントリータイトルの下などに入れればよかったのですが、わかりやすいように吹き出しデザインで入れてみました。

吹き出しでの日付表示は Hatena Designer's Blog をみてて、これいいなーと思ったのと、吹き出しをCSSのみで作る方法を一度実践してみたいということもあり、パク・・・参考にさせてもらい入れてみました。

Hatena Designer's Blog

日付表示のテンプレート

日付部分のHTMLは親要素に time 要素を用い、年-月-日 となるようにそれぞれ数部分をspanでくくって入れました。

エントリーのループ内で下記のコードを入れてます。

日付部分のHTML

<div class="entry-date">
  <a href="<?php bloginfo('url');?>/<?php the_date("Y/m/d"); ?>">
    <time datetime="<?php the_time("c"); ?>" title="<?php the_time("c"); ?>">
      <span class="date-year"><?php the_time("Y"); ?></span><span class="hyphen">-</span><span class="date-month"><?php the_time("m"); ?></span><span class="hyphen">-</span><span class="date-day"><?php the_time("d"); ?></span>
    </time>
  </a>
</div>

年・月・日はそれぞれ the_time() とその引数で取得しています。

Function Reference/the time « WordPress Codex

引数となる日付のフォーマットは下記リンク先を参考にしました。

Formatting Date and Time « WordPress Codex

吹き出しのスタイル

吹き出しのスタイル

.entry-date {
  display: inline-block;
  position: relative;
  padding: 6px 8px;
  background: #2C3E50;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  line-height: 1;
  font-size: 11px;
}
.entry-date:before {
  content: '';
  position: absolute;
  border-top: 5px solid #2C3E50;
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-left: 5px solid rgba(0, 0, 0, 0);
  bottom: -5px;
  left: 36px;
}

吹き出しの三角は色のついた border 一辺とその両辺を透明な border で挟むと三角の形になります。

参照：