前後記事へのナビゲーションにアイキャッチ画像を表示

wordpressテンプレートタグを使う方法であればこれ

<?php next_post_link('%link', '« 次の記事へ') ?>
<?php previous_post_link('%link', '前の記事へ »') ?>

これでは画像やタイトルを引っ張れない、

そこで、
single.php内で以下をコピペ
コチラの記事を参考にしました。
http://pressstocker.com/postnavi-eyecatch/

<?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>


	« 次の記事
	<a href="<?php echo get_permalink($nextpost->ID); ?>">
		<?php echo get_the_post_thumbnail($nextpost->ID); ?>
		<?php echo esc_attr($nextpost->post_title); ?>
	</a>


<?php endif; ?>

<?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>


	前の記事 »
	<a href="<?php echo get_permalink($prevpost->ID); ?>">
		<?php echo get_the_post_thumbnail($prevpost->ID); ?>
		<?php echo esc_attr($prevpost->post_title); ?>
	</a>


<?php endif; ?>

ポリスのアイテム詳細ページの画面右と左の矢印をホバーすると
ぴょこっと出てくる仕様にカスタム
http://www.policewatch.jp/adder-14536jsu-13a-2/

<?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>


<div class="previous_item_wrapper">          


<div class="previous_item">
    <span><img src="<?php bloginfo('template_directory'); ?>/images/arrow_left_s.png" /></span>


<div class="mask">
	<a href="<?php echo get_permalink($prevpost->ID); ?>">
        previous watch
		<?php echo get_the_post_thumbnail($prevpost->ID, array(80,80) ); ?>
		
<?php echo nl2br(get_post_meta($prevpost->ID, 'brand-name', true)); ?>
        
<?php echo nl2br(get_post_meta($prevpost->ID, 'product-code', true)); ?>
	</a>
     </div>


</div>


</div>


<?php endif; ?>  



         
<?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>


<div class="next_item_wrapper"> 


<div class="next_item">
    <span><img src="<?php bloginfo('template_directory'); ?>/images/arrow_right_s.png" /></span>


<div class="mask">
	<a href="<?php echo get_permalink($nextpost->ID); ?>">
        next watch
		<?php echo get_the_post_thumbnail($nextpost->ID, array(80,80) ); ?>
		
<?php echo nl2br(get_post_meta($nextpost->ID, 'brand-name', true)); ?>
        
<?php echo nl2br(get_post_meta($nextpost->ID, 'product-code', true)); ?>
        </a>
    </div>


</div>


</div>


<?php endif; ?>

CSSでホバーアニメーションを追加

.previous_item_wrapper {
    position: fixed;
    top: 50%;
    left: 0;
    
    height: 100px;
    margin-top: -50px;
    z-index: 10000;
    
}
.next_item_wrapper {
    position: fixed;
    top: 50%;
    right: 0;
   
    margin-top: -50px;
    height: 100px;
    z-index: 10000;
}


.next_item {
    display: table-cell;
    vertical-align: middle;
    height: 100px; 
    
    text-align: right;
}
.previous_item {
    display: table-cell;
    vertical-align: middle;
    height: 100px; 
   
    text-align: left;
}

.previous_item .mask {
	position:		fixed;
	top:			50%;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
    background-color: #000;
    margin-top: -60px;
    max-width: 200px;
    
}
.next_item .mask {
	position:		fixed;
	top:			50%;
	right:			0;
	opacity:		0;	/* マスクを表示しない */
    background-color: #000;
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
    margin-top: -60px;
    max-width: 200px;
    
}
.previous_item_wrapper:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-left: 30px;	/* 右にずらす */
}
.next_item_wrapper:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-right:30px;	/* 右にずらす */
}
.next_item .mask a,
.previous_item .mask a{
    text-align: center;
    display: block;
    font-size: 12px;
    padding: 10px;
}