こんにちは！ 今回は無限スクロールの王道JSプラグイン、「Infinite Scroll」を WordPressの記事一覧で設置します。 先日実際に設置した際、読み込む要素のサイズやらをjQueryで制御していたため、 「もっと見る」ボタンで表示された要素は崩れてしまっていました。 解決策としては、要素の処理を読み込み後に行うと綺麗に表示されます。 当たり前ですが、本家サイトが一番丁寧に解説しているので一読すると良いですよ。 ちなみにInfinite ScrollはAjax（非同期通信）で要素を読み込みます。 Ajaxのことを知りたい方は、下記の記事がめちゃめちゃ分かりやすく解説してくれています。 Ajaxとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 それではやっていきましょう。 HTML <div class="postWrap"> <?php if(hav

もはや、タイトルが日本語として正しいのかどうかも分からないくらい、JavaScriptが苦手ですが、社内システムを使ってもらうため、果敢に挑戦中です。 弊社では、過去の図面を検索するときに、WEBにPDFを埋め込んで検索結果として表示していますが、検索結果が多いと、PDFを開くのに時間がかかってしまい、待ちくたびれてしまうので、今回タイトルにあるように、jQueryとInfinite Scrollを使って、小分けにして読み込むように改修しました。 なぜInfinite Scrollを使うのでしょうか？ それは、「無限スクロール」で検索したら、ぽろぽろヒットしてきたからです。「Infinite Scrollなんて今さら・・・」みたいな情報も見た気がしますが、お構いなしです。今どきのやり方は見つけられなかったし・・・。とりあえず、機能が実現できればいいかなということで。 で、WEB上のサンプル

どうも、はぐっです・ω・♪ JavaScript(infinite-scroll.js)で無限スクロールを実装 Webサイトを制作していく中で、 同じ属性のコンテンツを多く提供することがあるかと思います。 多量コンテンツの提供はページネーション？ まぁページネーションやんなー って、今までやったら全然何の迷いもなくなってた。 ここに関しては、お前が知らんかっただけやろ。みたいな話は…受け付けません← でも果たしてこういうとき、ページネーションしか方法がないのだろうか？ と、いや、あるよな、よくアプリとかで見るで。ってなって、 調べたら、すぐに。極めてすぐに見つかりました。 無限スクロールという方法 スクロールが閾値を超えたら、次の数件を表示。 また閾値を超えたら、次の数件を表示。表示！表示！ という形で、どんどん下へ下へ次のコンテンツを表示していくスタイル。 これも、同じ属性のコンテンツを

「もっと読む」機能は、本文の続きを読ませたり、次の投稿を読ませたりするの使われますよね。 同じようなことを間延びしているカテゴリー等でも使いたい。 そのような時に便利な WordPress 用プラグインがあります。 それは「Load More Anything」です。 その導入手順から日本語化・使い方と設定などを解説していきます。 Load More Anything は、あらゆるもの（ループ処理をしているアイテム）を「もっと読む」化できます。 Load More Anything は、以下の場所で使用できます。 ブログ投稿メニューリストコメントサイドバーウィジェット（最近の投稿・カテゴリーなど）Woocommerce 製品ギャラリーループさせている div タグ記事を作成もしくは更新時点でのバージョン：2.2.2 マルチサイトでの利用:可 インストール手順Load More Anythi

【 最新の更新日は 2019年12月28日 です】 山田どうそんです。 スマホ利用者が増えている中で、自動で次の記事を読み込んでくれる無限スクロールの設定ができるプラグインを設置したい人もいると思います。 この「Ajax Load More」を使うと記事内に無限スクロールの設定が可能です。定期的に更新もされていて非常に評価も高いプラグインです。 投稿ページや固定ページなどのページを無限スクロール設定できるので、サイト制作の幅が広がります。 無料版と有料版があり、有料版は1サイト35ドルで細かい設定まで可能です。 この記事では、無料版の基本的な使い方について解説していきます。 プラグインの特徴 無限スクロールを好きな場所にショートコードで設置できる 読み込みたい投稿記事を選択して読み込ませることができる プラグインのダウンロード プラグインのダウンロードは下記のリンク先からもできるしWord