今回は WordPress のページネーションについてのエントリーです。プラグインを使わない方法については Google で簡単に検索できますが、いざ自分用に改造しようとするとどうするのか分からない!、といった方向けです。
参考元のサイト
sparklette
http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/
英語サイトですが、このエントリーは日本語のサイトでも多く取り上げられてます。
0:必要なもの
WordPress を導入したサーバー、もしくはローカルの環境は当たり前ですが必要です。
1:functions.phpファイルを新規作成する
次に、 WordPress をインストールしたディレクトリ内で、テーマが入っているパスに移動します。現在適応しているテーマです。私の場合は以下のパスになります。
/home/□□□/www/□□□/wp-content/themes/testcording
□□□の箇所は、プロジェクトやテーマ名によって変わります。このディレクトリには「 index.php 」が入っているはずです。この「 index.php 」のあるディレクトリに「 functions.php 」を作成します。このファイル内にページネーションの処理を書いていきます。既に「 functinos.php 」がある方は処理を追加していきます。
2:functions.phpを作る
元のエントリーのソースを見てみます。
非常にシンプルにまとまっていますが、改造しようとするとコメントが無いためざっと見ても何をしているのか分かりません。コメントを付け足し、冗長な if の条件の改善、変数名の変更したのが以下になります。
<?php /* * pagination * * @param $_all_page_num 前ページ数 * @param $_show_item_range 表示するページネーション数 * * <<first <prev 5 6 ⑦ 8 9 Next> Last>> * このようなページネーションだった場合、5 6 もしくは 8 9 の部分が * $_show_item_range数となる * */ function pagination($_all_page_num = '', $_show_item_range = 4) { // $_show_item_range数から何ページ分ページネーションを作成するか計算する $showitems = ($_show_item_range * 2) + 1; // 現在のページ数(変数名変更不可) global $paged; // 現在のページ数がなければ1ページ目とする if (empty($paged)) { $paged = 1; } // ページ数の指定が無かった場合 if ($_all_page_num == '') { global $wp_query; // 記事数を取得する $_all_page_num = $wp_query->max_num_pages; // 記事数が取得できなかった場合 if (!$_all_page_num) { // 総ページ数は1とする $_all_page_num = 1; } } // ページ数が2ページ以上の場合にページネーションを作成する if ($_all_page_num > 1) { // Page X of Y の表示 echo "<div class=\"pagination\"><span>Page ".$paged." of ".$_all_page_num."</span>"; // 先頭記事に戻るボタン if ($paged > 2 && $paged > $_show_item_range + 1 && $showitems < $_all_page_num) { echo "<a href='".get_pagenum_link(1)."'>« First</a>"; } // 一つ前に戻るボタン if ($paged > 1 && $showitems < $_all_page_num) { echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>"; } // 現在のページと、左右$_show_item_range分のボタン for ($i = 1; $i <= $_all_page_num; $i++) { if (!($i >= $paged + $_show_item_range + 1 || $i <= $paged - $_show_item_range - 1) || $_all_page_num <= $showitems) { // 現在のページ(クリックできない) if ($paged == $i) { echo "<span class=\"current\">".$i."</span>"; } // 左右$_show_item_range分のボタン else { echo "<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>"; } } } // 一つ進むボタン if ($paged < $_all_page_num && $showitems < $_all_page_num) { echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; } // 最後尾に進むボタン if ($paged < $_all_page_num-1 && $paged+$_show_item_range-1 < $_all_page_num && $showitems < $_all_page_num) { echo "<a href='".get_pagenum_link($_all_page_num)."'>Last »</a>"; } echo "</div>\n"; } } ?>
これで取り敢えず何をしているのかは分かるようになったかと思います。これを「 functions.php 」に記述してください。
3:index.phpからページネーションを呼び出す
次は、「 functions.php 」で作成したページネーションを行う関数を呼び出します。呼び出す箇所はどこでも構いません。私の場合は記事を表示しているメインコンテンツ部分の上部で呼び出すようにしています。
<!-- ページネーション --> <?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?>
これでページネーションは呼び出され、ページネーションが表示されます。まだデザインはしていませんが、動作しますので確認してみてください。
4:Page X of Y の表示を消す
以下のソースを見てください。
// ページ数が2ページ以上の場合にページネーションを作成する if ($_all_page_num > 1) { // Page X of Y の表示 echo "<div class=\"pagination\"><span>Page ".$paged." of ".$_all_page_num."</span>"; // 先頭記事に戻るボタン if ($paged > 2 && $paged > $_show_item_range + 1 && $showitems < $_all_page_num) { echo "<a href='".get_pagenum_link(1)."'>« First</a>"; }
43 秒目の部分を以下に変更します。
// ページ数が2ページ以上の場合にページネーションを作成する if ($_all_page_num > 1) { // Page X of Y の表示 echo "<div class=\"pagination\">"; // 先頭記事に戻るボタン if ($paged > 2 && $paged > $_show_item_range + 1 && $showitems < $_all_page_num) { echo "<a href='".get_pagenum_link(1)."'>« First</a>"; }
このように、条件分岐や処理内容が分かれば、出力しているのは HTML + CSS なわけなので微調整や修正は簡単にできます。
5:ページが無くても戻る、進むボタンを表示する
実際に動かしてみるとわかりますが、一つ前のページに戻るボタンは一つ前のページが存在していなければ表示されません。表示自体を無くすのではなくて、灰色で表示させてクリックできないようにしたい!といったこともあると思います。そんな時は以下のように改造してみてください。
// 一つ前に戻るボタン if ($paged > 1 && $showitems < $_all_page_num) { echo "<a class='click_pre_page' href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>"; } // 押せない場合も表示する else { echo "<div class='non_click_pre_page'></div>"; }
現在の処理では、「前のページが存在していたら」表示するという条件になっています。そんな時は「 else 」の出番ですね。「前のページが存在していた場合以外」の処理を書き足すことができます。押させるボタンでないため、 div タグで class を指定してデザインしたら表示することができます。他のボタンも同じ手法で改造することができます。
こんな感じで改造できれば、後はデザインだけです。プラグインを入れても改造しづらかったりするので、ページネーションは自分で作った方が後々ためになるかと思います。是非参考にしてみてください。
23 replies on “WordPressのpluginを使わないページネーションを改造する方法”
[…] Posted 2012年10月2日 Check TEST CORDING » WordPressのpluginを使わないページネーションを改造する方法今回は WordPress […]
legend blue 11s…
guviqr [url=http://www.ardenshakespearegild.org/legendblue11s/]legend blue 11s[/url] pantone blue 11s jordan 4 columbia jordan 7 french blue jordan 11 legend blue pantone blue 11s jordan 7 french blue nwrrktvk [url=http://www.misoandthekingfisher.com/p…
Bulls Over Broadway 10s…
[url=http://www.iseco.biz/Jordan10LadyLiberty/index.html]Jordan 10 Lady Liberty[/url] [url=http://www.entracque.org/BullsOverBroadway10s/index.html]Bulls Over Broadway 10s[/url] Jordan 10 Lady Liberty [url=http://www.audienta-radio.ro/Jordan10LadyLiber…
Jordan 10 Bulls Over Broadway…
Those who practice Buddhism come in all shapes and sizes. My dad went with me the first couple times because I was nervous. 2 minggu ni hidup aku kebosanan. Jose Maria Berrocal, Belfast Star newly appointed head coach and Former Barcelona and Dynamo Ki…
Jordan 10 Lady Liberty…
[url=http://www.istools.it/jordan11legendblue/index.html]jordan 11 legend blue[/url] [url=http://www.iseco.biz/jordan11legendblue/index.html]jordan 11 legend blue[/url] Lady Liberty 10s [url=http://www.iseco.biz/Jordan10BullsOverBroadway/index.html]Jor…
buy jorans…
jordan 7 french blue osaftqqic http://www.janemetz.com/frenchblue7s/ tcnjtarzed jordan 7 french blue…
jordan 7 french blue…
[url=http://www.sanmichelepigneto.it/LadyLiberty10s/]Lady Liberty 10s[/url] [url=http://taxi-info.be/uploads/BullsOverBroadway10s/]Bulls Over Broadway 10s[/url] jordan 4 oreo [url=http://www.geometrifirenze.it/Jordan10LadyLiberty/]Jordan 10 Lady Libert…
Jordan 10 Bulls Over Broadway…
[url=http://www.audienta-radio.ro/jordan7frenchblue/]jordan 7 french blue[/url] [url=http://www.entracque.org/BullsOverBroadway10s/index.html]Bulls Over Broadway 10s[/url] Jordan 10 Lady Liberty rswiirut Lady Liberty 10s [url=http://www.iseco.biz/Jorda…
Lady Liberty 10s…
The game does what Laimbeer did best, combine basketball and violence into something watchable.. Because online betting is done through the internet, bettors will be able to cut down their expenses of going to the actual event. 3 days later he underwen…
jordan 4 oreo…
puvrlvapt jordan 7 french blue Bulls Over Broadway 10s jordan 7 french blue [url=http://www.comune.caprauna.cn.it/Jordan10LadyLiberty/index.html]Jordan 10 Lady Liberty[/url] jordan 7 french blue [url=http://www.lydiasimon.com/frenchblue7s/index.html]fr…
french blue 7s…
[url=http://www.kidsinactionli.com/frenchblue7s/]french blue 7s[/url] [url=http://www.jeremynock.fr/frenchblue7s/]french blue 7s[/url] mbuaoftsbf [url=http://www.edinburghsamaritans.org/frenchblue7s/]french blue 7s[/url] [url=http://www.isaf.in/frenchb…
Bulls Over Broadway 10s…
french blue 7s [url=http://www.sanmichelepigneto.it/Jordan10BullsOverBroadway/]Jordan 10 Bulls Over Broadway[/url] rjlmzc [url=http://taxi-info.be/uploads/frenchblue7s/]french blue 7s[/url] legend blue 11s jordan 7 french blue [url=http://taxi-info.be/…
jordan 7 french blue…
BMW located in SC because the community college system designed an extensive program to give their employees much of their base training and it has been a textbook study relationship.. More than fifty years later, that idea is still going strong.. And …
Bulls Over Broadway 10s…
Losing is NOT failure! Burn that in your memory. Earnshaw didn mince words, saying the timing of the play offs was nothing short of “political” considering they had banked on a Friday/Saturday series. Not easy for a single team to make a fortune off …
oreo 4s…
jordan 4 oreo oreo 4s [url=http://www.entracque.org/Jordan10LadyLiberty/index.html]Jordan 10 Lady Liberty[/url] Bulls Over Broadway 10s [url=http://www.sestopotere.it/Jordan10BullsOverBroadway/]Jordan 10 Bulls Over Broadway[/url] ujsjati Lady Liberty 1…
jordan 11 legend blue…
A player receives an assist when a pass is made that directly contributes to a made field goal. Now he’s going to pass the ball, he’s going to ball fake, pump fake, just do a pump fake, he’s going to pass it, he’s going to pump fake one dribble and…
buy jorans…
[url=http://www.brandenburgwarranty.com/jordan7frenchblue/]jordan 7 french blue[/url] [url=http://www.misoandthekingfisher.com/jordan7frenchblue/]jordan 7 french blue[/url] fkxuwhexc jordan 7 french blue [url=http://eastindiaretailsummit.com/jordan7fre…
jordan 7 french blue…
After the call, Hallis goes out for a milkshake and to catch up on her reading. Your doing really great with a difficult situation. LOUIS, MO (KTVI) St. Backed by Denton’s lo fi quintet Midlake, Grant’s crossbreeding of cordial country rock and 1970s…
french blue 7s…
Lady Liberty 10s jordan 4 oreo [url=http://www.rosanerogirls.it/public/legendblue11s/]legend blue 11s[/url] jordan 4 oreo jordan 11 legend blue legend blue 11s ijlsbjdqsoi rcxgqzr [url=http://www.ibdp.org.br/images/upload/Jordan10LadyLiberty/]Jordan 10…
jordan 4 oreo…
[url=http://www.rosanerogirls.it/public/buyjordans/]buy jordans[/url] oreo 4s nmcbrxlls uajxqx jordan 11 legend blue jordan 11 legend blue [url=http://www.ibdp.org.br/images/upload/Jordan10LadyLiberty/]Jordan 10 Lady Liberty[/url] vtphxf [url=http://ww…
jordan 4 oreo…
Lady Liberty 10s dnoifdkhbo [url=http://www.2piu2design.it/jordan4oreo/]jordan 4 oreo[/url] legend blue 11s [url=http://www.pixellabs.it/jordan7frenchblue/]jordan 7 french blue[/url] [url=http://www.albergodelcentro.com/jordan7frenchblue/index.html]jor…
french blue 7s…
bpasdyc [url=http://www.taetechnologies.com/frenchblue7s/]french blue 7s[/url] jordan 7 french blue jkpvzlq jordan 7 french blue jordan 7 french blue [url=http://www.pelsallvillacolts.com/frenchblue7s/]french blue 7s[/url] [url=http://www.susanwallace….
[…] ページネーションのコードは下記のサイトを参考にさせていただきました。先頭へ戻るリンクなどの表示するしないなど、他のパターンも紹介されていますので参考にしてください。 1.WordPressにプラグイン無しでページネーションを設置する方法 | コリス 2.TEST CORDING » WordPressのpluginを使わないページネーションを改造する方法 […]