2023年第17回 ECサイト Part1 - ICC｜WordPress基礎・演習

Contents

1 前回のおさらい
- 1.1 CORE CAFEのメニューを拡充することになり、商品ページを登録する過程で、WordPressの分類方法を学んだ
2 CORE CAFE v2 をインポートしてください
3 ECサイト構築の基礎知識
- 3.1 ECサイトとは
4 ECサイトを「WooCommerce」でつくる
- 4.1 「WooCommerce」によるECサイト構築の大まかな流れ
5 WooCommerceインストール方法と有効化
6 WooCommerce初期設定
- - 6.0.1 ようこそ CORE CAFEへ
7 テーマを選択
8 支払い設定をする
- 8.1 プラグイン「Japanized for WooCommerce」を入れて日本独自の環境に対応しよう
- 8.2 商品を追加、支払・配送方法の詳細設定など
9 税率の追加

前回のおさらい

CORE CAFEのメニューを拡充することになり、商品ページを登録する過程で、WordPressの分類方法を学んだ

投稿、固定ページとは別に「メニュー（cafe-menu）」というカスタム投稿タイプをつくった（プラグイン「Custom Post Type UI(CPT UI)」を使用）
「メニュー」を分類するカスタムタクソノミー「カテゴリー（menu_category）」をつくった（同上）
「カテゴリー（menu_category）」にドリンクや軽食などの分類（term）を登録した
メニュー名や紹介文の他に、価格やアレルゲンなど分類できないものはカスタムフィールドに保存した
どのテーマもデフォルトではカスタムフィールドの値は表示されないので、詳細ページ用のテンプレート（今回のテーマ「TwentySeventeen」場合、content.php）を編集して、post_custom関数で値を読み込んだ
PHPの基本を学んだ

<?php
$price = post_custom( '価格' ); // 「価格」カスタムフィールドの値を取り出して変数に一時的に格納
if ( $price ) {
    echo $price;
} else {
    echo '情報がありません';
}
?>

※デフォルト(default) = 初期値、初期状態

CORE CAFE v2 をインポートしてください

前回までの「メニュー」を含めた完成形を元に、この先の実装を進めてもらいます。

Localで新規にWordPressをインストールしてください。

サイト名：CORE CAFE V2
- 「Advanced options」をクリックしてアドレスが core-cafe-v2.local になっていることを確認
Preferred
ユーザー名　kanri
パスワード　icc2023

ログインし、言語を日本語に、タイムゾーンを UTC+9に設定。

プラグイン「All in One WP Migration」をインストール。

下記の完成形エクスポートデータをダウンロード。

core-cafe-v2.local-20231124-114457-vio4u8 ダウンロード

All in One WP Migration > インポート　から完成形データをインポート。

再ログイン。

※今日以降、この「v2」を立ち上げて作業してください。

ECサイト構築の基礎知識

ECサイトとは

ECサイト（EC = electronic commerce）
ネットショップ
オンラインショップ

ECサイトの選択枝

ショッピングモール = 楽天市場, Yahoo!ショッピング
- 店ごとに出店、決済、デザインも独自。出店者が多数集まる。
マーケットプレイス = Amazon, ZOZOTOWN
- 店も決済もデザインも同じ。出品者が多数集まる。
ネットショップ構築サービス（ASP） = STORES, BASE, MakeShop, カラーミーショップ
- 独自のECサイト構築を支援してくれるサービス。店も決済もデザインも独自。独立したサイト。
自社サイト = WordPress + WooCommerce, EC-CUBE
- 完全自社サイト。店も決済もデザインも独自。自由度は一番高い。

コスト

１〜３は他社サービスのため、利用料/手数料が発生（月額料金/販売手数料/他）
４は自社なので手数料はかからないが、サーバ契約料はかかる。自分でつくれない場合は制作会社に依頼することになるので初期コストがかかる（数十万円〜）。
１〜４いずれも、カード決済を導入した場合は決済代行業者への支払手数料が別途発生する。

集客

１〜２は人が集まっているので売りやすい（←→出店料がかかる）
３〜４は知られないと売れないので、広告を出すなど（←→宣伝費がかかる）

将来的な展開…

１〜２はメールアドレスなどの顧客情報は持ち出せない（のちに自社サイトを始めるにはゼロベースで始めなければならない）
３は他社プロダクトのため、拡張性はプロダクト次第（未知数）
４はオープンソースであり、プラグインもしくは独自開発で拡張できる

セキュリティ

１〜３は他社プロダクトのため、システム的なセキュリティはお任せ
４は自社サイトのため、システムを含めセキュリティは自己管理（または有料で保守を依頼するなど）

どの形態も良し悪しがある

