요즘 나오는 대부분의 워드프레스 테마는 반응형으로 나오기 때문에 모바일 기기와 태블릿 기기를 위해 별도의 작업을 해 줄 필요가 없습니다. 모바일 기기에 대한 레이아웃을 변경하려면 CSS의 미디어 쿼리 기능을 사용할 수 있습니다.
모바일 기기일 경우 모바일 버전용 페이지로 이동시키는 방법
header.php 파일에 코드 추가하기
또 다른 방법으로, 모바일 기기용으로 별도의 페이지를 만들어 PC와 모바일 기기에 대하여 별도의 페이지로 이동시키고 싶은 경우가 있을 수 있습니다. 이 경우 사용할 수 있는 워드프레스 내장 함수가 wp_is_mobile()입니다.
가령 mobile이라는 페이지를 하나 만들어서 모바일 기기일 경우 이 페이지로 이동(리디렉션)시키는 방법을 생각해볼 수 있습니다. 이 경우 다음과 같은 코드를 header.php 파일의 제일 위에 위치시키면 됩니다.
// 홈페이지와 전면 페이지에 모바일 기기가 접속할 경우 http://www.example.com/mobile 페이지로 리디렉션시키기
<?php
if ( wp_is_mobile() && (is_home() || Is_front_page()) ) {
$url = home_url( 'mobile', 'relative' );
wp_redirect( $url);
exit;
}
?>
위의 코드를 추가하면 전면 페이지이거나 홈페이지에 모바일 기기로 접속하면 http://user_site_url/mobile 페이지로 이동(리다이렉션)합니다. wp_redirect 대신 header('Location: http://user_site_url/mobile');을 사용해도 됩니다. wp_redirect에 대한 자세한 내용은 여기를 참고해보시기 바랍니다.
wp_print_scripts 액션 사용하기
참고로 wp_head 후크(참고)를 사용하면 테마 소스 파일을 편집하지 않고 함수 파일에 직접 추가할 수 있습니다. wp_is_mobile() 함수는 wp_head 액션에서는 제대로 작동하지 않습니다. 이 경우 wp_print_scripts 후크를 추가하면 문제가 해결되네요(참고). wp_print_scripts 후크에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
// 워드프레스 전면 페이지(홈페이지)에 모바일 기기가 접속할 경우 http://www.example.com/mobile 페이지로 리디렉션시키기
// Redirect to its mobile page when users access the front page or homepage using mobile devices in WordPress
function deque_my_scripts () {
if (is_home() || is_front_page()) {
$url = home_url( 'mobile', 'relative' );
wp_redirect( $url);
exit;
}
}
if (wp_is_mobile())
{
add_action('wp_print_scripts','deque_my_scripts');
}
이와 같이 wp_is_mobile() 함수를 사용하면 별도의 라이브러리 없이 모바일 기기에 하여 수월하게 원하는 URL로 리디렉션시킬 수 있습니다. 물론 wp_redirect 대신 header('Location: http://www.example.com/mobile'); 형식을 사용해도 됩니다.
wp_is_mobile() 함수는 모바일 기기와 태블릿 기기를 구분하지 않습니다. 그리고 어떤 글에서는 이 함수를 사용하지 않는 것이 좋다고 나와 있네요. 스마트폰과 태블릿 기기를 구분해야 하는 경우 다음 글에서 소개하는 플러그인을 사용할 수 있스빈다.
잘 안 되는 경우, 다음 두 글에 나와 있는 방법을 사용해보시기 바랍니다.
- Mobile device detection in PHP (PHP에서 모바일 기기 감지)
- Simplest way to detect a mobile device (모바일 장치를 감지하는 가장 간단한 방법)
다양한 장치를 감지하는 조건 함수를 제공하는 워드프레스 플러그인(WordPress plugin that provides conditional functions for detecting a variety of devices):
https://github.com/scottsweb/mobble
카페24에서 모바일 m폴더 참고(m 서브도메인 관련):
https://www.technote.co.kr/php/technote1/board.php?board=memberqna&command=body&no=29394
혹시 멀티사이트도 모바일을 리디렉션 할 수 있는 방법을 알 수 있을까요?
찾아보는데 하나의 사이트를 모바일 리디렉션 하는 방법은 나오는데,
멀티사이트는 어떻게 리디렉션 시키는지 안나오네요ㅠㅠ
방법을 아신다면 답글 부탁드립니다.
안녕하세요?
멀티사이트를 지원하는 플러그인을 사용해보시면 어떨까요?
https://1.envato.market/gerWA
무료 플러그인으로는 Equivalent Mobile Redirect라는 플러그인이 있네요.
https://wordpress.org/plugins/equivalent-mobile-redirect/
아 플러그인 말고는 다른 방법이 없는걸까요ㅠㅠ?
header.php 파일로는 멀티사이트가 아닌 하나의 사이트로만 모바일 리디렉션이 되는건가요?
우선 위의 코드는 무시하시고요, https://www.thewordcracker.com/intermediate/%EC%95%84%EC%9D%B4%ED%8F%B0%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B8%B0%EA%B8%B0%EB%A5%BC-%EA%B0%90%EC%A7%80%ED%95%98%EC%97%AC-%EB%A6%AC%EB%94%94%EB%A0%89%EC%85%98%EC%8B%9C%ED%82%A4%EA%B8%B0/ 페이지를 참고하시기 바랍니다.
멀티 사이트에서 정확하게 어떤 부분이 안 되는 것인가요?
제가 멀티사이트를 운영하고 있지 않기 때문에 제대로 확인을 해드릴 수가 없네요...
현재 사이트의 URL을 체크하는 문제라면 http://wordpress.stackexchange.com/questions/114742/multisite-get-home-url-getting-url-for-current-site 글을 참고해보시기 바랍니다.
빠르고 친절한 답글 정말 감사드립니다ㅠㅠ
제가 고민하고 있는 건 사실 전에 사이트를 만들어놓으셨던 분이
멀티사이트로 설정해놓으시고, 모바일도 모바일전용페이지로 리디렉션 되도록 설정해놓으셨더라구요.
그래서 abcdef.com 을 모바일에서 접속하면 자동으로 abcdef.com/mobile 로 리디렉션 되도록 되어있어요.
그런데 지금은 모바일/pc를 연동시키고 싶어서 리디렉션 되는걸 삭제하고 싶은데- 어디서 코드를 삭제해야할지 모르겠네요 ㅠㅠ
그런데 이게 멀티사이트다 보니,
한 사이트만 변경해야하는게 아니라 나머지사이트들도 다 변경해야하는데
header.php 에서는 해당 소스를 찾아볼 수 가 없어서
혹시 header.php 파일이 아닌 다른 파일에도 리디렉션 소스를 설정할 수 있는건지 궁금해서 글을 올렸습니다.
계속 파일마다 찾아보고있는데 나오지 않네요ㅠㅠ
잘 아시겠지만, 어떤 식으로 모바일로 리디렉션되도록 설정했는지를 확인해야 그 부분을 삭제할 수 있을 것 같습니다.
이전에 사이트를 만드신 분에게 연락하여 그 부분을 문의해보시면 어떨까요?
정 안 되면 https://www.thewordcracker.com/support-system/ 페이지에서 서비스(유료)를 의뢰하실 수 있습니다.ㅎㅎ
네 감사합니다 !
문제를 잘 해결하시기 바랍니다. 즐거운 하루 되세요^^
문제해결했습니다 !
.htaccess 파일에 리디렉션 되도록 소스가 설정되어있더라구요 -
멀티사이트는 .htaccess 파일에서 모바일페이지로 리디렉션 소스를 삽입하는건가봐요 -
리디렉션 소스들이 어떤 부분이 무엇을 말하고, 어떤 부분을 넣어야 적용이 되고 이런것들이 자세하게 이해가 가진않지만, 일단 문제는 해결되었습니다.
친절한 답변 감사했습니다: )
해결되셨다니 정말 다행이네요.
어제 조금 생각해보았는데, 이런 경우 1) 플러그인으로 리디렉션 설정, 2) 테마 파일에 코드 삽입, 3) .htaccess로 제어 등이 가능하지 않을까 생각되었습니다. (일일이 체크하는 것이 쉽지 않지만, 하나씩 체크하다 보면, 그리고 지속적으로 문제에 집중하다 보면 언제가 해결되는 것이 문제의 속성 같습니다.ㅎㅎ)
즐거운 금요일 되시고, 주말과 휴일도 잘 보내시기 바랍니다.
wp_is_mobile() 함수는 사용하지 않는 것이 바람직하다고 합니다. 대신 https://www.thewordcracker.com/intermediate/%EC%95%84%EC%9D%B4%ED%8F%B0%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B8%B0%EA%B8%B0%EB%A5%BC-%EA%B0%90%EC%A7%80%ED%95%98%EC%97%AC-%EB%A6%AC%EB%94%94%EB%A0%89%EC%85%98%EC%8B%9C%ED%82%A4%EA%B8%B0/ 글을 참고해보시기 바랍니다.