ゼロから始めるサイト制作6：ECサイトを作ってみましょう ショップ構築篇
はじめに
こんにちは、DevOps推進部2グループの李です。
前回はWordPressでブログ制作について紹介しました。
今回は難易度が高いECサイトを紹介しようと思いますが、ECサイトの構築プロセスはちょっと複雑なため、２部構成に分けて紹介させていただきます。
第一部はショップの構築、第二部は決済サービスの設定です。
連載目次
固定ページを削除する
前回の記事でブログ用のテンプレートを導入したので、ECショップの構築にも影響があります。そのため、ショップの構築をする前にすべてのページを削除します。ブログを作っていなかった場合はこのステップはスキップしてください。
まずWordPressの管理画面を開いて「固定ページ」をクリックします。そして全選択して一括操作でゴミ箱に入れます。
ブログ用のテーマを変更する
固定ページを削除したら、前回の記事と同じく今回もテーマをインストールしてから修正するという形で進めようと思います。
先ずはWordPressの管理画面から「プラグイン」ページを開きます。そして「See Library」をクリックします。
前回のブログはBlock Editorで作成しましたので、今回はElementorで作成してみようと思います。
Elementorに変更するためには、右上のビルダーセレクトボックスをクリックし、Elementorを選んでください。 Elementorに変更すると、テンプレート一覧に数個の「PREMIUM」タグが付いてあるテンプレートが表示されます。これは有料版のAstraでしか使えないテンプレートです。
ショップを構築するなら、上の「E-Commerce」タブをクリックして、好きなテンプレートを選んでください。
本記事は「Brandstore」を例として紹介します。テンプレートをクリックすると詳細な設定メニューが出ますので。ここでも好きなスタイルをお選びください。すべて完了させて「View Your Website」をクリックするとサイトが表示されます。今回はビルダーElementorを選択したので、画面の上部に「Elementorで編集」と表示されます。
前回の記事と同じく上部メニューの「カスタマイズ」をクリックして、カスタマイズ機能を起動させます。ブログのテンプレートと異なり、ショップのカスタマイズには「WooCommerce」の設定が追加されました。
WooCommerceはWordPress用の商品販売と決済の ECプラグインです。WooCommerceの内容は次回に紹介するつもりですので、今回はショップの構築について説明します。
「カスタマイズ」の部分は前回と同じく、ぜひ修正してみてください。
下の端末アイコンでパソコン、パッドとスマホなど、それぞれでの見え方を確認できます。修正が終わりましたら左側メニューの一番上の「公開」ボタンをクリックすると保存できます。
Elementorで編集
Elementorは有名なページビルダーです。直感的な操作でウェブページを簡単かつ迅速に実現できます。Elementorビルダーは左側メニューのエレメントをドラッグしてページに入れられます。編集するところをクリックすると直接編集できます。もちろんCSSにも書けます。
Elementorを起動する方法は、画面の上部の「Elementorで編集」ボタンをクリックして、左側メニューから好きな内容を編集してください。修正が終わったら、左下の「更新」ボタンをクリックすると編集した内容を保存できます。
商品の追加
ここからは商品を追加してみます。先ずはWordPressの管理画面に戻って、左側メニューの「商品」をクリックします。
商品一覧にはテンプレートの商品がいくつかあります。ここは既存の商品をそのままにして、ページ左上の「新規追加」ボタンをクリックしてください。
「商品」設定のページでタイトルと内容を入れて、右側の「カテゴリー」の商品の分類はMenを選びます。下の商品データで値段の設定ができます。「属性」のタブで色またはサイズが個別に入力できます。最後は商品の画像を追加して「公開」ボタンを押すと新しい商品が追加されます。
ECショップのページを再読み込みすると、MENのページに新しい商品が表示されます。
カテゴリーと属性の設定
WordPressの管理画面の左側メニューの「商品」の中で「カテゴリー」「タグ」「属性」をそれぞれ設定できます。
この3つの機能を活用して、商品の分類やイベントのタグ、商品の色やサイズなどのいろいろな組み合わせができます。
次回のお知らせ
今回はWordPressでショップを作りました。どうですか？WordPressを使うならどんなサイトも簡単に作れるでしょう。
では次回はWordPressでECサイト構築の決済サービスについて紹介したいと思います。
最後までお読みいただきありがとうございました。
また次回の記事でお会いしましょう！
参考資料：
執筆者プロフィール：李 嘉興
社会人になって以来、数年間システムエンジニアとして多数のプロジェクトの開発（要件定義～リリース）を経験したのち、2021年7月にSHIFTに入社。システムエンジニアの仕事と全く違う分野の自動化とCICDを経験しつつ、未来のキャリアのため日々奮闘中。
お問合せはお気軽に
https://service.shiftinc.jp/contact/
SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/
SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/
SHIFTの導入事例
https://service.shiftinc.jp/case/
お役立ち資料はこちら
https://service.shiftinc.jp/resources/
SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/