EC-CUBE:サイトデザインをPCで統一させる方法

  • Posted on
  • Category : EC-CUBE
EC-CUBE:サイトデザインをPCで統一させる方法

EC-CUBEはもともとスマートフォンやモバイル用のテンプレートが用意されており、それぞれのデバイスで閲覧すると各テンプレートに振り分けらるようになっているのですが、それを無効にする方法です。この機能自体は良いと思うのですが、例えばモバイルまで手が回らないとか、単純に別テンプレートにする必要がないという時に。

※EC-CUBEのバージョンはVersion 2.12.3になります。

iPhoneでの閲覧時

画像はiPhoneでのサイト閲覧時をキャプチャしたもので、このように専用のテンプレートで表示されています。
スマートフォンっぽい感じなのは良いですが、PCのデザインの雰囲気とかなり離れている場合は微妙です…。
また、デフォルトでは思いっきりEC-CUBEのロゴが表示されていたりもします。(ここらへんはちゃちゃっとスマートフォン用のテンプレートを直せば良い話ですが)

一番好ましいのはもちろんスマートフォンやモバイルのテンプレートもしっかりカスタマイズするのが好ましいですが、納期や予算の問題などでしない(できない)場合は、いっそのこと全てPC用のテンプレートにするのも手だと思います。

今回は手っ取り早くできる方法で、具体的には予め設定されているユーザーエージェントを切るという方法になります。
「data/class/」内にあるSC_Display.phpというファイルの133行目あたりから以下のような記述があります。

SC_Display.php

/**
 * 端末種別を判別する。
 *
 * SC_Display::MOBILE = ガラケー = 1
 * SC_Display::SMARTPHONE = スマホ = 2
 * SC_Display::PC = PC = 10
 *
 * @static
 * @param   $reset  boolean
 * @return integer 端末種別ID
 */
public static function detectDevice($reset = FALSE) {
    if (is_null(SC_Display_Ex::$device) || $reset) {
        $nu = new Net_UserAgent_Mobile();
        $su = new SC_SmartphoneUserAgent_Ex();
        if ($nu->isMobile()) {
            SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
        } elseif ($su->isSmartphone()) {
            SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
        } else {
            SC_Display_Ex::$device = DEVICE_TYPE_PC;
        }
    }
    return SC_Display_Ex::$device;
}

上記ソースの一部を下記のように一部コメントアウトし、ユーザーエージェントを無効にします。
これにより全てのデバイスで閲覧時にはPCのデザインで表示されるようになります。

SC_Display.php

/**
 * 端末種別を判別する。
 *
 * SC_Display::MOBILE = ガラケー = 1
 * SC_Display::SMARTPHONE = スマホ = 2
 * SC_Display::PC = PC = 10
 *
 * @static
 * @param   $reset  boolean
 * @return integer 端末種別ID
 */
public static function detectDevice($reset = FALSE) {
    if (is_null(SC_Display_Ex::$device) || $reset) {
        $nu = new Net_UserAgent_Mobile();
        $su = new SC_SmartphoneUserAgent_Ex();
//        if ($nu->isMobile()) {
//            SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
//        } elseif ($su->isSmartphone()) {
//            SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
//        } else {
            SC_Display_Ex::$device = DEVICE_TYPE_PC;
//        }
    }
    return SC_Display_Ex::$device;
}

変更・アップロード後に再度スマートフォンやモバイルからアクセスすれば、PCのテンプレートで表示されるのが確認できます。
上記ではスマートフォンとモバイルの両方のユーザーエージェントを無効にしていますが、モバイルはそのまま専用テンプレートで表示したいという場合は、スマートフォン部分のみ(DEVICE_TYPE_SMARTPHONE)をコメントアウトするなどしてください。

ちなみに、以下のようにして単純に条件分岐の記述を取っ払って全てDEVICE_TYPE_PCにする方法でもいけます。
ただ、確実に今後必要でない場合などはこの方法で良いですが、後々テンプレートを適応させる可能性が少しでもあるのであれば先程のコメントアウトを用いたほうがいいかと思います。

SC_Display.php

/**
 * 端末種別を判別する。
 *
 * SC_Display::MOBILE = ガラケー = 1
 * SC_Display::SMARTPHONE = スマホ = 2
 * SC_Display::PC = PC = 10
 *
 * @static
 * @param   $reset  boolean
 * @return integer 端末種別ID
 */
public static function detectDevice($reset = FALSE) {
    return DEVICE_TYPE_PC;
}

Back to Top

EC-CUBE:サイトデザインをPCで統一させる方法

EC-CUBE:サイトデザインをPCで統一させる方法

/ EC-CUBE

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。