ฟังก์ชั่น

ใส่ฟังก์ชั้น page break ให้กับธีมที่แสดง และ เปลี่ยน เปลี่ยนค่าที่บรรทัดนี้
‘next_or_number’ => ‘next’, เพื่อให้แสดงเป็นตัวเลข เเทน next previous

วิธี1 ใส่ใน single.php

<div class="category-blue">
<?php
$args = array(
    'before'           => '<p>' . __( '<< >>' ),
    'after'            => '</p>',
    'link_before'      => '',
    'link_after'       => '',
    'next_or_number'   => 'next',
    'separator'        => ' ',
    'nextpagelink'     => __( '[ NEXT ]' ),
    'previouspagelink' => __( '[ previous ]' ),
    'pagelink'         => '%',
    'echo'             => 1
    );
wp_link_pages ($args);?>
</div>

css
.category-blue a{margin:0px 5px 0px 0px;float:left;padding:3px 10px 3px 10px; background-color:#038fcf; font-family:Fantasy; font-weight: normal; line-height:19px; text-decoration:none; color:#FFFFFF; text-shadow:1px 1px 0px #336600; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;}
.category-blue a:hover{ padding:3px 10px 3px 10px; background-color:#15ce09; font-family:Fantasy; font-weight: normal; text-decoration:none; color:#FFFFFF; text-shadow:1px 1px 0px #336600;}

วิธี2

ใส่ใน single.php

<?php wp_link_pages(array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>', 'next_or_number' => 'next_and_number', 'separator' => '', 'nextpagelink' => __( '&raquo;' ), 'previouspagelink' => __( '&laquo;' ), 'pagelink' => '%')); ?>

ใส่ใน functions.php

<?php

/**
 * Filter wp_link_pages to do both next and number
 */
 
add_filter('wp_link_pages_args', 'wp_link_pages_args_prevnext_add');
/**
 * Add prev and next links to a numbered link list
 */
function wp_link_pages_args_prevnext_add($args)
{
    global $page, $numpages, $more, $pagenow;

    if (!$args['next_or_number'] == 'next_and_number') 
        return $args; # exit early

    $args['next_or_number'] = 'number'; # keep numbering for the main part
    if (!$more)
        return $args; # exit early

    if($page-1) # there is a previous page
        $args['before'] .= _wp_link_page($page-1)
            . $args['link_before']. $args['previouspagelink'] . $args['link_after'] . '</a>'
        ;

    if ($page<$numpages) # there is a next page
        $args['after'] = _wp_link_page($page+1)
            . $args['link_before'] . $args['nextpagelink'] . $args['link_after'] . '</a>'
            . $args['after']
        ;

    return $args;
}

ใส่ css

วิธีอื่นๆ

https://bavotasan.com/2012/a-better-wp_link_pages-for-wordpress/
https://wordpress.stackexchange.com/questions/14406/how-to-style-current-page-number-wp-link-pages
https://codeless.co/styling-current-page-in-wordpress-wp_link_pages/

https://developer.wordpress.org/reference/functions/wp_link_pages/

การเขียน css ของ .post-page-numbers current

span.post-page-numbers.current

ใช้จริง

.post-page-numbers { padding:3px 10px 3px 10px; background-color:#038fcf; font-family:Fantasy; font-weight: normal; text-decoration:none; color:#FFFFFF; text-shadow:1px 1px 0px #336600;}
span.post-page-numbers.current{ padding:3px 10px 3px 10px; background-color:#15ce09; font-family:Fantasy; font-weight: normal; text-decoration:none; color:#FFFFFF; text-shadow:1px 1px 0px #336600;}

Ref.
.post-page-numbers {
    background-color: #ddd;
    padding: 10px;
    margin: 5px;
    color: #ededed;
}

span.post-page-numbers.current {
    color: #000;
}

.post-page-numbers:hover {
    color: #ff0000;
    background-color: #ffa500;
}

สรุปใช้วิธีนี้

ในการเขียน CSS จะมีความแตกต่างกับการเขียน css ธรรมดาทั่วไป

.post-page-numbers { padding:3px 10px 3px 10px; background-color:#038fcf; font-family:Fantasy; font-weight: normal; text-decoration:none; color:#FFFFFF; text-shadow:1px 1px 0px #336600;}
.post-page-numbers:hover{ padding:3px 10px 3px 10px; background-color:#FF6600; font-family:Fantasy; font-weight: normal; text-decoration:none; color:#FFF; text-shadow:1px 1px 0px #336600;}
.post-page-numbers:active{ padding:3px 10px 3px 10px; background-color:red; font-family:Fantasy; font-weight: normal; text-decoration:none; color:#FFF; text-shadow:1px 1px 0px #336600;}
span.post-page-numbers.current{ padding:3px 10px 3px 10px; background-color:#15ce09; font-family:Fantasy; font-weight: normal; text-decoration:none; color:#FFFFFF; text-shadow:1px 1px 0px #336600;}

และใส่ codeนี้ใน single.pgp

<!-- page break-->
<?php
$args = array(
    'before'           => '<p>' . __( '>' ),
    'after'            => '</p>',
    'link_before'      => '',
    'link_after'       => '',
    'aria_current'     => 'page',
    'next_or_number'   => 'number', /*next*/
    'separator'        => ' ',
    'nextpagelink'     => __( '[ NEXT ]' ),
    'previouspagelink' => __( '[ previous ]' ),
    'pagelink'         => '%',
    'echo'             => 1
	
    );
wp_link_pages ($args);?>
<!-- page break-->

เพิ่มเติมวิธีอื่น

https://usewordpress.com/snippets/wordpress-wp_link_pages-pagination-examples/

Basic Block Style Number Format

$a = array(
	'before'           => '<div id="block-nav">',
	'after'            => '</div>',
	'next_or_number'   => 'number',
	'pagelink'         => '%',
);

wp_link_pages($a);

<style>
#block-nav a.post-page-numbers, #block-nav .post-page-numbers {
    font-size: 1.5em;
    border: 1px solid;
    padding: 5px 10px;
    background: #eeeeee;
    color: red;
    transition: 0.3s;
}
#block-nav span.post-page-numbers.current {
    color: #ffffff;
    background: red;
    border: 1px solid #999999;
}
#block-nav a.post-page-numbers:hover {
    background-color: red;
    color: #ffffff;
}
</style>

Block Style Page Link Using Both Numbers And Words

$b = array(
	'before'           => '<div id="mix-nav">',
	'after'            => '</div>',
	'next_or_number'   => 'number',
	'pagelink'         => '%',
);

wp_link_pages($b);

<style>
#mix-nav a.post-page-numbers, #mix-nav .post-page-numbers,
#mix-nav .text-next, #mix-nav .text-prev {
    font-size: 1.5em;
    border: 1px solid;
    padding: 5px 10px;
    background: #eeeeee;
    color: red;
    transition: 0.3s;
}
#mix-nav span.post-page-numbers.current,
#mix-nav .text-next, #mix-nav .text-prev {
    color: #ffffff;
    background: red;
    border: 1px solid #999999;
}
#mix-nav a.text-prev {
    margin-right: 5px;
}
#mix-nav a.text-next {
    margin-left: 5px;
}
#mix-nav a.post-page-numbers:hover {
    background-color: red;
    color: #ffffff;
}
</style>

<script>
jQuery(document).ready(function () {
	//  Add class to first and last element
	jQuery('#mix-nav > :first').addClass('prev');
	jQuery('#mix-nav > :last').addClass('next');

	//  Create variable url for first and last element
	var prev = jQuery("#mix-nav :first").attr("href");
	var next = jQuery("#mix-nav :last").attr("href");

	//  Only show text link if next or prev contain links
	if (prev) {
		jQuery('.prev').before('<a class="text-prev" href="' + prev + '">First</a>');
	}
	if (next) {
		jQuery('.next').after('<a class="text-next" href="' + next + '">Last</a>');
	}
});
<script>

Basic Block Style Word Format With Icons

$a = array(
	'before'           => '<div id="next-nav">',
	'after'            => '</div>',
	'next_or_number'   => 'next',
	'nextpagelink'     => 'Next Page <span class="dashicons dashicons-arrow-right"></span>',
	'previouspagelink' => '<span class="dashicons dashicons-arrow-left"></span> Previous Page',
);

wp_link_pages($a);

<style>
#next-nav a.post-page-numbers, #next-nav .post-page-numbers {
    font-size: 1.5em;
    border: 1px solid;
    padding: 5px 10px;
    background: #eeeeee;
    color: red;
    transition: 0.3s;
}
#next-nav span.post-page-numbers.current {
    color: #ffffff;
    background: red;
    border: 1px solid #999999;
}
#next-nav a.post-page-numbers:hover {
    background-color: red;
    color: #ffffff;
}
#next-nav span.dashicons {
    font-size: 2em;
    height: unset;
    width: unset;
    line-height: 1;
    vertical-align: middle;
    top: -2px;
    position: relative;
}
</style>