EC-CUBEのカスタマイズをしたいときにプラグインがあれば手間が省けますが、EC-CUBEではプラグインの数がWordPressに比べて圧倒的に少ないので、
自分が使いたい機能がプラグインとして提供されていないことも多々あります。
2025年7月時点では、EC-CUBEでは1,790件、WordPressでは59,651件がプラグイン登録されています。

また、EC-CUBEはマイナーバージョンが変わるだけでも大きな影響がある場合があるのですが、最新バージョンごとに適切なプラグインを探さなければいけません。

こうした状況から、プラグインを作ってみようかな、と思う方もいらっしゃるかもしれません。
この記事では、EC-CUBEプラグインを制作する際の流れを分かりやすく解説し、公開作業までを説明していきます。

設計

今回作成したのは、トップページ等にSwiperでスライドショーを表示するEC-CUBE4.2対応のプラグインです。

管理画面からスライド画像やリンク先を登録して並び替えができ、さらにSwiperの動作設定や表示方法も管理画面上で細かく調整できるようにしています。

DBには以下のような情報を保存しています。

・画像ファイルパス
・リンク先URL
・並び順
・Swiperオプションの各種設定

Swiperを採用した理由

Slickといったライブラリも有名ですが、今回は機能の多さと柔軟性からSwiperを選択しました。

Swiperは以下の点で優れています。

・jQuery非依存
・オプション・コールバック関数が豊富でカスタマイズ性が高い
・ドラッグ（スワイプ）したときの操作感が良い
・モダンブラウザに最適化され、将来的な更新も期待できる

また、Swiperをまとめた記事もありますので、詳細についてはこちらをご覧ください。
【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー

開発

開発環境を整備

XAMPPを使ってローカルに開発環境を構築しました。
htdocs/eccube にEC-CUBEを配置し、http://localhost/eccube にアクセスして初期設定。
プラグインは app/Plugin/【プラグインフォルダ名】 に作成して、VSCodeで編集しながらブラウザで動作を確認しました。

XAMPPは直接ファイルをいじれるため権限まわりのストレスが少なく、特に初心者にとっては扱いやすいです。

プラグインコードとフォルダ名を決定

EC-CUBEでは、プラグインごとに「コード（＝フォルダ名）」を設定する必要があります。
このコードは、プラグインを識別するための一意な名前であり、app/Plugin/ 配下のフォルダ名としても使用されます。

このコードが他のプラグインと重複すると、インストールエラーや予期せぬ不具合の原因になるため、基本的には被らない名称を使う必要があります。
EC-CUBE公式ドキュメントでは、「重複を避けるためにベンダー名＋プラグイン名の形式を推奨」しています。

プラグインで推奨の命名規則

管理画面側の開発

管理画面では、スライド画像とリンク先の登録・並び替え・削除に加えて、Swiperの動作に関する各種オプション設定も実装しました。
オプション設定では、スライドの自動再生の有無やループの有効・無効、アニメーションの指定などを細かく調整できるようにしています。

このように、やることごとにファイルを分けておくことで、後々の修正や流用がしやすくなります。

フロント側の開発

フロントでは、テンプレートにスライドデータを埋め込んで表示するために、Twigブロック機能を使っています。
プラグイン内で新しくブロックを登録しているため、管理画面のレイアウト編集機能からそのブロックを配置するだけで、簡単に表示場所の変更が可能です。
これにより、トップページだけでなく、任意のページや位置に柔軟にスライダーを表示できます。

管理画面で登録されたスライド画像やリンク情報は、Twigブロック内で自動的に取得・反映され、Swiperの構造に合わせて表示されるようになっています。

申請

プラグインを公開するには以下の手順を踏みます。

1.プラグインディレクトリをtar.gz 形式に圧縮
2.操作マニュアル（README）をPDFまたはテキストで用意
3.管理画面とフロントのスクリーンショットを用意
4.オーナーズストアの「マイページ」から新規登録
5.プラグイン情報やファイルを入力・添付して申請

申請後は数日～1週間程度で審査結果が届きます。

プラグイン申請マニュアル

※以下のコマンドで、EC-CUBEのプラグインディレクトリを .tar.gz 形式にまとめることができます。

公開

公開後は、オーナーズストア経由で購入して、各EC-CUBE環境に組み込むことができます。
インストール後は、管理画面からスライドの登録や表示設定などを柔軟に調整でき、すぐにサイトに反映させることが可能です。
テンプレートのカスタマイズなしでも導入できるように設計しているため、初めて導入する方にも扱いやすくなっています。
以下のページから、今回作成したスライダープラグインをご確認いただけます。
高機能なスライダープラグイン

まとめ

今回は、Swiperを使ったEC-CUBE用のスライダープラグインを作成しました。
スライド画像の登録や並び替え、リンク先の設定などを、管理画面から簡単に操作できるようにしています。
管理側の処理とフロント側の表示を分けて作ることで、あとから修正や機能追加がしやすくなっています。

EC-CUBEはまだ使えるプラグインが少ないので、自分で作れるととても役立ちます。
XAMPPを使えばローカル環境でも簡単に開発できるので、ぜひ挑戦してみてください。
プラグインを作って公開すれば、他のショップの役にも立ちますし、EC-CUBEへの理解もより深まります。