메뉴얼

EC-CUBE 2.x

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

by TheVOS posted Apr 10, 2019
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
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 [ko]댓글 


List of Articles
카테고리 아니오 제목 날짜 조회 수
팁 & 노하우 나눔 39 페이스북위젯 삽입하기 file 2018.12.15 47
클래스 38 클래스의 사용 2019.10.03 93
클래스 37 클래스의 구조 2019.10.03 35
클래스 36 클래스와 객체의 기초 file 2019.10.03 56
메일 서비스 35 메일 사용자 설명서 2019.03.29 61
팁 & 노하우 나눔 34 구글 캘린더 합치기 1 file 2018.12.12 427
EC-CUBE 3系 33 관리 화면의 사이드 메뉴에 항목 추가하는 방법 file 2019.11.11 165
EC-CUBE 4系 32 管理機能一覧 2020.11.12 30
EC-CUBE 3.x 31 新規作成したページURLから「user_data」を消す方法とURLを出力するテンプレートタグ file 2019.04.10 863
EC-CUBE 2.x 30 商品数や階層に関係なく全カテゴリーを表示させる方法 file 2019.04.10 260
EC-CUBE 2.x 29 商品名などで長くなったテキストを省略する方法 file 2019.04.10 45
EC-CUBE 2.x 28 商品ステータスを変更・追加する方法 file 2019.04.10 62
EC-CUBE 2系 27 単体テストガイドライン 2019.09.28 86
EC-CUBE 2系 26 リファクタリングガイドライン 2019.09.28 153
EC-CUBE 4系 25 フロント機能一覧 2020.11.12 33
EC-CUBE 3.x 24 デフォルトのtitleを任意のものに変更する方法 file 2019.04.10 228
EC-CUBE 2.x » サイトデザインをPCで統一させる方法 file 2019.04.10 52
EC-CUBE 2系 22 イベントセット販売プラグインマニュアル file 2019.11.07 131
EC-CUBE 3.x 21 titleの並びや区切り記号を変更する方法 file 2019.04.10 96
메뉴얼 20 THEVOS Youtube BOARD SKIN 사용 설명 2018.11.11 116
Board Pagination Prev 1 2 Next
/ 2