タグ: Wordpress

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

本ブログでは、WordPress用テーマ「マテリアル」をベースにして、なんか色々カスタマイズしちゃっているわけでございますが、この度作者のNobuo（@Nobuo_Create）さんが、後継バージョンの「マテリアル2」を開発され、現在β版の公開をされているそうです。

http://wp-material2.net/

うぉ、サイドバーが左に来ているんだ！

かなり見た目が変わりましたね。なお、現在は試用してもらえる人を募集されているようで、色々な声のフィードバック後に正式版を公開されるようですよ。

「風の羅針盤」どうすんの？

で、このブログどうしようということになりますよ。そりゃね。

ただねぇ、かなりいじっちゃってるので、コレをまた最初から作り直すのはかなり根気がいる作業でございまして・・（笑）

今の見た目はかなり気に入って使っていますし、ま、トップページはほとんど変わっちゃっているので、どうなんかなと正直思ってしまっております。。

「ハミングバード」みたいな動的なテーマもイイな、なんて最近ちょっと思っていたりします。有料だけどね。

でもそうなるとほとんどオリジナルのカスタマイズは出来なさそうですから、それではつまらないかな、とも思っています。

でも、マテリアルは私のブログの礎ともなっているテーマで、カスタマイズを通して色々なことを学ぶことが出来ました。ファイル数もそれほど多くないし、カスタマイズはし易いテーマなんですよね。

ということで、しばらくはこのまま行くと思いますが、今後ともご贔屓に何卒よろしくお願いいたしますm(__)m

こんにちは。ちゃぼ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;
}

/* ここまで

これで完成です。

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

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