WordPress+WooCommerceでECサイトを作る方法

この記事では、WordPress+WooCommerce（プラグイン）でECサイトを作る方法を解説します！

WordPress＋WooCommerceでECサイトを作るメリット・デメリット

WordPressへWooCommerceを導入する手順・初期設定

WooCommerceプラグインをインストールする

まずは、WordPressの管理画面へログインします。

青いマーカーで囲んだ部分に、「プラグイン」と書かれていますね。

プラグインとは、WordPressの中に様々なウェブサービスの機能を、プログラミングせずに導入できる優れ物です。

例えば、ブログにソーシャルアイコンを表示させたり、ワードプレスを会員サイトにしたりなど … etc 

通常プログラミングをしないと実現できない機能が、簡単に導入できます。

WooCommerceはプラグインなので、こちらからインストールしていきます。

 

プラグインというボタンをマウスを文字の上に移動させると、子メニューが出てきます。

この中で、新規追加を選択してみてください。

新しいプラグインをインストールする画面が出現します。

 

画面右上のフィールドに、WooCommerceと入力して、『今すぐインストール』というボタンを押します。

 

ボタンを押してしばらくするとインストールが完了するので、有効化しましょう。

有効化すると、いくつか使用者の個人情報を入力する画面になります。

WooCommerceの初期設定を設定する

表示が英語になることもありますが、手順通り入力していけば、問題ないです。

 

『はい、お願いします』ボタンを押して、WooCommerceの初期設定を行っていきます。

 

上記には、ご自身の都道府県、郵便番号を入力していきます。

 

次に、設定したいショップの種類を選択します。

 

次、ここでは、どのような商品を出品するか記載します。

実在商品とダウンロードのみ無料で使えますので、ここでは実在商品を選択します。

 

Facebook, Mailchimp, Google Adsはオフで大丈夫です。

ショップの初期デザインを設定する

ここまで終わらせると、設定値に基づいて、おすすめのテーマを表示してくれます。

Twenty Twentyとは、WordPressを最初にインストールする時のテーマです。

あなたが独自に使用しているテーマをそのまま使うなら、「Continue with my active theme」をクリックでOKです。

 

すでにデザインされているテーマを使いたい場合は、好みのものを選択しましょう。

ここでは試しにDeliを選択（Choose）してみます。

※もちろん、他のテーマでも問題ありません。

 

インストールを試みると、消費税などの表示を、あらかじめ設定するようにするかと聞かれますので、Yesを選択していきます。

 

設定が終わると、WordPressの管理画面に「WooCommerce」の表示が増えていることが確認できると思います。

この管理画面から、商品の追加などを行っていきます。

↓拡大版

一度、トップページに戻ってみましょう。

Dellのテーマを選んだ場合は、以下のように見た目が変わっていることが確認できるかと思います。

WooCommerceのカスタマイズ

トップページに商品一覧を掲載する

WordPressの管理画面へアクセスし、外観から、カスタマイズを選択します。

↓拡大版

 

そうすると、下記のように画面が切り替わります。『ホームページ設定』を選択してください。

 

『ホームページの表示』を最新の投稿＝＞固定ページへ変更し、ショップを選択します。

今、ショップに商品はないので、まだ何も商品は見えません。

商品を追加しよう

商品を追加していきましょう。

WordPressの管理画面へ戻り、WooCommerceを選択します。

ここで、『Add your first product』というボタンを押してください。

このボタンから、商品を追加します。

Add manually を選択して、手動で商品を追加していきましょう。

 

商品名を記載して、

 

値段とセール価格、商品の画像を追加してみます。

 

メディアライブラリから商品画像を選択します（新規に画像を追加する場合は、「ファイルをアップロード」からアップできます）。

 

必要な項目がセットできたら、公開を押して、商品を公開します。

これで、商品がサイトへ反映されます。

 

 

こんな感じですね。

ブロッコリーがサイトに表示されました。

次に、出品した商品を購入できるようにしましょう。

クレジットカード（Stripe）で商品を購入できるようにする

決済方法として定番なのは、銀行振込・代引き・クレジットですね。

ここでは、クレジット決済を導入してみます。

クレジット決済には、Stripeという決済代行システムを使います。

