ワードプレスページネーションのカスタムスタイル

Question

私は自分のカスタムページネーションをHTMLで持っています。私は自分のカスタムワードプレスページネーションにそのCSSをすべて適用したいと思います。ここではjsfiddleデモです。

これで私を助けてもらえますか？私がしたいことは、ワードプレスのために同じ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> 

そして、私はワードプレスのスタイルのために、これまでにやったダウンここにある：ここで

は私が今までやったことある

/*-- 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

が解決策を確認してください。ここで

は、改ページコードです：ここで

<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; 
} 

Answer 2

あなたのテーマは、ブートストラップが含まれている場合は、ページネーションは、スクリーンショット、以下のように示されている：

.pagination> li> a、.pagiをオーバーライドした後nation> li> span {border：none！important;}以下のスクリーンショットに示すページネーション。

混乱がまだあるなら、私に教えてくださいして削除してください-2を、これは完璧に動作として提供。