この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


無限スクロールを実装してユーザーの滞留時間を増やそう!

アクセス解析を見ているとセッション時間や直帰率という項目があることに気が付きます。
説明すると、セッション時間=滞留時間 直帰率=道草した割合 といった感じでしょうか。
セッション時間が短く直帰率が高いと、チラ見だけして帰る人が多いということなので、サイトの品質は低いと言えます。

しかし、最近はスマホやタブレットからネットを利用するモバイルユーザーが多いため、チラ見だけして帰る人も多くなっています。チラ見だけして帰る人を少なくするためには、他にもこんなコンテンツがあるよ、ということを見せて上げる必要があります。

まとめサイトなんかでよくあるが、ズラっと関連記事を表示させるという手法なのですが、ハッキリ言って縦に長過ぎると何度もスクロールしないと本文が読めずイラッとします。
イラッするとつい広告が開いてしまうという誤操作を狙っているんでしょうけどね。

では縦に長くしないようにするにはどうすればいいかなんですが、無限スクロールというものがあります。
インフィニティスクロールとも呼ばれているのですが、FacebookやTwitter、Tumblrではお馴染みです。
ページの最後まで行くとAjaxで次のページが自動的に呼び出されるという仕組みです。
この方法を使わない普通の方法では「次へ」とか「前へ」というよくあるページャでの操作となります。

そんなわけで無限スクロールを実装しよう! と思いワードプレスのプラグインを探してみました。
そしたらいくつか出てきたのですが、バージョンアップが行われていないのか動かないものが多数。

原因としては、ワードプレスのテーマとの相性、ワードプレスの最新版に対応していない、jQeuryのバージョンが古いといったことが考えられます。
jQeuryプラグインの中で有名なものが、その名もズバリ「jquery.infinitescroll.js」というもの。
これを使ったワードプレスプラグインが幾つかありました。

ネットで検索すると「jquery.infinitescroll.js」の作者が作った「Infinite-Scroll」というプラグインの説明が多数あるのですが、これが動かない…。で、最終更新が2年前という(汗)
そんなわけで色々と試して動くやつを発見。
「Unlimited」というプラグインです。
あとワードプレス公式のJetpackプラグインにも無限スクール機能はあります。
「Jetpack」の方が導入は簡単なのですが余計な機能もわんさか付いてくるので重くなります。それはちょっと…という人は「Unlimited」がおすすめです。

無限スクロール系のプラグインは「次へ」とか「前へ」のページネーションをスクリプトで置き換えるので、多少はCSSのことを知っておく必要があります。
このCSSの設定は使っているテーマによって異なります。なので結構理解が面倒だと思います。

しかし、導入するとかなり使い勝手がいいのでおすすめです。
そんなわけでみなさんのために解説です。

まずプラグインのインストール方法です。
管理画面にログインして左サイドメニューの [ プラグイン ] → [ 新規追加 ] を選択。
右上の「プラグインの検索」テキストボックスに「Unlimited」と入力して検索します。
検索結果から「Unlimited」を見つけて [ いますぐインストール ] ボタンを選択し、インストールした後、有効化します。

unlimited

インストールすると左サイドメニューの [ 設定 ]「Unlimited」が追加されます。
「Unlimited」を選択し設定画面を開きます。
ここまでは簡単だと思います。

関連記事