[워드프레스] 모바일 버전에서 다른 전면 페이지 사용하기

전면 페이지(정적인 홈 페이지, 프런트 페이지)에 슬라이드나 그림이 많아서 로딩에 시간이 많이 걸리거나 모바일 버전에서는 어색하게 표시되는 경우 CSS로 숨기거나 조정하면 되겠지만, CSS로 숨기는 경우 해당 슬라이드 등은 그래도 로딩이 됩니다. 다만 페이지에 표시만 안 될 뿐입니다. 이런 경우 전면 페이지를 PC용과 모바일용을 따로 만들어 접속하는 기기를 체크하여 기기에 맞게 적절한 페이지를 표시하는 방법을 생각해볼 수 있습니다.

이 작업을 위해서는 여러 가지로 생각해볼 수 있습니다. wp_is_mobile() 함수 사용을 생각해볼 수 있지만 이 함수는 완벽하지 않고 사용을 자제하는 것이 좋다고 합니다.

이 경우에 Mobile-Detect라는 PHP 클래스를 사용할 수 있습니다. 이 링크에서 Mobile-Detect 파일을 다운로드하여 테마 폴더(가급적 차일드 테마 사용) 아래에 FTP를 통해 업로드합니다. 그리고 모바일용 페이지를 하나 만듭니다(예: http://www.example.com/mobile_home). 그런 다음 header.php 파일 맨 위에 다음 코드를 추가하도록 합니다.

if( is_front_page() ){

include_once('mobile-detect/Mobile_Detect.php');
$detect = new Mobile_Detect();

if ( $detect->isMobile() || $detect->isTablet() ) {
$redirect_url = 'http://example.com/mobile_home'; // 모바일용 페이지 경로
header('Location: ' . $redirect_url ); // Redirect the user
}
}
출처: stackoverflow

그러면 모바일 기기에서는 전면 페이지에서만 모바일용 페이지가 표시됩니다. 위의 코드를 다양하게 응용할 수 있습니다. 예를 들어, 모바일 기기에서는 개별 페이지나 다른 사이트로 리디렉션시키는 것도 가능할 것입니다. 하지만 위의 코드가 해당 환경에서 잘 작동하는지 면밀히 관찰해보시기 바랍니다.

위의 스크립트가 잘 작동하지 않으면 Country and Mobile Redirect for WordPress - Professional Edition과 같은 플러그인을 사용할 수 있습니다.