Twitter

EC-Cube 2.13.5をWP連携前提でインストールしてるよ その2

FacebooktwitterredditpinterestlinkedinmailFacebooktwitterredditpinterestlinkedinmail

こんにちは、楽して働きたい人です。前回に引き続き、2019年現在でEC-CUBE2.13.5とWordpressを連携させるためにインストールしていきます。

前回は、EC-CUBEのインストールまでを行いました。

EC-Cube 2.13.5をWP連携前提でインストールしてるよ その1

2019年9月24日

今回は、Wordpressをインストールするところからやっていきます。

WordPressのインストール

WordPressはEC-CUBEと同じディレクトリにインストールします（includeのパスなど調整すれば違うディレクトリでも動作すると思います）。

インストール自体は、自分でファイルをアップロードしてもいいですし、レンタルサーバーの自動インストーラーを使用してもいいと思いますが、EC-CUBEに影響を与えないように自分でアーカイブをダウンロードしてインストールしたほうがいいでしょう。

インストールする際の注意点としては、セキュリティのためにEC-CUBEとは違うデータベースを使用してインストールするようにします。

また、インストールに成功しても、PHPのバージョンの関係上、以下のような警告が表示されます。

これは表記の通りなので、2.17系のalphaが取れたら、そのタイミングでPHPも同時にバージョンアップした方がいいでしょう。

連携の設定（相互include）

ここは参考サイトの記述をほぼそのまま行います。

WordPress側からEC-CUBEを使うための設定

wp-config.phpに以下を追記します。

wp-config.php

require __DIR__.’/require.php’;

もし、WordpressとEC-CUBEを違うディレクトリにインストールしていた場合は、’/require.php’の前に、wp-config.phpからの相対パスを記述するといいでしょう。

EC-CUBEからWordpressを使うための設定

/data/require_base.phpに以下を追加します。

/data/require.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/ディレクトリから調べてください）。

style.css
/*
 Theme Name:   My Child Theme
 Template:     twentynineteen
 Version:      1.0.0
*/

functions.php

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タグ内でショートコードを呼び出せるようにする
?>
  1. wp_enqueue_scriptsにadd_actionして子テーマのスタイルも読み込むようにします（子テーマの基本的な記述）
  2. 参考サイトを参照に、EC-CUBEのセッションを読み込み、ショートコードでEC-CUBEのCSRFトークンを呼び出せるようにします。これをしないと、Wordpressの記事内にショッピングカートを埋め込んでもEC-CUBEのセキュリティ機能でカートに商品を入れることができなくなります。
  3. 現在の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 の修正

/data/Smarty/templates/default/site_main.tpl
<div>
   <div id="main-content">
       <!--{include file=$tpl_mainpage}-->
   </div>
</div>

ここでは特に気をつけるところはありません。

site_frame.tpl の修正

/data/Smarty/templates/default/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のインストール時に表示されていたパスがルートからの絶対パスになっているので、そこから導くことができます。

控えていなかった