[워드프레스] PC 버전과 모바일 버전을 다르게 만들기

최근에 나오는 대부분의 워드프레스(WordPress) 테마는 반응형(Responsive)으로 나오기 때문에 모바일 기기에서는 모바일 기기에 맞게 레이아웃이 변합니다. 미디어 쿼리(Media Query)를 통해 화면 해상도 크기에 맞게 레이아웃이 설정되어 있습니다.

사이트의 첫 페이지(전면 페이지)에는 다양한 기능이 들어갈 수 있고 레이아웃이 복잡해질 수 있습니다. 그리고 테마 자체는 반응형을 지원하지만 전면 페이지에 사용된 특정 기능이나 슬라이더 등으로 인해 반응형으로 동작하지 않을 수도 있습니다.

이 경우 모바일용 전면 페이지를 별도로 만들어서 모바일 기기로 접속할 경우 사용 중인 테마 대신 모바일용 페이지로 이동(리다이렉션)하기를 원할 수 있습니다. 이 경우 페이지 > 새 페이지 추가를 통해 모바일용 페이지로 새로운 페이지를 하나 만들도록 합니다. 예를 들어, 페이지 슬러그의 이름이 [pcode]mobile[/pcode]인 경우, 다음 코드를 header.php 파일 맨 위에 추가하도록 합니다.

<?php
if ( wp_is_mobile() && (is_home() || is_front_page()) ) {
$url = home_url( 'mobile', 'relative' );
wp_redirect( $url);
exit;
}
?>

[pcode]wp_is_mobile()[/pcode] 함수는 사용자가 모바일 기기를 사용하여 접속하는지를 체크합니다(WordPress Codex 페이지 참조). [pcode]wp_is_mobile()[/pcode] 대신 다음 조건만을 이용하는 것도 괜찮을 것 같습니다. 이 경우 [pcode]wp_head[/pcode] 후크를 사용하여 함수 파일에 곧바로 추가가 가능할 것입니다.

if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
 //Mobile browser do stuff here 
 } else {
 //Do stuff here
 }
// Source: stackoverflow

또는 다음과 같은 스크립트도 가능할 것 같습니다.

function detectmob() {
if(window.innerWidth <= 800 || window.innerHeight <= 600) {
return true;
} else {
return false;
}
}

if (detectmob()){
top.location.href="mobile";
}
// Source: stackoverflow

어떤 글에서는 이 속임수(Trap)이므로 사용하지 말 것을 권장하기도 하네요. 사용해보시고 생각처럼 작동하지 않을 경우에는 javascript나 다른 코드를 사용해보시기 바랍니다.

데스크톱(PC)용 테마와 모바일용 테마를 별도로 지정하고 싶은 경우 Any Mobile Theme Switcher와 같은 플러그인을 사용할 수 있습니다.

Any Mobile Theme Switcher

이 플러그인을 설치하면 아래와 그림과 같이 iPHone/iPad/Android/Blackberry/Windows Mobile 기기 등 다양한 기기 또는 브라우저에 따라 모바일용 테마를 PC용 테마와 다르게 지정할 수 있습니다.

Any Mobile Theme Switcher Settings

참고:

관련 글

