【WordPress】サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編 – 風の羅針盤

こんにちは。ちゃぼPです。

このサイトでは、WordPressテーマ「マテリアル」を使用しています。

先日より、トップページのデザインが大きく変わっていますが、カテゴリ別のサムネイル付き新着記事を三つ並べてみました。

先に最新の記事を大きく表示するようにしたのですが、

【WordPress】トップページで最新記事を大きく表示する方法

カテゴリ別は、目立たせたいカテゴリだけをピックアップして目立たせることを目的としました。

今日はその方法をご紹介します！

元々の要望は、部長ナビのページ

私ちゃぼPは、昨年末に部長ナビさんから「カテゴリ別の新着記事を表示したいんだよねー」と要望を貰いまして、いろいろと調べながらの作業でした。

【DIY】トップページにサムネ付きカテゴリ別新着記事を実装する・・・作業中（笑）

部長ナビのページはカテゴリーが多いので、６個のカテゴリーを表示するようにしています。ってか、本当は６個でも足りないくらいページ数が多いっすね。

http://nabi1080.com/management/wordpress/49875

私のサイトはページ数も少ないですから、三つにしています。

「loop.php」を編集する

まず、子テーマ内に、「loop.php」が存在しない場合は、子テーマ内にファイルをコピーしてから編集しましょう。

