ローカル環境の用意が出来たら、WordPressにECサイト機能を追加してくれるプラグイン「WooCommerce」をインストールしていきましょう。
１.WooCommerceとは
WooCommerceはWordPressでネットショップを構築できるプラグインです。 こうした機能を持つプラグインを、eコマースプラグインと呼びます。
日本ではまだ普及していませんが、世界的見るとWooCommerceは最も導入数の多いeコマースプラグインで80か国以上で利用されています。信頼性が高いため多くのサイトに導入されているのですね。
また、WooCommerceは利用者数が多いeコマースプラグインのため、数々なニーズに合ったの拡張機能がリリースされているというメリットもあります。
拡張機能というのはWordPressのプラグインのようなもです。 WooCommerceと合わせてWooCommerce拡張機能を導入することで、簡単に高機能なショップサイトを作ることが可能となっています。
◎WooCommerceで作られたサイト
WooCommerceを使用して作成されている日本のサイトをご紹介します。
Home – Cookie Muncher Cookie Bar
他にもWooCommerceが使われているサイトは国内にも沢山あります。 興味のある方は検索してみて下さい。
２.WooCommerceを導入する
プラグインのインストール
では早速WooCommerceをWordPressにインストールしてみましょう。
ローカル環境に導入したWordPressの、管理画面にログインしてください。 http://localhost/hubshop/
左側にあるメニューから プラグイン > 新規追加 をクリックします。
プラグインを追加 という画面が開きます。 点線で囲った検索窓に「WooCommerce」と入力してください。 検索結果が表示されます。
WooCommerceのボックスにある「今すぐインストール」をクリックしてください。
↓
インストール中の表示が終わると、ボタンが「有効化」に変わります。 続けて「有効化」のボタンをクリックします。
少しするとWooCommerceが有効化され、 下図のようなセットアップウィザードの画面に切り替わります。
３.WooCommerceの初期設定を行う
セットアップウィザードに従ってWooCommerceの初期設定を行っていきましょう。ここでは作成するECサイトの店舗情報や取り扱う商品のジャンルなどを設定していきます。
もしもプラグイン有効化後にセットアップウィザードに切り替わらなかった方は、WordPress管理画面の左メニューWooCommerce>ホームからも開くことが出来ます。
セットアップ画面の日本語化は半端で、英語表示が多いです。 商品注文時にお客様に表示される箇所は日本語にできますので、ここは気にせずに画面の指示に従って必要事項を入力していきましょう。
よく分からない箇所がある場合はブラウザの翻訳機能（Google Chromeが便利です）などを活用してみてください。
① 店舗住所
住所を入力して、I'm setting up a store for a clientにチェックを入れます。
「Continue」ボタンをクリックしてください。 WooCommerceの使用状況の追跡・共有化を行いますかというポップアップが表示されます。ここは任意なのでチェックを入れずに「Continue」でOKです。
②ショップで扱うもの
作成するWebショップはで扱うジャンルを聞かれます。 該当する項目にチェックを入れて「Continue」をクリックしてください。
③請求方法
３ページ目ではどういった形で料金を請求するのかを聞かれます。 定期購入よりも下、月額$～となっている部分は有料の拡張機能を使用することで設定可能になる箇所です。
この画面でチェックを入れても、いきなり請求はされません。 サブスクリプション（定期購入）や予約などを検討している場合は、チェックを入れておいても大丈夫です。
使用を考えている項目にチェックを入れ「Continue」をクリックしてください。
④事業内容
4ページ目では * 商品をいくつくらい販売する（予定）か * 実店舗などで商品を既に販売しているか
を聞かれます。
プルダウンで選択すると、ビジネスに使えそうなプラグインを一緒にインストールすることを勧められます。
今回はローカル環境ですから、全てOFFにしてから「Continue」をクリックしてください。 登場するプラグインは後から自分で追加もできます。
⑤テーマを選ぶ
５ページ目では使用するテーマを選択します。 WooCommerceではショップサイトを作るので、商品ページやカートページなどの設定が必要になってきます。WooCommerce対応テーマを使用しないと、上手く表示されない部分が出てしまうのですね。
今回はフリーで使用できる「Storefront」というテーマを使います。 （※サムネイル画像が異なる場合もあります）
「choose」のボタンをクリックしてください。
少し時間が経つと、Jetpackを一緒にインストールしませんか、という画面に変わります。 「No thanks」をクリックし、インストールせずに進んでください。
WordPressの管理画面に切り替わります。 まだセットアップできていない項目があるよ、とWooCommerceのポップアップが表示され素場合がありますが、とりあえず初期設定はここまでで完了です。
ダッシュボード(管理画面トップ)に戻ると、今までなかった通知が表示されています。サイドバーのメニューにもWooCommerce、商品などの項目が増えていますね。
次回は、日本国内向けショップとして機能するようにWooCommerce拡張機能を導入します。