EC-CUBE4系とWordPressの同居はAPI連携がベスト!理由を解説します

執筆者情報
中村 圭介
株式会社カジヤ/代表取締役 男性向けファッション通販サイト運営の会社を経験し、現職に至る。デザインや開発から、ECやメディアのコンサルティングまでを一貫して行う。お付き合いのあるお客様の事業を成功に導けるように、再現性のある成長支援ができる会社を目指す。

EC-CUBE4系とWordPressを、同じドメインで運用するときの、当社で考えるベストプラクティスについてご紹介します。

近年では、「北欧、暮らしの道具店」を筆頭に、通販サイトのオウンドメディア戦略が脚光を浴びたこともあり、「ビックカメラ」や「アイリスオーヤマ」などの大手の自社ECサイト内にも、SEO目的であったり自社のブランディングのための読み物コンテンツが増えてきています。

EC-CUBE側にはブログ機能こそ備わっていませんが、無料から使えるオープンソースで、国産の通販サイト制作パッケージのため、日本国内に向けた通販サイトを制作する場合に使いやすい設計になっています。

そのため、EC-CUBEを軸に集客のためメディア機能を備えたサイトにしたい時に、「EC-CUBEとWordPressの組み合わせ」が候補に入るケースもあるのではないでしょうか。

この記事では、EC-CUBEとWordPressを同じドメインで構築する時の、当社が考えるベストプラクティスについて紹介します。

1. EC-CUBEとWordPressとは?

1-1. EC-CUBEは、月商100万円以上のネットショップで最も選ばれるECパッケージシステム

EC-CUBEとは、ECサイトを構築するためのサイト構築パッケージシステム。オープンソースとして2006年から公開され、現在は(株)イーシーキューブとコミュニティによってバージョンアップが行われており、35,000店舗以上に導入実績があります。

2021年10月に月商100万円以上のネットショップ担当者300人以上に対して行われた調査では、多くのECサイトを構築するサービスがあるなかで、EC-CUBEのシェアが2割を超えトップとなっていました。

