ワードプレスのオンラインショップで商品を表示する5つの簡単な方法

WordPressオンラインストアに製品を表示することは、eコマース初心者にとって本当に悪夢になる可能性があります。私がオンラインショップを作り始めたとき、私のウェブサイトのホームページに私のアイテムを置くのは簡単だろうと思いました。しかし、全体の仕事はかなり困難な闘いでした！

私自身の経験によると、特にeコマースを初めて使用する場合は、製品をWebサイトに表示するのに多くの時間を費やす可能性があります。WordPressの知識が必要な作業だと知りました。

オンラインショップに展示されている商品

Jan Saints（自作）：CC-BY-2.0

初めてWordPressオンラインストアを作成する場合は、このコンテンツ管理システムを使用して一般的なWebサイトをセットアップする方法を学ぶ必要があります。また、eコマースプラグイン、ウィジェット、ショートコードなどに精通する必要があります。さらに、WooCommerceを使用している場合は、利用可能な製品表示オプションについて知り、プラグインの一般設定を理解する必要があります。オンラインストアを作成してアイテムを表示する方法に関するこの簡単なガイド（Riccardo Andronacoによる）は、これらすべてを説明しており、非常に役立ちました。

この記事では、WordPressのeコマースWebサイトで製品を表示および配置する5つの方法について説明します。アイテムをWebサイトのページに表示する方法と、それに応じてアイテムを配置する方法については、以下をお読みください。

WordPressオンラインショップでアイテムを表示および配置する5つの方法

1. 自動方式
2. ウィジェット
3. プラグイン
4. ショートコード
5. スライダー

1.自動方式の使用

名前が示すように、ショップページに商品を表示するために何もする必要はありません。ダッシュボードからアイテムを追加すると、アイテムが表示されます。これらは、WooCommerceの表示設定に応じて、アルファベット順に自動的に配置されるか、カテゴリの有無にかかわらずランダムに配置されます。

ホームページは特定の数の商品しか収容できません。つまり、商品の数が多い場合、その一部は2、3、4ページなどに配置されます。

この方法では、カテゴリが含まれておらず、一部のアイテムが他のページに非表示になっているため、顧客がショップのすべてのタイプの商品を知ることは困難です。

アイテムを表示するためにいくつかのより良い方法（以下で説明）を使用できる場合は、この方法を回避する必要がある場合があります。ただし、ホームページなど、1ページに収まるアイテムが多数ある場合は、この方法を採用できます。

ランダムに表示される製品

Jan Saints（自作）：CC-BY-2.0

2.ウィジェットの使用

ご存知かもしれませんが、WordPressのウィジェットは、サイドバーとフッターのセクションに配置できるコンテンツの小さなブロックです。それはウェブサイトをカスタマイズするためのシンプルで簡単な方法を提供します。一般的なウィジェットには、最近の投稿、検索ボックス、カテゴリ、フッターメニューなどがあります。

eコマースWebサイトでは、ウィジェットを使用して、サイドバーまたはフッターに製品カテゴリを表示できます。したがって、これらは、製品カテゴリを特徴としない自動方法（上記で説明）を強化するための優れた方法になります。

eコマースのWordPressテーマに付属するいくつかの優れたウィジェットには、人気のある製品、最近の製品、ベストセラー製品、一流の製品、注目の製品が含まれます。これらのウィジェットはカスタマイズ可能です。つまり、アイテムの実際のカテゴリに名前を変更できます。それらをドラッグアンドドロップして、自分のスタイルに合った配置にすることもできます。

ウィジェットはサイドバーとフッターにしか商品を表示できないため、ほとんどのオンラインショップの所有者はウィジェットを望ましくないと感じています。アイテムを表示するのに最適な場所は、ページのメインバーです。これは、ウィジェットでは実現できません。

プラグインの助けを借りてサイドバーに表示される製品

Jan Saints（自作）：CC-BY-2.0

3.プラグインの使用

WordPressでは、プラグインは機能、機能、またはサービスのグループを含むプログラムのセットです。このコンテンツ管理システムには、幅広いニーズに適した数万のプラグイン（無料とプレミアムの両方）があります。すべてのタイプのWebサイト用のプラグインがあります。たとえば、eコマース（WooCommerceなど）、ディレクトリ、ブログ、再販、予約プラットフォーム用のプラグインがあります。

オンラインショップでのアイテムの表示と配置に関しては、このタスクを実行するために使用できるプラグインが無数にあります。ただし、ほとんどのプラグインはあまり効果的ではないため、機能することが証明されているプラ​​グインを選択する必要があります。

