ページナビを作ってみる

ページナビを追加してみる

「technical Speech」というデザインでは、最新の3件の投稿しか表示されません。
この件数を増やしたい場合は、こちらを参照してください。

ところが、過去のを見たい場合、カテゴリー別アーカイブや月別アーカイブなどからも見れますが、
一般的なデザインでも一覧表示の形式で過去のが見れるようになっていることが多いと思います。

なので、このデザインでも、そうできるようにします。
それから、今までここで述べていた「デザイン」は「テーマ」の方が正しいと思うので、
これからは「テーマ」と記載します。

まずは、ページの要求があったときの対処をします。
URLにpagedというのがあった場合、次の15件を呼びだすという処理になります。
変更前

            <div class="boxheading"><span>Recent Posts</span><div class="clear"></div><div class="left"></div></div>
            <div class="blockborder" id="rcp_border">
              <?php
                 $post_count = 1;
                  $postslist = get_posts('numberposts=15&order=DSC&orderby=date');
                  foreach ($postslist as $post) :
                  setup_postdata($post);
               ?>
              <div class="postblock">
                <div class="postblockwrap">

変更後

            <div class="boxheading"><span>Recent Posts</span><div class="clear"></div><div class="left"></div></div>
            <div class="blockborder" id="rcp_border">
              <?php
                $numberposts = 15;
                if ($paged > 1) { $offset = ($numberposts * ($paged - 1)); } else { $offset = 0; }
                 $post_count = 1;
                  $postslist = get_posts('numberposts='.$numberposts.'&order=DSC&orderby=date&offset='.$offset.'\'');
                  foreach ($postslist as $post) :
                  setup_postdata($post);
               ?>
              <div class="postblock">
                <div class="postblockwrap">

get_postsタグのoffsetオプションを使います。
$numberpostsという変数は、今後のため(になるかなぁと)、新たに作りました。

これで、要求に応じて、次の15件が表示されます。
URLの後ろに、”&paged=2″と入力して見ると、動作確認ができます。

投稿が15で割れる件数だと、問題ないのですが、割り切れない場合、
最後のページのデザインがくずれるので、これに対処します。
変更前

                  <?php the_excerpt(); ?>
                  <a href="<?php the_permalink() ?>" class="readmorelink">Read More</a>
                </div>
              </div>
              <?php
               if ($post_count == 3) {
                $post_count = 1;
              ?>
              <div class="clear"></div>
              <?php
               } else {
                $post_count = $post_count + 1;
               }
               endforeach;
               }
              ?>
            </div>

変更後

                  <?php the_excerpt(); ?>
                  <a href="<?php the_permalink() ?>" class="readmorelink">Read More</a>
                </div>
              </div>
              <?php
               if ($post_count == 3) {
                $post_count = 1;
              ?>
              <div class="clear"></div>
              <?php
               } else {
                $post_count = $post_count + 1;
               }
               endforeach;
               if (1 < $post_count) {
              ?>
              <div class="postblock">
                <div class="postblockwrap">
                </div>
              </div>
              <div class="clear"></div>
              <?
               }
              ?>
            </div>

後は、「wp-pagenavi」プラグインを導入し、ページナビを表示したいところに、
“<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>”
と記入すればOKです。

必要に応じて、CSSの編集もお忘れなく。
ちなみに、以下のようにしてます。

.wp-pagenavi { text-align: center; margin: 10px 2px 2px 2px; }