プラグインを使わない番号のページナビゲーションを導入するコード WordPress

番号付きのページナビゲーションを導入するプラグインwp-pagenaviをやめて
functions.phpにコードを追加してページナビゲーションを実装する方法に変えました
レスポンシブ化したときに、思い道理な動作をさせるために変更しました

そのコードを公開します。

番号でのページナビゲーションを実装するコード

functions.phpに追記

//ページ送りの番号
function pagination($pages = '', $range = 4)
{
     $showitems = ($range * 2)+1;  
     global $paged;
     if(empty($paged)) $paged = 1;
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   
     if(1 != $pages)
     {
         echo "<div class="number">n";
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class="now">".$i."</span>":"<a href='".get_pagenum_link($i)."'>".$i."</a>";
             }
         }
         echo "</div>n";
     }
}

表示したい所に記入（記事一覧）

        <div class="p-navi">
            <div class="prev"><?php previous_posts_link('前のページへ') ?></div>
            <div class="next"><?php next_posts_link('次のページへ') ?></div>
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>
        </div>

表示したい所に記入（シングル記事）

        <div class="p-navi">
            <div class="prev"><?php previous_post_link('%link', '前の記事へ') ?></div>
            <div class="next"><?php next_post_link('%link', '次の記事へ') ?></div>
        </div>

記事一覧とシングル記事ではコードが違います、同じように見えがちですが、next_post_linkとnext_posts_linkの違いがありますので注意です

ページナビゲーションの装飾 CSS

.p-navi {
    position: relative;
    clear: both;
    height:35px;
    overflow: hidden;
    margin-bottom: 20px;
}

.prev,
.next {
    float: left;
    width: 50%;
    height:35px;
    line-height: 35px;
    font-size: 15px;
}

.next {
    text-align: right;
}

.prev a,
.next a {
    padding: 5px 10px;
    text-decoration: none;
    background: #008000;
    color: #fafafa;
    width: 100px;
}

.number {
    width: 480px;
    position: absolute;
    left: 126px;
    text-align: center;
    height:35px;
    line-height: 35px;
}

.number a {
    margin-left: 5px;
    padding: 7px 12px;
    background: #008000;
    color: #fff;
    font-size: 13px;
}

.p-navi a:hover {
    color: #fff;
}

.now {
    margin-left: 5px;
    border: 1px solid #008000;
    background: #fff;
    color: #008000;
    padding: 6px 11px;
    font-weight: bold;
    font-size: 13px;
}

@media screen and (max-width: 480px) {
.number {
    display: none;
}

}

CSSでレスポンシブ化の部分で番号表記を消してしまうようにしています
レスポンシブ化が不要な場合は削除しても問題無いです

あとは.numberのleftはサイトの幅等に合わせて変更してください

参考にしたサイト

http://coliss.com/articles/blog/wordpress/how-to-build-a-wordpress-post-pagination-without-plugin.html