商品ページを無限スクロールで表示できる：Load More Products for WooCommerce
商品ページを無限スクロールで表示できる WooCommerce 用プラグインの紹介です。
それは「Load More Products for WooCommerce」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
Load More Products for WooCommerce
Load More Products for WooCommerce は、WooCommerce の商品ページを無限スクロールで表示できます。
自動での無限スクロールではなくて、
「読込」ボタンを設置しての手動での無限スクロールをさせることもできます。
JavaScript でフックしてカスタムコードを追加することもできます。
記事を作成もしくは更新時点でのバージョン：v 1.1.6.4
Gutenberg エディターでの動作
Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Load More Products for WooCommerce – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Load More Products for WooCommerce」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Load More Products for WooCommerce を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
ダッシュボードの「商品」メニューの下に追加されています。
使い方
設定画面から設定を行いましょう。
設定（Settings）
一般設定（General）
- Products Loading Type
商品の読込形式を選択します。 - Loading Image
ローディング画像を選択します。 - Rotate image on load
読み込み時に画像をローテーションするかどうか。 - Buffer Pixels
バッファを px 単位で入力します。
初期値：50 px - Don’t update url when next page shown
次ページが表示された時に URL を更新しないようにするか。 - JavaScript and CSS is used on WooCommerce pages only
JavaScript と CSS を WooCommerce ページでのみ使用するかどうか。
ボタン設定（Button-Settings）
読み込みボタンに関する設定を行えます。
前ページ設定（Previous-Settings）
前のページに戻るボタンに関する設定を行えます。
セレクター設定（Selectors）
CSS セレクターに関する設定を行えます。
Javascript（Javascript）
カスタム Javascript コードを記述できます。
CSS（CSS）
- Disable Font Awesome
フロントエンド画面で Font Awesome の CSS ファイルを読み込まないようにするかどうか。 - Font Awesome Version
フロントエンドで使用される Font Awesome のバージョンを選択します。使用中のテーマにあるバージョンを選択してください。 - Custom CSS
カスタム CSS コードを記述できます。。