投稿者: ちゃぼP

こんにちは。WordPressカスタマイズにハマっているちゃぼP（@chabo0429）です。

先日この風の羅針盤、それから部長サイトで、個別記事の一番下の部分にアイキャッチ付きのカテゴリページへのリンクが追加されております。

カテゴリをテキストで表示させるだけなら楽なのですが・・・やっぱりそこはアイキャッチ付きのカッコイイリンクの方が見栄えもいいし、分かりやすいですよね。

今日はその方法をご紹介していきます。

「Advanced Custom Fields」プラグインをインストール

通常、カテゴリにアイキャッチ画像は付与することができません。

アイキャッチをカテゴリに付加させるために、まずは「Advanced Custom Fields」というプラグインをインストールします。

インストールとアイキャッチ画像の追加については、以下のサイトに詳しく解説されていますので、参考にしてみてください。

カテゴリーごとに異なるアイキャッチ画像を表示する

single.phpにカテゴリリンクを挿入

プラグインのインストールと、カテゴリへのアイキャッチ画像の追加が完了したら、個別記事のカテゴリページへのリンクを挿入したい部分に、以下のコードを挿入します。

<!--同タグ・同カテゴリー記事を出力-->
<?php

	$tags = get_the_tags();
	$categories = get_the_category();
	$id = get_the_ID();
	$args;


	if($categories){
		$cat_array = array();
		foreach($categories as $category){
			array_push($cat_array, $category->slug);
			if($cats_string)$cats_string .= ",";
			$cats_string .= $category->slug;
		}
	}

	if($tags){
		$tag_array = array();
		foreach($tags as $tag){	
			array_push($tag_array, $tag->slug);
		}

		$args = array(
			'tax_query' => array(
				'relation' => 'OR',
				array(
					'taxonomy' => 'category',
					'field' => 'slug',
					'terms' => $cat_array,
					'include_children' => true,
					'operator' => 'IN'
				),
				array(
					'taxonomy' => 'post_tag',
					'field' => 'slug',
					'terms' => $tag_array,
					'include_children' => false,
					'operator' => 'IN'
				)
			),
			'post__not_in' => array($id),
			'orderby'=>'rand',
			'posts_per_page' => $count
		);
	}else{
		$args = array(
			'category_name' => $cats_string,
			'post__not_in' => array($id),
			'orderby'=>'rand',
			'posts_per_page' => $count
		);
	}

	$the_query = new WP_Query($args);
	if($the_query->post_count > 0){ ?>

		<div class="cat-attention">
		<p>この記事に関連するカテゴリ内の記事はこちら</p>
		</div>
		<?php if($categories){ ?>
			<?php foreach($categories as $category){ ?>
			<div class="same-categories">
				<?php
				// カテゴリーのアイキャッチ画像を表示する
				$image = get_field('category-image', 'category_' . $category->cat_ID);
				?><a href="<?php echo home_url().'/?cat='.$category->cat_ID; ?>"><div class="cat-image-single">
				<?php echo wp_get_attachment_image($image['id']);
				?></div>

				<div class="cat-desc-single">
				<?php echo $category->name; ?>
				</div></a>
			</div>
			<?php } ?>
			<!-- .same-categories -->
		<?php } ?>
	<?php }
?>

ちなみに、このコードだと、カテゴリ名がそのままタイトルに表示されますので、カテゴリの説明を表示させたい場合は、73行目の、

				<?php echo $category->name; ?>

を以下のように変更すると、カテゴリのディスクリプション（説明）を表示させることができます。

				<?php echo $category->category_description; ?>

どちらを表示させるかは、サイトのデザインに合わせて設定してみてください。

ちなみに部長はカテゴリ名を、ちゃぼPはディスクリプションを表示させています。

最後にstyle.cssでデザインを調整

これでソースコードは完成ですので、あとはスタイルシートでデザインを調整します。

