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

プラグインを使わない 番号のページナビゲーションを導入するコード WordPress
このエントリーをはてなブックマークに追加
PR

番号付きのページナビゲーションを導入するプラグイン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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)