求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

記事の投稿日とカテゴリーを表示 - カスタムテーマ

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

日付の設定

f:id:web-0220:20190407014429j:plain

記事の投稿日を表示する
  • get_the_date()
  • 「get_the_date()」は、現在の投稿(または指定された投稿)が書かれた日付を取得します
  • the date() とは異なり、このタグは常に日付を返します
  • 取得のみの関数のため、echo文で出力します
  • 記事タイトルの下に表示させる
<h2><?php the_title(); ?></h2>
<?php echo get_the_date(); ?>
記事の投稿日をマークアップする
  • HTML5新要素「」でマークアップする
  • time要素は、24時間表記の時刻、またはグレゴリオ暦による正確な日付を表す際に使用します
  • datetime属性は、日付や時刻を指定する(機械が読むことが可能な記述)
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>

《プレビュー》

f:id:web-0220:20190407014937j:plain

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

《プレビュー》

f:id:web-0220:20190407015437j:plain

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

《プレビュー》

f:id:web-0220:20190407015733j: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;
}

アイコンを付けてデザインする

BootstrapCDN
  • CDN(Contents Delivery Network)

www.bootstrapcdn.com

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Font Awesome 4.7 icon

f:id:web-0220:20190407020928j:plain

  • アイコンフォント
  • HTMLにclass名を設定するだけで、簡単にアイコンを表示できます

アイコンを表示する

  • 「Font Awesome 4.7 icon」の指定は、class名で指定する
時計のアイコン
  • class名「fa fa-clock-o」を付ける
<li class="fa fa-clock-o"></li>
フォルダーのアイコン
  • class名「fa fa-folder-open」を付ける
<li class="fa fa-folder-open"></li>
  • 各文字列の先頭に表示されるよう記述する
<div class="postinfo">

<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date(); ?>
</time>

<span class="postcat">
<i class="fa fa-folder-open"></i>
<?php the_category( '' ); ?>
</span>

</div><!-- /.postinfo -->

f:id:web-0220:20190407021820j:plain

アイコンの色を指定する
.postinfo i {
  color: #AAA;
}

f:id:web-0220:20190407022151j:plain