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

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

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

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

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

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

참고: