programing

모바일 버전에 대해 다른 정적 홈페이지를 설정하는 방법(WordPress)

lastmoon 2023. 4. 2. 11:48
반응형

모바일 버전에 대해 다른 정적 홈페이지를 설정하는 방법(WordPress)

내 웹사이트 모바일 버전에 대해 다른 정적 홈페이지를 만들고 싶습니다.그것은 사실 여분의 모바일 버전은 아니지만 반응성이 좋다.

현재 Fullscreen Image 슬라이더가 정적 홈페이지로 설정되어 있습니다.이것은 웹 사이트의 응답성이 높기 때문에 화면 크기에 맞게 확장되지만, iPhone과 같은 모바일 기기에서는 그다지 보기 좋지 않습니다.그래서 저는 모바일로 웹사이트를 볼 때 사용하고 싶은 다른 홈페이지 템플릿이 있습니다.

이것은 어떤 플러그인으로도 할 수 있습니까, 아니면 코딩으로 할 필요가 있습니까?테마 전환기 같은 것은 사용하고 싶지 않고, 모바일 기기용으로 다른 정적 페이지 세트를 원합니다.

이거 어떻게 해?

를 사용하여 모바일을 확인하고 모바일이 검출된 경우 에 접속하여 다른 템플릿을 로드할 수 있습니다.

function so16165211_mobile_home_redirect(){
    if( wp_is_mobile() && is_front_page() ){
        include( get_template_directory() . '/home-mobile.php' );
        exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );

Mobile-Detect를 폴더 내 테마에 포함시키고 헤더 선두에 이 코드를 추가합니다.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
    }
}

원하는 대로 작동하도록 이 솔루션을 사용자 정의할 수 있습니다.나는 이것을 유사한 해결책을 위한 여러 프로젝트에 사용해 왔다.

(functions.php에 삽입)이 됩니다.

    //* Redirect homepage on mobile
add_action( 'wp_head', 'wps_params', 10 );
function wps_params() {
    ?>
    	<script>
	if (window.location.pathname == '/' && jQuery(window).width() <= 480) {
	   window.location = "/webshop/";
	}
	</script>

    <?php
}

"/webshop/"을 모바일 홈페이지 링크로 바꿉니다.

detect mobile browers 스크립트를 사용할 수 있습니다.

내 기억으로는 그것은 하나의 php 파일일 뿐이며, 다른 모바일 기기(iPhone, iPad, Android, Windows Phones, BlackBerry, Palm 기기)를 처리하는 방법을 묻는 단일 기능을 가지고 있다.

함수 생성기 페이지로 이동하여 스크립트가 어떻게 작동하는지 더 잘 알 수 있습니다.

이것은 쉽고 모든 것을 코드화할 필요가 없습니다.워드프레스 저장소에서 "Redirection" 플러그인을 설치합니다. 1. 설정 페이지로 이동합니다. 2. 기본 데스크톱의 홈페이지 3과 함께 "소스 URL"을 입력하십시오.[ Match ]옵션에서 [URL and user agent]를 선택하고 [Action]옵션에서 [Redirect to URL]를 선택하고 [Add Redirection]를 클릭합니다.4 .새로운 설정 옵션이 표시됩니다.원하는 제목을 붙이세요."소스 URL"은 공백이어야 합니다(기본 홈페이지임을 의미)."사용자 에이전트" 옵션에서 iPhone 또는 Android 중 하나를 선택합니다."일치됨" 옵션에서 모바일 홈 페이지에 대해 원하는 리디렉션을 설정하십시오.

알았어!

이전에 설정한 리다이렉션을 기반으로 데스크톱과 모바일 디바이스의 홈 페이지를 확실히 구분할 수 있습니다.단, 동일한 URL 이름(데스크탑의 경우 www.abcde.com, 모바일 디바이스의 경우 www.abcde.com/mobilehomepage 등)을 사용할 수 없습니다.

이것은 나에게 매우 좋다.

function so16165211_mobile_home_redirect(){
    if( wp_is_mobile() && is_front_page() ){
        include( get_template_directory() . '/home-mobile.php' );
        exit;
    }
}

기능에 다음을 추가합니다.php는 다음과 같은 트릭을 클릭합니다.

//* Redirect homepage on mobile

add_action( 'wp_head', 'wps_params', 10 );

function wps_params() {
?>

<script>
if (window.location.pathname == '/' && jQuery(window).width() <= 480) {
   window.location = "/webshop/";
}
</script>

<?php
}

언급URL : https://stackoverflow.com/questions/16165211/how-to-set-a-different-static-homepage-for-mobile-version-wordpress

반응형