如何优化长文章分页样式

如何优化长文章分页样式




今天闲来无事,就继续折腾了下个人博客的网站主题,突发奇想,因为最近再折腾URL样式重写和分页,专门测试了长文章分页样式,发现默认的样式简陋,因此查阅了相关文章,并在另一个文章的css的基础上自行琢磨了下进行更改。

1 添加分页按钮

对于支持分页功能的网站,通过在文章内容中插入html标记可以使用分页按钮:

<p>
    <!--nextpage-->
</p>

接下来,只要主题里具备分页按钮的支持,就能在网页中显示分页按钮了

2 在主题文件里增加相关分页函数

由于本站默认主题分页支持较为简陋,因此,参考了其他文章的相关介绍,在inc/template-tags.php增加如下代码:

if ( ! function_exists( 'nisarg_pages_navigation' ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 *
 * @todo Remove this function when WordPress 4.3 is released.
 */
function nisarg_pages_navigation() {
    wp_link_pages(array(
        'before' => '<div class="page-links">'.esc_html__( 'Pages:', 'nisarg' ), 
        'after' => '', 
        'next_or_number' => 'next', 
        'previouspagelink' => __('PrevPage', 'nisarg' ), 
        'nextpagelink' => ""));
    wp_link_pages(array(
        'before' => '', 
        'after' => '', 
        'next_or_number' => 'number', 
        'link_before' =>'<span>', 
        'link_after'=>'</span>'
    ));
    wp_link_pages(array(
        'before' => '',
        'after' => '</div>',
        'next_or_number' => 'next',
        'previouspagelink' => '',
        'nextpagelink' => __('NextPage', 'nisarg' )
    ));
}
endif;

接着,只要在文章模板php中将分页部分使用如下代码替换即可:

<?php
    nisarg_pages_navigation();
?>

3 自定义CSS设定

到这里,我们可能希望能定制分页按钮的风格,因此,需要编写CSS,通过管理后台进入外观->自定义后,进入自定义CSS选项卡,插入如下代码即可:

.page-links {
    text-align:center;
    font-weight: bold;
}
.page-links span {
    background-color:rgb(255,0,255);
    color:rgb(0,255,255);
    font-weight: bold;
    padding:0px 2px;
    border:2px solid rgb(255,0,255);
}
.page-links a span {
    background-color:white;
    font-weight: bold;
    color: rgb(0,0,0);
}

.page-links a:hover span {
    background-color:rgb(100,100,255);
    color: white;
}

打赏

说点什么

avatar
  订阅  
提醒

扫码二维码快速访问本页

如何优化长文章分页样式 – 起航天空