Tutorial
この記事の読了時間:約4分4秒
ブログに限らず、よっぽどのコトが無い限り、いわゆるページネーションの「次へ」とかってボタンは押されにくいものです。
そこで最近は、ページ末尾まで行くと自動で次ページの内容がAJAXで読み込まれるような仕組みも増えて来ました。
今作ってるウェブサービスでもこの仕組を導入したいっ!と思って探したら、ナイス・ガイを発見したのでシェアします!
その名も「jQuery.autopager」!
合わせて、それをWordPressでうまいこと使う方法もご紹介。
これでアナタも流行UI/UXに乗れちゃうかも!?
まずは下記ご本家サイトから、JSファイルを頂戴致しましょー!
jQuery.autopager: Automatic paging plugin for jQuery
ダウンロードしたら、制作者の方に感謝の祈りを捧げ、そのご多幸を願いながら自サイトに設置して下さい。
※以下 2018年3月19日 追記
当件、コメントをいくつか頂いておりましたように、モノによっては動かないみたいです。
なんでも同じ名称で違うプラグインが存在してるとか。。。
ひとまず、当方環境で無事に動いてるサイトのJSへのリンクを掲載しますので、それをまるっとコピペするなり、右クリック→名前をつけてリンク先を保存、とか、よしなにお願いします。
んで、基本的な使い方は下記。
<script type="text/JavaScript"> $(function(){ $.autopager({ content : '.content', // ロードしたいコンテンツ部分のセレクタ link : '#next' // 次ページへのリンクのセレクタ }); }); </script>
もしスクロールでの自動読み込みじゃなく、ボタンを押したら読み込むようにしたいなら
<script type="text/JavaScript"> $(function(){ $.autopager({ content : '.content', // ロードしたいコンテンツ部分のセレクタ link : '#next', // 次ページへのリンクのセレクタ autoLoad: false, // スクロールで自動読込みするどうか load : function(){ // 読み込み完了後に発生するイベント // "this"は読み込んだコンテンツ要素を指す $(this).before('<hr/>'); // 左記は例(読み込んだヤツの前に区切り線を追加)) } }); $('#next').click(function(){ // 次ページへのリンクボタンが押されたら $.autopager('load'); // loadしやがれぃ! return false; }); }); </script>
こんな感じになります。
基本的には header.php で jQuery.autopager.js を読み込んで、あとは上記のような記述をするだけですが、ここでちょっとポイント。
「次ページへのリンクポタン」を生成するのには next_posts_link() を使うのがセオリーですが、上記のままの記述で使っちゃうと、一番最後の記事を読み込んだ後でも「次ページへのリンクボタン」が出ちゃいます。
そんな場合は、JS側で最後のページかどうか判別してやらないけんので、上記記述の load 部分(7~10行目)を下記に差し替えてみなよ!
load: function(current, next){ if( current.page >= <?php echo $wp_query->max_num_pages; ?> ){ $('#next').hide(); } }
これで「現在のページ数がMAX以上なら #next を隠す」ってなって、理想の挙動に!ビバ☆ハレルヤ!
ギャラリーサイト第二弾!お楽しみにー (^^ゞ
関連する記事
同じカテゴリーの記事
smkn より:
2018/01/28 2:23 AM
>> 田中様
ご質問ありがとーございます!
早速ですが、おそらくURLが変わるのはコピペに失敗してるか、なにか導入時にミスがあったか、JavaScriptが有効になっていないか。。。
このコードは「URLが変わらないで次ページを読み込む」というコードなので、仰る挙動はなにか不具合が発生してる可能性が高いです。
いまいちど諸々確認して再チャレンジしてみてくださいっ m(_ _)m
橋本 より:
2018/03/09 8:10 PM
初めまして。
田中さまと同じく「もっと見る」をクリックすると
正しく読み込みますが、
アドレスが /page/2/ のようになってしまいます。
「もっと見る」のボタンにカーソルを合わせた時点で
確認できます。
javascriptは有効になっていて動作自体はローディング自体は問題ないのです。
何かポイントとなる箇所がありましたら
ご教授ください。
すみませんが、よろしくお願いいたします。
smkn より:
2018/03/09 9:14 PM
>> 橋本様
ご質問ありがとうございますっ!
いま確認してみたのですが、確かにマウスオーバーすると /page/2/ とステータスバーに出ますね。
WordPressではページ送りを /page/数字/ というURLで書き出すので、その仕組み自体を変えるのは難しいんじゃないかと思います。
お役に立てず申し訳ありませんですm(_ _)m
okamoju より:
2018/03/19 7:44 PM
はじめまして、こちらのコメントと同様に/page/2/ のスラッグがついてしまうので悩んでいたのですが、まさかなぁ・・・と思って正常に動作しているサイトを見つけてそこに使用してるjsを差し替えたら動きました。(jquery.autopager-1.0.0.jsと同じ名前でした。)
どこのサイトか忘れちゃいましたが、このjs結構よく使っているので見つかるかと思います。
バージョン全く同じなのにどこかが違うんでしょうね。
smkn より:
2018/03/19 11:06 PM
>> okamoju 様
ありがとーーございますっ!!
そういうことだったんですねー。。今見たら当サイトのリンク先もダメになっていたようで、皆様ご不便をおかけしました。
ひとまず当方制作のサイトでうまく挙動してるJSへのリンクに差し替えたので、これで良いのかなと。
ホントにご教示ありがとうございました!!今度ビールおごります!
ぽるたん より:
2018/12/12 7:52 AM
どうにもこうにも上手くいかなかったので
autopagerと/page/2/で検索したらこちらのページに辿り着きました。
まさかバージョン違いがあるとは思わず…
とても助かりました、管理人さまありがとうございます。
田中愛 より:
2018/01/18 11:18 AM
ものすごく便利なコードをコピペ出来るようにしていただきありがとうございます。
質問なのですが、次のページを読み込むとURLも変わってしまうのですが、何か制御する方法はあるのでしょうか?
無知ですみません。