EC-CUBE内にWPの記事を出力させる

EC-CUBE内にWPの記事を出力させる

こんにちはムラタです。

今回はEC-CUBEで構築したサイト内にWordpress(以下WP)で投稿した記事を引っ張ってくる方法をご紹介したいと思います。

EC-CUBEとWPの連動にはEC-CUBEの無料プラグインである「WpPost」を使えばWPの投稿や固定ページを簡単に連動できるので便利ですが、記事詳細のURLが「http://xxxx/wppost/plg_WpPost_post.php?postid=xxxx」のようになってしまうのが嫌だったりカスタム投稿タイプは連動できないといった面もあったため今回はプラグインを使わずに処理してみました。

目次

  1. 構築環境
  2. EC-CUBEカスタマイズ
  3. 終わりに

構築環境

それではまず今回作業した構築環境からご紹介します。

  • EC-CUBE…Ver 2.13.3
  • DB…MySQL
  • WordPress…Ver 4.1.5
  • PHP…Ver 5.4.16

EC-CUBEをルートディレクトリに設置し、Wordpressは一つ下の階層「/post/」としました。

01

DB接続名の変更

WPとEC-CUBEを同じデータベースで使用するにあたり、データベース接続情報の変数がお互いかぶっているため、どちらかの名前を変更する必要があります。

WPの方を変更してしまうとWPをバージョンアップするたびにデータが上書きされそのたびに修正をかける必要がでてくると思うので、どちらかというとバージョンアップする機会が少ないEC-CUBEの方を編集しましょう。

名前の変更が必要な変数名は

  • DB_USER
  • DB_PASSWORD
  • DB_NAME

の3つで、これらの記述があるファイル全てを編集していきます。

/data/config/config.php」の8、9、11行目。
/data/class/SC_Initial.php」の86~89行目付近。
/data/class/SC_Query.php」の56~61行目付近。
/data/class/db/SC_DB_DBFactory.php」の68~73行目付近。

以上4つのファイルになります。変更する名前はなんでもいいのですが、自分は名前の頭に「EC_」をつけておきました。

EC-CUBEカスタマイズ

テンプレートに直接記述

02それではさっそく連携させていきましょう。
左カラムの「プライバシーポリシー」の下にWPのカスタム投稿タイプ「お客様の声」の新着4件を表示させてみます。

まず「/require.php」を開き、一番最後に以下を追加。

これでEC-CUBE内でWPの関数を呼び出すことが可能になります。

次に「/data/Smarty/templates/default/site_main.tpl」の90行目付近「<div id=”leftcolumn” class=”side_column”>」の末尾に下記の記述を追加。

smartyでテンプレート内に直接PHPを記述する場合「{php}~{/php}」としますが、EC-CUBEで使用する場合は「<!–{php}–>~<!–{/php}–>」になります。

あとはWPの関数を使って記事を引っ張ってくるだけです。
上記の内容でcssを少し整えて出力した結果は以下の通り。

03

はい、簡単ですね。

ブロックにして好きな場所に出力させる

しかしテンプレートに記述する方法だと出力できる場所が限られてしまい、例えば「商品カテゴリー」の下や「新着情報」の下に出したいなどの柔軟な対応できません。

というわけで「ブロック」として登録して好きな場所に配置できるようにしましょう。

EC-CUBEの管理画面に入り、「デザイン管理」→「PC」→「ブロック設定」にアクセスします。

ブロック名は「お客様の声一覧」でファイル名は「wp_voice」とします。
内容に関しては先ほどテンプレートに直書きした内容をそのまま移すだけでOKです。

登録したら後は「レイアウト設定」で好きな場所に配置するだけです。
実際に「カレンダー」の上に配置するとこうなります。

04

はい、ドエレー”COOL”になりましたね。

EC-CUBEの商品とWPの記事を関連付けて出力させる

ここまではどのページでも一律で同じ記事の一覧がでるだけでしたが、今度は商品ページ毎にその商品に関連する記事を出力してみます。

まず何をもって商品と記事を関連づけるかという点ですが、今回はEC-CUBE側の「検索ワード」とWP側の「タグ」で関連づけます。

05

まず上記のように関連付け用の検索ワードを商品の検索ワードに設定して、同一の単語をWP側の記事のタグにも設定します。

06次に「/data/Smarty/templates/default/products/detail.tpl」を編集します。
出力する場所ですが「お客様の声」の直下に出すようにしてみましょう。
あと今気づいたんですがEC-CUBEの「お客様の声」と被ってますね…実際にはカスタム投稿を「レシピ」とか「レポート」とかお好きなものにしてもらえればと思います。

気を取り直してカスタマイズしていきます。
お客様の声の直下になるので348行目あたりに下記の記述をします。

PHP処理を書く前にsmarty内で検索ワード($arrProduct.comment3)を変数「word」に取得しておきます。

そしてその値をPHPに渡しますが、その場合「$this->get_template_vars(‘変数名’)」で渡すことが可能です。

後はその値をコンマ区切りで配列に直しwp関数のtax_queryにごにょごにょすればOKです。

cssを軽く調整して出力した結果がこちら。

07

はい、検索ワードと同じタグを設定した記事だけ出力されました。

しかしこれだと悲しい感じなので今回はアイキャッチも表示させてみましょう。該当ソースを下記に変更します。

「get_the_post_thumbnail」でアイキャッチを取得してやるだけです。サイズやアイキャッチがなかった時のダミー画像はお好きな様に変更してください。
出力結果は以下のとおり。

08

もっとCOOLになりました。

tplに直接ではなくclassに記述する。

原因はよく分からなかったのですが、GMOペイメントの「2クリック決済プラグイン」を使用した際、上記のようにtplファイルに直接PHPの処理を記述しているとエラーとなりうまく動かないという現象が発生しました。

そうした場合tplファイルに直書きではなくクラスファイルの方に書いてあげると正常に動かすことができましたのでついでにご紹介しておきます。

編集するファイルは「/data/class_extends/page_extends/products/LC_Page_Products_Detail_EX.php」になります。

「function process(){ … }」の記述の後に以下の記述を追加します。

次に「/data/Smarty/templates/default/products/detail.tpl」の直接PHPで記述していた部分を

に変更します。だいぶスッキリしました。

これでtplに直接記述した時と同じ出力結果になり、エラーも吐かれなくなりましたのでもし同じような現象で悩まれてる方はお試しください。

終わりに

EC-CUBEはカスタマイズ性は高いのですがあまり知識がない人間にはかなり敷居が高いですよね・・・今回自分もだいぶ頭を悩まされました。

そろそろEC-CUBE3がリリースされるようですが、もう少し敷居が低くなっているとありがたいですね。

というわけで機会があればEC-CUBE3の記事も書いてみようと思います。
それではまた次の記事でお会いしましょう。

同じカテゴリー(WEB制作・デザイン)の記事