カテゴリ・タグ一覧ウィジェットとタグクラウドページを自作してみる

おはようございます。@nyagihimeです。今日頑張ればゴールデンウィークですね。

自分はカレンダー通り（途中1日有給取ったけど）のため，歯抜けで途中出勤がありますが，人によっては全部繋いじゃった方とかは約10連休ですか？旅行とか行くにはよさそうですね。

さて，今日のネタですが，

サイドバーに表示していたカテゴリ一覧とタグ一覧をオリジナルのデザインにしたくなったので、作ってみることにしました。

やりかた

やってることは非常に簡単で、表示したいところで

$cats = get_categories();
if ($cats) {
	echo '<dl class="catList">';
	foreach ($cats as $tag) {
		$cat_link = get_category_link( $tag->term_id );
		echo '<dt><a href="'.$cat_link.'">'.$tag->name.'</a></dt>';
		echo '<dd><a href="'.$cat_link.'"><span>'.$tag->count.'</span></a></dd>';
	}
	echo '</dl>';
} else {
	echo 'タグがありません';
}

$cats = get_categories();

if ($cats) {

echo '<dl class="catList">';

foreach ($cats as $tag) {

$cat_link = get_category_link( $tag->term_id );

echo '<dt><a href="'.$cat_link.'">'.$tag->name.'</a></dt>';

echo '<dd><a href="'.$cat_link.'"><span>'.$tag->count.'</span></a></dd>';

}

echo '</dl>';

} else {

echo 'タグがありません';

}

だけです。タグの場合は、

get_categories を get_tags 、get_category_link を get_tag_link とすればOKです。

自分はサイドバーにだすにあたり、タグの量が多すぎるとごちゃごちゃになりそうだったので、タグはランダムに5件出すようにしました。

本当はランダムに5件とか取得させることができればよかったのですが、うまくいかなかったので、全部取得してから shuffle($tags); で取得してきたタグの配列をシャッフルしています。

その上で、ループの中でカウンタを回して、カウンタが0になったら break してループを抜けちゃうことにしました。

$i=5;
echo '<dl class="tagList">';
foreach ($tags as $tag) {
	$tag_link = get_tag_link( $tag->term_id );
	echo '<dt><a href="'.$tag_link.'">'.$tag->name.'</a></dt>';
	echo '<dd><a href="'.$tag_link.'"><span>'.$tag->count.'</span></a></dd>';
	$i--;
	if ($i<=0) break;
}
echo '</dl>';
echo '<p class="show_all_tags"><a href="/tags">全てのタグを表示</a></p>';

$i=5;

echo '<dl class="tagList">';

foreach ($tags as $tag) {

$tag_link = get_tag_link( $tag->term_id );

echo '<dt><a href="'.$tag_link.'">'.$tag->name.'</a></dt>';

echo '<dd><a href="'.$tag_link.'"><span>'.$tag->count.'</span></a></dd>';

$i--;

if ($i<=0) break;

}

echo '</dl>';

echo '<p class="show_all_tags"><a href="/tags">全てのタグを表示</a></p>';

あとはこれだと当然全部のタグは一気に見渡せませんのでタグ一覧のページを作って、そこにリンクすれば完了です。。

タグ一覧ページは手っ取り早く固定ページで作りました。

タグクラウド用のページ（テンプレート）を作る

まずは空の固定ページを作り、好きなスラッグを指定します（自分は「tags」としました）。

ページの中身はすべてテンプレートで生成するので（今回は the_content() すら省略して本文を無視させるので）本文は何も書かなくてOKです。または「このページの内容はテンプレート側で生成します」とかメモっておけばいいでしょう。どのみち表示されませんし。

と、いうことで対応するテンプレートファイル「page-（今作ったページのスラッグ）.php」を作成します。
自分の例なら「page-tags.php」ですね。

ループ部分はこんなかんじです。

<?php if(have_posts()): ?>
<?php while(have_posts()):the_post();?>
		<article>
			<h1><?php the_title(); ?></h1>
			<div class="articleBody cf">
