質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Q&A

解決済

1回答

2716閲覧

WordPressのテーマ:HuemanでInfinite-Scrollを適用したい

hikaru923

総合スコア27

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

0グッド

0クリップ

投稿2017/06/07 11:39

編集2017/06/08 06:10

###前提・実現したいこと
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> &gt; <span property="itemListElement" class="taxonomy category" data-wpel-link="internal"><span property="name">ニュース</span></a><meta property="position" content="2"></span> &gt; <span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="今日のニュースのカテゴリーアーカイブへ移動" href=""><span property="name">今日のニュース</span></a><meta property="position" content="3"></span> &gt; <span property="itemListElement" typeof="ListItem"><span property="name">[67] 今日のニュース [ニュース&話題]</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">[67] 今日のニュース [ニュース&話題]</h1> 28<p class="post-byline">by <span class="vcard author"> 29 <span class="fn"><a href="">ヒカル</a></span> 30 </span> &middot; 31 公開 <time class="published" datetime="2017年6月7日">201767</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>[66] 今日のニュース [ニュース&話題]</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">&nbsp;by <span class="vcard author"> 91 <span class="fn"><a href="">ヒカル</a></span> 92 </span> &middot; Published <span class="published">2017年6月1日</span> 93 &middot; 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="">[66] 今日のニュース [ニュース&話題]</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">201766</time> 117</p> 118 119 <p class="post-byline" style="display:none">&nbsp;by <span class="vcard author"> 120 <span class="fn"><a href="">ヒカル</a></span> 121 </span> &middot; Published <span class="published">201766</span> 122 &middot; Last modified <span class="updated">201767</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">カスタマイズする &raquo;</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-->

エラーは発生しておりません。

###謝辞
問題解決にあたり、何か必要な情報などありましたら遠慮なくお申し付けください。随時追加させていただきます!
わざわざ目を通していただき誠にありがとうございました。
何卒、お力添えをよろしくお願い申し上げます。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/07 11:54

現状書かれているソースコードはつけてください。あと、デベロッパーツール等でエラーがはかれていたら、それも。
hikaru923

2017/06/08 03:42

追記させていただきました。大変申し訳ございません。実際に動いてるサイトのどの情報を載せればいいか+特定されないようにどの部分を変更すればいいのか分からず…ご指摘ありがとうございます!
guest

回答1

0

ベストアンサー

こんな記事がありました。
【jQuery】無限スクロール[Infinite Scroll]を極限までカスタマイズ。

同じものだとは思うのですが、上記の記事を参考にこちらで試してみました。
Infinite-Scroll

設定項目を、以下のように設定しました。
Content Selector : .content
Navigation Selector : .pagination
Next Selector : .next a
Item Selector : .post

とりあえずこれで動きました。
最初の表示設定ページ以降(2ページ目から)は、
なんというか一列表示なってしまうようです。
(すいません。なんと説明すればいいのやら? 試してもらえばわかると思いますが)

追記

たぶんですが、
ページ送りは連番である必要があるのだと思います。
なので、その部分がクリアできれば可能だと思いますが、
わたしには、ちょっとわかりません。

ワードプレスへの導入の記事ではありませんが参考まで。
Infinite scroll導入でつまずいた点のメモ

投稿2017/06/08 01:07

編集2017/06/08 07:56
8-0_nyan5

総合スコア2352

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hikaru923

2017/06/08 03:40

只今ソースコードを追記させていただきましたが どうも反応しないみたいです…詳しくお調べ頂き誠に恐縮です… 私の理解が及ばず大変申し訳ございません。
hikaru923

2017/06/08 03:46

<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> というような記載があり、私の想定ではこの「前の記事」を次に読み込みたいのですが…
8-0_nyan5

2017/06/08 04:06

ページネーションの部分をカスタマイズされていると言うことでしょうか。
hikaru923

2017/06/08 04:37

最下部にどういう形式になっているかキャプチャ貼りますね~ 共同制作者がいて、その方がいじったかもしれません。
hikaru923

2017/06/08 04:42

前の記事、次の記事をページネーションと認識しているだけで もしかしてこの部分は関係ないのでしょうか…? 新しくページネーション部分を増設してそこから読み込まなければならないのでしょうか。
8-0_nyan5

2017/06/08 04:54

すいません。わたしが勘違いしていたようです。 もしかして、トップページではなく、 個別ページで動作させたいと言うことでしょうか。
hikaru923

2017/06/08 04:59

私の方も説明を怠っており、はっとさせられました。 個別投稿のsingle.php内?で 可能な限り下に記事を読み込みたいと考えております。
hikaru923

2017/06/08 08:41

共同制作者に確認いたしましたところ、URLにはこだわりがあるとの事で 今回は導入を取りやめます。 この度は貴重なお時間を割いていただき誠にありがとうございます。 取りやめるという決断を下すに値する情報を頂けたという事でBAにさせていただきます。 本当に心強かったです。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問