WordPressにinfinite scrollを導入したいのでR ver.2

以前に、ここの記事と、ここの記事で、TwentySixteenと、その他に一般的にWordpressにinfinite scroll(無限スクロール)を導入する方法を試したのでR。

その時のプラグインが、WP Infinite Scrollingと、YITH Infinite ScrollingでR。

その両方とも、設定で、

Navigation Selector

Next Selector

Item Selector

Content Selector

を指定しないといけないのでRが、これがテーマによって異なるのでR。

それを調べるのが、以前、ここの記事で書いたように、cssでの困ったを解消してくれた、

GoogleのChromeの右クリック、検証(I)がとても役立つのでR。

でR。

検証(I)で調べると、WP Infinite Scrollingの作者のYoutubeであるように、各Selecterが分かりやすいのでR。

しかし、

テーマによってかなり違うこともあるのでR。

そこで、

ここには、その組み合わせを書いてみるのでR。

Content Selectorは、
#content
#main
.site-content
.site-main
のどれかでいけたのでR。

Item Selectorは、
article.post
.post
div.box
のどれかでいけたのでR。

Next Selectorは、
nav.navigation a.next
a.next
.nav-previous a
nav.pagination .older-posts a:first
nav.navigation .nav-previous a:first
のどれかでいけたのでR。

Navigation Selectorは
nav.navigation
nav.pagination
のどれかでいけたのでR。

これで、多くのテーマのWordpressのinfinite scrollがいけるかもでR。

上のどれを使うかは、

GoogleのChromeの右クリック、検証(I)がとても役立つのでR。

ただし、

プラグイン「jetpack」にもinfinite scrollがあるので、こっちでもいけるかもでR。

———————-

とここで、後日に妙な現象を見つけたのでR。

Next Selectorの
nav.navigation .nav-previous a:first

で対応したテーマの、single投稿に入ると、例えば10番目の投稿に入ると、infinite scrollで9、8、….、1となる現象を発見したのでR。そこで、このテーマのinfinite scrollのNext Selectorを

nav.navigation .nav-next a:first

とすると、この場合でsingle投稿に入ると、例えば先ほどと同じく10番目の投稿に入ると、infinite scrollで11、12、….、最新となる現象を発見したのでR。これには驚いたのでR。

ただし、スクロールに時間がかかっているようで、うまく動かないこともあるので、あまりお勧めできないのでR。






この記事をシェアできます。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』