プラグインを使わずに自分でページングを実装するfunction.phpのコードサンプル
公開日:
最終更新日:2015/11/01
Wordpressで選んだテーマにページング機能が付いていない場合は「WP-PageNavi」というプラグインを使うか、該当テーマ内のテンプレートファイル(php,css)にコードを追加して自力で実装する事になる。
ページング(Paging)、ページネーション(Pagination)、ページャー(Pager)と人によって言い方が異なるが、ページングとは上の画像の様にページ番号を表示しページ番号にリンクを付けてアクセスしやすくする事をいう。
ページング、ページネーションの設置方法
一般のWordPressサイト(ブログ)であれば、トップページの記事一覧の下部やアーカイブページ(カテゴリーやタグページ)の記事一覧の下部で見かけるもの。尚、投稿ページや固定ページでも記事がすごく長くなりページ分割したい時に、半角で<!–nextpage–>と書けばページ分割されページングが表示される。
function.phpにコードを記入する場合
function.phpに下記のコードを追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
//ページャー機能 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=\"pagination\"><span>Page ".$paged." of ".$pages."</span>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "« First"; if($paged > 1 && $showitems < $pages) echo "‹ Previous"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"".$i.""; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "Last »"; echo "</div>\n"; } } |
表示エリアのcssファイルを用意
※自分のテーマに合うように文字の大きさや背景色は変更すること
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.pagination { clear:both; padding:20px 0; position:relative; font-size:11px; line-height:13px; } .pagination span, .pagination a { display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#fff; background: #555; } .pagination a:hover{ color:#fff; background: #3279BB; } .pagination .current{ padding:6px 9px 5px 9px; background: #3279BB; color:#fff; } |
テーマファイルの表示箇所に下記のコードを追加
ex) index.php archive.php category.phpなど
1 2 3 4 5 |
<?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?> |
参考coliss WordPressにプラグイン無しでページネーションを設置する方法
「WP-PageNavi」というプラグインを使う場合
プラグイン「WP-PageNavi」を使う場合は、プラグインをインストールして設定画面から必要項目を設定して表示したい箇所に下記のコードを書くと表示される。
1 |
<?php wp_pagenavi(); ?> |
※プラグインの設定方法を詳しく説明しているページ
参照 http://crossinthenight.com/wordpress/2624/
まとめ
自分でWordpressのテーマを作成する場合には必要ですが、最近のテーマファイルはページング、ページネーション機能が予め実装されているテーマが殆どです。現在使っている「Stinger3」も、一つ前に使っていた「mono-lab | CUBIC」も付いていました。
別サイトで使っているシンプルでレシポンシブ対応した無料テーマの「wsc7」ではページング機能は実装されていませんが「WP-PageNavi」を使う前提でテーマファイルに設定されていますからプラグインをインストールし設定すると表示されます。
表示速度が若干でも早い方がいい場合は、プラグインを使わずにfunction.phpにコードを書く方が余分なcssファイルの読込や条件分岐の多いコードを読む必要がないのでコードを書くべき、既に長く運用していて問題が無い場合はプラグインを止める必要はない。
Post Categories: Wordpress Tags:funcution.php
AD
関連記事
-
-
プラグイン『ALL in One SEO Pack』って使う必要はあるのか?
WordPressでSEO対策としてTITLEタグとメタタグのDescriptionとkeywordsをページ単位に設定できるプラグイン
-
-
プラグイン『Meta Manager』の使い方と注意点
WordPressでSEO対策用プラグインの『ALL in One SEO Pack』は機能が豊富すぎて使いきれないので、メタタグのDe
-
-
レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説
Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。 2011年10月25日にリリ
-
-
WordPressで記事を書き始める前に入れた方がいいプラグイン
ワードプレスのインストールが無事終わったら、早速記事を書いてどの様に表示されるのか試してみたくなりますが、その前に最初に設置・設定してお
-
-
WordPressの固定ページの拡張子にhtmlをつけるfunction.phpのコードサンプル
WordPressを始めた頃にパーマリンク設定で悩んだこともあった。拡張子.htmlが付いた静的ページっぽい方がSEO的にも優位なのでは
-
-
WordPressの仕組みを理解する
WordPress(ワードプレス)は、深く仕組みを知らなくても簡単にブログやWebサイトが作れるようになっています。大概のレンタルサーバ
-
-
人気のWordPress無料テーマ「Stinger3」に変えてみた
ブログのテーマをスマホ対応済の人気無料テーマ「Stinger3」に変更しました。 一つ前に適用していたモノラボさんのテーマ CUBIC
-
-
カテゴリーページや投稿タグページに入力した説明文を反映させる方法
WordPressのテーマではカテゴリーページや投稿タグページに各々の編集画面で入力した説明文を表示するテーマは少ないのですが、今回入力
-
-
プラグイン「wordpress meta robots」を止めてカスタムフィールドで対応した方法
SEO対策の一つ「低品質コンテンツの対応」として、投稿ページや固定ページ単位にmeta robotsタグが設定できるプラグイン「word
-
-
WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法
良く使うWordPress管理画面の投稿一覧ですが標準の表示項目は以下の7個です。通常のブログならカスタマイズする必要もないのでしょうが