WordPressオンラインストアにアイテムを表示するための最も推奨されるプラグインは、Ultimate ProductCatalogとWooCommerceProduct Sort andDisplayです。

並べ替えと表示のプラグインは、ショップページに多数のアイテムを表示できるEndlessScrollと呼ばれる別のプラグインとの連携が優れています。2つのプラグインをインストールしてアクティブ化した後、製品カテゴリに移動し、カテゴリをドラッグアンドドロップして、適切な表示を実現する必要があります。次に、すべてを表示するためのリンクを使用して、カテゴリごとに表示する製品の数を設定できます。

並べ替えに関しては、プラグインにはデフォルトの並べ替えが付属しており、人気、新しさ、価格（低から高、またはその逆）で並べ替えられ、販売され、特集されています。これらの機能の一部はプラグインのプレミアムバージョンに付属しているため、このバージョンを使用することをお勧めします。

もう1つのプラグインであるUltimateProduct Catalogは、少し複雑です。プラグインをインストールしてアクティブ化した後、ショートコードでアイテムを表示するために使用できるIDを取得するために、すべての製品とカテゴリをプラグインに追加する必要があります。また、アイテムの小さなカタログをいくつか作成する必要があります。

たとえば、次のショートコードは、IDが「x」のカタログ上の製品を表示します。

または

プラグインには、カスタマイズ可能なカタログレイアウト、セール価格、製品インポート、通貨記号、ブレッドクラム、ソーシャルメディア共有、製品レビューと評価、SEO by Yoast統合、多数の設定オプションなどの機能が満載です。

プラグインに含まれる製品カタログスタイルには、ミニマリスト、ブロック、ホバー、タブ付きレイアウトが含まれます。これらのスタイルの一部、および上記の機能の一部は、プラグインのプレミアムバージョンで使用できます。

プラグインの助けを借りてブロックスタイルで表示される製品

Jan Saints（自作）：CC-BY-2.0

4.ショートコードの使用

オンラインストアにWooCommerceを使用している場合は、ショートコードがショップページに商品を表示する最も簡単な方法であることがわかります。ショートコードは商品とカテゴリのIDとSKUで機能し、ショップページにコピーして貼り付けるだけでアイテムを表示できます。以下のショートコードを参照してください。

–カテゴリリストを表示します。

–は特定の数のカテゴリを示しており、次の引数でうまく機能します。注：これらの引数は、このショートコードでも機能します。

• number = "null" –カテゴリの数を表示します。
• orderby = "name" –名前順に並べたときにカテゴリを表示します。注：値「name」は、date、rand（random）、modified、noneに置き換えることができます。
• order = "asc" –昇順で注文したときにカテゴリを表示します。注：値「asc」を「desc」に置き換えて、降順で並べ替えることができます。
• columns = "x" –カテゴリの「x」列を表示します。
• hide_empty = "1" –カテゴリを非表示にします。
• hide_empty = "0" –カテゴリを表示します。
• parent = "0" –トップレベルのカテゴリを表示します。
• ids = "x" – ID "x"のカテゴリを表示します。
• category = "x" –カテゴリ "x"を表示します。

• category_limit –限られた数のカテゴリを表示します。
• archive_template –特定のリストの特定のアーカイブテンプレートを表示します。
• design_scheme –特定の色またはサイズを表示します。
• sort = "0" –製品のソートセレクターを無効にします。
• sort = "1" –製品の並べ替えセレクターを有効にします。
• = "1" –ショートコードを有効にします。
• post_type –別の投稿タイプのエントリを表示します。
• per_row –行ごとの製品を表示します。
• 空–表示する製品がないときに特定のテキストを表示します。

• –「z」列に表示され、投稿された日付に応じて降順で配置されたカテゴリ「x」の「y」アイテムを表示します。
• –製品リストを表示します。
• –製品名を表示します。注：値「name」を他の値に置き換えて、より多くのショートコードを形成できます。これらの値には、価格、説明、簡単な説明、属性テーブル、SKU、配送、ギャラリー、および関連するカテゴリが含まれます。
• –現在の商品リストページのカテゴリを表示します。
• –現在の商品リストページの商品を表示します。
• –パンくずリストを表示します。
• –限られた数の製品を表示します。
• –メインの製品リストページを指す製品に戻るURLを表示します。
• –現在販売中の製品を表示します。
• –IDが「x」の製品を表示します。
• – IDが「x」、「y」、「z」の製品を表示します。
• –SKU「xyz」の商品を表示
• – SKUが「abc」、「def」、「ghi」の商品を表示します。
• –IDが「x」の商品の価格とカートに追加ボタンを表示します。
• –SKUが「x」の製品の価格とカートに追加ボタンを表示します。
• –最大の「x」アイテムを表示します。
• –特定の属性、つまり属性「色」と色が「黒」の製品を表示します。

