메뉴얼

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


  • Q: [팁 & 노하우 나눔] 페이스북위젯 삽입하기 2018.12.15
    A:

    페이스북 위젯을 삽입하는 방법을 알아보겠습니다.

     

    1. 페이스북 위젯을 설정하는 곳으로 갑니다. ( https://developers.facebook.com/docs/plugins/page-plugin )

     

    2. 원하는 위젯모양을 만듭니다. 밑의 이미지를 보시면 쉽게 이해가 되실꺼예요.

     

    1.jpg

     

    3. 설정이 끝나면 하단 Get Code 를 누릅니다.

     

    4. IFRAME 코드를 복사하여 원하시는 곳에 삽입하면 완료!! 

     

    2.jpg

     


    Facebook [ko]댓글 

  • Q: [팁 & 노하우 나눔] 구글 캘린더 합치기 2018.12.12
    A:

    구글 캘린더로 일정관리를 하는 사람이라면 한번쯤 여러개로 나눠진 캘린더를 하나로 합쳐야 할 때가 생깁니다.

    저같은 경우는 처음에 일정관리에 심취해서 캘린더 수를 아주 자세하게 여러개로 나눠 놨었죠.

    그러나 최근에서야 단순함의 미학과 효율성에 눈을 뜨게 되었고, 10개가량 되던 캘린더들을 합쳤습니다. 딱 세개로.

    자 그럼,


    구글 캘린더 합치는 방법을 알아 봅시다.


    STEP1 캘린더 내보내기, Export


    1) 내보내고 싶은 캘린더 우측 삼각형 메뉴를 내려서 "Calendar Settings" 클릭


    2) 캘린더설정에서 Export Calendar 클릭하면,



    3) 캘린더이름_알수없는문자들@group.calendar.google.com.ics 라는 파일이 생성됩니다.



    STEP2 캘린더 읽어오기, Import


    1) 캘린더설정에서 Import Calendar 클릭하고,

    2) ics파일을 선택,

    3) Import 클릭하면


    4) 이벤트 갯수만큼 읽어오기 성공했다는 문구가 뜨면 끝.



    STEP3 캘린더 지우기, Unsubscribe


    1) 캘린더설정에서 Unsubscribe 클릭하면 없애고 싶은 캘린더가 사라집니다.

    이 없앤 캘린더를 복구하는 방법도 있습니다만 이 글에서는 다루지 않도록 할게요.



    여기까지 구글 캘린더 합치는 방법을 알아 봤습니다.

    Facebook [ko]댓글 

Board Pagination Prev 1 Next
/ 1