コメント前回までの記事で、WooCommerce(ウーコマース)のショートコードとウィジェットの使い方を解説しました。今回は、それらを使ってHTML・CSSが分からない方でも簡単にショップのトップページをデザインする方法を解説します。※本記事はあくまでも[簡易版]です。細かい部分までしっかりとデザインするにはHTML・CSSに加えてPHPやjsの知識も場合によっては必要になります。SiteOriginというWordPressプラグインを使用してページを作成します。SiteOriginとは?自分でHTML・CSSを書くこと無くマウス操作だけでページのレイアウトが作れ、テキストや画像などの様々な要素を配置できるプラグインです。トップページなどのしっかりと作り込みたいページを、誰でも簡単に思い通りにページを作ることができます。SiteOrigin”で検索し、「今すぐインストール」を押します。インストール完了後、プラグインを有効化します。Bundleでテキストウィジェットや画像ウィジェットを使用可能にするものです。Bundle”で検索し、「今すぐインストール」を押します。インストール完了後、プラグインを有効化します。Bundleのインストールこれでページを作る準備ができました。SiteOriginの操作方法こちらの解説ページが分かりやすいです。SiteOrigin使い方(Grazioso:使い方ガイド)HTML・CSSを知らないと2カラム、3カラムのレイアウトを作るのは難しいですが、これなら簡単にページのレイアウトが作れますね。※説明に使われている画像は、プラグインの過去バージョンの時のもので、現行バージョンとは少しボタンの表示などが違っていますが、操作方法は同じです。SiteOriginの使い方の解説ページの中でも紹介されていますが、作成したRowの中にはウィジェットが使えます。WooCommerce独自のウィジェットも使えます。テキストウィジェットにはショートコードが使えます。SiteOriginで作成したレイアウトの中にショートコードやウィジェットを利用して任意の商品リストを表示させることができます。SiteOrigin(追加プラグインを含む)には画像などを表示するためのウィジェットが用意されていますので、それらとWooCommerceのショートコード、ウィジェットを組み合わせてページを作ります。SiteOriginとWooCommerceのショートコード、ウィジェットを使用して実際にトップページを作ってみました。自分ではHTML・CSSは全く書いていません。※HTML・CSSを書いたから良い/悪いということではなく、それらの知識がない人でもこのくらいのページが作れるということです。ショップを運営していく中で「あれを載せたい」「これは消したい」「表示順を変えたい」という思いが必ず出てきます。自分でページを作ることができれば、そういった思いを素早く反映し、試行錯誤してショップを改善していくことができるようになります。SiteOriginを使用して作成したショップのトップページの例(クリックすると実際のサイズの画像を見ることができます)[使用要素の解説](クリックすると実際のサイズの画像を見ることができます)作成例の解説(クリックすると実際のサイズの画像を見ることができます)WooCommerceのショートコードとウィジェットの使い分けWooCommerceのショートコードでもウィジェットでも商品リストを表示することができますが、デザインが異なるので使い分けています。ショートコードは横に広く表示できるところで使います。ウィジェットは元々サイドバーで使用する前提で作られているので縦長の表示に向いています。上の大きな画像にテキストを重ねている部分は、レイアウトを作っている要素(Row)に背景画像を設定して実現しています。Image」に任意の画像を設定します。そのRowの中にテキストウィジェットやボタンウィジェットを入れます。上下左右の余白は右側の「Layout」のPaddingの数値で調整します。(※この右側の各項目は、細かく設定するとよりデザインを作りこむことができます。full-widthのパララックスも数クリックで作れたりします。SiteOriginはデフォルトでレスポンシブ(スマートフォンやタブレットでの表示最適化)対応しています。このトップページ作成例もレスポンシブになっています。上記(リンク先)の画像では「お知らせ&ショップブログ」部分の表示が切れています。その部分は横スクロールできるので見れなくは無いですが、修正が必要です。編集画面はこのようになりました。SiteOriginでの最終的な編集画面(当然のことではありますが)編集画面で作ったレイアウトと実際の表示のレイアウトが同じに構成になっています。ページ作成作業に入る前に、紙などでページ構成のラフを作っておくと、それを編集画面で再現するだけでレイアウトできてしまうのでおすすめです。使用テーマ、プラグインはすべて無料のものを使用この作成例を作るにあたって、使用したWordPressテーマ・プラグインは全て無料のものです。無料のものだけでもそれなりのショップが作れてしまいますね。ネットショップを始めるには十分かもしれません。ショップの構築に多少予算があるのであれば、有料のテーマやプラグインの使用を検討しても良いと思います。デザイン・機能において優れたものがたくさんあります。(英語のものがほとんどですが、まれに日本語対応を謳っている有料テーマもあります。)例えば、商品を360度回転して見ることができる機能を持ったテーマなんていうのもあります。サイト自体のデザインについて基本的にサイト全体のデザインは使用するWordPressテーマに大きく依存します。従って、サイトデザインの根幹はテーマ選びでほぼ決まります。ショップのコンセプトや扱う商材に適したテーマを選ぶようにしましょう。テーマによってはショップのトップページ用のレイアウトのパターンをたくさん持っていて、それを選んで画像や文章を差し替えるだけで洗練されたデザインのトップページを作れるものもあります。海外のサイトになりますが、themeforestではデザイン・機能に優れたWooCommerce用WordPressテーマがたくさん販売されています。見る人はデザイン・機能のレベルの高さに衝撃を受けるかもしれません。一度覗いてみることをおすすめします。WooCommerce対応テーマの探し方についてはこちらの記事で解説しています。本記事は「トップページの作り方」として解説していますが、より正確に表現すると「自由度の高い固定ページの作り方」です。TOPページだけでなく、例えば「期間限定キャンペーンで対象のセール品を表示する特設ページ」を作ることもできます。WordPressの通常のエディタに比べてかなり自由にページが作れますので、柔軟な発想でページ作りに取り組んでみてください。WooCommerceサイトのトップページ(固定ページ)の作り方については以上になります。『【WooCommerce設定ガイド】ショップ構築の7つのステップ』に戻る最後までお読み頂きありがとうございました。この記事が参考になりましたら、シェアしていただけると嬉しいです。KUBO2014年からWooCommerceで構築したショップを運営しています。ショップ構築にあたり、日本語の情報が殆ど無くて苦労しましたが、実際に使ってみると柔軟性が高く、とても便利だと感じました。日本でもっとWooCommerceが普及して欲しいと思い、日本語解説サイトを作りました。これからショップを構築される方のお役に立てれば幸いです。現在は企業・個人のWooCommerceショップの構築・運営・集客の支援もしています。ご相談・ご質問はお気軽にどうぞ。スポット支援も可能です。お問い合わせフォームへWooCommerceオンライン無料相談WooCommerceショップの構築・集客・運営に関するご相談を随時受け付けています。スカイプ、Zoom等のオンライン通話サービスを利用して行いますので、全国どこからでもご相談可能です。WooCommerce(ウーコマース)では、画像付きの商品リストを表示させるショートコードが標準で用意されています。今回はそのショートコードについて、よく使いそうなものを中心に紹介・解説します。前回はWooCommerce(ウーコマース)の商品リストを表示するショートコードについて解説しました。今回はサイドバーに商品リストなどを簡単に表示できるWooCommerce独自のウィジェットについて解説します。WooCommerce(ウーコマース)に対応したWordPressテーマは無料・有料ともにたくさんあります。この記事では無料・有料それぞれのテーマについて探し方やインストール方法を簡単に説明します。Japanのインストール・初期設定について解説します。初期設定については、後からすべての項目が変更可能ですのでスキップしても問題ありません。この記事ではWooCommerce(ウーコマース)設定の「Eメール」タブの設定について解説します。Japan」をインストールしている前提での説明になります。WooCommerce(ウーコマース)では商品登録の前準備として「商品カテゴリー」、「商品タグ」、「属性」の登録が必要です。「商品カテゴリー」はネットショップとして最低限必要なものですので必ず登録しましょう。Tags』を紹介します。Zones(配送地域)」の導入により、地域別の配送方法の設定が可能になりました。19:02こんにちは。便利なプラグインで、非常に興味があります。現在、求人や不動産サイトの構築を検討していますが、CSVデータの取り込みなどもできるものでしょうか?ご教授いただけると幸いです。23:13コメントありがとうございます。WooCommerceには商品データのCSV取り込みができるプラグインがいくつかありますが、無料のものは「バリエーションのある商品」が扱えなかったり、「属性」などの商品に関連するデータが扱えないなどの機能制限がされているものが多いです。そもそも機能しないもの、取り込みに失敗するものも多いです。できれば有料のものを利用したほうが良いと思います。ちなみに、有料・無料ともに管理画面が日本語対応しているものは無いと思います。(基本的にすべて英語表記だと思ったほうが良いです。3.x)に対応していない可能性があります。利用される場合は対応するバージョンをしっかり確認することをお勧めします。返信するコメント・質問はお気軽にどうぞ。返信をキャンセルするメールアドレスが公開されることはありません。付いている欄は必須項目ですMessage名前*メール*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。