wordpress 分页的自定义样式

Question

我在 html 中有我的自定义分页，我想将它的所有 css 应用到我的自定义 wordpress 分页。这里是 jsfiddle 演示。

你能帮我解决这个问题吗？我想做的就是为 wordpress 制作相同的pagination。谢谢各位。

这是我到目前为止所做的：

<section class="pager m-50">
    <div class="row">
        <div>
            <?php
                global $wp_query;
                $big = 999999999; // need an unlikely integer
                $links = paginate_links( array(
                    'base'      => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
                    'format'    => '?paged=%#%',
                    'current'   => max( 1, get_query_var('paged') ),
                    'total'     => $wp_query->max_num_pages,
                    'prev_text' => __('<div class="btn-gold pull-left">←</div>','multi'),
                    'next_text' => __('<div class="btn-gold pull-right">→</div>','multi'),
                    'type'      => 'array',
                ));
            ?>
            <?php if (count($links) > 0) : ?>
            <div class="archive-navigation">
                <?php foreach ($links as $link) : ?>
                <?php echo $link; ?>
                <?php endforeach; ?>
            </div>
            <?php endif ?><!-- End of blog-pagination -->
        </div>
    </div>
</section>

到目前为止，我为 wordpress 样式所做的工作如下：

/*-- pager --*/
.pager a {
    font-size: 14px;
    border: none;
    text-decoration:none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    border-radius: 0px;
    color: #000;
    -webkit-transition: all 0.1s; 
    -moz-transition: all 0.1s; 
    -o-transition: all 0.1s;
    -ms-transition: all 0.1s; 
    transition: all 0.1s;
} 
.pager a.page-numbers:hover {
    background: none;
    margin-top: -15px;
    font-size: 30px;
    color: #b3a06c;
}
span.page-numbers.current {
    margin-top: -15px;
    font-size: 30px;
    color: #b3a06c;
}


/*-- pager --*/
div.btn-gold.pull-right {
    position: relative;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    -webkit-transition: all 0.3s;  
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s; 
    transition: all 0.3s;
}
div.btn-gold.pull-right.next, div.btn-gold.pull-right.prev {    
    right: 0;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
div.btn-gold.pull-right.prev  {
    left: 0;
}
div.btn-gold.pull-right.next:hover {    
    right: 15px;
}
div.btn-gold.pull-right.prev {
    left: 15px;
}

Answer 1

如果您的主题包含引导程序，则分页显示如下截图：

在覆盖 .pagination > li > a, .pagination > li > span {border: none !important;} 后，分页如下图所示。

如果仍有任何混淆，请告诉我，请删除提供的 -2，因为它可以完美运行。

Answer 2

检查解决方案。

这是分页代码：

<section class="pager m-50">
    <div class="row">
            <div>
            <?php
                global $wp_query;
                $big = 999999999; // need an unlikely integer

                $pages = paginate_links( array(
                        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                        'format' => '?paged=%#%',
                        'current' => max( 1, get_query_var('paged') ),
                        'total' => $wp_query->max_num_pages,
                        'prev_text' => '<div class="btn-gold pull-left">←</div>',
                        'next_text' => '<div class="btn-gold pull-right">→</div>',
                        'type'  => 'array',
                    ) );
            if( is_array( $pages ) ) {
                $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged'); ?>
                <ul class="pagination">
                        <?php
                        foreach ( $pages as $page ) { ?>
                            <li><?php echo $page; ?></li>
                        <?php } ?>
               </ul>
            <?php } ?>
        </div>
    </div>
</section>

这是样式代码：

/*-- pager --*/
.pager a.page-numbers:hover {
    background: none;
    margin-top: -15px;
    font-size: 30px;
    color: #b3a06c;
}
span.page-numbers.current {
    margin-top: -15px;
    font-size: 30px;
    color: #b3a06c;
}
.pagination li {
        border: none;
}

.pagination li a {
        font-size: 14px;
        color: #000;
        -moz-transition: all 0.1s; 
    -o-transition: all 0.1s;
    -ms-transition: all 0.1s; 
    transition: all 0.1s;
} 

.pagination li span {
        padding: 6px 12px;
}

.pager a {
        position: relative;
        padding: 0;
        margin: 0;
        font-size: 20px;
        color: #000;
        text-decoration: none;
          -webkit-transition: all 0.3s;  
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s; 
    transition: all 0.3s;
}
.pager .btn-gold:nth-child(1) a {        
        right: 0;
                 -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.pager .btn-gold:nth-child(2) a , .pager .btn-gold:nth-child(3) a {
        left: 0;
}
.pager .btn-gold:nth-child(1):hover a {        
        right: 15px;
}
.pager .btn-gold:nth-child(2):hover a, .pager .btn-gold:nth-child(3):hover a {
        left: 15px;
}
.btn-gold {
        min-height: 50px;
        min-width: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  border-radius: 0;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #b3a06c;
  background: none !important;
  color: #b3a06c;
   -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transition: all 0.3s;  
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s; 
    transition: all 0.3s;
}