14 thoughts on “[워드프레스] PC 버전과 모바일 버전을 다르게 만들기”

  1. 안녕하세요 우연히 좋은 글을 찾게 되어 도움을 받고 있습니다. 다름이 아니라 조언해주신대로 header.php에 추가 코드를 넣으려고 했지만 해당 파일을 못찾겠습니다. 혹시 테마마다 header.php의 명칭이나 구조가 다른가요? 제 웹사이트에는 wp-blog-header.php라는 파일이 있습니다. 거기에 말씀해주신 코드를 넣어봤지만 오류가 납니다ㅠㅠ

    응답

    • 안녕하세요?

      테마 폴더에서 찾아보시기 바랍니다.

      wp-content/themes/ 폴더 아래에서 해당 테마 폴더를 찾을 수 있습니다.
      이 작업을 하기 전에 먼저 차일드 테마를 설치하시기 바랍니다.

      다음 글을 참고해보세요.

      https://cafe.naver.com/wphomepage/124

      네이버 카페에 가입하여 워드프레스 관련 정보를 공유하고 궁금한 점을 질문하실 수 있습니다.

      응답

  2. 안녕하세요. 좋은 내용 감사합니다.
    최적화를 위해 메인페이지는 header.php 수정을 통해 모바일 진입에 성공하였습니다.
    하지만 헤드 메뉴에 다른 페이지는 기존의 pc버전에서 연결 된 페이지로 연결됩니다.

    각각 메뉴마다 모바일 버전 페이지를 따로 만들어서 연결을 어떻게 시키나요?
    가령 메뉴중에 contact페이지가 있는데 모바일 버전 메인페이지에서 메뉴에 있는 contact를 누르면 모바일버전 contact page로 연결시키고 싶습니다.

    응답

    • 안녕하세요?

      블로그를 방문해주셔서 감사합니다.

      우선 아바다 테마를 사용하다가 Divi로 변경하면서 아바다 테마의 Fusion Builder 코드가 남아서 글이 지저분하게 보였네요. 우선은 이 글에서만 퓨전 빌더 코드를 모두 삭제했습니다.ㅎㅎ

      위의 방법은 별로 좋은 방법 같지 않습니다.
      wp_is_mobile() 함수 설명 페이지를 보면

      You should realize that this does not detect a mobile phone specifically, as a tablet is considered a mobile device. Check the Plugins area for several helpful alternatives.

      태블릿을 모바일 기기로 인식한다고 하므로 플러그인을 찾아보라고 권고하고 있네요.

      말씀하신 증상이 나타나는 이유는 (is_home() || is_front_page()) 부분 때문입니다. 이 부분을 삭제하시면 모바일 기기일 때에는 무조건 모바일 홈으로 이동할 것입니다. 위의 코드를 사용하는 경우에는 이 방법이 최선이 아닌가 생각됩니다. 정교하게 제어하려면 모바일 기기를 감지하여 리디렉션시켜주는 플러그인이 있는지 확인해보시면 좋을 듯 합니다.

      참고로 동일한 콘텐츠로 PC용과 모바일용 사이트를 나누는 것은 SEO적인 측면에서는 별로 좋은 생각 같지 않습니다. 가급적 테마의 반응형을 이용하는 것이 좋을 듯 합니다.

      응답

  3. 안녕하세요.

    제가 궁금해 한 내용을 구글링하다가 찾게 되었습니다.

    제가 궁금한 점은

    1) 데스크탑 버전이 FULL WIDTH 로 되어 있는데 모바일에서는 반응형으로 되면 이미지가 잘리거나 전체 비율을 유지하면 높이가 줄어드는 현상이 발생합니다. 그래서 데스크탑을 모바일을 고려해서 디자인을 하는 것이 최선인가 하는 점입니다.

    2) ANY MOBILE THEME SWITCHER 플러그인은 저에게 맞는 플러그인 처럼 보이긴 합니다. 아직 사용은 안해봤구요. 사용 이유는 데스크탑에서 보여지는 메인이미지를 모바일에 맞게 다시 디자인하여 보여지게 하고 싶기 때문입니다. 이 플러그인을 사용하면 되는지요? 테마는 동일한 것으로 사용할텐데 데스크탑에 사용할 이미지와 모바일에 사용할 이미지를 다르게 하고 싶기 때문입니다. (반응형으로는 적절한 절충을 찾는것이 어려우므로)

    어떻게 하면 가장 좋을련지요?

    가장 좋은 예는 29cm.co.kr 입니다.

    데스크탑과 모바일에서 사용하는 이미지를 다르게 하고 있습니다.

    감사합니다

    설영광 드림

    응답

  4. 안녕하세요.
    친절한 설명글 감사합니다.
    그런데 멀티사이트경우에는 PC와 모바일을 어떻게 나누나요?

    header.php 하나로 멀티사이트를 각각 변경할 수 있나요?
    아니면, 멀티사이트마다 header.php 각각 있어서 각각 변경해야하나요?

    설명 부탁드립니다ㅠㅠ

    응답

  5. 좋은 정보 고맙습니다. 저도 바로 윗분처럼 pc버전 그대로 모바일에서 보여주길 원하고 있습니다. 한데…
    “모바일 버전과 pc 버전을 어떻게 분리하여 구축했는지”를 알려면 어떻게 해야 하나요.
    혹시… 이런 걸 대행해주는 곳도 있는지 알고 계시면 답변 부탁합니다.

    응답

  6. 안녕하세요!

    모바일과 PC버전을 따로 구축하는 포스팅을 보고 들어오게 되었습니다.

    그런데 그 반대로 pc버전,mobile버전 따로 구축되어 있는것을 원래대로 복구시켜 놓을려면 어떻게 해야하나요?

    지금은 PC에서 보이는 것 따로 모바일에서 보이는 것 따로입니다.
    이제는 모바일을 따로 구축하지않고, PC에서 보이는 그대로 보이되 반응형으로 줄어들었으면 좋겠습니다.

    혹시 방법을 알려주실 수 있나요?

    응답

    • 댓글 감사합니다. 모바일 버전과 PC 버전을 어떻게 분리하여 구축했는지를 파악하신 후에 모바일 버전만 해제시켜주시면 될 것 같습니다.
      구체적으로 어떤 식으로 구축했는지 알지 못하기 때문에 더 정확한 답변을 드릴 수 없는 점 양해바랍니다.

      응답

Leave a Comment