0ness
12/28/2018 - 9:14 PM

wordpress：Pagenation

WordPress用のページネーション

index.pug
content_copyfile_download
	+div.wp-article-pagenavi
		a.previouspostslink(rel="prev" href="（リンク）")
		a.page.smaller(title="Page 1" href="（リンク）") 1
		span.current 2
		a.page.larger(title="Page 3" href="（リンク）") 3
		a.nextpostslink(rel="next" href="（リンク）")
style.scss
content_copyfile_download
/*--　ページャー --*/
.wp-pagenavi { margin-top: 50px; text-align: center;
		a { display: inline-block; padding:10px 13px; font-size: 1.6rem; line-height: 1; text-decoration: none;  border: 1px solid $color-bdr; transition: .1s ease-out background-color;
			&:hover { background-color: rgba(245, 244, 249, 0.1); }
		}
		.current { display: inline-block; padding:10px 13px; font-size: 1.6rem; line-height: 1; text-decoration: none;  border: 1px solid $color-bdr; background-color: rgba(245, 244, 249, 0.1);}
		.previouspostslink,
		.nextpostslink { border: none; padding-top: 12px; font-size: 1.4rem;
			&:hover { background:none; text-decoration: underline;}
		}
		.previouspostslink { border-left: none !important;
			@include icofont($icofont-arw) { display: inline-block; margin-right: 10px; font-size: 1.1rem; transform: rotate(180deg);}
		}
		.nextpostslink{
			@include icofont-after($icofont-arw) { display: inline-block; margin-left: 10px; font-size: 1.1rem;}
		}
}

@include sp {
	.wp-pagenavi  {
			a { padding: 6px 10px 7px; font-size: 1.4rem;}
			.current { padding: 6px 10px 7px; font-size: 1.4rem; }
			.previouspostslink,
			.nextpostslink { border: none; padding-top: 8px; font-size: 1.2rem;
				&:hover { background:none; text-decoration: underline;}
			}
	}
}