miMemo(ミメモ)

jQuery WordPress

[M]WordPress×jQuery:次のページを自動で読み込む「jQuery.autopager」でローディング短縮!

こんにちは!みう(@miu0512)です。スマホページは読み込むスピードが命!ということで、噂のAutoPagerを、jQueryを使ってスマホで実装してみました。自動で表示させるのもアリですが、私はワンクリックで表示させるようにしています。

実際にスマホテーマで使ったのはこの「次の記事を表示」部分!

20130919103207

次のページヘ遷移するのではなく、下に続いていく表示にしてみました。

使用したjQueryプラグインはこちら

jQuery.autopager

導入の仕方はカンタン3STEP

STEP1:<head>の中に以下を追加する

[html]
<!–jQuery読み込み–>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!–jQueryプラグイン「jQuery.autopager」の読み込み–>
<script type="text/javascript" src="<?php bloginfo(‘template_directory’);?>/js/jquery.autopager-1.0.0.min.js"></script>
[/html]

ちなみに私は<?php wp_head(); ?>の上に入れています。

STEP2:<head>の中にさらに以下を追加する

[html]
<script type="text/javascript">
//auto pager
jQuery(function() {
$.autopager({
autoLoad: false,
content: ‘.new’,
link: ‘.ajaxLoad a’,
load: function(current, next) {
if( current.page >= <?php echo $wp_query->max_num_pages; ?> ){ $(‘.ajaxLoad’).hide(); }
}
});
$(‘.ajaxLoad a’).click(function() {
$.autopager(‘load’);
return false;
});
});

</script>
[/html]

ちなみに私は<?php wp_head(); ?>の下に入れています。

STEP3:ボタンを設置したい場所に以下を書き込む

[php]
<div class="ajaxLoad">
<?php next_posts_link(‘次の記事を表示’); ?>
</div>
[/php]

もし、動かなかったら・・・?

人によって設定や構築方法が違うため、正常通り動かない場合があります。そんな時、私はWP標準のjQueryを止めたり、クラスを変えたり、以下の参考サイトを拝見させていただいたりしています。

参考にさせていただいた記事

さいごに・・・

自動で表示させるのもいいのですが、実は私があまりスキじゃないという理由でボタンにしています。下見たいのにどんどん記事増えてくよー汗 みたいな気持ちに結構陥りますwぜひ、お試しください。

最後までお付き合いいだだきありがとうございます!これからも、みう(@miu0512)を応援していただけたら嬉しいです!

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP