賢威の記事下タグ部分にカテゴリや公開日を表示してカスタマイズ

この記事は約11分で読めます。

  • LINEで送る

賢威の記事下

賢威初期の記事直下は、タグが横並びで表示されます。
この部分を上の画像のようにカテゴリ、公開日と更新日を追加して
記事の情報をわかりやすく、そしてユーザビリティを向上させます。

全体構造

カスタマイズ全体構造

まずは、今回カスタマイズする記事情報部分を説明します。
画像の通り、5つのセクションに分かれます。

  • 全体:divブロック
  • カテゴリ・タグ:divブロック
  • カテゴリ:ulリスト
  • タグ:ulリスト
  • 日付:divブロック

「全体」枠に対して、「カテゴリ・タグ」枠と「日付」枠をfloatし左右に配置、
「カテゴリ・タグ」枠内に「カテゴリ」と「タグ」をリストを横並びで配置します。

出力されるHTMLは以下のようになります。

<div class="post-info">
<div class="cat-tag">
<ul class="info-cat"><li><a href="http://www.keni-customize.net/category/customize/footer/" title="フッター の投稿をすべて表示" rel="category tag">フッター</a></li></ul>
<ul class="info-tag"><li><a href="http://www.keni-customize.net/tag/php/" rel="tag">PHP</a></li><li><a href="http://www.keni-customize.net/tag/public/" rel="tag">公開</a></li></ul>	</div>
<div class="info-date">
<p>記事公開日:2013年11月26日	<br />最終更新日:2013年11月27日</p>
</div>
</div>

次から、それぞれの表示について説明します。

カテゴリの出力

カテゴリは、専用の関数で出力します。
詳細は以下のページをご覧ください。
テンプレートタグ/the category – WordPress Codex 日本語版

<ul class="info-cat"><li><?php the_category('</li><li>') ?></li></ul>

パラメータに設定しているのは、カテゴリが複数あった場合のセパレータ(区切り)です。
今回はリストで構成しますので、カテゴリ間はリストの閉じタグと開始タグを設定しました。

タグの出力

タグもカテゴリと同様に専用の関数で出力します。
詳細は以下のページをご覧ください。
テンプレートタグ/the tags – WordPress Codex 日本語版

<?php the_tags('<ul class="info-tag"><li>','</li><li>','</li></ul>'); ?>

カテゴリと異なるのは、リストタグをパラメータとして渡せるところです。
カテゴリの場合は、セパレータのみしか設定できないので関数外でリストタグを指定しましたが、
タグ関数は開始、終了とも関数のパラメータとして渡すことができます。

カテゴリと合わせるため、あえて開始、終了タグを直接設定することも可能です。

記事投稿日と最終更新日の出力

記事投稿日と最終更新日については、前回記事を書いていますのでそちらをご覧ください。
WordPressで記事の更新日時を取得する方法

<div class="info-date">
<p>記事公開日:<?php the_time('Y年n月j日') ;?>
<?php if ($mtime = get_mtime('Y年n月j日')) echo '<br />最終更新日:', $mtime; ?></p>
</div>

以前の記事と違う点は「<div>」でくくっていることと、改行コード「<br />」の位置だけです。

追加コードまとめ

それぞれのセクションで説明しました。
まとめた追加用のコードは以下のとおりです。

<div class="post-info">
<div class="cat-tag">
<ul class="info-cat"><li><?php the_category('</li><li>') ?></li></ul>
<?php the_tags('<ul class="info-tag"><li>','</li><li>','</li></ul>'); ?>
</div>
<div class="info-date">
<p>記事公開日:<?php the_time('Y年n月j日') ;?>
<?php if ($mtime = get_mtime('Y年n月j日')) echo '<br />最終更新日:', $mtime; ?></p>
</div>
</div>

次から、実際の追加箇所を説明します。

賢威テンプレートの修正箇所

それでは、実際に賢威に設定していきます。
以下の3つのファイルに追加するので、それぞれ説明します。

  • single.php
  • design.css
  • mobile.css

単一記事の投稿「single.php」の修正

記事部分には、先ほど説明した出力コードを、これまでタグが出力されていた部分に追加します。
「外観 > テーマ編集」から「single.php」に追加します。

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php get_template_part('social-button'); ?>

