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

[パッチはこちら](https://gist.github.com/nanasess/451cf6cd9c08b27dc0ca9b0f223d36c8)

### インストール先フォルダ

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

```shell
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`

```smarty:data/Smarty/テンプレート名/site_main.tpl
<div>
   <div id="main-content">
       <!--{include file=$tpl_mainpage}-->
   </div>
</div>
```

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

```smarty: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 に設定を追記します。

```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 トークンを取得するためのショートタグを作成します。

```php:functions.php
function get_csrf_token() {
        return SC_Helper_Session_Ex::getToken();
}
add_shortcode('CsrfToken', 'get_csrf_token');
```

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

### カートタグの設置

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

```html
<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 、それぞれ良いところを活かして最高のユーザー体験を提供しましょう！