EC-CUBE 2.x

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

by TheVOS posted Apr 10, 2019
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
Extra Form
原文出所 https://www.nxworld.net/cms/ec-no-mobile-template.html
EC-CUBE 2.X:サイトデザインを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;
}

Facebook [ja]コメント 


List of Articles
カテゴリー 番号 タイトル 日付 閲覧数
EC-CUBE 2系 39 2.13系 ソフトウェア要件 2019.10.11 63
CSS 38 CSS オブジェクトフィットプロパティ file 2019.12.04 55
CSS 37 Css 텍스트 외곽선 처리하기, Stroke 2019.11.28 115
EC-CUBE 2.x 36 EC CUBEで商品ごとに支払い方法を簡単に分ける file 2019.10.28 670
EC-CUBE 2系 35 EC-CUBE 2系でShift_JISに存在しない文字が含まれた受注データがあると、その受注内容が受注CSVからまるごと欠落する 2020.01.02 93
EC-CUBE 2系 34 EC-CUBE 2系でポート番号付で管理画面を動かす 2020.01.02 68
EC-CUBE 2系 33 EC-CUBE 2系で商品を沢山購入すると住所情報が欠落する 2020.01.02 86
EC-CUBE 2系 32 EC-CUBE 2系で商品情報をCSVで更新するとき関連商品情報が削除される 2020.01.02 107
EC-CUBE 2系 31 EC-CUBE 2系で注文を受けた商品の規格を後で削除すると、管理画面で受注内容を編集できなくなる 2020.01.02 139
EC-CUBE 2系 30 EC-CUBE 2系の「もっと見る」を簡潔に 2020.01.02 627
EC-CUBE 4.x 29 EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까? 2019.11.14 393
EC-CUBE運用マニュアル 28 EC-CUBE2.12 運用マニュアル file 2019.09.29 64
EC-CUBE 2系 27 EC-CUBE2.13カスタマイズ:新しいページを追加する file 2019.11.11 642
EC-CUBE 4系 26 EC-CUBE4系で管理画面に新規メニュー項目を追加する方法 file 2019.10.28 502
EC-CUBE 2.x 25 EC-CUBE:SC_FormParamクラスによるパラメーターチェック方法 2019.10.03 125
EC-CUBE 2系 24 EC-CUBEをインストールする file 2019.12.10 101
EC-CUBE 2系 23 EC-CUBE標準規約 2019.09.28 158
EC-CUBE 2.x 22 EC-CUBE에서 모든 페이지에서 로그인 체크하기 2019.11.11 457
EC-CUBE 2系 21 ECCUBE 2.13のインストール方法をスクリーンショット付きでわかりやすく徹底解説! file 2019.10.10 138
マニュアル 20 THEVOS Youtube BOARD SKIN 사용 설명 2018.11.11 119
Board Pagination Prev 1 2 Next
/ 2