こんにちは、楽して働きたい人です。前回に引き続き、2019年現在でEC-CUBE2.13.5とWordpressを連携させるためにインストールしていきます。
前回は、EC-CUBEのインストールまでを行いました。
今回は、Wordpressをインストールするところからやっていきます。
WordPressのインストール
WordPressはEC-CUBEと同じディレクトリにインストールします（includeのパスなど調整すれば違うディレクトリでも動作すると思います）。
インストール自体は、自分でファイルをアップロードしてもいいですし、レンタルサーバーの自動インストーラーを使用してもいいと思いますが、EC-CUBEに影響を与えないように自分でアーカイブをダウンロードしてインストールしたほうがいいでしょう。
インストールする際の注意点としては、セキュリティのためにEC-CUBEとは違うデータベースを使用してインストールするようにします。
また、インストールに成功しても、PHPのバージョンの関係上、以下のような警告が表示されます。
これは表記の通りなので、2.17系のalphaが取れたら、そのタイミングでPHPも同時にバージョンアップした方がいいでしょう。
連携の設定（相互include）
ここは参考サイトの記述をほぼそのまま行います。
WordPress側からEC-CUBEを使うための設定
wp-config.phpに以下を追記します。
require __DIR__.’/require.php’;
もし、WordpressとEC-CUBEを違うディレクトリにインストールしていた場合は、’/require.php’の前に、wp-config.phpからの相対パスを記述するといいでしょう。
EC-CUBEからWordpressを使うための設定
/data/require_base.phpに以下を追加します。
require __DIR__.’/../public_html/shop.example.com/wp-load.php’;
パスについては、/data/ディレクトリからの相対パスになります。webからアクセスできないようにpublic_htmlの外に/data/フォルダをアップロードしている場合、wp-load.phpへの正確なパスを記述するようにしてください。
WordPressテーマの子テーマを作成
更に、Wordpressの機能を拡張（functions.phpの追記など）を行う前にWordpressの子テーマを作成します。
子テーマって何？ 何のために作るの？
WordPressのテンプレート（テーマ）は単純にデザインを定義するだけでなく、ショートコードなどロジックを含むものが多くあります。そういったテンプレートはセキュリティ対策のためなどでアップデートされますが、テンプレート自体を編集してしまっていると、アップデートによりその内容が失われてしまいます。
そのため、カスタマイズする際には子テーマを作成して、必要な部分だけ修正をし、手を加えなくていい部分は親テンプレートの機能をそのまま利用するように設定することで、アップデートがあった場合でも最小限の作業で対応することができるようになります（余程複雑な変更をしない限り、そのまま使えることの方が多いです）。
最も簡単な子テーマの作り方
今回はWordpressのテーマをカスタマイズすることが目的ではなくEC-CUBEとの連携を実現することが目的なので、必要最低限度の設定を行います。
子テーマに必要なのは以下です。
- /wp-content/themes/子テーマを格納するディレクトリ(今回はchild/)
- style.css(子テーマディレクトリ内に格納)
- functions.php（子テーマディレクトリ内に格納）
style.cssは実際にCSSファイルとしてHTMLの修飾に使わずに、テーマの基本情報を記載するのに使います。
style.css
style.cssの記載内容は以下にします。最低限必要なのは、Theme Nameと親テーマの指定であるTemplateです。今回は一応、修正を管理するためにVersionも残していますが、必須ではありません。
Theme NameはWordpressの管理画面で表示されるテーマの名前なので分かりやすいものを付けます。ただ今回の用途ではテーマを複数切り替えて使うことは想定していないので適当な名前を付けています。
Templateは親テーマのディレクトリ名になります（テーマ名ではありません）。以下では現在の標準テーマであるTwenty Nineteenを親テーマに指定したいので、そのディレクトリであるtwentynineteenとしています（ディレクトリ名はthemes/ディレクトリから調べてください）。
/* Theme Name: My Child Theme Template: twentynineteen Version: 1.0.0 */
functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}//子テーマの基本的な記述
add_action('init', 'register_session');
function register_session() {
if (session_status() !== PHP_SESSION_ACTIVE) {
session_name('ECSESSID');
session_start();
}
}//EC-CUBEのセッションを読み込む
function get_csrf_token() {
return SC_Helper_Session_Ex::getToken();
}//ショートコードでCSRFトークンを記事内に埋め込めるようにする
add_shortcode('CsrfToken', 'get_csrf_token');
add_filter( 'wp_kses_allowed_html', function ( $allowedposttags, $context ) {
if ( $context == 'post' ) {
$allowedposttags['input']['value'] = 1;
}
return $allowedposttags;
}, 10, 2 );//inputタグ内でショートコードを呼び出せるようにする
?>- wp_enqueue_scriptsにadd_actionして子テーマのスタイルも読み込むようにします（子テーマの基本的な記述）
- 参考サイトを参照に、EC-CUBEのセッションを読み込み、ショートコードでEC-CUBEのCSRFトークンを呼び出せるようにします。これをしないと、Wordpressの記事内にショッピングカートを埋め込んでもEC-CUBEのセキュリティ機能でカートに商品を入れることができなくなります。
- 現在のWordpressではタグ内のショートコードを展開してくれないので、inputタグのvalue属性内ではショートコードを展開出来るようにフィルターを修正します。
上記のfunctions.phpの記述でWordpressの記事にEC-CUBEのカートを埋め込みできるようになります。
ただし、Wordpressのキャッシュ系プラグインを使っているとCSRFトークンがキャッシュされてしまい、機能しなくなるためカートを埋め込んだページではwp_super_cacheなどのプラグインを無効にするか、最初から導入しないようにするといいでしょう。
EC-CUBEのテンプレートの修正
こちらも参考サイトの記述をほぼそのまま行い、EC-CUBEのテンプレートをWordpressのテンプレートに近づけるようにします（この連携の主目的の一つです）。
EC-CUBEのテンプレートは、インストール直後の場合、
- /data/Smarty/templates/default/ (PC用)
- /data/Smarty/templates/sphone/ (スマホ用）
が設定されているので、それぞれの該当するテンプレートを修正します。ただ、Wordpressのテンプレートはマルチデバイス対応なレスポンシブレイアウトであることが殆どなので、スマホ用のテンプレートもdefault/テンプレートにしてもいいかもしれません。
site_main.tpl の修正
<div>
<div id="main-content">
<!--{include file=$tpl_mainpage}-->
</div>
</div>ここでは特に気をつけるところはありません。
site_frame.tpl の修正
<!--{if $arrPageLayout.header_chk != 2}-->
<!--{include_php file="/full_path/public_html/shop.example.com/wp-content/themes/parent_theme/header.php"}-->
<!--{/if}-->
<!-- ▼BODY部 スタート -->
<!--{include file='./site_main.tpl'}-->
<!-- ▲BODY部 エンド -->
<!--{if $arrPageLayout.footer_chk != 2}-->
<!--{include_php file="/full_/public_html/shop.example.com/wp-content/themes/parent/footer.php"}-->
<!--{/if}-->site_frame.tplではWordpressのテーマのヘッダーやフッターなどを呼び出します（必要があればサイドバーなども）。
ここで気をつけなければいけないのは、
- WordPressのテーマのディレクトリまでを絶対パスで記述すること
- 子テーマでheader.phpやfooter.phpを作成していない場合、親テーマのheader.phpやfooter.phpを指定する必要があること
です。
絶対パスについてはURLやFTPでアクセスしたときのパスではなく、サーバー内の実際のパスを指定する必要があります。前回の記事の手順通りに行っていた場合、EC-CUBEのインストール時に表示されていたパスがルートからの絶対パスになっているので、そこから導くことができます。
控えていなかった場合やよく分からない場合は以下の内容でPHPを作成し、Wordpressのテーマディレクトリにアップロードしてブラウザでアクセス（例：shop.example.com/wp-content/themes/path.php など）するとアクセスしたphpファイルの絶対パスが分かるのでそちらでも構わないと思います。
<?php echo __FILE__ ; ?>
親テーマのheader.phpやfooter.phpを指定しなければならない理由
通常のWordpressのAPI経由の場合、子テーマでヘッダーやフッターを呼び出した際、子テーマ側でヘッダーやフッターが定義されていない場合、自動的に親テーマのヘッダーやフッターが呼び出されます。
これがWordpressでテーマをカスタマイズするときにテーマを「コピーして」編集するのではなく子テーマを作成して必要な部分だけ記述すればいい理由で通常は強力な機能です。
しかし、今回はEC-CUBEのテンプレート（恐らくSmarty）上から呼び出さなければならないため、WordpressのAPIが使えません（多分）。そのため、子テーマでヘッダーやフッターを定義しているか自分で判断し、呼び出し先を変更する必要が出てきてしまっています。Smarty自体のpluginを拡張するなどをすればWordpressのAPIを直接使用できるのかもしれませんが、そこまでは調べていません（また配布テンプレートではないので人間が都度判断で実用上、問題ないと思います）。
カートタグをWordpressに設置
<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>
ここまでの作業を完了したら参考サイトの通り、上記タグをHTMLコードとしてWordpressの記事に入力することで、現在の環境下でもWordpress上でEC-CUBE2のショッピングカートが機能するようになります。
action内のパス（ブラウザ上での絶対パス）や商品のID, 商品規格IDなどはご自身の環境にあわせてください。
おわりに
EC-CUBE4も出ており、PHPのバージョンも7.3が推奨されている2019年後半にもなってわざわざこの作業をする価値があるのか？ と言われると微妙かもしれません。Wordpress上ではWelcartなどのシステムもありますので。
とはいえ、EC-CUBEの豊富な決済システムやECカートシステムとしての各種連携機能はWelcart単体と比較するとやはり高機能です。そして、前回の記事でも書きましたが、ECの環境自体も常に変化しており、売り方、トレンドは業種・商材ごとに多様化しています。
そんな中で活用されるツールもSNSや動画、3Dのモックアップなど日々変化している状況だと従前通りのECシステムでは要求に柔軟に対応できるかと言われると難しいように思います。
そのため、Wordpressの自由かつ高機能なコンテンツ作成機能と、世界的にデファクトスタンダードな地位を確立していることにより得られる豊富なプラグインや情報、テンプレート類の存在はやはり魅力的ですので、セキュリティアップデートなどには充分に注意して運用してみるのもいいのではないでしょうか？
