WordPressサイドバーに記事数が付いたタグ一覧を表示させる

WordPressサイドバーに記事数が付いたタグ一覧を表示させる

WordPressのサイドバーに、記事数が付いたタグ一覧を表示させる方法をご紹介します。

このカスタマイズにより、以下の画像のようなタグ一覧が設置できます。

WordPressサイドバーに記事数が付いたタグ一覧を表示させる

  • タグのリンクをボタンとして表示。
  • タグ内にある記事数を表示する。

WordPress無料テーマFirstUpを利用したカスタマイズ方法としてご紹介しますので、他のテーマを利用している方は、自分のブログに合わせてタグやコードを修正してください。

WordPressのサイドバーに記事数が付いたタグ一覧を表示させる方法

下記のタグやコードをそれぞれ任意の場所にコピー&ペーストすると、記事数が付いたタグ一覧が表示されます。

FirstUpを利用されている方は、HTML&PHPタグのみコピー&ペーストしてください。CSSはすでに親テーマ『fiertup』のstyle.cssに用意しておきましたので追加しなくて大丈夫です。

HTML&PHPタグ

サイドバーの表示させたい箇所に、下記のタグをコピー&ペーストしてください。

<div class="side_area">
	<h3>タグ一覧</h3>
	<ul class="side_tag clearfix">
		<?php
			$tags = get_terms('post_tag', 'hide_empty=1');
			foreach($tags as $value):
		?>
		<li>
			<a href="<?php echo get_tag_link($value->term_taxonomy_id); ?>">
				<?php echo $value->name; ?>
				<span><?php echo $value->count; ?></span>
			</a>
		</li>
		<?php endforeach; ?>
	</ul>
</div>
FirstUpの場合、sidebar.phpは3つ(sidebar-1.phpなど)ありますが、どちらも37行目あたりに追加されると検索フォームの上に表示されます。バランス的にはその辺りがいいかと思いますよ。

CSSコード

CSSは、FirstUpを利用されていない方のためにご紹介しておきます。

.side_tag li{
	float: left;
	margin: 0 5px 5px 0;
}

.side_tag li a{
	display: block;
	position: relative;
	padding: 4px 10px;
	background-color: #fff;
	box-shadow: 0 1px 1px #bdc3c7;
}

.side_cat li a:hover,
.side_tag li a:hover{
	text-decoration: none;
}

.side_tag li a span{
	position: relative;
	margin: 0 0 0 15px;
	padding: 1px 7px;
	font-size: 12px;
	font-weight: bold;
	border-radius: 5px;
}

.side_tag li a:hover span{
	background-color: #fff;
}

実は、この記事数が付いたボタンスタイルは、FirstUpの404ページでもカテゴリ一覧のスタイルとして利用しております。
サイドバーの検索フォームに何も入力せず『検索』ボタンを押してみると、実際の表示が確認できますよ。

WordPressサイドバーに記事数が付いたタグ一覧を表示させる by

コメントを残す