(cache)EC-CUBE と WordPress を連携させるためのベストプラクティス

WordPress のプラグインなどの脆弱性を利用し、EC-CUBE のクレジットカード番号を不正利用される事故が多数発生している模様です。連携の際はくれぐれもご注意ください。

EC のオープンソース CMS としては、日本で No.1 のシェアを誇る EC-CUBE ですが、 CMS としての機能は、HTMLを編集しなければならない旧来の機能と、簡単なレイアウト管理しかなく、とても貧弱だったりします。
そこで、 WordPress など他の CMS と連携させることになりますが、 Google 検索しても、なかなか良い方法に辿り着けないため、ベストプラクティスをまとめてみようと思います。

WooCommerce を使ったらいいじゃん！
という声もあるかと思いますが、カスタマイズの簡単さ、日本の商習慣との親和性からすると、 EC-CUBE の方が上だと思います。
個人的に WooCommerce は複雑すぎます...

ここでは EC-CUBE2系と WordPressの連携方法をまとめます。
EC-CUBE4系がリリースされていますが、 WordPress との親和性は2系の方が有利です。
2系の最新バージョンである EC-CUBE2.17 も近いうちにリリース予定ですし、末永く安心してお使いいただけます。

EC-CUBE3系、4系と WordPress の連携方法も別途まとめる予定です

WordPress4系、WordPress5.0にて動作確認しています。

目指すこと

WordPress の CMS 機能をできるかぎり活用する
- 投稿ページや固定ページ、カスタム投稿タイプは制限なく利用したい
カート以降は EC-CUBE の機能を利用する。豊富な決済モジュールはそのまま活用可能
ヘッダ、フッタなどの共通部分は WordPress のテーマを利用する

EC-CUBE と WordPress のインストール

どちらを先にインストールしてもいいのですが、いくつか注意しなければならないことがあります。

EC-CUBE と WordPress のデータベースは別にする

EC-CUBE のデータベースには大量の個人情報が保存されています。
WordPress のプラグインの脆弱性を攻撃して、EC-CUBEのデータに不正アクセス、、、といったリスクを低減するため、データベースは別にしましょう。

別にした場合、一部の定数が重複してしまいますので、 EC-CUBE 側を修正します。

変更前	変更後
`DB_USER`	`EC_DB_USER`
`DB_NAME`	`EC_DB_NAME`
`DB_SERVER`	`EC_DB_SERVER`
`DB_PASSWORD`	`EC_DB_PASSWORD`
`DB_PORT`	`EC_DB_PORT`

該当ファイルは以下のとおりです。

data/class/SC_Initial.php
data/class/SC_Query.php
data/class/db/SC_DB_DBFactory.php
data/config/config.php

パッチはこちら

インストール先フォルダ

WordPress は、 EC-CUBE の html フォルダ(DocumentRoot)にインストールします。
この場合、EC-CUBE の html/index.php と WordPress の index.php が重複してしまいますので、 EC-CUBE の html/index.php を html/ec.php に変更しておきましょう。

mv html/index.php html/ec.php

インストール

ここまで準備できれば、 EC-CUBE と WordPress をインストールしましょう。
通常どおり、インストーラからインストールできるはずです。

EC-CUBE のデータベースは PostgreSQL を選択しても大丈夫です。

連携の基本設定

WordPress で EC-CUBE の関数を使用するための設定

WordPress の wp-config.php で、 EC-CUBE の require.php を require します。
define('DB_NAME', '<dbname>'); の前の行あたりに記述します。

wp-config.php

require __DIR__.'/require.php';

EC-CUBE で WordPress の関数を使用するための設定

EC-CUBE の data/require_base.php で、 WordPress の wp-load.php を require します。
最終行あたりに記述します。

data/require_base.php

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

テーマの基本設定

WordPress のヘッダ、フッタを EC-CUBE 側から参照できるようにします。

EC-CUBE の共通ヘッダ、共通フッターは <body></body> より外側
WordPress の共通ヘッダ、共通フッターは <body></body> の内側