WooCommerceの設定画面へ生き、決済を選択、その後、Stripeを有効にします。

スイッチを押して色が付くと有効化されます▼

銀行振込や代引きを可能とする場合は、それらも有効化しておきましょう。

 

Stripeを使って決済を行っていくためには、公開鍵と秘密鍵が必要です。

初めて見る時は意味がわからないですが、それぞれ安全に決済をするために必須なものですので、準備していきます。

 

https://stripe.com/

へアクセスしてみてください。

以下、Stripeのトップページが表示されます。

https://dashboard.stripe.com/register

上記URLよりアカウント作成をします。

すでにアカウントをお持ちの場合は、「ログイン」からダッシュボードへ移動しましょう。

 

ダッシュボードにアクセスしたら、画面左の「開発者」をクリック→API キーを選択します。

オレンジの「テストデータを表示」もクリックしておきます。

 

公開鍵と秘密鍵をコピーして、ワードプレスのWooCommerceの設定画面に戻ります。

テストモードをオンにして、コピーした公開鍵と秘密鍵を貼り付けてください。

 

その後「変更を保存」をクリックします。

では、実際に商品を購入してみましょう。

商品を購入する

トップページのブロッコリーをカートに入れてみます。

 

Stripeはテスト用のカードを発行してますので、これを使ってテスト決済をしてみましょう。

https://stripe.com/docs/testing

上記に、テストカード番号が載っています。

今回は、Visaのテストカード番号を使って決済をしていきます。

 

先ほどカートへ入れた商品を確認し、

 

購入します。

 

ここにテストカードを入力し、決済を行っていきます。

 

 

注文が完了しました。

 

管理画面に売上が反映されているかみてみましょう。

WooCommerceの設定画面へいくと、注文が一件入ってるのがわかりますね。

↓拡大

そして、同様にStripeでも決済されてるのが確認できます。

本番環境では、テスト用とは別の公開鍵・秘密鍵を使う必要があるので、サイト公開時は忘れないように注意しましょう。

ショップテーマを変更してみよう

WooCommerceのショップテーマは、WordPressのテーマを変える感覚と同じように変更できます。

ただし、WooCommerceへ適応したテーマがいいので、WooCommerceのサイトへいき、どのようなテーマが配布してるか見てみましょう。

https://woocommerce.com/product-category/themes

 

試しに、クールな印象のBoutiqueというテーマを選んでみます▼

 

 

WordPressのテーマ選択画面へ行き、先ほど選択したBoutiqueを探してみます。

 

Boutiqueをインストール＋有効化しましょう。

 

デザインが変更されましたね▼

 

ショップのデザイン・表示内容をカスタマイズしてみよう

サイドバーの表示内容をカスタマイズする

外観→ウィジット へ移動します。

 

ウィジット カスタマイズ画面が出てきます。

 

ショップに投稿やコメントなどが不要であれば、サイドバー のウィジットを消してみましょう。

 

全て消して保存すると、以下のようにサイドバーの表示をなくすことも可能です。

背景やボタンの色、ショップ名をカスタマイズする

外観＝＞カスタマイズへ移動します。

 

以下のショップカスタマイズ画面が出てきます。

 

サイトの基本条項をクリックします。

 

以下のように、サイトのロゴ、タイトル、キャッチコピーなどが編集できます。

 

ショップの背景色変更は、メニューにある背景をクリックして、背景色を選ぶだけです。

 

こんな感じですね▼

 

さらに、WordPressでは本格カスタマイズ用に、CSSを追加で挿入することも可能です。

メニューの追加CSSというボタンを押してみてください。

 

このように、CSSが書けるエディターが出現します。

WooCommerceのバグ？

カートで配送先などを入力後、次の画面へ行こうとすると「配送方法が選択されていません」が出る

カート画面で入力した郵便番号によっては「配送方法が選択されていません」と表示されて次の画面へ進めないことがあります。

その場合は、

• 郵便番号自動住所入力を利用する場合はこちらをチェックしてください。
• 送料無料表示の項目を使う場合は、チェックしてください。

のふたつのチェックを外してみてください。

もっと細かく！PHPファイルを直接いじってカスタマイズ

作成中です。