<?php
	$tags = get_tags();
	shuffle($tags);
	if ($tags) {
		foreach ($tags as $t) {
			$tagLnk = get_tag_link($t->term_id);
			$tagCnt = $t->count;
			if ($tagCnt < 12) {
				$tagSize = 12;
			} else {
				$tagSize = $tagCnt;
			}
			echo '<a href="'.$tagLnk.'" style="font-size:'.$tagSize.'px; padding-right:5px;" title="このタグを含む投稿数：'.$tagCnt.'">'.$t->name.'</a> ';
		}
	} else {
		echo 'タグが見つかりませんでした。';
	}
?>
			</div>
		</article>
<?php endwhile; else: ?>
		<article>
			<h1>Not Found...</h1>
			<div class="contentMeta cf">
				<div class="date cf">
					<p>----/--/--</p>
				</div>
				<div class="cat">
					<p>---</p>
				</div>
				<div class="tag">
					<p>---</p>
				</div>
			</div>
			<div class="articleBody">
				<p>お探しの記事は見つかりませんでした。</p>
			</div>
		</article>
<?php endif; ?>

<?php if(have_posts()): ?>

<?php while(have_posts()):the_post();?>

<?php

$tags = get_tags();

shuffle($tags);

if ($tags) {

foreach ($tags as $t) {

$tagLnk = get_tag_link($t->term_id);

$tagCnt = $t->count;

if ($tagCnt < 12) {

$tagSize = 12;

} else {

$tagSize = $tagCnt;

}

echo '<a href="'.$tagLnk.'" style="font-size:'.$tagSize.'px; padding-right:5px;" title="このタグを含む投稿数：'.$tagCnt.'">'.$t->name.'</a> ';

}

} else {

echo 'タグが見つかりませんでした。';

}

</div>

</article>

<?php endwhile; else: ?>

<h1>Not Found...</h1>

</div>

</div>

</div>

<p>お探しの記事は見つかりませんでした。</p>

</div>

</article>

<?php endif; ?>

大したことやってませんね。

基本的には先程のサイドバーのときと同じです。

8行目のshuffleもさっきと同じです。常に同じ配置で出したい場合はコメントアウトするなり削除するなり。

12行めから18行目が今回のポイントです。

まぁ18行目は出力部分なんでたいしたことしてませんけど。

まず $t->count で、そのタグが登録されている記事の数を取得します。

次に、その数が12以下ならサイズを12に、それ以上は記事数と同じピクセル数をセットするようにして、インラインCSSをで文字サイズにそれをあててあげれば簡単に記事の数に応じて文字が大きくなっていくようにできますね。

もちろんピクセルじゃなくて%とかでもいいかもしれませんね。

（5/2 追記）

このままだと将来的にどんどん投稿が増えて、特定のタグが付いた投稿が300とか500とかになると、文字のサイズがとんでもないことになります。

それはそれで面白いかもしれませんが、でかすぎて見づらくなってしまうかもしれませんので、もう一工夫した方がいいかもしれませんね。

例えば、100以上はすべて100で固定するとか、今は投稿数＝フォントサイズとなっていますが、
5区切りとか10区切りくらいとかにして、5までならフォントサイズ12、10までならフォントサイズ15、15までなら18、20までなら20、30で…というふうにしてもいいかもしれません。

（追記ここまで）

おまけ

自分はサイドバーに表示する部分をタグとカテゴリで別々にカスタムウィジェットとして登録しておきました。こうしておけばあとで位置を移動したい時とか、一時的に非表示にしておきたい時に便利ですからね。

カスタムウィジェットの作り方は長くなりそうなのでまた改めて記事にしようかと思います。

それでは。

NeGiMeMo.net

カテゴリ・タグ一覧ウィジェットとタグクラウドページを自作してみる

やりかた

タグクラウド用のページ（テンプレート）を作る

おまけ

いいね:

コメントするコメントをキャンセル

関連投稿

カテゴリ・タグ一覧ウィジェットとタグクラウドページを自作してみる

やりかた

タグクラウド用のページ（テンプレート）を作る

おまけ

Share this:

いいね:

コメントする コメントをキャンセル

関連投稿

コメントするコメントをキャンセル