css BB中的酷上一页/下一页按钮：https：//beyondbeaver.com/add-custom-previous-next-links-on-blog-posts/

Posted 2021-05-13

<?php
// add previous / next posts to single posts
// change fl_post_bottom_meta_open to the hook that is appropriate to your theme. Genesis would use genesis_before_comments as the hook
add_action( 'fl_post_bottom_meta_open', 'eo_prev_next_post_nav' );
function eo_prev_next_post_nav() {
  
	if ( is_single() ) { ?>
 
		<div class="navi-previous-next clear clearfix">
	            <div class="navi-previous navi-item"> <?php 	
		    	$prevPost = get_previous_post();
			$prevthumbnail = get_the_post_thumbnail($prevPost->ID, 'medium'); ?>
		       	<p class="navi-icon"><?php previous_post_link('%link', '&larr; <span class="navi-title">Previous Article</span>');?></p>
		       	<div class="navi-post-content">
		  		<?php previous_post_link('%link', $prevthumbnail); ?>
		  		<?php previous_post_link('%link', '%title'); ?>
		  	</div>
	            </div>
	
	            <div class="navi-next navi-item"> <?php
	                $nextPost = get_next_post();
	                $nextthumbnail = get_the_post_thumbnail($nextPost->ID, 'medium'); ?>
	                <p class="navi-icon"><?php next_post_link('%link', '<span class="navi-title">Next Article</span> &rarr;'); ?></p>
	                <div class="navi-post-content">
	                	<?php next_post_link('%link', $nextthumbnail); ?>
	                	<?php next_post_link('%link', '%title'); ?>
	                </div>
	            </div>
	        </div>
 
	<?php }
 
}

/* ----------------------
SINGLE POSTS 
---------------------- */
/* SINGLE POST NAVIGATION - PREVIOUS / NEXT */
.navi-previous-next{clear:both;font-style:normal;}
.navi-previous-next img{max-width:100%;height:auto;margin-bottom:5px;}
.navi-previous-next .navi-item{width:48%;float:left;margin-left:4%;margin-bottom:30px;}
.navi-previous-next .navi-previous{margin-left:0;text-align:left;}
.navi-previous-next .navi-next{text-align:right;}

@media only screen and (min-width: 992px) {

	/* SINGLE POST NAVIGATION - PREVIOUS / NEXT for larger devices and up */
	.navi-previous-next a{font-size:0.8em;display:block;}
	.navi-previous-next a:hover{text-decoration:none;}
	.navi-previous-next .navi-title{display:none;}
	.navi-previous-next .navi-icon a{font-size:24px;}
	.navi-previous-next .navi-item{position:fixed;top:47%;max-width:150px;}
	.navi-previous-next .navi-previous{left:10px;}
	.navi-previous-next .navi-next{right:10px;}
	.navi-previous-next .navi-post-content{display:none;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);border:5px solid #fff;background:#fff;}
	.navi-previous-next .navi-item:hover .navi-post-content{display:block;}

}