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>

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

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

[JS]

<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>

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

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

[PHP]

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

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

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

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

さいごに・・・

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

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

 

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

最新情報をお届けします

Twitter でみうをフォローしよう!

About

みう

みう (@miu0512)

フリーランス4年を経て起業。ホームページ制作やLP制作を企画からマーケティングまですべて請けているため、「Webコーディネーター」として活動中。

Category

Popular

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事

PAGETOP