当サイトで利用している賢威7では、記事のタイトルの下に「記事の公開日」と「カテゴリ」が並びます。この部分を以下のように変更する方法をご紹介します。

  • 公開日の左横にFont Awesomeのカレンダーアイコンを表示
  • 公開日の右に、もし「更新日」があれば「更新日」を表示、かつ、「更新日」の左横にFont Awesomeの更新を想起させるアイコンを表示
  • カテゴリーを削除
  • もし「タグ」があれば「タグ」を表示、かつ、「タグ」の左横にFont Awesomeのタグアイコンを表示

※追記※
記事ページ以外ではカテゴリーを表示するようにしましたので、以下をご参照ください。
関連記事賢威7で記事ページ以外の記事タイトル下にカテゴリーを表示する方法

完成イメージ

左から「公開日」「更新日」「タグ」と並びます。

カテゴリーを削除した理由

デフォルトだと公開日の次にカテゴリーが表示されますが、記事タイトルのすぐ上にパンくずリストでカテゴリーが表示されるので、もしユーザーさんが、カテゴリーを知りたい、同じカテゴリーの記事を読みたい、という場合に、パンくずリストのカテゴリーから遷移できれば問題ないのではないかと判断し、記事下のカテゴリー表記は削除することにしました。

「cont.php」「single.php」のソースを修正

当サイトは賢威の子テーマを利用しているので、親テーマから「cont.php」「single.php」を子テーマディレクトリにコピーして、修正しています。

子テーマの「cont.php」

修正前

<p class="post-date"><time datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>" ><?php the_time(get_option('date_format')); ?></time></p>
<?php if (the_keni('pv_view') == "y" && getViewPV(get_the_ID()) > 0) { ?><p class="post-pv"><?php viewPV(); ?>PV</p><?php } ?>
<?php {
	$site_url = site_url();
	if (!preg_match("/\/$/", $site_url)) $site_url .= "/";

	$category_data = get_category_keni();
	if (!empty($category_data)) echo "<div class=\"post-cat\">\n".$category_data."\n</div>\n";
} ?>

デフォルトだと18行目~にあります。

※一部、「円マーク」のところが「バックスラッシュ」になっていますが、テキストエディタにコピペすると円マークになります。念のためご確認ください。

修正後

<div class="time-cat-tag-box">
<span class="post-date"><time datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>" ><?php the_time(get_option('date_format')); ?></time></span><?php if (get_the_modified_date()) : ?><span class="post-date2"><?php the_modified_date('Y/m/d') ?></span><?php endif; ?><?php if (get_the_tags()) : ?><span class="post-tag"><?php the_tags('', ''); ?></span><?php endif; ?>
</div>

公開日と更新日のphpタグが続いているのは、無駄なスペースがあると実際の表示の際に空きが生じるので、これを回避するためです。

子テーマの「single.php」

修正前

<?php if (get_the_time('Y-m-d') != get_the_modified_date('Y-m-d')) { ?>
				<p class="post-date"><?php _e('Published on','keni') ?> : <time datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>" ><?php the_time(get_option('date_format')); ?></time> / <?php _e('Last modified on','keni') ?> : <time datetime="<?php the_modified_date('Y-m-d'); ?>" itemprop="dateModified" content="<?php the_modified_date('Y-m-d'); ?>"><?php echo get_the_modified_date(get_option('date_format')); ?></time></p>
<?php } else { ?>
				<p class="post-date"><time datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>" ><?php the_time(get_option('date_format')); ?></time></p>
				<meta itemprop="dateModified" content="<?php the_time('Y-m-d'); ?>">
<?php } ?>
				<?php if (the_keni('pv_view') == "y" && getViewPV(get_the_ID()) > 0) { ?><p class="post-pv"><?php viewPV(); ?>PV</p><?php } ?>
				<?php {
					$site_url = site_url();
					if (!preg_match("/\/$/", $site_url)) $site_url .= "/";

					$category_data = get_category_keni();
					if (!empty($category_data)) echo "<div class=\"post-cat\">\n".$category_data."\n</div>\n";
				} ?>

デフォルトだと19行目~にあります。

修正後

<div class="time-cat-tag-box">
<span class="post-date"><time datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>" ><?php the_time(get_option('date_format')); ?></time></span><?php if (get_the_modified_date()) : ?><span class="post-date2"><?php the_modified_date('Y/m/d') ?></span><?php endif; ?><?php if (get_the_tags()) : ?><span class="post-tag"><?php the_tags('', ''); ?></span><?php endif; ?>
</div>

※“子テーマの「cont.php」の修正後”の内容と同じです。

CSSに追記

当サイトの場合、賢威の子テーマで運用しているため、子テーマディレクトリにある「base.css」に追記しています。

/*公開日・更新日・タグ*/
.time-cat-tag-box{
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #999;
border-bottom-color: #999;
line-height: 1.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.time-cat-tag-box .post-date,
.time-cat-tag-box .post-date2,
.time-cat-tag-box .post-tag a
{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 0.8em;
color: #666;
display: inline !important;
}
.time-cat-tag-box .post-date:before{
content: "\f133";
font-family: FontAwesome;
padding-right: 4px;
}
.time-cat-tag-box .post-date2:before{
content: "\f1da";
font-family: FontAwesome;
padding-right: 4px;
}
.time-cat-tag-box .post-tag a{
padding-left: 10px;
text-decoration: none;
}
.time-cat-tag-box .post-tag a:before{
content: "\f02b";
font-family: FontAwesome;
padding-right: 4px;
}

これで記事タイトルの上には、パンくずリストでカテゴリーが表示され、記事タイトル下に公開日、更新日(更新した場合のみ)、タグが表示されます。