.cat-image {
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
}
.cat-desc {
	margin: 0;
	font-size: 1.5em;
}
.cat-image-single {
	float: left;
	margin-bottom: 0px;
	margin-right: 10px;
}
.cat-desc-single {
	margin-left: 10px;
	font-size: 1.5em;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.same-categories {
	margin-bottom: 8px;
	width: 100%;
	height: 150px;
	border: 1px solid #ddd;
	float: left;
}
.same-categories a{
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	transition: color .3s;
}
.same-categories a:hover{
	color: #ff0000;
	background-color: #ffffdd;
	text-decoration: none;
}
.cat-attention{
	color: #ffffff;
	background-color: #000000;
	width: 100%;
	height: 30px;
	font-size: 1.3em;
	text-align: center;
	margin-bottom: 5px;
}

これがPC用です。モバイル表示の時は少し文字を小さくしないとはみ出てしまう場合があるので、

@media screen and (max-width: 736px) {

.cat-attention{
	font-size: 0.95em;
}
.cat-desc-single {
	font-size: 1.3em;
}

}

これを追加しています。

完成イメージ

これで完成です。イメージはこちら。

個別記事の最下部に、カテゴリに設定したアイキャッチとディスクリプションが表示されています。

ちなみに、「きょうのちゃぼP」の記事は単一カテゴリにしか属していませんが、

複数カテゴリに属する記事には、その記事が属する複数のカテゴリが縦に並んで表示されます。

部長の記事はこんな感じ。ページめくりの前に挿入しています。こちらはカテゴリ名をそのまま表示しています。

一方のモバイル表示はというと、

きちんと文字も小さくなって、綺麗に枠に収まっています。

プラグインの導入などもあって、少々手間がかかりますが、カテゴリページへのリンクを目立たせることでサイト内の回遊率アップに実際効果があるようで、カテゴリページへのアクセスが増加していますので、これはいい感じかも！

私の作成したコードは、simplicityとマテリアルで動作していますが、基本的なコードはテーマに左右されないはずなので、試してみてくださいね！

ぜひ試してみてくださいね！

こんにちは。ちゃぼP（@chabo0429）です。

今日のちゃぼPでも触れましたが、トップページのカテゴリ新着ボックスを3つから5つに増やしました。

早速部長も実装して、両サイトともなんだかトップページに暖簾がかかったようになっております（笑）

というわけで、今日はその実装方法をご紹介します。

カテゴリ新着ボックスは、「main」カラム前に挿入すること

これまでのカテゴリ新着ボックスは、メインカラムのトップ部分に挿入していましたが、それだと横に3枚が限界でした。というのも、サイドバーがヘッダーのすぐ下から始まってしまうため、メインカラムの幅しか使えませんでしたので、これを横いっぱいに使えるようにします。

トップページの要素を読み込む順番は、「ヘッダー」→「メイン・サイド」→「メイン」→「サイド」→「フッター」の順番で読み込みます。

そのため、「メイン」にボックスを挿入してしまうと、サイドバーがその前から始まってしまうのです。

そこで、ヘッダーの直後に挿入することにします。

Simplicityの場合は「before-main.php」に挿入

Simplicityの場合は、あらかじめ子テーマの中に「before-main.php」が存在していますので、そこにコードを挿入します。

<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>

〜ここにコード挿入〜

すごく簡単ですね。よくSimplicityでヘッダー下に画像を挿入しているサイトを見かけますが、ここに入れていたんですね。

マテリアルの場合は「header.php」に挿入

マテリアルの場合はちょっと気をつけなければいけません。トップページを読み込む際には「header.php」→「loop.php」の順番でファイルを読み込みますが、loop.phpを読み込む時には、すでにメインカラムが始まっているので、header.phpに挿入しなければなりません。

（省略）

<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

</div>
</nav>

<div class="main-side">

〜ここにコードを挿入〜

<div class="main">

このように、メインカラムが始まる前にコードを挿入します。

表示部ソースコード

実際にボックスを表示するは両テーマとも同じです。

<?php if ( is_home() || is_front_page() ) : ?>
	<?php if (is_mobile()) :?>
	<?php else: ?>
		<?php if ($paged <= 1): ?>
			<!-- 新着カテゴリ1 -->
			<div class="cat_article1">

			<?php
			    $cat = '（スラッグ名１）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名１）">カテゴリ１</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ2 -->
			<div class="cat_article2">

			<?php
			    $cat = '（スラッグ名２）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名２）">カテゴリ２</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ3 -->
			<div class="cat_article3">

			<?php
			    $cat = '（スラッグ名３）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名３）">カテゴリ３</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ4 -->
			<div class="cat_article4">

			<?php
			    $cat = '（スラッグ名４）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名４）">カテゴリ４</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ5 -->
			<div class="cat_article5">

			<?php
			    $cat = '（スラッグ名５）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名５）">カテゴリ５</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>
		<?php endif; ?>
	<?php endif; ?>
<?php endif; ?>

「スラッグ１〜５」はご自分のサイトのカテゴリのスラッグ名に書き換えます。「カテゴリ１〜５」は、ボックスのインデックスに表示させたいカテゴリ名に書き換えます。

style.cssでデザインを整えます

最後に、デザインを整えます。

/* 最新のカテゴリ記事
--------------------------------------------------------- */
.cat_article1 {
	margin:0 0px 15px 0px;
	float: left;
	width: 19.6%;
}
.cat_article2 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article3 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article4 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article5 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article_thumb {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.cat_article1 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article1 .anchor:hover, .cat_article1 .anchor:active {
	text-decoration: underline;
}
.cat_article1 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article1 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article1 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article1 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article1 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article2 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article2 .anchor:hover, .cat_article2 .anchor:active {
	text-decoration: underline;
}
.cat_article2 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article2 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article2 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article2 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article2 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article3 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article3 .anchor:hover, .cat_article3 .anchor:active {
	text-decoration: underline;
}
.cat_article3 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article3 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article3 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article3 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article3 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article4 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article4 .anchor:hover, .cat_article4 .anchor:active {
	text-decoration: underline;
}
.cat_article4 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article4 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article4 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article4 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article4 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article5 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article5 .anchor:hover, .cat_article5 .anchor:active {
	text-decoration: underline;
}
.cat_article5 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article5 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article5 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article5 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article5 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat-update{
	font-size: 0.7em;
	position:absolute;
	top:0px;
	left:0px;
	color: #fff;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}
.cat_text_area {
	padding: 0 4px 0;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	color: #fff;
	font-weight: bold;
	overflow: hidden;
	height: 80px;
	line-height: 20px;
	font-size: 15px;
	text-decoration: none;
	background: rgba(3,3,3,0.6);
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));
	background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));
	text-shadow: 0 0 5px rgba(0,0,0,1.0);
}
.postcat1 {
	position:absolute;
	top:0px;
	right:0px;
	background-color: #EA3382;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0px 10px 0;
}
/* ここまで

ボックスの横幅やマージンはサイトによって微妙に違うと思いますので、適宜調整を。

完成

これでボックスの完成。実際に表示させてみましょう。

横幅もバッチリ合いました！

ある程度のカテゴリが増えてくると、アイキャッチ付きのカテゴリボックスはインパクトもあって、回遊率アップにも効果的・・かなとも思っています（笑）

こんな感じで自由にカスタマイズできるのも、WordPressのいいところです。是非皆さんのサイトもお試しあれ！