• -「x」個の最近の製品を「y」列に表示し、投稿された日付に応じて降順で表示します。
• -「x」の注目商品を「y」列に表示し、投稿日に応じて降順で表示します。
• -「x」の人気商品を「y」列に表示し、投稿日に応じて降順で表示します。
• -「y」列に表示され、投稿された日付に応じて降順で並べられた「x」のトップクラスの製品を表示します。
• -「x」のベストセラー商品を「y」列に表示し、投稿日に応じて降順で表示します。
• -「x」関連製品を「y」列に表示し、投稿日に従って降順で表示します。
• –クラシックリストテンプレートを使用した製品リストを表示します。注：「list」の代わりに「grid」や「default」などの他のテンプレートを使用できます。
• –IDが「x」でクラシックリストテンプレートのカテゴリの商品を表示します。

注：コーディングに長けている場合は、これらのショートコードを微調整して、製品の表示と配置を改善できます。

ページに貼り付けられたショートコード

Jan Saints（自作）：CC-BY-2.0

5.スライダーの使用

ご存じない方のために説明すると、スライダーは、選択した投稿のグループを強調表示するために使用されるWebページ要素です。これはスライドショーのようなもので、一度に1つの投稿を表示し、自動的に、またはクリックして次の投稿に移動します。

スライダー付きの商品を表示するには、投稿を商品に置き換える必要があります。製品スライダーの作成に関しては、Soliloguyのようなレスポンシブスライダープラグインが必要です。プラグインをインストールしてアクティブ化した後、新しいスライダーを追加する必要があります。これは、アイテムの写真、リンク、およびその他の必要な詳細を使用して行うことができます。次のステップは、ショートコードとテンプレートタグを取得するために、スライダーを保存または公開することです。

最後に、製品を表示するには、ショートコードをコピーしてホームページまたはその他のページに貼り付ける必要があります。テンプレートタグは、テーマのヘッダーセクションにアイテムを表示できます。タグをコピーし、header.phpを開いて、コード化されたページに貼り付けるだけです。

WooCommerceには、eコマース用に調整されたProductsSliderというプラグインがあります。通常のスライダープラグインのように機能しますが、いくつかの設定とオプションがあります。アイテムの表示と配置に役立つかどうかを確認することをお勧めします。

スライダーに表示される製品

Jan Saints（自作）：CC-BY-2.0

結論

WordPress eコマースWebサイトでのアイテムの表示と配置は、これら5つの方法で非常にシンプルで簡単です。オンラインショップで商品を表示および配置するのが難しい場合は、これら2つのタスクを非常に簡単に実行できるようになります。自分に合っていると思う方法を選択し、それらの製品をよりスマートな方法でホームページに配置するだけです。

参考文献

1. メンニング。R.WordPressとWooCommerceを使用してオンラインストアを構築する方法。 websitesetup.org 。ウェブサイトのセットアップ。（2017）。
2. Andronaco R. WooCommerceとWordpressを使用してオンラインストアを作成する方法：EコマースWebサイトを完璧にセットアップするための簡単なガイド。（2017）。
3. Rastaurius E.、エトワールウェブデザイン。WordPress用のeコマース製品カタログ。 wordpress.org。 implecode。（2017）。
4. WooCommerce。WooCommerceに含まれているショートコード。 docs.woocommerce.com 。WooCommerce。（2016）。
5. トルーマンS.、トゥアンN.、Ar3revソフトウェア。WooCommerce製品の並べ替えと表示のプラグイン。 wordpress.org。 Ar3revソフトウェア。（2013）。
6. YiThemes。Yith InfiniteScrollingプラグイン。 wordpress.org。 YITHEMES。（2017）。
7. Razzak S.WooCommerce製品スライダープラグインの独占ガイド。 cloudways.com。 Cloudways Ltd. （2016）。
8. Balkhi S.Soliloquyを使用してレスポンシブWordPressスライダーを簡単に作成する方法。 wpbeginner.com 。WPBeginner。（2014）。

©2017Januaris Saint Fores