LoginSignup
61
74

More than 3 years have passed since last update.

EC-CUBEAdvent Calendar 2018Day 8
@nanasess(Kentaro Ohkouchi)inEC-CUBE開発コミュニティ

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

Last updated at Posted at 2018-12-08

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

61
74
30

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
61
74