wpカスタマイズ 2015-01-02

WordPressで次の記事や前の記事のアイキャッチも表示する

wordpress-next-thumbnail

今回は、WordPressの投稿記事の次へや前の記事のアイキャッチ画像も表示する方法のご紹介です。
また、最新の記事や最後の記事の場合は、トップページのリンクを表示させています。
せっかく表示させているなら、次への投稿や前の投稿のタイトルだけよりも、一緒にアイキャッチ画像も表示させた方が、クリック率も上がると思いますし、回遊率も向上出来ると思います。

今回の実装のHTMLとCSSは当サイトを用のコードなので、利用するのであればご自身のサイトの環境に合わせて下さい。

次の記事や前の記事にアイキャッチを表示

今回の実装は、投稿のシングルページで表示させていので、single.phpに下記コードを貼り付けて下さい。

<div class="post-nav box clearfix">
  <?php $prevpost = get_previous_post(); //前の投稿情報を取得する。現在の投稿情報と同じカテゴリーで絞り込む場合はtrue ?>
  <?php $nextpost = get_next_post(); //次の投稿情報を取得する。現在の投稿情報と同じカテゴリーで絞り込む場合はtrue ?>
  <?php if($prevpost): //前の記事が存在する場合?>
  <?php $prevThumbnail = get_the_post_thumbnail($prevpost->ID, 'thumbnail' );?>
  <a href="<?php echo get_permalink($prevpost->ID);?>" title="<?php echo get_the_title($prevpost->ID);?>" class="post-previous">
    <h3>PREVIOUS</h3>
    <?php echo $prevThumbnail;?>
    <p>
      <?php echo get_the_title($prevpost->ID);?>
    </p>
  </a>
  <?php else: //前の記事が存在しない場合の処理 ?>
  <a href="<?php echo esc_url(home_url('/')); ?>" class="post-previous post-previous-home">
    <h3>最後の記事です</h3>
    <p>
      <i class="icon-home"></i>
    </p>
  </a>
  <?php endif;?>
  <?php if($nextpost): //次の記事が存在する場合の処理 ?>
  <?php $nextThumbnail = get_the_post_thumbnail($nextpost->ID, 'thumbnail' );?>
  <a href="<?php echo get_permalink($nextpost->ID);?>" title="<?php echo get_the_title($nextpost->ID);?>" class="post-next">
    <h3>NEXT</h3>
    <?php echo $nextThumbnail;?>
    <p>
      <?php echo get_the_title($nextpost->ID);?>
    </p>
  </a>
  <?php else: //次の記事が存在しない場合の処理 ?>
  <a href="<?php echo esc_url(home_url('/')); ?>" class="post-next post-next-home">
    <h3>最新の記事です</h3>
    <p>
      <i class="icon-home"></i>
    </p>
  </a>
  <?php endif;?>
</div>
<!--/.post-nav-->

上記コードでは、【<?php $prevpost = get_previous_post(); ?>】【<?php $nextpost = get_next_post(); ?>】で次の投稿と前の投稿の情報を変数に入れて、if分で条件分岐をし、もし次や前に投稿がない場合は、トップページのリンク付きのアイコンフォントを表示させています。

アイキャッチ画像の表示は、【$prevpost】を利用して、WordPressのテンプレートタグの【get_the_post_thumbnail】で表示させています。

アイコンフォントの利用などは、下記ページをご参考下さい。

最後にスタイルを調整

最後にスタイルを調整して終わりですが、下記CSSのコードは当サイトを前提としたCSSですので、ご利用する場合は、不都合などが起きる場合があると思いますので、利用する場合はご自身の環境に合わせて変更してご利用してください。

/*---------------------------------------------------------
  				投稿 PREVIOUS NEXT
---------------------------------------------------------*/
.box{
	background:#fff;
	box-shadow:0 0 5px rgba(0,0,0, 0.2);
	width:720px;
	margin-bottom:30px;
	}
.post-nav{
	overflow:hidden;
	min-height: 100%;  
    height: auto !important;
	padding-bottom:20px;
	}
.post-nav a{
	display:block;
	padding-bottom: 32767px !important;  
    margin-bottom: -32767px !important;
	}
.post-nav a.post-previous,.post-nav a.post-next{
	padding:20px;
	width:320px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	}
.post-nav a.post-previous{
	float:left;
	}
.post-nav .post-previous h3{
	font-size:16px;
	margin-bottom:10px;
	color:#3d3d3d;
	}
.post-nav .post-previous img{
	float:left;	
	}
.post-nav .post-previous p{
	margin-left:135px;
	color:#3d3d3d;	
	}
.post-nav a.post-next{
	float:right;
	}
.post-nav .post-next h3{
	text-align:right;
	font-size:16px;
	margin-bottom:10px;
	color:#3d3d3d;
	}
.post-nav .post-next img{
	float:right;	
	}
.post-nav .post-next p{
	text-align:right;
	margin-right:135px;
	color:#3d3d3d;
	}
.post-nav a.post-next-home p,.post-nav a.post-previous-home p{
	font-size:150px;
	color:#3d3d3d;
	line-height:0;
	text-align:center;
	margin:0;
	}
.post-nav a.post-previous:hover,.post-nav a.post-next:hover{
	background:#f8f8f8;
	text-decoration:none;
	}

バタバタ作ったので、レスポンシブなどには対応させていませんし、現在このサイトも今回の実装が今まで何故か行っていなく先ほど急いでブログの投稿にだけ次と前のアイキャッチ画像も一緒に表示を行いました。www
当サイトで配布している無料テーマがレスポンシブですので、そちらに実装しましたら、コードなどを再アップしたいと思います。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.王(上級) を攻略したパーティメンバー

NEXT tab-panel

CSS3とjQueryでシンプルなタブパネルを作成