Q&A
現状書かれているソースコードはつけてください。あと、デベロッパーツール等でエラーがはかれていたら、それも。
###前提・実現したいこと
WordPressのHuemanテーマを用いて
ブログのようなものを作ろうと考えています。
結構記事を溜めるつもりなので
Twitterみたいに、下にスクロールすると次の記事が表示されるようにしたいと思っています。
###発生している問題・エラーメッセージ
このInfinite-Scroll
というプラグインで無限スクロールを実現しようと思ったのですが
プラグインをONにしても無限スクロールになりません…
どうもセレクタを指定しなければならないとの事ですが
「Next Selector」の書き方が分かりません…
そもそも他の三つも合っているのか不明でして…
###該当ソースコード
PHP
1<body class="post-template-default single single-post postid-147 single-format-standard logged-in admin-bar no-customize-support col-2cl boxed topbar-enabled header-desktop-sticky header-mobile-sticky chrome"> 2 3<div id="wrapper"> 4 5//header部分 6 7 8 <div class="container" id="page"> 9 <div class="container-inner"> 10 <div class="main"> 11 <div class="main-inner group"> 12 13 14 <section class="content"> 15 <div class="page-title pad group"> 16 <!--パンくず--> 17 <div class="breadcrumbs"> 18 <!-- Breadcrumb NavXT 5.7.0 --> 19<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="テストサイトへ移動" href=""><span property="name">テストサイト</span></a><meta property="position" content="1"></span> > <span property="itemListElement" class="taxonomy category" data-wpel-link="internal"><span property="name">ニュース</span></a><meta property="position" content="2"></span> > <span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="今日のニュースのカテゴリーアーカイブへ移動" href=""><span property="name">今日のニュース</span></a><meta property="position" content="3"></span> > <span property="itemListElement" typeof="ListItem"><span property="name">[6月7日] 今日のニュース [ニュース＆話題]</span><meta property="position" content="4"></span> </div> 20 21 </div><!--/.page-title--> 22 <div class="pad group"> 23 <article class="post-147 post type-post status-publish format-standard has-post-thumbnail hentry category-recommend category-9"> 24 25 <div class="post-inner group"> 26 27 <h1 class="post-title entry-title">[6月7日] 今日のニュース [ニュース＆話題]</h1> 28<p class="post-byline">by <span class="vcard author"> 29 <span class="fn"><a href="">ヒカル</a></span> 30 </span> · 31 公開 <time class="published" datetime="2017年6月7日">2017年6月7日</time> 32 33 </p> 34 35 <div class="clear"></div> 36 37 <div class="entry themeform"> 38 <div class="entry-inner"> 39 40 41記事本文 42 43 44<!-- AddThis Sharing Buttons below --> <nav class="pagination group"> 45 </nav><!--/.pagination--> 46 </div> 47 48 49 <div class="clear"></div> 50 </div><!--/.entry--> 51 52 </div><!--/.post-inner--> 53 </article><!--/.post--> 54 55<div class="clear"></div> 56 57 58 59 <ul class="post-nav group"> 60 <li class="next"></li> 61 <li class="previous"><a href="http://testtest.jp/archives/news_170606/" rel="prev" data-wpel-link="internal"><i class="fa fa-chevron-left"></i><strong>前の記事</strong> <span>[6月6日] 今日のニュース [ニュース＆話題]</span></a></li> 62 </ul> 63 64 65 66<h4 class="heading"> 67 <i class="fa fa-hand-o-right"></i>あわせて読みたい</h4> 68 69<ul class="related-posts group"> 70 71 <li class="related post-hover"> 72 <article class="post-107 post type-post status-publish format-standard has-post-thumbnail hentry category-recommend category-7"> 73 74 <div class="post-thumbnail"> 75 <a href=""> 76 <img width="520" height="245" src="" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="" srcset="";"/></a> 77 </div><!--/.post-thumbnail--> 78 79 <div class="related-inner"> 80 81 <h4 class="post-title entry-title"> 82 <a href="">テストサイトについて</a> 83 </h4><!--/.post-title--> 84 85 <div class="post-meta group"> 86 <p class="post-date"> 87 <time class="published updated" datetime="2017-06-01 12:00:14">2017年6月1日</time> 88</p> 89 90 <p class="post-byline" style="display:none"> by <span class="vcard author"> 91 <span class="fn"><a href="">ヒカル</a></span> 92 </span> · Published <span class="published">2017年6月1日</span> 93 · Last modified <span class="updated">2017年6月6日</span> </p> 94 </div><!--/.post-meta--> 95 96 </div><!--/.related-inner--> 97 98 </article> 99 </li><!--/.related--> 100 <li class="related post-hover"> 101 <article class="post-118 post type-post status-publish format-standard has-post-thumbnail hentry category-recommend category-9"> 102 103 <div class="post-thumbnail"> 104 <a href=""> 105 <img width="520" height="245" src="" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="" srcset="" ;"/></a> 106 </div><!--/.post-thumbnail--> 107 108 <div class="related-inner"> 109 110 <h4 class="post-title entry-title"> 111 <a href="">[6月6日] 今日のニュース [ニュース＆話題]</a> 112 </h4><!--/.post-title--> 113 114 <div class="post-meta group"> 115 <p class="post-date"> 116 <time class="published updated" datetime="2017-06-06 12:00:30">2017年6月6日</time> 117</p> 118 119 <p class="post-byline" style="display:none"> by <span class="vcard author"> 120 <span class="fn"><a href="">ヒカル</a></span> 121 </span> · Published <span class="published">2017年6月6日</span> 122 · Last modified <span class="updated">2017年6月7日</span> </p> 123 </div><!--/.post-meta--> 124 125 </div><!--/.related-inner--> 126 127 </article> 128 </li><!--/.related--> 129 130</ul><!--/.post-related--> 131 132 133 134<section id="comments" class="themeform"> 135 136 137 <!-- comments closed, no comments --> 138 139 140 141</section><!--/#comments--> </div><!--/.pad--> 142 </section><!--/.content--> 143 144 145 <div class="sidebar s1 collapsed" data-position="right" data-layout="col-2cl" data-sb-id="s1"> 146 147 <a class="sidebar-toggle" title="サイドバーを展開" data-wpel-link="internal"><i class="fa icon-sidebar-toggle"></i></a> 148 149 <div class="sidebar-content"> 150 151 <div class="sidebar-top group"> 152 <p style="text-transform:none;font-size: 0.8em;">カスタマイザーからここにソーシャルリンクを設定できます。. <a style="color: white;text-decoration:underline;" href="http://testtest.jp/wp-admin/customize.php?autofocus[section]=social_links_sec" title="カスタマイズする" data-wpel-link="internal">カスタマイズする »</a></p> 153 </div> 154 155 156 157 <div id="categories-2" class="widget widget_categories"><h3 class="widget-title">カテゴリー</h3> <ul> 158 <li class="cat-item cat-item-6"><a href="">recommend</a> 159</li> 160 <li class="cat-item cat-item-7"><a href="">テストサイト</a> 161</li> 162 <li class="cat-item cat-item-9"><a href="">今日のニュース</a> 163</li> 164 </ul> 165</div><div id="search-2" class="widget widget_search"><h3 class="widget-title">キーワードを検索</h3><form method="get" class="searchform themeform" action="http://testtest.jp/"> 166 <div> 167 <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='検索するには入力して Enter';" onfocus="if(this.value=='検索するには入力して Enter')this.value='';" value="検索するには入力して Enter"/> 168 </div> 169</form></div> 170 </div><!--/.sidebar-content--> 171 172 </div><!--/.sidebar--> 173 174 175 176 </div><!--/.main-inner--> 177 </div><!--/.main--> 178 </div><!--/.container-inner--> 179 </div><!--/.container--> 180 181//フッター部分 182 183</div><!--/#wrapper-->
エラーは発生しておりません。
###謝辞
問題解決にあたり、何か必要な情報などありましたら遠慮なくお申し付けください。随時追加させていただきます！
わざわざ目を通していただき誠にありがとうございました。
何卒、お力添えをよろしくお願い申し上げます。
追記させていただきました。大変申し訳ございません。実際に動いてるサイトのどの情報を載せればいいか＋特定されないようにどの部分を変更すればいいのか分からず…ご指摘ありがとうございます！
回答1件
0
ベストアンサー
こんな記事がありました。
【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。
同じものだとは思うのですが、上記の記事を参考にこちらで試してみました。
Infinite-Scroll
設定項目を、以下のように設定しました。
Content Selector : .content
Navigation Selector : .pagination
Next Selector : .next a
Item Selector : .post
とりあえずこれで動きました。
最初の表示設定ページ以降（２ページ目から）は、
なんというか一列表示なってしまうようです。
（すいません。なんと説明すればいいのやら？ 試してもらえばわかると思いますが）
追記
たぶんですが、
ページ送りは連番である必要があるのだと思います。
なので、その部分がクリアできれば可能だと思いますが、
わたしには、ちょっとわかりません。
ワードプレスへの導入の記事ではありませんが参考まで。
Infinite scroll導入でつまずいた点のメモ
投稿2017/06/08 01:07
編集2017/06/08 07:56
総合スコア2354
只今ソースコードを追記させていただきましたが
どうも反応しないみたいです…詳しくお調べ頂き誠に恐縮です…
私の理解が及ばず大変申し訳ございません。
<nav class="pagination group">
</nav><!--/.pagination-->
pagination部分には何もない？のでもしかしたらどこか設定いじってしまったみたいです…
前の記事 次の記事 という表記で
<ul class="post-nav group">
<li class="next">/*次の記事？これが最新だから無し*/</li>
<li class="previous"><a href="http://testtest.jp/archives/news_170606/" rel="prev" data-wpel-link="internal"><i class="fa fa-chevron-left"></i><strong>前の記事</strong> <span>[6月6日] 今日のニュース [ニュース＆話題]</span></a></li>
</ul>
というような記載があり、私の想定ではこの「前の記事」を次に読み込みたいのですが…
ページネーションの部分をカスタマイズされていると言うことでしょうか。
最下部にどういう形式になっているかキャプチャ貼りますね～
共同制作者がいて、その方がいじったかもしれません。
前の記事、次の記事をページネーションと認識しているだけで
もしかしてこの部分は関係ないのでしょうか…？
新しくページネーション部分を増設してそこから読み込まなければならないのでしょうか。
すいません。わたしが勘違いしていたようです。
もしかして、トップページではなく、
個別ページで動作させたいと言うことでしょうか。
私の方も説明を怠っており、はっとさせられました。
個別投稿のsingle.php内？で
可能な限り下に記事を読み込みたいと考えております。
共同制作者に確認いたしましたところ、URLにはこだわりがあるとの事で
今回は導入を取りやめます。
この度は貴重なお時間を割いていただき誠にありがとうございます。
取りやめるという決断を下すに値する情報を頂けたという事でＢＡにさせていただきます。
本当に心強かったです。ありがとうございます！
あなたの回答
tips
プレビュー
