WordPressの初心者【Eコマース設定】

#はじめに
本記事ではWordPress初心者の私がWordPressサイトにEコーマスのプラグインをインストールする手順を紹介します。

前回は初期設定までできましたので、今回はショッピングサイトを目指してWordPressをカスタマイズします。
それでは、やっていきましょう！

##1. テーマ設定
WordPressには「テーマ」というサイトデザインテンプレートを導入することができます。
テーマを設定することでデザイン知識がない人でも綺麗なブログやサイトを作成することができます。
テーマによって有料と無料のものがありますが、無料テーマを導入してCSSでデザインを変更することも可能です。
~~初心者の私はもちろん、無料テーマにします。~~


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/1b55e634-1eae-7689-1790-878c422566f7.png)
まずはサイドバーの外観タグにカーソルを移動して、テーマを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/1bcf95e4-9c54-abd7-eafc-e536f6bfaebf.png)
ここに既にインストールされたテーマが表示されます。
新しくテーマを追加したい場合は「新しいテーマを追加」を押下すればテーマ検索画面に遷移することができます。
希望のテーマが表示されたら「いますぐインストール」を選択すればインストールが完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/fdb80315-b574-e155-724d-f5c0bda34a03.png)
インストールが完了したら必ず有効化を選択して、サイトに反映してください。
これでテーマの基本設定が完了です。

##2. プラグイン
プラグインなどをインストールしないと、WordPressのサイトはただのブログサイトです。
プラグインをインストールすることで、サイトに色んな機能を追加することができます。
ここからはショッピングサイトに必要な機能を追加します。

WordPressのEコーマスプラグインが多くありますが、今回は事前で調査しましたのでWooCommerceを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/393b36a9-bd3c-059b-bd2c-65f0386fa33a.png)
WooCommerceとは、WordPress専用のEコーマスプラグインで、一つのプラグインでショップの設定から商品管理までできます。そして、一番大事のは無料でインストールできます。
~~（当然、これも有料版があります。）~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/019a799d-2888-c364-2665-044c7f0d3f20.png)
サイドバーのプラグインタグにカーソルを移動して、新規追加を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/9005c475-cc67-dec0-d0c6-13c96d7f8e08.png)
新規追加画面にはたくさんのプラグインを検索することができます。
ここで直接「WooCommerce」を入力して検索します。
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/c4526f33-7bee-8dbc-a3df-399f07510ccb.png)
WooCommerceが表示されたら「今すぐインストール」を選択して、インストール完了後「プラグインを有効化」を押下したら完了です。

![Screenshot 2021_05_08 15_57_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/feaa1cae-dc41-69f6-bb2e-06fda0ed66b6.png)
インストール完了したらサイドバーのWooCommerceを選択するとプラグインのホーム画面に遷移します。
インストールした後なので、設定のガイドが一番上に表示されていますね。では、ここからはストアの詳細設定です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/3f48638a-0f83-5e72-df2b-97369cc03cf2.png)
画面の指示通りにショップの住所や業界や商品タイプなどを入力します。
(個人情報が含まれていますので割愛します。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/487d5921-c6da-bd3f-1b53-0041ccbaf9b4.png)
「ストアの詳細」の項目の横にチェックが表示されたら全ての基本設定が完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/2e79d7c3-533a-7a8b-9d49-f0235bb80251.png)
次は商品追加です。
商品を追加するには4つの方法がありますが、今回はテンプレートから追加します。
一気に大量な商品を追加したい場合はCSV経由でのインポートがおすすめです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/25684969-481e-8c06-442c-ef64a4c36b27.png)
商品編集画面では商品の価格、セール、初期在庫、配送方法などを設定することができます。
今回はテスト構築なので試しにサンプルの商品を追加してみます。
入力完了でしたら「下書き保存」を押下します。この場で公開したい場合は「公開」を押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/2378725b-f7a3-3d74-04d9-218f65156b0e.png)
商品画面を見てみると・・・・
サンプル１が追加されました！
これで「サンプル１」がショップに販売開始です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/93b79fde-7faf-b24a-c62d-22ef7cc121b8.png)
サイトを開いて、追加した商品が表示されていればOKです。
これでWooCommerceの機能をひと通り設定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557787/fd4a21dc-2936-244d-e603-1e74c054439f.png)
他に販売地域や税金設定や通貨の設定があります。ご自身のショップの必要に応じて設定しましょう！
私の場合は全世界向けで販売したいので「すべての国を対象に販売」にしました。


##終わりに
少しずつ設定が複雑になりましたが、今回はいかがでしたでしょうか？
皆さんもぜひ実践してみてね！
それでは、ここまで付き合ってくださってありがとうございました！
次回はCSSやPHPを使ってショップの外観をカスタマイズしてみます。