(出典元:人気のECカートランキング1位はEC-CUBE!|ECマーケティング株式会社のプレスリリース

1-2. WordPressは世界で最も利用されるCMS(コンテンツ・マネジメント・システム)

WordPressは、WordPress Foundationというアメリカの非営利団体を中心に開発されている、オープンソースのCMS(コンテンツマネジメントシステム)。以前はブログ構築としての用途が多かったのですが、今ではブログだけでなく企業のHPや簡単なWebサービスにも利用されるほど、汎用度の高いシステムとなっています。

オーストリアのコンサルティング会社であるQ-Successの調査によると、2022年1月時点でWordPressのシェアは40%を超えており、世界で最も利用されているCMSとなっています。

2. 通販サイトのメディア化の流れと、EC-CUBEとWordPressの相性

2-1. 通販サイトのメディア化にはどんなメリット・デメリットがあるのか?

まず、前提として「通販サイト(EC-CUBE)」と「メディアサイト(WordPress)」を同居させることにメリットはあるのか?という点について考えてみましょう。

良い面で言うと、同じドメイン下で構築することで、通販からメディアへ、メディアから通販へといった相互の回遊を発生させやすくなります。またメディア側のSEO対策の成功によって、回遊による通販サイトの集客増加につながるだけでなく、同じドメインである通販サイトのサイト評価が上がり、通販サイト自体の検索流入が増加するなど、集客面で大きなメリットがあります。

逆にデメリットの面では、同一ドメイン下であるため、メディア側のコンテンツのクオリティが著しく低い場合のペナルティや、ブラックハットSEOを行ってしまった場合、通販サイトにも影響するといったリスクが増加します。

また、メディア側のコンテンツ作成時に、自社製品以外を紹介することができない場合、SEOで上位表示を狙えるキーワードに制限が出てくることもあるので、立ち上げ時にメディア戦略について吟味しておく必要があります。

メリット・デメリットをカンタンに2点ずつ挙げましたが、通販サイトのメディア化は(コンテンツ作成に掛かる大きなリソースを確保できれば、)メリットの方が大きいと考えています。

2-2. EC-CUBEとWordPressでの構築が好ましくないケース

完全にサイトの導線(ナビゲーションやサイト名、セカンダリーエリア)を統一させたい場合は、EC-CUBE内でメディア機能を開発するか、WordPressのサードパーティのECプラグイン(WooCommerse等)を採用してそちらでECサイトを作る方がおすすめです。

たとえば、ヘッダーエリアの表示や編集機能を、通販とメディアどちらも完全に統一にして、通販サイトへのログイン時やお買い物中だけでなく、メディアの読み物コンテンツを見ている時にも、完全に統一されたヘッダーエリアに会員情報やカート情報を表示させたまま楽しんでもらい。といったケースでは、「EC-CUBE x WordPress」での構築は不向きです。

不可能ではありませんが、WordPressかEC-CUBEのコアとなる機能に手を入れる必要があるため、どちからの機能を削いでしまうことになり、メンテナンス性のコスト増大や、バグやセキュリティリスクが懸念されます。

一方で、アイリスオーヤマの公式オンラインストア「アイリスプラザ」のように、読み物のコンテンツを開くと、ページのヘッダーが通販用からメディア用に切り替わるような導線設計であれば、比較的容易に構築可能で、EC-CUBE・WordPressのコア機能を修正せずに安定性・メンテナンス性の高い構築が可能です。

「サイトの共通部分は統一化した方がメリットが多い」と考えられる方もいるかもしれませんが、同じサイトを利用していても、読み物を主体に楽しみたいお客様と買い物をしたいお客様が異なるケースも多いので、ヘッダーが切り替えられていた方がユーザビリティが向上する可能性も十分に考えられます。

3. EC-CUBE – WordPress連携のベストプラクティス

3-1. EC-CUBEとWordPressをそれぞれ独立させ、必要な導線のみAPIで連携させる

当社がオススメするケースが多いのは、「アイリスプラザ」や美容・コスメ・ダイエット商品の通販サイト「きれいみつけた」などのように、同一ドメイン下ではありつつ、ある程度、独立した別のメディアとして作るケースです。

具体的には、同じドメイン内で設置する場合、トップディレクトリにEC-CUBEをインストールして、サブディレクトリ(/media, /blog)にWordPressを導入して、それぞれのAPIを利用して導線を設置することをオススメします。

【example.com】
/……… EC-CUBE 4系
/media/……… WordPress

3-2. APIを使った導線のみの連携をオススメする3つの理由

3-2-1. 通販、メディアそれぞれのユーザーに対して最適な導線を設計できる

商品を購入するつもりで通販サイトに訪れているユーザーと、検索エンジンやSNS経由で情報を知りたくて来訪したユーザーとでは、根本的にサイトに求めている体験が異なるため、それぞれのユーザーに適切な導線を作ることが、ユーザーのサイトでの体験を向上させるために大事なポイントです。

ときには、メディアで興味をもったお客様に適切なタイミングで通販サイトへの導線を入れることも、逆に通販を回遊しているお客様にブランド理解を高めるため、メディア導線を入れることも重要ですので、それらを柔軟に実現できるように、通販(EC-CUBE)とメディア(WordPress)で個別にデザイン・レイアウトを管理できることはメリットといえます。

3-2-2. セキュリティ面への考慮

WordPressには、サードパーティのプラグインを利用しなければ、会員登録やお客様の個人情報を取得することがありません。

そのため、情報流出やセキュリティ面で問題に挙げられにくいのですが、世界シェアも高く多くの一般のサードパーティからのプラグインを受け入れているWordPressの特性上、EC-CUBEよりも脆弱性が見つかることも多いのが現状です。

過度な連携を行ってしまうと、WordPressの脆弱性から、EC-CUBE内の個人情報に不正にアクセスされるといったリスクが増してしまいますので、セキュリティ面から見ると、相互のファイルの読み出しやデータベース及びそのアカウントの使いまわしなどは避けることをオススメします。

※尚、WordPressとEC-CUBEを同じサーバーで運用する時点で、WordPressの脆弱性経由の攻撃のリスクは発生しますので、十分にご注意ください。

JVN iPedia – 脆弱性対策情報データベース での 検索一致件数
WordPress EC-CUBE
3184件 55件

3-2-3. EC-CUBE , WordPress両方の標準機能を余すことなく使える

EC-CUBEとWordPressでは、サイトレイアウトの変更機能など、被っている機能なども存在するので、カスタマイズにより連携を強化させ過ぎてさせてしまうと、それによりどちらかの機能が正常に動作しなくなるケースが多いです。(例:WordPressの外観とEC-CUBEのレイアウト・ページ管理等)

また、それぞれにアップデートが活発に行われているため、バージョンアップによってカスタマイズ箇所からバグや動作不良を起こす可能性も高く、メンテナンスや改修に高いコストが掛かってしまうことも。そのため、当社ではコア機能に影響を与えないAPIでの連携まで留めた構築をオススメしています。

4. EC-CUBE – WordPressのAPI連携の具体的な方法

4-1. EC-CUBE 4系で、同じドメイン内のWordPressカテゴリ一覧を表示する方法[REST API]

以下の記事では、EC-CUBE内でWordPressのカテゴリーリンクの一覧を表示する方法を紹介しています。

カンタンなPHPコードを追加してTwig関数を作り、作ったTwig関数を使ってカテゴリーのリストを取得。取得したカテゴリーのリストをTwig内でマークアップする方式なので、HTMLの変更も容易で柔軟なカスタマイズが可能です。

EC-CUBE 4系で、同じドメイン内のWordPressカテゴリ一覧を表示する方法[REST API]

4-2. EC-CUBE 4系で、同じドメイン内のWordPress最新記事を表示する方法[REST API]

EC-CUBE内でWordPressの最新記事リンクの一覧を表示する方法を紹介しています。

カテゴリ一覧を表示する方法と同様に、PHPコードによって作成したTwig関数で最新記事を取得。取得した最新記事をTwig内でマークアップする方法を解説します。

EC-CUBE 4系で、同じドメイン内のWordPress最新記事を表示する方法[REST API]

4-3. WordPressで同じドメイン内のEC-CUBE 4系のカート情報を表示する方法

EC-CUBEのヘッダーに表示されているカートリンク(アイテム数や金額)を、同じドメイン内のWordPressから取得して表示します。

EC-CUBE自体も、Ajaxで非同期で呼び出す手法を取っているため、そのコードを参考にして非同期でWordPressのヘッダー内に、カートリンクとその情報を表示させます。

WordPressで同じドメイン内のEC-CUBE 4系のカート情報を表示する方法

4-4. WordPressとEC-CUBE 4系をAPI連携して、商品リンクをショートコードで表示する方法

EC-CUBEのGraphQLを使って、WordPress側で商品リンクを生成するショートコードを作ります。

ショートコードでは、商品IDを使ってリンクを呼び出せるため、記事やウィジェットなど様々な場所にリンクの設置が可能です。

WordPressとEC-CUBE 4系をAPI連携して、商品リンクをショートコードで表示する方法

5.(株)カジヤでは、EC-CUBE 4系のカスタマイズや通販サイトの運営代行を承っております

当社では、通販サイトの立ち上げからカスタマイズだけでなく、Webコンサルティングや日々の更新業務の代行まで、幅広くサポートを行っております。(参考料金についてはこちらをご確認ください)。

EC-CUBEのカスタマイズやリニューアル、新規オープンのご相談や、通販の売上UP、メディア集客でお困りのことがございましたら、以下フォームよりお気軽にご相談くださいませ。

    お問い合わせ内容(必須)

    御社名・ご担当者名(必須)

    メールアドレス(必須)

    電話番号

    お問い合わせ内容


    お預かりした個人情報は大切に保管いたします。
    個人情報の取り扱いの内容をご確認いただき、ご同意のうえお申し込みください。

    Contact

    「コンサルティングや制作、広告運用の事例を教えてほしい」「集客を増やすためにどのような手法があるか、客観的アドバイスがほしい」「とりあえず、今のサイトを見てアドバイスがほしい」など、具体的な相談内容が決まっていない場合でも、お気軽にご相談ください。

    Copyright © (株)カジヤ All Rights Reserved.