読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

記事の投稿日とカテゴリーを表示する

WordPress基礎

日付の設定

f:id:webmaster-web:20160707193625p:plain

記事の投稿日を表示する

  • get_the_date()
  • 「get_the_date()」は、現在の投稿(または指定された投稿)が書かれた日付を取得します
  • the date() とは異なり、このタグは常に日付を返します
  • 取得のみの関数のため、echo文で出力します
  • 記事タイトルの下に表示させる
<h1><?php the_title(); ?></h1>

<?php echo get_the_date(); ?>
記事の投稿日をマークアップする
  • HTML5新要素「<time>〜</time>」でマークアップする
  • time要素は、24時間表記の時刻、またはグレゴリオ暦による正確な日付を表す際に使用します
  • datetime属性は、日付や時刻を指定する(機械が読むことが可能な記述)
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>


《プレビュー》

f:id:webmaster-web:20160707234859p:plain

記事が属するカテゴリーを表示する

  • the_category()
  • 現在の記事が属するカテゴリーへのリンクを表示します
  • 必ず、ループの中で使わなければなりません
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>

<?php the_category(); ?>


《プレビュー》

f:id:webmaster-web:20160707235008p:plain

カテゴリー名を横に並べて表示する
  • リスト表示をインラインで表示する
<span class="postcat">
<?php the_category( '' ); ?>
</span>


《プレビュー》

f:id:webmaster-web:20160708000249p:plain

付加情報としてマークアップする
<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>

<span class="postcat">
<?php the_category( '' ); ?>
</span>
</div><!-- /.postinfo -->
CSSの記述
/* 記事の付加情報 */
.postinfo {
  margin-top: 15px;
  font-size: 14px;
}
.postinfo a {
  color: #333;
  text-decoration: none;
}
.postinfo .postcat {
  margin-left: 20px;
}