WordPress: プラグインを使わずにページナビゲーションを表示する
当ブログ「Hinemosu」の下部に設置しているページナビゲーション表示の見た目を変更しました。
これまではWP-PageNaviを使っていましたが、変更後はWordPress標準のテンプレートタグのみでページナビゲーションを実現しています。
と言っても、自分でコードを書いたワケではなく、「Yuriko.Net » WP-PageNavi を使わずにナビゲーション表示」で紹介されているコードを、ほぼそのまま拝借しています。
WordPress標準のテンプレートタグのみでページナビゲーションを行うには、下記コードをテンプレートファイルの表示位置に貼り付けてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class = "tablenav" > <?php global $wp_rewrite ; $paginate_base = get_pagenum_link(1); if ( strpos ( $paginate_base , '?' ) || ! $wp_rewrite ->using_permalinks()) { $paginate_format = '' ; $paginate_base = add_query_arg( 'paged' , '%#%' ); } else { $paginate_format = ( substr ( $paginate_base , -1 ,1) == '/' ? '' : '/' ) . user_trailingslashit( 'page/%#%/' , 'paged' );; $paginate_base .= '%_%' ; } echo paginate_links( array ( 'base' => $paginate_base , 'format' => $paginate_format , 'total' => $wp_query ->max_num_pages, 'mid_size' => 4, 'current' => ( $paged ? $paged : 1), )); ?> </div> |
ページナビゲーション表示の見た目はCSSで調整します。
1 2 3 4 5 | .tablenav { color : #2583ad ; margin : 1em auto ; line-height : 2em ; text-align : center ; font-size : 120% ;} a.page-numbers, .tablenav .current { color : #00019b ; padding : 2px . 4em ; border : solid 1px #ccc ; text-decoration : none ;} a.page-numbers:hover { color : white ; background : #328ab2 ;} .tablenav .current { color : white ; background : #328ab2 ; border-color : #328ab2 ; font-weight :bold:} .tablenav .next, .tablenav .prev { border : 0 none ; background : transparent ; text-decoration : underline ; font-weight : bold ;} |
実際の見た目や動作、使用感を知りたいときは「Hinemosuトップページ」の最下部にあるページナビゲーション表示を確認してみてください。
そんな感じで!
ディスカッション
コメント一覧
まだ、コメントがありません