WordPress の wp_link_pages()で ul li を出力する

WordPress の wp_link_pages()で ul li を出力するように手を加えてみます。

WordPress の個別記事ページで長文の記事などをページ分割した場合、ページごとへのリンクを wp_link_pages() で出力するわけなんですが、リストとして出力されなくてCSSでスタイルを設定しづらいです。
似たような関数でペジネーションの場合はリスト形式なのにややこしい。

普通に出力した場合は、 <a>タグか、カレントページの場合は<span>タグで出力されます。

ちなみにページ分割は記事中に <!--nextpage--> です。

HTML

<!--nextpage-->

関数自体を新しく作っている方もいらっしゃるようですが、liだけならこれでいけるようです。
functions.php にこちらを追加。

functions.php

function custom_wp_link_pages_link( $link ) {
	return '<li>' . $link . '</li>';
}
add_filter( 'wp_link_pages_link',  'custom_wp_link_pages_link' );

あと、これだけだと<ul>がないので、呼び出し時に追加。

single.php

wp_link_pages( array( 'before' => '<ul>', 'after' => '</ul>' ) );

基本的にはこれで出力して、あとはCSSを適宜設定して見栄えを整えればOKです。

---

CSSをあてて、見かけを変更してみます。
制作しているテーマでは、コンテンツ部分をcontent.phpで出力しています。
他のテーマを使っている場合は、wp_link_pages()があるファイルを探してください。

divで外側を囲んで、classの指定を加えました。

wp_link_pages( array(
	'before' => '<div class="page-links"><span>'
				. esc_html__( 'Pages' ) . '</span><ul>' ,
	'after'  => '</ul></div>',
) );

CSS、わかりやすく書けるかと思ったら冗長になってしまいました。
ボタンを合体させて外側のみborder-radiusで角丸を付けています。
無駄な記述もあるかもしれませんが、ざっとこんな感じです。

styles.css

.page-links {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding:0;
	font-size:0.750rem;
	clear: both;
}
.page-links > span:first-child {
	font-size: 0.5rem;
	letter-spacing: 0.5em;
	padding-left: 0.5em;
	text-transform: uppercase;
}
.page-links a:link,
.page-links a:visited,
.page-links a:hover,
.page-links a:active {
	color: #333333;
	text-decoration: none;
	display: block;
}
.page-links ul {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
}
.page-links ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size:0.750rem;
}
.page-links ul li a {
	padding: 6px 9px 5px 9px;
	display: block;
}
.page-links ul li span{
	padding: 6px 9px 5px 9px;
	display: block;
}
.page-links ul li {
	margin: 0;
	border-top: rgba(153,153,153,1) 1px solid;
	border-bottom: rgba(153,153,153,1) 1px solid;
	border-left: rgba(153,153,153,1) 1px solid;
	font-size:0.750rem;
}
.page-links ul li:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.page-links ul li:first-child span {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.page-links ul li:last-child {
	border-right: rgba(153,153,153,1) 1px solid;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
.page-links ul li:last-child span {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
.current {
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#f0f0f0 25%, #f0f0f0 50%,
		#fff 50%, #fff 75%,
		#f0f0f0 75%, #f0f0f0
	);
	background-size: 4px 4px;
}

出来上がりはこんな感じです。

無事リスト形式で出力されて、スタイル当てやすくなりました。 :D

参考：
Customise wp_List_pages to output a UL LI
https://wordpress.stackexchange.com/questions/125221/customise-wp-list-pages-to-output-a-ul-li