Simplicityに無限スクロールを実装するカスタマイズしてみた

シェアする



URLをコピーする
Simplicityに無限スクロールを実装するカスタマイズしてみた
https://fwww7.com/2016/07/19/infinite/

どうもIT大好きFwwwです。

みなさんは無限スクロールはご存知ですか?

無限スクロールというのは、下へ下へとスクロールしてもどんどんコンテンツが自動的に読み込まれていき表示されていくことです。

実際にこのサイト(Simplicityを使用)でも無限スクロールの実装が行えたので、今回はその方法を紹介するのですが、完成形をアニメーションGIFにしましたのでまずはご覧になってください。

無限スクロール

GIFの上部に表示される読み込み時の青いプログレスバーは当サイトで独自で行っているものなので、割愛とさせていただきます。

※どうしても青いプログレスバーを実装したい場合はcontact@fwww7.comまでご連絡ください!

メリット

  • ブラウジングがとても快適になる
  • ページ滞在時間の増加

注意すること

  • アドセンスについて

インデックスリストのトップやミドル、ボトムにウィジェットを配置している場合、本来ページが切り替わる位置でウィジェットが再生成されてしまいます。

そのため、アドセンスを配置しているとスクロールするたびにどんどん増えてしまいポリシー違反となってしまいますので注意が必要です。

ですので、この機能を実装する場合はページあたりの掲載数に規定がない広告をインデックスリストのトップやミドル、ボトムに貼り、サイドバーにアドセンスを貼るのが理想的ですね!

また、当サイトで使っているウィジェットをページ毎に分岐できるプラグインはDynamic Widgetsです。

  • フッターについて

無限スクロールを実装するとフッターエリアが消えてしまいます。フッターにたくさんの情報をウィジェットで配置している場合は、ウィジェット配置をサイド考え直す必要があります。

スポンサーリンク

Simplicityに無限スクロールを実装してブラウジングを快適にしよう

実は今回使用するプラグインはほとんどの方が使用していると思います!

それがJetPackです。

最初にJetPackで無限スクロールを有効にする必要があるので、

「JetPack」→「JetPack」に移動しましょう。

すると、下記のような画面になると思うので「他○○個のJetPack機能を見る」ボタンをクリックしてください。

JetPack 他の機能

下の方にある「無限スクロール」を有効化します。

もちろんこれだけじゃ無限スクロール実装できませんよ。

functions.phpで次のような記述をする必要があります。

参考サイト:Dr.Clover’s Computer Clinic

一応上記の記述で無限スクロールは実装できましたが、ページネーションがいちいち挿入されるので邪魔ですね!

ちなみにページネーションというのはこれです↓

ページネーション

このページネーションを非表示にするにはlist.phpを編集する必要があります。

list.phpの最下部のエントリーのページャーという項目を編集するのですが、もし無限スクロールさせるのを辞める場合のために下記のようにコメントアウトさせました。

うまくいけばページネーションが非表示になるはずです。

あと僕が気になったのが、PCで無限スクロールさせている際に表示されるサイト名とクレジットです。

フッター

本来表示させなきゃいけないかもしれませんが、僕は次のコードで非表示にさせています

※style.cssに記述してください

どうしてもインデックスリストトップに広告を表示させたい場合

listの外側であるmainに貼ればアドセンスも上手く貼ることができます。

もちろん再生成されないので安心してください。

編集するのはheader.phpの最下部です。

※謝クリック対策として広告の下に改行タグを挿入しています。

上記の例に従って実装すれば、スマホとパソコンで次のようなことができます。

PCの場合

mainにアドセンス横並び

スマホの場合

mainにアドセンス スマホ

まとめ

Simplicityに無限スクロールを実装させたことで、ブラウジングが快適になりましたね!!

Simplicityはどんどんカスタマイズしていけば個性が現れるテーマだと思います。

もしこんな風にカスタマイズしてみたいという案があればコメントしてください!

お待ちしております。

Simplicityカスタマイズマニュアル

スポンサーリンク

シェアする



URLをコピーする
Simplicityに無限スクロールを実装するカスタマイズしてみた
https://fwww7.com/2016/07/19/infinite/

オススメ記事

コメント

  1. technote より:

    非常に興味深く読ませていただきました。
    一点、カテゴリページに関しておそらくおかしい表示があったので報告します。
    例えばWordPressカテゴリーページで
    「WordPress」一覧
    というのがページごとに入ってしまっているようです。
    もし意図したものであれば無視してください。

    • Fwww fwww より:

      ご指摘ありがとうございます!
      後日修正してソースコードもご一緒にご紹介させていただきますので今しばらくお待ちくださいm(_)m