워드프레스 모바일 기기용 함수

[워드프레스] 모바일 기기일 경우 모바일 버전용 페이지로 이동시키기

워드프레스 모바일 기기용 함수

요즘 나오는 대부분의 워드프레스 테마는 반응형으로 나오기 때문에 모바일 기기와 태블릿 기기를 위해 별도의 작업을 해 줄 필요가 없습니다. 모바일 기기에 대한 레이아웃을 변경하려면 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’); 형식을 사용해도 됩니다.

Update: wp_is_mobile() 함수는 모바일 기기와 태블릿 기기를 구분하지 않습니다. 그리고 어떤 글에서는 이 함수를 사용하지 않는 것이 좋다고 나와 있네요. 가급적 이 글에 나와 있는 함수를 사용해보시기 바랍니다.

잘 안 되는 경우, 다음 두 글에 나와 있는 방법을 사용해보시기 바랍니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.