메뉴얼

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]댓글 


  1. EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까?

    EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까?

    설치 한 디렉토리에 .env라는 파일이 있습니다. 거기에 DATABASE_URL라는 항목이 있습니다. 「 DATABASE_URL = mysql://사용자 이름:암호@호스트 이름/데이터베이스 이름 」 형식으로 저장되어 있습니다.
    Date2019.11.14 CategoryEC-CUBE 4.x Views388
    Read More
  2. EC-CUBE에서 모든 페이지에서 로그인 체크하기

    EC-CUBE에서 모든 페이지에서 로그인 체크하기

    EC-CUBE는 Ver 2.12.6 환경입니다. 지정 방법 EC-CUBE는 로그인 판정 결과를 tpl_login라는 변수로 설정하고 일부 페이지가 기본적으로 존재합니다. 예를 들어, 아래와 같이 소스를 grep하면 tpl_login에 값을 설정하는 부분을 찾을 수 있습니다. 1234567 $ gr...
    Date2019.11.11 CategoryEC-CUBE 2.x Views449
    Read More
  3. EC CUBEで商品ごとに支払い方法を簡単に分ける

    EC CUBEで支払い方法を分けるのに大きなカスタマイズが必要だと思っていましたが、以下の設定で簡単に振り分けが出来ましたのでご紹介します。まずEC CUBE管理画面にログインし、システムデータ>マスターデータに進みます。マスターデータから「mtb_product_t...
    Date2019.10.28 CategoryEC-CUBE 2.x Views665
    Read More
  4. EC-CUBE:SC_FormParamクラスによるパラメーターチェック方法

    EC-CUBE:SC_FormParamクラスによるパラメーターチェック方法

    EC-CUBE에 대한 인터넷상에서 아직 정보가 많이 부족합니다. 예를 들어 플러그인 작성에 원래 폼을 만들어도 SC_FormParam 클래스 를 사용하여 어떻게 확인하면 좋은 것인지 조사해도 좀처럼 나오지 않습니다. 그래서 내가 독자적으로 조사한 속에서 조금씩 정...
    Date2019.10.03 CategoryEC-CUBE 2.x Views119
    Read More
  5. デフォルトのtitleを任意のものに変更する方法

    EC-CUBE 3.Xでデフォルトでtitle部分に表示されるものを任意で削除・変更したり、あらかじめ用意されているページのページ名(テンプレート名)を任意のものに変更する方法です。 ※紹介している内容はEC-CUBEのVersion 3.0.10で動作確認したもので、デフォルト...
    Date2019.04.10 CategoryEC-CUBE 3.x Views228
    Read More
  6. titleの並びや区切り記号を変更する方法

    EC-CUBE 3.Xは、デフォルトのテンプレートだとtitle表示が「ショップ名 / ページ名」という形になっていますが、それを任意の並びにしたり区切り記号を変更したりする方法です。 ※紹介している内容はEC-CUBEのVersion 3.0.10で動作確認したもので、デフォルト...
    Date2019.04.10 CategoryEC-CUBE 3.x Views97
    Read More
  7. 商品数や階層に関係なく全カテゴリーを表示させる方法

    EC-CUBEの備忘録。デフォルトのテンプレートだとサイドに表示されている商品カテゴリーですが、商品登録がない場合はカテゴリー名が表示されず、商品が登録されていたとしても親カテゴリーのページでなければ子カテゴリー名は表示されないようになっています。...
    Date2019.04.10 CategoryEC-CUBE 2.x Views260
    Read More
  8. 商品名などで長くなったテキストを省略する方法

    引き続きEC-CUBEの備忘録です。商品のタイトルや紹介文が指定した文字数以上になったときに「...」などを表示して、見栄えを揃える方法です。jQueryを使うとかCSSのtext-overflowなんかでも同じ事はできますが、Smartyを使って実装するものになります。 ※EC-CU...
    Date2019.04.10 CategoryEC-CUBE 2.x Views45
    Read More
  9. サイトデザインをPCで統一させる方法

    EC-CUBEはもともとスマートフォンやモバイル用のテンプレートが用意されており、それぞれのデバイスで閲覧すると各テンプレートに振り分けらるようになっているのですが、それを無効にする方法です。この機能自体は良いと思うのですが、例えばモバイルまで手が...
    Date2019.04.10 CategoryEC-CUBE 2.x Views53
    Read More
  10. 商品ステータスを変更・追加する方法

    EC-CUBE自体をまだあまり触ったこともなければ、そんなに頻繁に使わないのもあって、しばらくすると簡単なことでもいろいろと忘れてしまうので備忘録。デフォルトだと「NEW」とか「残りわずか」などで登録されている商品ステータスを任意のものに変更・追加す...
    Date2019.04.10 CategoryEC-CUBE 2.x Views62
    Read More
  11. 新規作成したページURLから「user_data」を消す方法とURLを出力するテンプレートタグ

    EC-CUBE 3.Xではもともと用意されているページを利用するだけでなくオリジナルで新規ページを追加することもできるのですが、その場合作成したページのURLに「user_data」が付与されています。この「user_data」という部分をURLから消す方法とそれに関連して新...
    Date2019.04.10 CategoryEC-CUBE 3.x Views866
    Read More
  12. 페이스북위젯 삽입하기

    페이스북 위젯을 삽입하는 방법을 알아보겠습니다. 1. 페이스북 위젯을 설정하는 곳으로 갑니다. ( https://developers.facebook.com/docs/plugins/page-plugin ) 2. 원하는 위젯모양을 만듭니다. 밑의 이미지를 보시면 쉽게 이해가 되실꺼예요. 3. 설정이 끝...
    Date2018.12.15 Category팁 & 노하우 나눔 Views49
    Read More
  13. 구글 캘린더 합치기

    구글 캘린더로 일정관리를 하는 사람이라면 한번쯤 여러개로 나눠진 캘린더를 하나로 합쳐야 할 때가 생깁니다. 저같은 경우는 처음에 일정관리에 심취해서 캘린더 수를 아주 자세하게 여러개로 나눠 놨었죠. 그러나 최근에서야 단순함의 미학과 효율성에 눈을...
    Date2018.12.12 Category팁 & 노하우 나눔 Views427
    Read More
Board Pagination Prev 1 Next
/ 1