ブログ一覧ページにページャーをつける方法

Jimdoのブログ記事はすべて表示しようとすると、ページの長さが尋常じゃない長さになります。でも表示数を限定してしまうと、古い記事が表示されなくなってしまいます。

そのためブログにページャー機能を付けたいと思います。

※今回は、テンプレートを利用されている場合について紹介します。独自レイアウトを使用している場合は、jsファイルをアップロードするなどして、ご活用ください。

ページャーとは、ページネーションまたはページ送りという意味で、「書物に枚数やページ数をつけること」ニャ。
これがあると大量のブログ記事を分割して見せることができるニャ。

なんでこれがあったほうがいいの？めんどくさいぴよ。

Jimdoのブログは、最大100件まで1ページに表示させることができます。しかし、その分ページが縦長になってしまい、とても見づらくなってしまいます。これを、プログラムを使ってページを分割しているように制御しているんです。
これは自分のためではなく、読んでくれる人にストレスを与えず、気持ちよく見てもらうための配慮なんだよ。

納得だぴよ！

設置方法

まず、ブログ表示で「数量」を「100」とします。

続いて、管理メニュー > 設定 > ヘッダー部分を編集より

jQueryを読み込む

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1')</script>

ブログページャー用コードを追加

<script type="text/javascript">
//<![CDATA[
var $p_first = 1;        //最初に表示するページ
var $page_set = 5;       //1ページに表示するブログ数
var $open_page = 3;      //ページの前後に表示するページ数
var $p_status = Array();
var $b_page = Array();
var pmove;
 
jQuery.noConflict();
(function($) {
  $(function() {
    $("div.blogselection").each(function($i){
      var $b_count = $(this).children("div.j-blogarticle").length;
      if($b_count>5){
        $pager ="<div class=\"pager_navi\"><\/div>";
        $(this).append($pager);
        $(this).prepend($pager);
        $b_page[$i] = 1 + Math.floor(($b_count - 1) / $page_set);
        pmove($p_first,$i);
      }
    });
  });
 
  pmove = function($p,$target) {
    $p_status[$target] = $p;
    $("div.blogselection").each(function($i){
      if($i == $target){
        var $pager_arr = Array();
        var $back = $p_status[$i] - 1;
        var $next = $p_status[$i] + 1;
        
        var $f = $p_status[$i] - $open_page;
        if($f <= 0){
          $f = 1;
        }
        var $l = $p_status[$i] + $open_page;
        if($l > $b_page[$i]){
          $l = $b_page[$i];
        }
        var $row = 0;
        $pager_arr[$row++] = "<div class=\"pager_navi\">";
        if($p_status[$i] == 1){
          $pager_arr[$row++] = "<a>&lt;&lt;<\/a>　";
        }else{
          $pager_arr[$row++] = "<a href=\"javascript:pmove("+$back+","+$i+");\">&lt;&lt;<\/a>　";
        }
        var $j;
        for($j=$f;$j <= $l;$j++){
          if($j!=$p_status[$i]){
            $pager_arr[$row++] = "<a href=\"javascript:pmove("+$j+","+$i+");\">"+$j+"<\/a>　";
          }else{
            $pager_arr[$row++] = "<a><b>"+$j+"<\/b><\/a>　";
          }
        }
        
        if($p_status[$i] == $b_page[$i]){
          $pager_arr[$row++] = "<a>&gt;&gt;<\/a><\/div>";
        }else{
          $pager_arr[$row++] = "<a href=\"javascript:pmove("+$next+","+$i+");\">&gt;&gt;<\/a><\/div>";
        }
        $pager_arr[$row++] = "<\/div>";
        $pager ="";
        $.each($pager_arr,function(key,val){
          $pager = $pager + val;
        });
        $(this).children("div.pager_navi").html($pager);
        $(this).children("div.j-blogarticle").hide();
        $(this).children("div.j-blogarticle").each(function($j){
          if($j >= ($p_status[$i] * $page_set)-$page_set && $j < ($p_status[$i] * $page_set)){
            $(this).show();
          }
        });
        $("body").scrollTop(0);
      }
    });
  };
})(jQuery);
//]]>
</script>

干渉回避コードを追加

一部のサイトで「Jimdoのシステムと干渉する」ことがあるらしいので、下記コードを上記ブログページャー用コードの下に追加します。

<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
/* ]]> */
</script>

回避コードを追加しなくても特に問題が起こらないようでしたら、コードを追加する必要はありません。

表示HTML例

コンテンツ側では特に何もすることもなく、ブログ一覧表示部分の上下に自動的にブログページャーが表示されます。
例えば、下記のようなHTMLで表示されます。
下記では4ページまでしかありませんが、ブログ記事が増えたり、1ページに表示するブログ記事数を変えることで、自動的に表示されるページャーのページ数も変動します。

<div class="pager_navi"><a>&lt;&lt;</a>　<a><b>1</b></a>　<a href="javascript:pmove(2,0);">2</a>　<a href="javascript:pmove(3,0);">3</a>　<a href="javascript:pmove(4,0);">4</a>　<a href="javascript:pmove(2,0);">&gt;&gt;</a></div>

「class="pager_navi"」という<div>で囲まれて表示されるため、もし装飾したい場合はこのclassを使います。

装飾CSS例

ブログページャーコード、もしくは回避コードの下に追加します。

<style type="text/css">
.pager_navi {
margin: 0 0 20px;
text-align: center;
}
</style>

ブログページャーが中央寄せになり、下に余白ができます。

参照元
Jimdo・みんビズカスタマイズブログ機能を拡張してみる（ブログページャーの導入）

最後までお読みいただきありがとうございます！いかがでしたか？

このページが参考になったら、ぜひ左のボタンでFacebookかTwitterにシェアしていただけると嬉しいです！

押してくれたらもっとこうしんするぴ！