さいしょに
2021年あけましておめでとうございます!今年もどうぞよろしくお願いいたします。
不思議なもので、新型コロナウィルス禍・リモートワーク開始から早1年、時が過ぎるのが早いのか遅いのかわからず過ごしておりました。
そんな中、縁あって2020年末より、宮古島セレクトショップ WEATHER PERMITTING OKINAWA さまのオフィシャルサイト(ブログ + ショップ)の立ち上げにMAGi Consulting合同会社代表として関わっておりました。

宮古島セレクトショップ WEATHER PERMITTING OKINAWA
WEATHER PERMITTING = 天気次第
とても素敵な言葉ですよね。
オープンはWEATHER PERMITTING OKINAWA さまの9周年「2021年1月11日 11時11分」、現在カウントダウン中!

オープン記念送料無料クーポン
2021年1月はオープンを記念し、送料無料となるクーポン「WPO-9thAnniversary!」をご利用いただけます!
オンラインショップ立ち上げ
今回、オンラインショップ立ち上げに際し、以下を行わせて頂きました。
- ビジネスレビュー・要件定義・ヒアリング
- ビジネス / マーケティング / IT コンサルティング
- 素材写真撮影
- サイト設計及びデザイン
- ブログ + オンラインショップ構築 及び 付随するページ作成
- オンラインショップ運用支援
- 運用開始前キックオフ・引き継ぎ
とても広大に対応させていただき、かつ、MVPにより1ヶ月で納品させて頂きました。今後も追加機能リリースは続きますが、MAGi Consulting合同会社として最もお力になれる、とても楽しい機会をご一緒させて頂きました。
技術的メモ
さて、上述のプロセスのうち、技術メモ的に構築内容を残しておきたいと思います。
基盤的なシステムとして以下を採用しました。
- CMS:Wordpress
- オンラインコマース:WooCommerce
- デザインテンプレート:Flatsome
- クレジットカード決済:Square
上記を中項目にブレークダウンしてみたいと思います。
以下の項目になります。
事前準備
- ドメイン取得
- レンタルサーバー本契約化
- メールアドレス作成
- php.ini設定
- データベース(MySQL)作成
CMS:Wordpress
- WordPressインストール
- Basic認証設定(リリース前のみ)
- Google Console / Analytics / reCaptcha設定
- プライバシーポリシー作成
- 特定商取引法表示作成
- 利用規約作成
- 404ページ作成
- メンテンナンス画面
- SSL設定
- 表示ドメイン(wwwあり / なし)統一
- プラグインインストール
- プラグイン翻訳・文言変更(「wp-content/plugins」にあるそれぞれのプラグインフォルダ内の言語ファイルを翻訳し、「wp-content/languages/plugin」へ配置)
オンラインコマース:WooCommerce
- インストール
- 日本語翻訳修正(「wp-content/plugins」以下のWooCommerce関連フォルダにあるPHPファイルを編集、Flatsome子テーマフォルダである「wp-content/themes/flatsome-child」以下に同名フォルダを作成、保存)
- 日本語化ファイル修正(woocommerce-plugin-framework-ja.mo と woocommerce-plugin-framework-ja.po)
- 送料テーブル・ロジック設定
- クーポン設定
- 注文にかかわるメールデザイン・追跡番号表示
- マイページ設定・追跡番号や請求書表示、注文履歴等
デザインテンプレート:Flatsome
- インストール
- WooCommerceとの競合解消
- ハードコードPHPファイル変更(翻訳変更含む)
- Instagram連携
WooCommerceとの競合解消
例えば、指定したいページを「/shop」として、固定ページとして作成・カスタマイズしたとします。
ショップのトップページ設定で「/shop」 を設定すると、Flatsomeのショップトップページ設定でのデザイン(カテゴリ・商品・両方等の設定)にオーバーライドされて表示できなくなってしまいます。
解決策
- 例のように「/shop」をショップのトップページにしたい場合、「/dummy-shop」のような固定ページを作成し、Wordpress / Flatsome / WooCommerceでののショップトップページ設定したのち、ゴミ箱に移動して保管する(「/dummy-shop」をショップトップページ設定にしたまま、ゴミ箱に配置することで、設定を残したままアクセスできない状態にすることができます。(ショップトップページ設定ではなく、サイト内でリンクし、表示させる設計にする必要があります。)
- 上述の設定により、必要に応じて各プラグインのショップのトップページが引数やプレースホルダーで設定されている場合、手動で書き換える必要が出てきます。
日本語や翻訳変更が、相当量
細かい言い回しが、アメリカンすぎるんですよね・・・。
クレジットカード決済:Square
- サンドボックスでのテスト
- クレジットカード決済で出現する各ページデザイン修正
とまぁ、たくさんあります・・・。
FlatsomeとWooCommerceを利用した感想
Flatsomeは、WooCommerceでのデザインテンプレートとして世界中で最も利用されているそうです。私にはメリットが多いデザインテンプレートでした。例えば以下のような点です。
良い点:理由
- デザインが秀逸
- デザインのみならず、エレメント、ウィジェットのテンプレートが多い
- コスパ最強
ですが、日本語でご利用したい方はそれなりの覚悟が必要です。理由としては・・・
日本語での利用をおすすめしない理由
- サポートは有料、無料ユーザーサポートコミュニティは英語(参加申請したが私はまだ承認されていません)
- PHPが読めないと直しようがない
- 英語がわからないと、同梱されているヘルプや文書(からリンクされているYouTubeの説明動画)がわからない
- 日本語サポート文書はほとんど存在しない
- WooCommerceとの相性で問題点もある(どちらかというとWooCommerceの問題)
ですが、一度感覚を掴んでしまうと、非常に使いやすいと思います。
さいごに
宮古島セレクトショップ WEATHER PERMITTING OKINAWA さまのおかげで、MAGi Consulting合同会社として最もお力になれる、とても楽しい機会をご一緒させて頂きました。今後も追加機能リリースは続きますが、ぜひご注目ください。
また、WooCommerce + Flatsomeで構築したご参考になるかと思います。
ご相談はぜひとも、MAGi Consulting合同会社 までいただければ幸甚です。
コメント