という仕様上のミスマッチがあるため、WordPress 側に寄せるようカスタマイズします。

EC-CUBE のデザイン管理機能は使用できなくなってしまいますが、 WordPress の CMS 機能をフル活用することで代替することにしましょう！

EC-CUBEテンプレートの修正

EC-CUBE の data/Smarty/<テンプレート名>/site_main.tpl 及び、data/Smarty/<テンプレート名>/site_frame.tpl を以下のようなシンプルなものに変更します。
こうすることで、 EC-CUBE から WordPress のヘッダー、フッターを参照できます。

`data/Smarty/<テンプレート名>/site_main.tpl`

data/Smarty/テンプレート名/site_main.tpl

<div>
   <div id="main-content">
       <!--{include file=$tpl_mainpage}-->
   </div>
</div>

`data/Smarty/<テンプレート名>/site_frame.tpl`

data/Smarty/テンプレート名/site_frame.tpl

<!--{if $arrPageLayout.header_chk != 2}-->
    <!--{include_php file="/path/to/ec-cube/html/wp-content/themes/<theme name>/header.php"}-->
<!--{/if}-->
<!-- ▼BODY部 スタート -->
<!--{include file='./site_main.tpl'}-->
<!-- ▲BODY部 エンド -->
<!--{if $arrPageLayout.footer_chk != 2}-->
    <!--{include_php file="/path/to/ec-cube/html/wp-content/themes/<theme name>/footer.php"}-->
<!--{/if}-->

カートの連携

EC-CUBE のカートに入れるボタンを WordPress に設置しましょう。

基本的に、EC-CUBE の商品詳細ページのカートタグを取ってくればよいのですが、セキュリティの関係上、そのままでは動作しません。

EC-CUBE の CSRF トークンを WordPress でも利用できるようにします。
ただし、この方法は、 WP Super Cache などのキャッシュプラグインを併用すると、 CSRF トークンまでキャッシュされてしまいます。
カートボタンを設置したページは、キャッシュから除外する等の設定が必要です。

EC-CUBE のセッションを WordPress で共有する

WordPress の functions.php に設定を追記します。

functions.php

add_action('init', 'register_session');
function register_session() {
    if (session_status() !== PHP_SESSION_ACTIVE) {
        session_name('ECSESSID');
        session_start();
    }
}

こうすることで、 CSRF トークンを WordPress 側で共有できるようになります。

CSRF トークンのショートタグ作成

CSRF トークンを取得するためのショートタグを作成します。

functions.php

function get_csrf_token() {
        return SC_Helper_Session_Ex::getToken();
}
add_shortcode('CsrfToken', 'get_csrf_token');

[CsrfToken] というショートタグで、 CSRF トークンを取得できます。

カートタグの設置

投稿ページに、以下のようなフォームを貼り付けることで、カートに入れるボタンを作成できます。
/products/detail.php のパスは、お使いの環境に合わせて修正してください。

<form name="form1" id="form1" method="post" action="/products/detail.php?product_id=<商品ID>">
  <input type="hidden" name="transactionid" value="[CsrfToken]" />
  <input type="hidden" name="mode" value="cart" />
  <input type="hidden" name="product_id" value="<商品ID>" />
  <input type="hidden" name="product_class_id" value="<商品規格ID>" id="product_class_id" />
  <input type="text" class="box60" name="quantity" value="1" />
  <input type="submit" value="カートに入れる" />
</form>

まとめ

こうすることで、 WordPress の機能をフル活用しつつ EC-CUBE の強力な購入フローを両立できます。
商品数が多い場合は、 EC-CUBE の商品一覧ページを活用することもできます。
ランディングページも、 WordPress の固定ページを利用して簡単に作成できるようになりますし、お問い合わせフォームも、 WordPress の Contact Form 7 を使用して簡単に増やせます。

WordPress と EC-CUBE 、それぞれ良いところを活かして最高のユーザー体験を提供しましょう！