WordPressとECサイトを連携させる方法！BASEとEC-CUBEを例に解説

こんにちは。Wakka Inc. Webディレクターの安藤です。

最近はコロナ禍の影響で、外出して買い物をすることが少なくなりました。

行くとしても近所の商業施設で、Amazonや楽天市場で済ませることも少なくありません。
周りを見ていても消費者の行動がさらに、EC寄りになってきていると感じています。

今まで店舗とECを併用していた小売企業でも、そのような消費者の行動の変化に伴い、もっとWeb施策を強化しようと考えている方が多いのではないでしょうか。
ただ、忙しい中で慣れないWeb施策の強化となると、何から手をつけて良いのか迷ってしまうと思います。

基本的にECは幅広い商品を販売する機能に特化しており、自社のストーリーやブランドの情報を十分に伝えにくいという課題があります。そのため、マーケティングが得意な会社は既存のWebサイトとECサイトを連携したり、情報配信用のサイトを構築したりなどの工夫をしています。

そこで今回は、Web施策の強化のベースとなる、ECサイトと情報配信用のWordPressを連携させる方法についてご紹介したいと思います。

Wakka Inc.ではECサイトを構築する場合のガイド無料配布中です。
目的や売上規模に応じたEC種別選定や最適な構築手法についての診断を受けたい方は、「料金目安もわかるECサイト構築ガイド」をご確認ください。

WordPressとECサイトの連携とは？

『WordPressとECサイトを連携する』とは、一体どのような意味なのでしょうか。具体的には、ECサイトの商品をWordPressに掲載したり、固定ページや投稿ページからECサイトの決済画面に遷移するように設定を行うことです。これにより、お互いのメリットを統合させることができるため、販売力を上げていくことができます。

ちなみに、代表的なECサイト構築サービスには、下記のようなものがあります。

・Shopify

・BASE

・EC-CUBE

もちろん、連携の方法はそれぞれの構築サービスによって異なります。そのため、環境に合わせて適切な構築方法を選択する必要があるでしょう。

WordPressとECサイトを連携させるメリットとは？

WordPressとECサイトを連携するメリットは下記の4つです。

コンテンツを配信できる

コンテンツ配信ができます。ECサイトには商品を紹介するページがありますが、コンテンツを投稿する機能は備わっていないケースが多いです。そのため、インターネット上に記事を公開してそこから集客することはできません。悩みごとを検索して解決策を探しているユーザーの獲得が難しいため、チャンスを逃してしまうことになります。

一方、WordPressは本来ブログを構築するためのシステムです。そのため、記事投稿機能が内蔵されています。連携することができれば、コンテンツ配信をして見込み客を獲得できるので大きなメリットとなるでしょう。

記事の作成が簡単

2つ目は記事の作成が簡単なことです。ECサイトはエディタの機能が不十分なケースが多くなっています。例えば、文章などを装飾するためには、HTMLやCSSを書かなければならなかったり、文字だけ書き込めるようになっていても性能が十分でなかったりすることがほとんどです。編集をスムーズに行うことができないので、手間と時間がかかるでしょう。

一方、WordPressにはビジュアルエディターが搭載されています。ボタンひとつで見出しをつけることができたり、文字を装飾できたりするので編集が非常に簡単です。また、プラグインを利用することで、エディタを拡張することもできるため、ECサイトの編集画面よりも使い勝手がよくなります。

商品の魅力を伝えやすい

画像をドラッグ・アンド・ドロップで配置できることや表を使用できるなど、さまざまな装飾が可能なため、商品の魅力をわかりやすく伝えることができます。HTMLやCSSを使用しなくても記事のデザイン性を高められるのでおすすめです。

集客効果を得られる

一定の集客効果を期待することができます。一定のアクセス数がある既存のWordPressサイトを所有している方もいるのではないでしょうか。ECサイトと連携させることで、興味を持ったユーザーがECサイトへ遷移してもらえる可能性があります。既存のファンを流入させることができれば、大幅な売上アップを実現できるでしょう。

WordPressとBaseを連携させる方法

WordPressサイトとBASEを連携させる方法は3つです。

プラグイン『BASE商品リスト』を活用する

