EC-CUBE DB LOADER

あいきゃっち

EC-CUBE DB LOADERは、オープンソースのEC向けコンテンツマネージメントシステム「EC-CUBE」のDBにアクセスして、商品リストを表示するWordPress（WP）用プラグインです。
WordPressの記事の中にショートコードを記述することによって、EC-CUBEの商品リストを表示します。

WPの公式ディレクトリに登録されてません。

ダウンロード

EC-CUBE DB LOADER ( ver. 0.1.0 )

使用環境

EC-CUBEのDBは本プラグインを利用するWPと同じホストで稼働している前提
現在はMySQLにのみ対応
EC-CUBEのバージョンは2.13.x（3.xには非対応）
WordPressのバージョンは4.5.2以降
サーバーにOpenSSLがインストールされている場合はopensslコマンドでDBパスワードが暗号化されます

インストール

EC-CUBE DB LOADERをダウンロードしてzipアーカイブを解凍後、「ecc-data-loader/modules/ecc_key.php」を開いて「$ecc_key = md5( ‘文字列’ );」の「文字列」部分を任意の文字列に書き換えて上書き保存してください。（サーバーにOpenSSLがインストールされている場合）
「ecc-data-loader」をWPの「plugins」ディレクトリにアップロードして、WPのプラグンページでEC-CUBE DB LOADERを「有効化」してください。（「ecc-data-loader」内には「.htaccess」ファイルが含まれてます。必ず「.htaccess」もアップロードしてください。）

アンインストール

WPのプラグインページでEC-CUBE DB LOADERを「停止」して、WPの「plugins」ディレクトリから「ecc-data-loader」を削除してください。
EC-CUBE DB LOADERを「停止」すると、WPのDBに登録されたEC-CUBE DB LOADER設定が全て削除されます。

設定

ECC-設定01

インストールが完了するとWPの「設定」サブメニューに「EC-CUBE DB Loader」が追加されます。

ECC-設定02
「EC-CUBE DB Loader」で「EC-CUBE HTTP」「EC-CUBE HTTPS」「EC-CUBE DB名」「DBユーザー名」「DBパスワード」「DBホスト」を入力し、「変更を保存」をクリックして設定してください。

設定の各項目は、EC-CUBEのDB設定（data/config/config.php）の該当項目と同じにしてください。
「EC-CUBE HTTP」→「HTTP_URL」
「EC-CUBE HTTPS」→「HTTPS_URL」
「EC-CUBE DB名」→「DB_NAME」
「DBユーザー名」→「DB_USER」
「DBパスワード」→「DB_PASSWORD」
「DBホスト」→「DB_SERVER」

基本的な設定はこれで終了です。
EC-CUBEのDBのテーブル名や他設定をカスタマイズしている場合は、「EC-CUBE DB Loader」の「詳細設定」をクリックすると表示される詳細項目で、ある程度までは対応が可能です。

ECC-設定03

使用方法

WPの記事に商品リストを表示するには下記のショートコードを使用します。

[ecc-item-list]

これで商品が商品ID順（昇順）で全て表示されます。（EC-CUBE側で非表示設定の商品は表示されません）
表示される商品情報は、商品画像、商品名、商品の税込販売価格です。
商品画像はEC-CUBEの商品詳細ページで表示する商品画像を表示し、表示サイズは元画像サイズです。

リストにタイトルを付ける場合

[ecc-item-list title=’リストタイトル’]

表示する商品数を指定する場合
表示商品4点の場合

[ecc-item-list title=’リストタイトル’ num=4]
商品数の指定をしない場合はデフォルト値としてnum=5となります。

表示する商品の横並び数を指定する場合
横に商品3点の場合

[ecc-item-list title=’リストタイトル’ num=4 cal=3]
横並び数は1〜5まで指定できます。
横並び数を指定すると、表示するリストはWPの記事表示幅を100%として並びます。（WPのテーマがタブレットやスマホに対応している場合は、それらの記事表示幅に追随します）
指定数を越えると次の行に移ります。

新商品順に表示する場合

[ecc-item-list title=’リストタイトル’ num=4 cal=3 new=1]
new=1を追加することで商品データの登録日順（昇順）で表示されます。
後述のasc=-1を追加することで、登録日の新しいものから表示されます。

商品カテゴリーを指定する場合
商品カテゴリー6だけを表示する場合

[ecc-item-list title=’リストタイトル’ num=4 cal=3 cat=6]

商品カテゴリー6と5を表示する場合

[ecc-item-list title=’リストタイトル’ num=4 cal=3 cat=6,5]

EC-CUBEの「おすすめ商品情報」blockを表示する場合

