EC-CUBE 2.13 系 に無料で配付されているレスポンシブテーマをインストールする方法を解説します

EC-CUBE 3系は標準テーマがオシャレなデザインなので、こちらのお話は該当しません。ご注意ください。

EC-CUBE オーナーズストアのテーマはお値段が高い

EC-CUBE 2.13 系をインストールして使おうと思ったら、あまりのデザインのダサさに驚き困っている方は多いのではないでしょうか?

EC-CUBE オーナーズストアには、EC-CUBE 2.13 系用のオシャレなテーマが販売されています。

一番安くても、49,500円(54,000円の品がお値引き中なので、お得ですが。)

開発会社に頼むのに比べれば十分お安いですが、それでも、ちょっと試したい方には勇気のいる価格です。

無料のテンプレートがあるといいなぁと思っていたら、なんと!個人的に開発して、しかも公開してくれている方がいらっしゃいました。すごいです。ありがとうございます。

でも残念ながら、オーナーズストアで購入するみたいに、一発でインストールできるようにはなっていません。EC-CUBE 初心者の方には、ちょっと敷居が高いかも。

そこで、この無料テンプレートのインストール方法を解説いたします。

なお、EC-CUBE は、現在3系が主流となっているため、この無料のテンプレートもいつまで公開されているか分かりませんので、今インストールする時間のない方も、とりあえず早急にダウンロードだけはしておいた方が良いです。

えっ、3系が主流なの?と驚いた方、3系と2系の違いをまとめた記事をご参照ください。私は 2.13系が気に入っているので、3系はしばらく使わないと思います。

現在、EC-CUBE は、2系(2.13系) と3系が混在しています。両方を導入した経験から、2系と3系の違いについて語ってみます。こちらの記事は昨年書いた記事ですが、大幅に加筆訂正しました。EC-CUBE に 2.13系と3系が混在しているのはなぜか?自動で、アップデートができないEC-CUBE 3系が登場したとき、開発元であるロックオン社は、EC-CUBE 2.13系の開発を終了すると宣言しました。ところが、EC-CUBE 3系 と EC-CUBE 2.13系は仕組みが全く異なるため、WordPressのような自動更新ができず、ほぼ作り直しになってしまいます。新し...

また、今回のお話は、すでに EC-CUBE 2.13系がインストールされている状態を前提として説明します。

インストールがまだの方は、こちらの投稿をご覧ください。

EC-CUBE は現在 2.13 系と 3系 があります。今回はEC-CUBE 2.13.5 をエックスサーバーに手動でインストールする方法を解説します。 EC-CUBE 3系 のインストールは過去記事「画像たくさん、一番やさしいEC-CUBE3のインストール方法」をご参照くださいなお、EC-CUBE は 2018年9月末に 4系がリリースされる予定ですが、私は当面、2系以外使わない予定です。EC-CUBE 2系のススメエックスサーバーの自動インストールは EC-CUBE3 ですが、EC-CUBE2系はサポートが継続されることが決まったため、まだまだ現役です。EC-CUBE3より WordPress ...

無料でできる!EC-CUBE 2.13 系 レスポンシブ化の手順

GitHub からダウンロード

テンプレートはこちらからダウンロードできます。

適当な場所にいったん保存し、解凍してください。

FTP で 該当フォルダをアップロード

解凍後の「eccube-bootstrap-master」フォルダ内は以下のようになっています。

「data/smarty/templates」内の「bootstrap」フォルダを、フォルダごと FTP で data/smarty/templates へアップロードします。

また、「html/user_data/packages」内の「bootstrap」フォルダを、フォルダごと FTP で html/user_data/packages 内へアップロードし、アップロードした方の 「sql」フォルダは必要ないので、中のファイルも含めてフォルダごと削除します。

sql フォルダの中のファイルは後で使うのでとっておいてください。

アップロード後は、次のようなファイル構成になります。

データベースにテンプレートとブロックを登録する

オーナーズストアからダウンロードするテンプレートはインストールすると自動でデータベースに登録してくれるのですが、今回は手動で登録しなければなりません。

この作業は失敗すると取り返しのつかなくなることもありますので、データベースのバックアップをとったうえで、慎重に操作してください。万一の場合でも責任は負いかねますので自己責任でお願いします m(_ _)m

以下は、エックスサーバーの場合の手順になります。

エックスサーバーのサーバーパネルにログインし、データベース内の phpmyadmin をクリックします。

「旧mySQL5.5」と「旧mySQL 5.0」がありますが、迷ったら、「旧mySQL 5.5」の方をクリックしましょう。

EC-CUBE をずいぶん前にインストールしたなぁという方は、「旧mySQL 5.0」かもしれません。

EC-CUBE 2.13系をインストールしたときに設定した「データベースユーザー」アカウントとパスワードを求められますので入力します。

忘れてしまった方は、インストール先の data/config/config.php に保存されていますので、FTP でつないでちらっと見てみてください。

左サイドから EC-CUBE 2.13系をセットアップしたデータベース名を選びます。選んだら、上のタブの中から「SQL」をクリックします。

次の SQL文を入力して、実行します。

先ほどダウンロードした「eccube-bootstrap-master/html/user_data/packages/bootstrap/sql/」フォルダの中にある「update_bloc.sql」をメモ帳などで開き、全てを範囲選択してコピーします。

phpmyadmin の SQLタブのテキストエリアに流し込み、実行ボタンをクリックします。

※実行すると、今までのデザインは全て削除されますので、ご注意ください。

データベースの操作は以上です。

次に、EC-CUBE の管理画面にログインし、メニューから「システム設定」-「パラメータ設定」を選びます。

「TEMPLATE_NAME」を「bootstrap」に変更して保存します。 下の方にありますが、探せないときはブラウザの検索メニューで「TEMPLATE_NAME」を検索すると良いです。

最後に、今回導入したテーマを、レスポンシブテーマとして使うために、スマホのときにテンプレートが切り替わらないように、「data/class/SC_Display.php」を修正します。

以下は、バージョン 2.13.1 の場合で、151目付近。バージョンによって多少違うかも。

 

以上で終了です。 サイトを表示してみましょう。ドキドキ。

無事できていたら、次のような画面になります。

レスポンシブになっているかどうかは、ブラウザを左右方向にドラッグして縮めていくと分かりますよー。

ハンバーガーメニューもありますね。素晴らしいです!!

それでは、皆様の成功を祈ります!