投稿記事の前後ページ表示

カスタマイズ, WordPress 

今の記事のページだと、投稿した記事の前後のページへ飛ぶことができるようにテンプレートをカスタマイズしました。投稿記事から同じカテゴリの前後記事へ飛んでもらうきっかけのひとつになればよいなぁ。
2015.05.09 同カテゴリの前後の記事表示の設定になっていなかったです。タイトル修正しました。
ただ、同カテゴリかブログ全体にするかなかなか悩ましいところです。

どうやって前後の記事を表示するか

wordpressのコードを使えば簡単にできるのですが、レイアウトやこまかい設定がうまくできませんでした。
そんなわけで、以下のサイトを参考にしてみました。現状では、そのまま貼り付けている感じです。

【WordPress】前の記事・次の記事へのサムネイル付きページめくり機能導入記

【WordPress】前の記事・次の記事にサムネイル画像を表示する

SiteOrigin設定されているコードと入れ替え

Siteoriginのテンプレートには、前後のページ送りのコードが記述されていますが、デザインがあまりよくない。
そんなわけで、初期に記述されているコードを削除して、新しくコードを追加しました。
【single.php】

<?php if( siteorigin_setting('navigation_post_nav') ) vantage_content_nav( 'nav-below' ); ?>

上記のコードは、ページ送りのコードになっています。
そのコード削除し、以下のように記述しました。


<div id="prev_next" class="clearfix">  
<?php $prevpost = get_adjacent_post(false, '', true); //前の記事 $nextpost = get_adjacent_post(false, '', false); //次の記事 if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき ?>
<?php
 if ( $prevpost ) { //前の記事が存在しているとき
  echo '<a href="' . get_permalink($prevpost->ID) . '" title="' . get_the_title($prevpost->ID) . '" id="prev" class="clearfix">

<div id="prev_title"><i class="fa fa-angle-double-left" aria-hidden="true"></i> 前の記事</div>

' . get_the_title($prevpost->ID) . '
</a>';
 } else { //前の記事が存在しないとき
 echo  '
<div id="prev_no"><a href="' .home_url('/'). '">
<div id="prev_next_home"><i class="fa fa-home"></i>
  </div>
</a></div>

';
 }
 if ( $nextpost ) { //次の記事が存在しているとき
  echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix">  

<div id="next_title">次の記事 <i class="fa fa-angle-double-right" aria-hidden="true"></i></div>

'. get_the_title($nextpost->ID) . '
</a>';
 } else { //次の記事が存在しないとき
 echo '

<div id="next_no"><a href="' .home_url('/'). '">

<div id="prev_next_home"><i class="fa fa-home"></i>
 </div>

</a></div>

';
 }
?>
<?php } ?>
</div>

そして、CSSは以下のように設定しています。

/*--------------------------------
PREV NEXT
---------------------------------*/
#prev_next{
    width:100%;
    margin: 36px 0 24px;
    padding:0;
    display: table;
}

#prev_next  #prev, #prev_next  #next{
    width: 50%;
    padding:30px 10px 10px;
    border-top:#ccc 1px solid;
    border-bottom:#ccc 1px solid;
    display: table-cell;
    position:relative;
	text-decoration:none;
}
#prev_next #prev p, #prev_next #next p{
	    font-size:90%;
		line-height:1.5;
}
#prev_next #prev:hover, #prev_next #next:hover{
	background-color: rgba(238,238,238,0.7);
}

#prev_next #prev{
	border-right:#ccc 1px solid;
}

#prev_next #prev_title, #prev_next #next_title{
    font-size:90%;
    top:-1em;
    position:absolute; 
    border: 1px #ccc solid;
    background:#fff; 
    text-align: center;
    padding:3px;
    color:#666;
}
#prev_next #next_title{
	right:10px;
}

#prev_next #prev img{
    margin:0 auto;
	float:left;
}

#prev_next #next img{
    margin:0 auto;
	float:right;
}

#prev_next #prev_no, #prev_next #next_no{
	width: 50%;
	height:140px;
    padding:0 10px;
    display: table-cell;
}

#prev_next #prev_no{
	border-right:#ccc 1px solid;
}

#prev_next_home{
    margin:0 auto;
    background-color: #b2b2b2;
    border: solid 0px #fff;
    width: 100px;
    height:100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    box-shadow: 0 0 0 3px #b2b2b2;
    -webkit-box-shadow: 0 0 0 3px #b2b2b2;
    -moz-box-shadow: 0 0 0 3px #b2b2b2;
	text-align:center;
}

#prev_next_home:hover{
	background-color: #cccccc;
}

#prev_next_home i{
	color:#FFF;
	margin:10px auto ;
	font-size:16px;
	line-height: 100px;
}
/*-- ここまで --*/
/*--------------------------------------
  スマホ PREV NEXT
--------------------------------------*/
#prev_next #prev, #prev_next #prev::before, #prev_next #prev::after,
#prev_next #next, #prev_next #next::before, #prev_next #next::after {	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


#prev_next #prev_title, #prev_next #next_title{
    padding:3px 10px;
}
#prev_next #next_title{
	right:10px;
}

#prev_next #prev img{
    float:left;
    margin-right:10px
}

#prev_next #next img{
   float:right;
   margin-left: 10px;
}
/*-- ここまで --*/

参考にしたサイトのソースコードをそのまま入れ込めば問題なく表示されます。
ただ、スマホで表示した場合、サムネイルとタイトルの体裁が崩れてしまいよろしくないので、思い切ってサムネイル表示のコードは削除しています。

prev_next_cut

とりあえず、細かいレイアウトはおいといて、前後への記事への誘導ができました。

Sponsored Link

コメントを残す

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

CAPTCHA