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

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

ただいまの
回答率

90.51%

  • WordPress

    8914questions

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

  • プラグイン

    529questions

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

  • スクロール

    35questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 886

hikaru923

score 19

前提・実現したいこと

WordPressのHuemanテーマを用いて
ブログのようなものを作ろうと考えています。
結構記事を溜めるつもりなので
Twitterみたいに、下にスクロールすると次の記事が表示されるようにしたいと思っています。

発生している問題・エラーメッセージ

このInfinite-Scroll
というプラグインで無限スクロールを実現しようと思ったのですが
プラグインをONにしても無限スクロールになりません…
どうもセレクタを指定しなければならないとの事ですが
イメージ説明
「Next Selector」の書き方が分かりません…
そもそも他の三つも合っているのか不明でして…

該当ソースコード

<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">

<div id="wrapper">

//header部分


  <div class="container" id="page">
    <div class="container-inner">
            <div class="main">
        <div class="main-inner group">


              <section class="content">
              <div class="page-title pad group">
    <!--パンくず-->
    <div class="breadcrumbs">
          <!-- Breadcrumb NavXT 5.7.0 -->
<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">[6月7日] 今日のニュース [ニュース&話題]</span><meta property="position" content="4"></span>    </div>

    </div><!--/.page-title-->
          <div class="pad group">
              <article class="post-147 post type-post status-publish format-standard has-post-thumbnail hentry category-recommend category-9">

    <div class="post-inner group">

      <h1 class="post-title entry-title">[6月7日] 今日のニュース [ニュース&話題]</h1>
<p class="post-byline">by   <span class="vcard author">
     <span class="fn"><a href="">ヒカル</a></span>
   </span> &middot;
                            公開 <time class="published" datetime="2017年6月7日">2017年6月7日</time>

               </p>

      <div class="clear"></div>

      <div class="entry themeform">
        <div class="entry-inner">


記事本文


<!-- AddThis Sharing Buttons below -->          <nav class="pagination group">
                      </nav><!--/.pagination-->
        </div>


        <div class="clear"></div>
      </div><!--/.entry-->

    </div><!--/.post-inner-->
  </article><!--/.post-->

<div class="clear"></div>



    <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>



<h4 class="heading">
    <i class="fa fa-hand-o-right"></i>あわせて読みたい</h4>

<ul class="related-posts group">

        <li class="related post-hover">
        <article class="post-107 post type-post status-publish format-standard has-post-thumbnail hentry category-recommend category-7">

            <div class="post-thumbnail">
                <a href="">
                    <img width="520" height="245" src="" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="" srcset="";"/></a>
                            </div><!--/.post-thumbnail-->

            <div class="related-inner">

                <h4 class="post-title entry-title">
                    <a href="">テストサイトについて</a>
                </h4><!--/.post-title-->

                <div class="post-meta group">
                    <p class="post-date">
  <time class="published updated" datetime="2017-06-01 12:00:14">2017年6月1日</time>
</p>

  <p class="post-byline" style="display:none">&nbsp;by    <span class="vcard author">
      <span class="fn"><a href="">ヒカル</a></span>
    </span> &middot; Published <span class="published">2017年6月1日</span>
     &middot; Last modified <span class="updated">2017年6月6日</span>  </p>
                </div><!--/.post-meta-->

            </div><!--/.related-inner-->

        </article>
    </li><!--/.related-->
        <li class="related post-hover">
        <article class="post-118 post type-post status-publish format-standard has-post-thumbnail hentry category-recommend category-9">

            <div class="post-thumbnail">
                <a href="">
                    <img width="520" height="245" src="" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="" srcset="" ;"/></a>
                            </div><!--/.post-thumbnail-->

            <div class="related-inner">

                <h4 class="post-title entry-title">
                    <a href="">[6月6日] 今日のニュース [ニュース&話題]</a>
                </h4><!--/.post-title-->

                <div class="post-meta group">
                    <p class="post-date">
  <time class="published updated" datetime="2017-06-06 12:00:30">2017年6月6日</time>
</p>

  <p class="post-byline" style="display:none">&nbsp;by    <span class="vcard author">
      <span class="fn"><a href="">ヒカル</a></span>
    </span> &middot; Published <span class="published">2017年6月6日</span>
     &middot; Last modified <span class="updated">2017年6月7日</span>  </p>
                </div><!--/.post-meta-->

            </div><!--/.related-inner-->

        </article>
    </li><!--/.related-->

</ul><!--/.post-related-->



<section id="comments" class="themeform">


                    <!-- comments closed, no comments -->



</section><!--/#comments-->          </div><!--/.pad-->
        </section><!--/.content-->


    <div class="sidebar s1 collapsed" data-position="right" data-layout="col-2cl" data-sb-id="s1">

        <a class="sidebar-toggle" title="サイドバーを展開" data-wpel-link="internal"><i class="fa icon-sidebar-toggle"></i></a>

        <div class="sidebar-content">

                          <div class="sidebar-top group">
                                          <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>                        
                        </div>



            <div id="categories-2" class="widget widget_categories"><h3 class="widget-title">カテゴリー</h3>        <ul>
    <li class="cat-item cat-item-6"><a href="">recommend</a>
</li>
    <li class="cat-item cat-item-7"><a href="">テストサイト</a>
</li>
    <li class="cat-item cat-item-9"><a href="">今日のニュース</a>
</li>
        </ul>
</div><div id="search-2" class="widget widget_search"><h3 class="widget-title">キーワードを検索</h3><form method="get" class="searchform themeform" action="http://testtest.jp/">
    <div>
        <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='検索するには入力して Enter';" onfocus="if(this.value=='検索するには入力して Enter')this.value='';" value="検索するには入力して Enter"/>
    </div>
</form></div>
        </div><!--/.sidebar-content-->

    </div><!--/.sidebar-->



        </div><!--/.main-inner-->
      </div><!--/.main-->
    </div><!--/.container-inner-->
  </div><!--/.container-->

//フッター部分

</div><!--/#wrapper-->

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

謝辞

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/06/07 20:54

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

    キャンセル

  • hikaru923

    2017/06/08 12:42

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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

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

追記

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/08 12:40

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

    キャンセル

  • 2017/06/08 12: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/&quot; rel="prev" data-wpel-link="internal"><i class="fa fa-chevron-left"></i><strong>前の記事</strong> <span>[6月6日] 今日のニュース [ニュース&話題]</span></a></li>
    </ul>
    というような記載があり、私の想定ではこの「前の記事」を次に読み込みたいのですが…

    キャンセル

  • 2017/06/08 13:06

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

    キャンセル

  • 2017/06/08 13:37

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

    キャンセル

  • 2017/06/08 13:42

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

    キャンセル

  • 2017/06/08 13:54

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

    キャンセル

  • 2017/06/08 13:59

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

    キャンセル

  • 2017/06/08 17:41

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

    キャンセル

同じタグがついた質問を見る

  • WordPress

    8914questions

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

  • プラグイン

    529questions

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

  • スクロール

    35questions

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