先日バージョンアップいたしました当ブログスマートフォン用の新モバイルテーマ。
その中で使用しておりますjQueryプラグイン「Infinite Scroll」が非常にモバイル向けなので、使い方等を紹介してみます。
項目別に読む
ページナビはモバイル向きではない
先ごろまで利用していたページナビゲーション。非常にモバイルテーマに向いていない。
- PCに比べて幅のないディスプレイ
- そのディスプレイに小さなボタンを横並び
にするページナビゲーションは非常に使いにくい。そして作りにくい
もう私ですら使いにくいと感じるレベル。
限界が来たと感じたので、今回ページナビゲーションは取っ払いました。
ページ遷移させずに次のページを自動読込させるjQueryプラグイン「Infinite Scroll」
「前に」「次に」を使ったポピュラーなナビゲーションも一時考えました。
しかしモバイルテーマのインデックスページは、はっきり言ってただのリスト。その表示のためにページ全体をまた読み込ませるのはどうだろう。
ここで思いついたのがAutoPagarize。次のページを自動で読み込んで表示してくれるというもの。
ブラウザの拡張機能としてはい非常に有名なAutoPagarizeシリーズ。
ちなみに私のおすすめはAutoPatchWork。
これなら
- ボタンを使う必要がない
- ページ遷移する必要がない
ので今の私の望みにピッタリ。
こいつができる方法を調べたところ、「Infinite Scroll」を使うと実現できそう。jQueryのプラグインです。
オフィシャルにデモページも用意されているのでぜひ見てみてください。
WordPress用のプラグインもあるので、メンドウな方はこちらを使うという手もあります。
私はPC・モバイルで別々のテーマを使いたいので柔軟性を考慮しjQueryプラグインを使ってみました。
「Infinite Scroll」の使い方
私が使っているWordPressを例に紹介します。
1. ファイルのダウンロード
Infinite ScrollのjQuery版ページよりファイルをダウンロード。（途中GitHubを経由します。）
2. ファイルのアップロード
展開したファイルの中から対象javascriptファイルjquery.infinitescroll.min.jsをテーマフォルダ内にアップロードします。
私はテーマファイル内の「js」フォルダにアップしました。
3. 外部ファイルの宣言
header.phpまたはfooter.phpにjQueryファイルの宣言とともにアップロードしたファイルの宣言を書きます。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.infinitescroll.min.js"></script>
4. Infinite Scrollの設定を書く
ここが一番苦戦したところ。
先にコードを示すとこのようになります。
<script type="text/javascript">
$(function(){
$('#content').infinitescroll({
navSelector : "#pagination",
nextSelector : "#pagination a:last",
itemSelector : "#content .index"
});
});
</script>
一番シンプルに使う場合でもこの3項目の設定が必要です。
それぞれの項目について説明すると、
- navSelector: ページナビゲーションのセレクタ
- nextSelector: 上で示したページナビゲーションの中で「次のページヘ」を示すリンクのセレクタ
- itemselector: 繰り返したいセレクタ
とまぁこのようになるのですが、これでわかれば苦労はしない。
図にしてみました。#wrapperは関係ないけど構造的な問題で入れてあります。
記事インデックスはWordPressのよくあるやつ。
今回の場合、記事インデックス.indexを#contentが終わったら自動で読み込んで欲しいので、上記コードのような形になります。
また、#paginationと次ページへのリンクの部分がかなりテキトーに書いてありますが、この部分を細かくコードで示すと
<nav id="pagination">
<?php next_posts_link(''); ?>
</nav><!-- /#pagination -->
一番簡素な形なら次ページへのリンクひとつで十分です。
Infinite Scrollを使う以上、見た目的にはこの#paginationはただの飾りになるのでそこまでこだわらなくてもいいかも。
そもそもこだわったら、このプラグインを使う意味が…
ここまですると一応動く。こんな感じ。
5. 最後に少し見た目を
センタリングするとキレイ
見ていただくとわかりますが、読込中の表示が左に寄っています。
元々何もしていないのでこうなっているのでしょう。
見た目を考えるとセンタリングされていたほうがキレイなのでセンタリングします。
jquery.infinitescroll.min.jsファイルの中身ををざっと見ると#infscr-loadingというセレクタがあるのでCSSでセンタリングさせましょう。
#infscr-loading {
text-align: center;
}
これでセンタリングされます。
他にもオプションがあるが…
テキストや画像を他のものに置き換えられるようですが、javascriptも見てみたところうまく動いていないように感じました。
テキストや画像のパスくらいなら、javascriptの対象の部分を置き換えればできることはできます。
こんな風にね。
またボタンのタップによって読み込みを開始させるオプションもあります。
おわりに
モバイルはボタンの押しにくさで使い心地が決まってしまいます。
ボタンを配置するのは難しいですが、あえてボタンを使わずに済ませることもできるということを今回学びました。
そういう意味ではこのプラグインはまさにモバイル向けだと言えます。
ページ遷移がないのが非常にいいですね
ご興味の方はぜひ挑戦してみてください。
参考: [JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll | コリス