BASE商品リストは、BASEの商品情報をショートコードで使用できるようにするプラグインです。「q」、「shop_id」、「count」、「cache」などショートコードパラメーターが用意されており、それを使用して商品情報をWordPressに掲載することができます。ショートコードを使用するためには、BASE APIのアプリ情報を設定する必要があり、APIの利用には事前申請が必須です。

BASE商品リストを使用して連携させることで、商品の魅力を紹介した後、BASEの商品ページを掲載することができるようになります。これにより、WordPressサイトからも購入を促すことができるので便利です。また、プラグインはインストールするだけで使用することができ、掲載する際もショートコードを貼り付ければ完了なので、使い勝手がいいでしょう。

APIを使用する

2つ目はAPIを活用することです。APIを利用する場合は、PHPファイルで認証処理、アクセストークンの取得、商品情報を取得した後にJSONファイルで出力します。これにより、ショップの商品一覧を取得できたり、特定の商品をピックアップして表示させたりすることが可能です。プラグインもBASE APIを利用していますが、直接PHPファイルを作成してAPIを使うほうがより細かい操作ができるようになります。

iframeを貼り付けて連携をする

iframeは、リンク先を指定してそのページをフレーム表示できるタグのことです。例えば、自身が販売している商品ページのリンクを指定してWordPress内で使用することで、表示させることができます。具体的な使い方は下記の通りです。

<iframe frameborder= "0" width="横幅を指定" height="高さを指定" src="商品ページのリンク"></iframe>

iframeタグを使用すれば、APIを使用することなく連携ができるので、非常に手軽になります。しかし、挿入する度にiframeを使わなければなりません。また、管理が複雑です。例えば、商品ページのリンクが変わってしまうとWordPress内で今まで使用したリンクをすべて変更しなければなりません。非常に手間がかかるので、BASEと連携させる際は、APIの利用がおすすめです。

WordPressとEC-CUBEを連携させる方法

EC-CUBEとの連携方法は2つあります。

WpPostPlusを利用する

WpPostPlusは株式会社ギズモが提供するWordPress連携プラグインです。使用することでEC-CUBEにWordPressの投稿ページや固定ページなどをパンくずリスト付きで表示させることができます。また、EC-CUBEのデザインがそのまま反映されることがメリットです。しかし、有料のサービスになります。そのため、搭載されている機能や予算を考慮した上で使うのがおすすめです。

手動で連携させる

2つ目は手動で連携させる方法です。WordPressとEC-CUBEが同じサーバー内で運用できる場合、手動で連携させることができます。手順は下記の通りです。

1.EC-CUBEのドキュメントルートにWordPressのファイルをすべて移動させます。このときに、WordPressのindex.phpとEC-CUBEのindex.phpが重複するので、EC-CUBEのほうのindex.phpを別の名前に変更してください。

2.次に、wp-config.phpを開き、EC-CUBEのrequire.phpを読み込みます。

require __DIR__. '/ require.php '

3.次に、EC-CUBEのrequire_base.phpを開き、wp-load.phpを読み込んでください。

require __DIR__. ' /../html/ wp-load.php '

4.以上で連携が完了です。あとは、EC-CUBEのCSRFトークンを利用するなど、実行したいことをコーディングしていけば、お互いの機能やテンプレートを共有することができます。

WordPressとECサイトを連携して両方のメリットを獲得しよう

今回は、WordPressとECサイトを連携するメリットや具体的な連携方法についてご紹介しました。連携することができれば、集客効果をアップさせることができたり、情報の更新がしやすくなったりするので非常に便利です。また、連携についてはそれぞれのECサイト構築サービスによって異なるので、各ECサイトの仕様を確認しながら適切な方法で作業を進めましょう。

ただ、普段忙しい小売業界の経営者・エンジニアの方はECサイトとWordPressサイトの連携の対応をする余裕がなかったり、連携させてもコンテンツを増やしていく作業に手が回らなかったりするのではないでしょうか。

なお弊社では、ECサイトとWordPressの連携だけではなく、企画から運用保守までトータルサポートできる『オフショアラボ型開発サービス』をご用意しています。
ECサイトの新規開発・リニューアルを検討されている方は、ぜひ一度お問合せください。