ワードプレス（WordPress）で更新日付や公開日付を表示させるSEO上の利点と表示させる方法

 

更新日付付や公開日付を表示させる目的

ユーザーに最新情報であることを伝える

Googleも更新日付や公開日付をマークアップすることを推奨している

ワードプレス（WordPress）で更新日付や公開日付を表示させる方法

公開日付を表示させる場合

［記事公開日付］:<?php the_time('Y/m/d'); ?>

更新日付を表示させる場合

［最終更新日付］:<?php the_modified_date('Y/m/d'); ?>

公開日付と更新日付が同じだった場合の処置

［記事公開日付］:<?php the_time('Y/m/d'); ?>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
［最終更新日付］:<?php the_modified_date('Y/m/d') ?>
<?php endif; ?>

function get_mtime($format) {
	$mtime = get_the_modified_time('Ymd');
	 $ptime = get_the_time('Ymd');
	if ($ptime > $mtime) {
		return get_the_time($format);
	} elseif ($ptime === $mtime) {
		return null;
	} else {
		return get_the_modified_time($format);
	}
}

更新日付や公開日付の前にアイコンを表示させるにはFont Awesomeを使う

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

Font Awesomeを使ってアイコン化させる例

sample:before{
    content: '\f073';
    display: inline-block;
    font-family: FontAwesome;
}

Font Awesomeのアイコン参考記事

更新日付や公開日付の前にアイコンを表示させる例

htmlの記述

<div class="date"><?php the_time('Y.m.d'); ?></div>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<div class="update">
<?php the_modified_date('Y.m.d') ?>
</div>
<?php endif; ?>

cssの記述

.date,.update{
    font-size: 16px;
    margin-bottom: 5px;
}

.date,.update{
	font-size: 16px;
    color: #aaa;
    display: inline-block;
	margin:0px 0px 0px 110px;
}

.update{
    margin-left: 20px;
}

.date:before{
    content: "\f073";
    font-family: FontAwesome;
    color: #aaa;
}

.update:before{
    content: "\f021";
    font-family: FontAwesome;
    color: #aaa;
}

まとめ