ワードプレス　次の記事・前の記事制作　コピペOK | 福岡のホームページ制作はマリオ君にお任せ

<?PHP previous_post_link('%link', '古い記事へ');//古い記事へのリンク?>
<?PHP next_post_link('%link', '新しい記事へ);//新しい記事へのリンク?>

<div class="pagenation02">  
    <div class="old"><?PHP previous_post_link('%link', '<< 前の記事へ');//古い記事へのリンク?></div>
    <div class="new"><?PHP next_post_link('%link', '次の記事へ >>');//新しい記事へのリンク?></div>
</div>
<p><a href="<?PHP echo home_url();?>/news/" class="morebtn">最新情報一覧へ</a></p>

<!--ページネーションコンテンツ-->
<div class="pagenation">
	<div class="old"><?PHP previous_post_link('%link', '<span>前の記事へ</span>');//古い記事へのリンク?></div>
	<div class="goall"><a href="<?PHP echo esc_url( home_url() ); ?>/blog/">一覧へ</a></div>
	<div class="new"><?PHP next_post_link('%link', '<span>次の記事へ</span>');//新しい記事へのリンク?></div>
</div>
<!--ページネーションコンテンツ-->

////////////////////ページネーションCSS
.pagenation{
	
	display: flex;
	justify-content: space-between;
	margin: 40px auto 100px;
	max-width: 1200px;
	padding: 0 20px; 
	div{
		width: calc((100% - 30px) / 3);
		
		
		a{
			display: block;
			padding: 15px;
			border-radius: 10px;
			background: #EEE;
		}
	}
	.old{
		width: 150px;
        @media screen and (max-width: 768px){
			width: 47px;
        }
		a{
			position: relative;
			padding: 15px 15px 15px 40px;
			@media screen and (max-width: 768px) {
				height: 47px;
				padding: 0;
				span{
					display: none;
				}
			}
			&::before{

				content: '';
				display: block;
				width: 17px;
				height: 17px;
				background:url("../img/pageico.svg") no-repeat;
				transform:rotate(180deg);
				background-size: contain;
				position: absolute;
				top: calc(50% - 17px/2);
				left: 10px;
				@media screen and (max-width: 768px) {
					left: 13px;

				}
			}
		}
	}
	
	.new{
		width: 150px;
        @media screen and (max-width: 768px) {
            width: 47px;
			
        }
		a{
			text-align: right;
			position: relative;
			padding: 15px 40px 15px 15px;
			@media screen and (max-width: 768px) {
				height: 47px;
				padding: 0;
				span{
					display: none;
				}
			}
			&::before{

				content: '';
				display: block;
				width: 17px;
				height: 17px;
				background:url("../img/pageico.svg")  no-repeat;
				background-size: contain;
				position: absolute;
				top: calc(50% - 17px/2);
				right: 10px;
				@media screen and (max-width: 768px) {
					right: 13px;

				}
			}
		}
	
	
	}
	.goall{
		text-align: center;
		@media screen and (max-width: 768px) {
			width:calc(100% - 120px);

		}
		a{
			background: #2296DF;
			color: #FFF;
			height: 47px;
		}
		
	}
}
////////////////////ページネーションCSS