超簡単!Twitterのようにページの最下部まできたら自動的にコンテンツを表示するWordPressのプラグイン『jQuery.autopager』

公開日: : 最終更新日:2014/11/04 Wordpress ,

Wordpress

TwitterやFacebookみたいに、
ページの末端、フッターあたりまできたら、
自動で次の投稿を読み込みたいなぁと思って
探していろいろ試していたら、
いいプラグインがありました。

あんまりプログラミングとか詳しくない私でも
簡単にできて理想の動きだったのがこのプラグイン、
「jQuery.autopager」。


いや、ほんとに上記のサイトを参考にいれたらあっという間に完成。
感謝です。

手順は上記のサイトの方が丁寧に説明されているので、
こちらは簡単に覚書程度のメモです。

プラグインを読み込み

プラグインをダウンロードして、ヘッダー内に以下を記入。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="{サーバーの設置場所}/jquery.autopager-1.0.0.min.js"></script>


jQueryでの動作部分をヘッダーに記入

以下もヘッダーに記入します。

<script type="text/javascript">
    jQuery(function() {
    $.autopager({
        autoLoad: true,
        content: '#entry-list',
        link: '.ajaxLoad a'
    });
});
</script>


いろいろオプションもあるみたいですが、
簡単な動きの設定のみです。

autoLoad・・・自動で読み込む場合は「true」
content・・・読み込んで表示する記事部分。idやclassの名前を設定します。
link・・・動作させる部分。idやclassの名前を設定します。


読み込みたい部分をタグで囲む

ページ下部まできて、
読み込みたい部分をタグで囲みます。

<div id="entry-list">
	// ここに繰り返したい部分
</div>


WordPressだとループ部分を囲むと
次の投稿が表示されるようになります。

次を読み込むタグを記述

以下をフッター手前あたりに記述。

<div class="ajaxLoad">
	<?php next_posts_link(''); ?>
</div>


これだけです!
すごい。

私詳しくないので、
もう何もいじらずこれだけしました。

いや、ほんとに感謝です。

ad

関連記事

Wordpress

WordPressのタグアーカイブページで、現在のタグスラッグを取得する方法

Wordpressで、 タグアーカイブページに 条件分岐をいれたくて必要でした。

記事を読む

RSS

RSSフィードをサイト内に表示サムネイル付きで表示させる時。表示されない時の注意点も。

外部サイトの更新を自分のサイト内に サムネイル付きで表示させたい時。 ちょっとつ

記事を読む

Wordpress

WordPressで、はてなボタンやTwitterボタンのデザインが 反映されない(変わらない)

最近ソーシャルボタンのデザインをあれこれ試しておりまして。 そうすると、やっぱ

記事を読む

Wordpress

WordPressで新着記事に日数を指定して『New!』マークを表示させる

Wordpressで新着記事に 『New!』のマークを表示させる方法。 日数を指

記事を読む

Wordpress

[WordPress]カスタムフィールドに設定したカテゴリの投稿一覧を固定ページに表示させたい時。

固定ページに投稿一覧を表示させたい。 カテゴリナIDをカスタムフィールドに登録して、

記事を読む

Wordpress

人気記事のプラグイン『WordPress popular posts』でカテゴリを指定して、カスタマイズ。

カテゴリーアーカイブページで、 そのカテゴリーナンバーを指定して一覧表示させたかったので

記事を読む

Wordpress

覚えておきたいWordPressのリセットまとめ

get_postsに対してのリセットに少々手間取っていたら、これで一発でした(苦笑)。

記事を読む

Wordpress

[WordPress]サムネイル(アイキャッチ)画像の幅と高さを指定せずに一覧表示させる方法

Wordpressでレスポンシブサイトを作成する時に ネックとなるのがサムネイル(アイ

記事を読む

no image

WordPressでタグがあるかどうかの条件分岐

タイトルどおり。 Wordpressの条件分岐についてメモ。 タグがあるかどうか

記事を読む

Wordpress

WordPressでタイトルにページ数をつける

カテゴリページでページ送りをした場合、 同じタイトルのページがたくさんできてしまうので

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