EC-CUBEを楽してデザイン。bootstrap3導入方法
※インストールはver.2.13以上が推奨されています。
テンプレートのダウンロード
ダウンロードはこちらから。
GitHbuからダウンロードになります。
初めての人はわかりづらいと思いますが、ページの下の方にあるダウンロードという記述
eccube-on-bootstrap3.tar.gzというリンクをクリックしましょう。
※右のDwonloadZipというボタンからZIPファイルをダウンロードしても、インストールできません。
テンプレートのインストール方法
インストールは、上の画像の通り
デザイン管理>PC>テンプレート追加へ
テンプレートコード:適当に001とでもしておきましょう。
テンプレート名:bootstrap3とでもしておきましょう。
テンプレートファイル:eccube-on-bootstrap3.tar.gzを選択。
この内容で登録するボタンを押せば、アップロードは完了。
インストールしても、テンプレートを反映させないと意味がありません。
デザイン管理>PC>テンプレート設定へ
先ほどインストールしたテンプレート名を選択し、この内容で登録するボタンを押します。
で、TOPページを確認すると、デザインが出来上がっております。
レスポンシブルデザインの利用方法
このテンプレート、PC専用のようで、スマートフォンには反映されておりません。
しかしながら、今はやりのレスポンシブルレイアウトには対応しておるようなので、利用しない手もないです。
一つコードを追加して、他のデバイスを無効化してしまいます。
/data/class_extends/SC_Display_Ex.php
require_once CLASS_REALDIR . 'SC_Display.php'; class SC_Display_Ex extends SC_Display{ public static function detectDevice($reset = FALSE) { return DEVICE_TYPE_PC; } }
※ガラケーも無効になってしまいますので、ご注意ください。
以上で、完了になります。
総括
ECCUBE3の公開が間近となっていますが、発表をみたところ、管理画面だけデザインが変更されていたといった感じで、メイン部分は自分で何とかしないといけないようです。
といっても、盛り上がりに欠けるテンプレート販売において、安くもないものを購入するには、躊躇する。
そんな人には、まずはこれを利用したうえで、デザインをカスタマイズしてみるのも悪くはないと思います。
bootstrapの流れもしばらくは続くようですし、これで慣れるというのもいいかもしれません。
以上です。
それでは。