[ecc-item-list title=’リストタイトル’ num=4 cal=3 best=1]
EC-CUBEの「コンテンツ管理＞おすすめ商品管理」で指定した順位に基づいて表示されます。
後述のasc=-1を追加することで、逆順表示されます。

表示順序を降順にする場合

[ecc-item-list title=’リストタイトル’ asc=-1]

新商品順（降順）表示する場合

[ecc-item-list title=’リストタイトル’ num=4 cal=3 new=1 asc=-1]

EC-CUBEの「おすすめ商品情報」blockを逆順（昇順）で表示する場合

[ecc-item-list title=’リストタイトル’ num=4 cal=3 best=1 asc=-1]

表示順序を明示的に昇順にする場合

[ecc-item-list title=’リストタイトル’ asc=1]

注意：新商品順表示の「new=1」とおすすめ商品情報表示の「best=1」は同時使用できません。

ショートコード例

表示サンプルはWPにTwenty Sixteenテーマで、EC-CUBEはデフォルト商品の他に「新商品例01」という商品を追加した状態です。

[ecc-item-list title=’商品ID順 デフォルト’]

[ecc-item-list title='商品ID順 デフォルト' num=4 cal=4]

[ecc-item-list title=’商品ID順’ num=4 cal=4]
[ecc-item-list title=’商品ID順 降順’ num=4 cal=4 asc=-1]02

[ecc-item-list title=’新商品順’ num=4 cal=3 new=1 asc=-1]03

[ecc-item-list title=’商品カテゴリー’ num=4 cal=4 cat=6,5]
[ecc-item-list title=’商品カテゴリー 降順’ num=4 cal=4 cat=6,5 asc=-1]04

[ecc-item-list title=’オススメ商品’ num=4 cal=3 best=1]
[ecc-item-list title=’オススメ商品 逆順’ num=4 cal=4 best=1 asc=-1]05

 

カスタマイズ

本プラグインのスタイルシートとJavascriptを書き換えることで、表示される商品リストをカスタマイズすることができますが、本プラグインの将来におけるアップデートを行った場合は、該当ファイルが上書きされるのでご注意ください。

商品リストは下記のコードが生成され、記事内に表示されます。

<div class="ecc_item_list_wrap">
 <h2>リストタイトル</h2>
 <ul class="ecc_item_list">
  <li style="jsによって指定" class="ecc_item_img cal3">
   <a href="商品ページURL" target="_blank">
    <img src="商品画像URL" width="100%">
    <span class="ecc_item_name">商品名</span>
    <span class="ecc_item_price">価格表示</span>
   </a>
  </li>
  <li style="jsによって指定" class="ecc_item_img cal3">
   <a href="商品ページURL" target="_blank">
    <img src="商品画像URL" width="100%">
    <span class="ecc_item_name">商品名</span>
    <span class="ecc_item_price">価格表示</span>
   </a>
  </li>
  <li style="jsによって指定" class="ecc_item_img cal3">
   <a href="商品ページURL" target="_blank">
    <img src="商品画像URL" width="100%">
    <span class="ecc_item_name">商品名</span>
    <span class="ecc_item_price">価格表示</span>
   </a>
  </li>
 </ul>
</div>

要素「.ecc_item_list_wrap」はショートコード毎に商品リストの表示範囲です。
「h2」タグはショートコードでtitleが指定されている場合に表示されます。
要素「.ecc_item_list」は商品リストの「ul」タグです。
「li」タグのstyleは、ショートコードで横並び数を指定した場合だけ、Javascriptが生成します。
「li」タグの要素「.ecc_item_img」は1商品毎の表示範囲で、同じく要素「.cal4」はショートコードで横並び数を指定した場合だけ「.cal」の後に指定数が付きます。
要素「.ecc_item_name」と「.ecc_item_price」はそれぞれ商品名と価格表示の表示枠です。

プラグイン構成

ecc-data-loader/
ecc-data-loader/ecc-data-loader.php
ecc-data-loader/.htaccess
ecc-data-loader/index.php
ecc-data-loader/modules/ecc-functions.php
ecc-data-loader/modules/ecc-options.php
ecc-data-loader/modules/ecc_key.php
ecc-data-loader/js/ecc_script.js
ecc-data-loader/js/front_script.js
ecc-data-loader/css/style.css
ecc-data-loader/css/front_style.css

免責

本プラグインを使用することによって発生する直接的、付随的、結果的、間接的、あるいは懲罰的な損害、経費、損失、または債務について、ふじみけいすけはいかなる責任も負いません。

ダウンロード

EC-CUBE DB LOADER ( ver. 0.1.0 )