<div class="contents clearfix">

	<div class="article">
	<!--本文-->
	<?php the_content(); ?>
	<!--/本文-->
	</div>
	<!--/article-->

	<?php wp_link_pages(); ?>

<?php if (false) { ?>
	<?php if(get_the_tags()){ ?>
	<div class="post-tag">
	<p>タグ:<?php the_tags('', ', '); ?></p>
	</div>
	<?php } ?>
<?php } ?>
	<div class="post-info">
	<div class="cat-tag">
	<ul class="info-cat"><li><?php the_category('</li><li>') ?></li></ul>
	<?php the_tags('<ul class="info-tag"><li>','</li><li>','</li></ul>'); ?>
	</div>
	<div class="info-date">
	<p>記事公開日:<?php the_time('Y年n月j日') ;?>
	<?php if ($mtime = get_mtime('Y年n月j日')) echo '<br />最終更新日:', $mtime; ?></p>
	</div>
	</div>
</div>

<?php get_template_part('social-button'); ?>

</div>
<!--/post-->

ハイライトが追加部分です。
元々表示されていたタグを消すために、「<?php if (false) { ?>」「<?php } ?>」を追加しました。
バッサリ削除してしまっても構いません。

スタイルシート「design.css」の修正

次に、スタイルシートへ以下のスタイルを追加します。
「外観 > テーマ編集」から「design.css」に以下のスタイルを追加します。

.post-info{
	overflow : hidden;
	clear: both;
	background: #CFCFCF;
}

.cat-tag{
	float: left;
	margin: 1.0em 0 1.0em 1.0em;
}

.info-date{
	float: right;
	margin: 1.0em 1.0em 1.0em 1.0em;
}

.info-date p{
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

.cat-tag ul{
	margin: 0;
	padding: 0;
}

.info-cat li,
.info-tag li{
	display: inline-block;
	list-style-type: none;
	margin: 0;
}

.info-cat{
	margin-bottom: 0.2em;
}

.info-cat li a,
.info-tag li a{
	padding: 0.2em 0.4em;
	border: 1px solid #;
	border-radius: 15px;
	text-decoration: none;
}

.info-cat li a:hover,
.info-tag li a:hover {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) inset;
	color: #fff;
	background-color: #f60;
}

.info-cat:before{
	content: "";
	margin: 0 0.1em 0 0;
	padding-right: 16px;
	background: url(./images/category004.png); 
	background-repeat: no-repeat;
	vertical-align: middle;
}

.info-tag:before{
	content: "";
	margin: 0 0.1em 0 0;
	padding-right: 16px;
	background: url(./images/tag003.png); 
	background-repeat: no-repeat;
	vertical-align: middle;
}

背景色や隙間などを変更したい場合は、適宜変更してください。
また、カテゴリとタグの前に表示している画像は「アイコン フリー」などで検索すると
商用利用可能のアイコン素材がたくさんでてきます。

当サイトは「16px × 16px」サイズのアイコンを使っています。

スタイルシート「mobile.css」の修正

賢威レスポンシブルデザイン

最後にレスポンシブルデザインに対応させるため「mobile.css」を修正します。
「外観 > テーマ編集」から「mobile.css」に以下のスタイルを追加します。

#main-contents .cat-tag,
#main-contents .info-date{
	float: none;
	width: 100%;
}

上で示した画像のように、「カテゴリ・タグ」枠と「日付枠」が縦に並びます。
レスポンシブルデザインだと画面幅が狭く、横並びだと文字が被ってしまう可能性があるので縦にしています。

  • LINEで送る

“賢威の記事下タグ部分にカテゴリや公開日を表示してカスタマイズ” への3件のフィードバック

  1. ハハ より:

    カテゴリと日付がPC表示でも縦並びになってしまいます。

    PC表示の時は横並びにしたいのですが、アドバイスをいただけますか?

    • さいとう より:

      ハハ様

      さいとうです、コメントありがとうございます。

      記事通りに設定していただければ、PC表示では横並びになるはずです。

      • ハハ より:

        ありがとうございます。
        もう一度チャレンジしてみます。

        賢威のカスタマイズについて、ほかのサイトとは違う観点で情報発信をしていただいているので、すごく参考にさせていただいています。感謝です!

コメントを残す

このページの先頭へ