挿入するコードは、以下のようになります。

	<?php if ($paged <= 1): ?>

		<?php if ($counter <= 1): ?><!--　最初の記事判別　-->

			<!-- 新着カテゴリ1 -->
			<div class="cat_article1">

			<?php
			    $cat = 'pc';
			    $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="/apps/wordpress/pc">PC</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(640, 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 = 'iphone';
			    $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="/apps/wordpress/iphone">iPhone</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(640, 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 = 'wordpress';
			    $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="/apps/wordpress/wordpress">WordPress</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('large', 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 else:?>

			<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
			<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
			<div class="thumb-box sub-color-background">

			<?php if(has_post_thumbnail()){ ?>
				<a href="<?php the_permalink() ?>">
				<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
				</a>
			<?php }else{ ?>
				<a href="<?php the_permalink() ?>" class="no-deco">
				<div class="no-thumbnail"><p>No thumbnail</p></div>
				</a>
			<?php } ?>

			</div><!-- .thumb-box -->
			<div class="post-info">
			<p class="up-date"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?></p>
			<?php
			$days = 3;
			$today = date_i18n('U');
			$entry = get_the_modified_date('U');
			$news = date('U',($today - $entry)) / 86400 ;
			if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
			?>
			<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<?php get_template_part("sns_count") ?>
			<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
			</div><!-- .post-info -->
			</div><!-- .post -->
			<?php
			if($count==6){ ?>

			<?php }
			if($count%2==0){echo "<div class='clear2'></div>";}
			if($count%3==0){echo "<div class='clear3'></div>";}
			$count++;
			?>

		<?php endif;?><!--　/最初の記事判別　-->
		
	<?php else:?>

		<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
		<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
		<div class="thumb-box sub-color-background">

		<?php if(has_post_thumbnail()){ ?>
			<a href="<?php the_permalink() ?>">
			<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
			</a>
		<?php }else{ ?>
			<a href="<?php the_permalink() ?>" class="no-deco">
			<div class="no-thumbnail"><p>No thumbnail</p></div>
			</a>
		<?php } ?>

		</div><!-- .thumb-box -->
		<div class="post-info">
		<p class="up-date"><span class="lsf">time </span><?php
the_time('Y/m/d') ?></p>
		<?php
		$days = 3;
		$today = date_i18n('U');
		$entry = get_the_modified_date('U');
		$news = date('U',($today - $entry)) / 86400 ;
		if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
		?>
		<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
		<?php get_template_part("sns_count") ?>
		<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
		</div><!-- .post-info -->
		</div><!-- .post -->
		<?php
		if($count==6){ ?>

		<?php }
		if($count%2==0){echo "<div class='clear2'></div>";}
		if($count%3==0){echo "<div class='clear3'></div>";}
		$count++;
		?>

	<?php endif; ?>

上の図のように、

カテゴリスラッグ名
カテゴリトップのURL
カテゴリ表示名

を自分のサイトに合うように変更します。

スラッグ名は、「投稿」–「カテゴリー」から調べられます。

なお、上記の例では、ページネーション機能によるトップページのページ送り２ページ目以降では表示させないようにしています。

１ページ目

２ページ目以降

モバイルでは表示しない設定

モバイル表示ではこのボックスは表示しないようにします。

function.phpへのモバイル定義の記述がされていない場合は、以下のページを参考に記載を行います。

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに！

先ほど挿入したコードを、下記の「ここに上のコードが入る」の部分に挿入します。

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

	<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
	<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
	<div class="thumb-box sub-color-background">
	<?php if(has_post_thumbnail()){ ?>
		<a href="<?php the_permalink() ?>">
		<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
		</a>
	<?php }else{ ?>
		<a href="<?php the_permalink() ?>" class="no-deco">
		<div class="no-thumbnail"><p>No thumbnail</p></div>
		</a>
	<?php } ?>
	</div><!-- .thumb-box -->
	<div class="post-info">
	<p class="up-date"><span class="lsf">time </span><?php the_time('Y/m/d') ?></p>
	<?php
	$days = 3;
	$today = date_i18n('U');
	$entry = get_the_modified_date('U');
	$news = date('U',($today - $entry)) / 86400 ;
	if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
	?>
	<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<?php get_template_part("sns_count") ?>
	<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
	</div><!-- .post-info -->
	</div><!-- .post -->

	<?php
	if($count==6){ ?>
		
	<?php }
	if($count%2==0){echo "<div class='clear2'></div>";}
	if($count%3==0){echo "<div class='clear3'></div>";}
	$count++;
	?>

<?php else: ?>

ーーここに上のコードが入るーー

<?php endif; ?>

style.cssへ追記

次にstyle.cssへの追記です。

/* 最新のカテゴリ記事
--------------------------------------------------------- */
.cat_article1 {
	margin:0 5px 20px 0px;
	float: left;
	width: 32%;
}

.cat_article2 {
	margin:0 8px 20px 8px;
	float: left;
	width: 32%;
}

.cat_article3 {
	margin:0 0px 20px 5px;
	float: left;
	width: 32%;
}

.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: 150px;
  display: block;
}

.cat_article1 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article1 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.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: 150px;
  display: block;
}

.cat_article2 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article2 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.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: 150px;
  display: block;
}

.cat_article3 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}

.cat_article3 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.cat_article3 .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: 4px 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;
	border:1px solid #fff;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 2px 15px 0;
}

/* ここまで

これで完成です。

上記の例はマテリアルでの実装例ですが、トップページを表示するテンプレートに記載すれば、特にマテリアルだけではなく実装できると思います。

カテゴリを目立たせたい方は、試してみてくださいね！

「【WordPress】サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編」への2件のフィードバック

鈴江浩之 より:

2016年6月5日 11:09 AM

こんにちは、鈴江です。
部長ナビさんのどころでコード使わせていただきました。
このトップページにカテゴリ新着記事表示やりたかったんです。
ありがとうございます。
鈴江

返信
1. chabo より:
  
  2016年6月5日 11:56 AM
  
  どうぞどうぞ！
  どんどん使ってやってください。でも少し色を変えるとかした方がいいかもです。
  あまりに部長サイトに似てしまうので・・・
  
  返信

元々の要望は、部長ナビのページ

「loop.php」を編集する

モバイルでは表示しない設定

style.cssへ追記

「【WordPress】 サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編」への2件のフィードバック

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

「【WordPress】サムネイル付きカテゴリ別新着記事をトップページに表示する〜マテリアル編」への2件のフィードバック

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