誰でも知っている説明不要な商品、どこで買っても品質は変わらない商品ならショッピングモールやマーケットプレイスが向いている可能性が高い。他のどこにもないオリジナル商品であれば、自社サイトであっても訪れてくれる可能性があるが、知ってもらうための施策（SNS、広告など）は必要。

皆さんはどう思いますか…？

ECサイトを「WooCommerce」でつくる

「WooCommerce」はもっとも有名なECサイト構築プラグイン
世界のECサイト上位100万サイトにおけるシェアは27%、猛烈な伸びを見せる「Shopify」よりもまだシェアが大きい（参考： https://trends.builtwith.com/shop）
無料
ほぼ公式? ＝多くのWordPressコア開発メンバーが所属するAutomattic社が開発を主導しており、周辺ソフトウェアも多い

「WooCommerce」によるECサイト構築の大まかな流れ

プラグイン「WooCommerce」をインストール
初期設定を行う
- 1.決済手段の設定
- 2.配送料の設定
- 3.特商法のページ作成
- 4.プライバシーポリシーのページ作成
- 5.その他（ゲスト購入/クーポン/ポイント/他）
カード決済代行会社との契約・設定（今回は「PayPal」を利用）
PayPal決済モジュール（プラグイン）をインストール・設定
商品を登録

「CORE CAFE」のオンラインショップでコーヒー豆を販売することを想定してショップを作り込んでみます。

WooCommerceインストール方法と有効化

まずは、WordPress管理画面＞プラグイン＞新規追加＞プラグインの検索に”WooCommerce”と入力します。

すると検索結果にWooCommerceが表示されますので、「今すぐインストール」をクリックします。

続いて有効化をクリックします。

WooCommerce初期設定

有効化をクリックすると、WooCommerceの初期設定の画面へと移ります。

「自分のストアを設定」ボタンをクリック

ビジネスを始めたばかりを選び　次へ

ストアの名前を : CORE CAFE
業種 : 食品·飲料
国 : 日本ー長野県　

を選んで次へ

※日本ー長野県が探すのが大変な場合は「日本」と打ち込むと日本だけを絞り込んでくれるので選ぶのが楽になる。

無料の機能で強化する : 今回はすべてのチェックを外して次へ

ようこそ CORE CAFEへ

ここからは販売商品を追加していきます。画面に従って登録していきます。

①商品追加をクリック

どの商品を追加しますか　：　物理的な商品　をクリック

CoreCafeECサイトデータダウンロード

エクセル「ICC ECサイト構築商品データ」のシート名[1]の値を

項目	値	情報の保存先
商品名	マイルドブレンド	一般＞NAME
商品紹介	当店の定番ブレンド。	一般＞SUMMARY
価格	¥960	一般＞定価
商品の説明（商品紹介よりも多め）	「香り高く、甘みのあるコーヒー」を追求し、バランスのとれた味わいに仕上げた逸品です。内容量 : 200g	一般＞説明
画像ファイル1枚目	EC-001-1枚目.jpg	一般＞画像
画像ファイル2枚目以降	EC-001が付く上記以外の画像	一般＞画像

下記のように入れていく。

ここまで「一般」タブで入力していましたが、次は隣の「団体（グループ？）」タブをクリックし入力していく。

ここでは商品カテゴリーを登録していく。

初期状態でデフォルトカテゴリー「uncategorized」が選ばれている状態です。　

エクセル「ICC ECサイト構築商品データ」のシート名[1]のカテゴリーの値「コーヒー豆」を新規作成を押して作成する

カテゴリーに「コーヒー豆」が登録される。「uncategorized」のチェックは外す。

次の「価格」タブへ進む。

定価：960（一般タブで入力した値がすでに入っている）
消費税を請求：商品と配送　を選択
高度な設定をクリック
税区分：軽減税　を選ぶ

次の「在庫」タブへ進む。

エクセル「ICC ECサイト構築商品データ」のシート名[1]の商品管理番号「EC-001」を入れ、
この商品の在庫数を追跡をオン（青色の状態にする）

「AVAILABLE QUANTITY」に在庫の値「3」を入れる

「高度な設定」をクリックし、「EMAIL ME WHEN STOCK REACHES」に在庫低下を知らせる数値の値「2」を入れる。（WooCommerceのデフォルト設定も2になっている）

次の「配送」へ進み、新しい「配送クラス」を設定します。

「配送クラス（Shipping class）」とは、実際に即して言えば、配送する箱のサイズです。後ほど「クロネコヤマト」の料金表を参考に、地域ごと、配送クラスごとの料金テーブルを作成します。一旦、料金テーブルが作成できれば、あとは注文者の配送先住所と、商品に割り当てられた配送クラスで、送料が決定します。

「Shipping class」の「Add New shipping class」を選び「60サイズ」という新しい配送クラスを下記のように設定します。