修改WordPress 文章内分页样式

最近写了一篇比较长的隐私文章,用到了wp的文章分页功能。却发现默认的分页的页面又小又难找。于是想修改wp的默认分页,网上找了下相关的代码基本都是下面的样子:

<?php
$args = array (
    'before'            => '
<div class="page-links-XXX"><span class="page-link-text">' . __( 'More pages: ', 'textdomain' ) . '</span>',
    'after'             => '</div>
',
    'link_before'       => '<span class="page-link">',
    'link_after'        => '</span>',
    'next_or_number'    => 'next',
    'separator'         => ' | ',
    'nextpagelink'      => __( 'Next &raquo', 'textdomain' ),
    'previouspagelink'  => __( '&laquo Previous', 'textdomain' ),
);
 
wp_link_pages( $args );
?>

但是我尝试了上面的方法并没有任何的效果,通过wp_link_pages( $args );传送的参数没有生效。

最后采用下面的代码成功修改了展示样式(修改主题的single.php文件):

<?php get_header(); ?>
<!-- 自定义wp_link_pages分页样式开始 -->
<style>
#block-nav a.post-page-numbers, #block-nav .post-page-numbers ,#block-nav .link-pages{
    font-size: 1.0em;
    border: 1px solid;
    padding: 5px 10px;
    background: white;
    color: black;
    transition: 0.3s;
}
#block-nav span.post-page-numbers.current {
    color: white;
    background: black;
    border: 1px solid black;
}
#block-nav a.post-page-numbers:hover {
    background-color: black;
    color: #ffffff;
}
</style>
<!-- 自定义wp_link_pages分页样式结束 -->
<div class="row">
<div class="col-lg-8 col-12">
<main id="content" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
<div class="row">
<div class="col-12">
<?php while ( have_posts() ) : the_post(); ?>
<article id="entry-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
<div class="entry-meta entry-meta-top">
<?php the_category( ', ' ); ?>
</div>
<h1 class="entry-title" itemprop="headline">
<?php the_title(); ?>
</h1>
<div class="entry-meta entry-meta-bottom">
<time class="entry-date" itemprop="datePublished" datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time>
<a href="<?php echo esc_url( get_comments_link() ); ?>" class="entry-comments-no "><?php comments_number(); ?></a>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-featured">
<a class="ci-lightbox" href="<?php echo esc_url( olsen_light_get_image_src( get_post_thumbnail_id(), 'large' ) ); ?>">
<?php the_post_thumbnail( 'post-thumbnail', array( 'itemprop' => 'image' ) ); ?>
</a>
</div>
<?php endif; ?>
<div class="entry-content" itemprop="text">
<?php the_content(); ?>
<!-- 自定义wp_link_pages分页样式开始 -->
<div id="block-nav"><?php wp_link_pages('before="文章分页:" &after=....'); ?></div>
<!-- 自定义wp_link_pages分页样式结束 -->
</div>
<div class="entry-tags">
<?php the_tags( '', '' ); ?>
</div>
<div class="entry-utils group">
<?php get_template_part( 'part', 'social-sharing' ); ?>
</div>
<div id="paging" class="group">
<?php
                                    $prev_post = get_previous_post();
                                    $next_post = get_next_post();
                                ?>
<?php if( ! empty( $next_post ) ): ?>
<a href="<?php echo esc_url( get_permalink( $next_post ) ); ?>" class="paging-standard paging-older"><?php esc_html_e( 'Previous Post', 'olsen-light' ); ?></a>
<?php endif; ?>
<?php if( ! empty( $prev_post ) ): ?>
<a href="<?php echo esc_url( get_permalink( $prev_post ) ); ?>" class="paging-standard paging-newer"><?php esc_html_e( 'Next Post', 'olsen-light' ); ?></a>
<?php endif; ?>
</div>
<?php get_template_part( 'part', 'related' ); ?>
<?php comments_template(); ?>
</article>
<?php endwhile; ?>
</div>
</div>
</main>
</div>
<div class="col-lg-4 col-12">
<?php get_sidebar(); ?>
</div>
</div>
<!-- /row -->
<?php get_footer(); ?>

相关代码已经提交到github:https://github.com/obaby/baby-word-press

针对wordpress的一些功能进行优化,目前优化的内容包含以下几个方面(不定期更新,根据自己的需求,不承接用户需求):

支持分词搜索
通过jieba-php让wordpress支持分词搜索
代码 functions.php
WordPress 中文分词搜索

404页面支持url分词搜索
代码 404.php
WordPress 优化404页面

buddy press 去掉侧边栏
代码 page.php
BuddyPress Theme Remove Sidebar

分享文章:

猜你喜欢:

发表评论

邮箱地址不会被公开。 必填项已用*标注