사용자가 모바일인지 데스크톱인지에 따라 다른 헤더 이미지를 표시 하시겠습니까? (Wordpress, "TwentySeventeen")

Question

이것은 바보 같은 바보 같은 질문 일 수 있습니다. 죄송합니다. 나는 배경에 이미지를 많이 발견했지만, Wordpress "twentyseventeen"은 "헤더 미디어"를 사용하며 이것은 데스크탑/모바일을 기반으로 바뀌고 싶습니다.

기본적으로 모바일 인 경우 바탕 화면이 "header-b.jpg"인 경우 "header-a.jpg"가 표시됩니다.

CSS 솔루션이 있다고 생각하지만 찾을 수 없습니다.

나를 도와 주셔서 너무 고마워!

Answer 1

는 기능은에 있습니다 get_header_image_tag()을보고 싶지 기본 테마입니다 때문에. 이 함수는 헤더에서 사용할 이미지 태그를 생성합니다. 함수의 끝에서 get_header_image_tag 필터를 사용하여 출력되는 내용을 변경할 수 있습니다.

PHP 코드를 추가해야합니다. 따라서 자식 테마를 만들고 테마의 functions.php 파일에 코드를 추가하거나 사용자 정의 플러그인을 만들어 코드를 추가하십시오. 코드는 다음과 같아야합니다.

function custom_header_image_tag($html, $header, $attr) { 
    if(strstr($_SERVER['HTTP_USER_AGENT'],'Android') || strstr($_SERVER['HTTP_USER_AGENT'],'webOS') || strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad') || strstr($_SERVER['HTTP_USER_AGENT'],'Windows Phone') || wp_is_mobile()){ 
     $html = "insert custom header image tag here"; 
    } 
    return $html; 
} 
add_filter('get_header_image_tag', 'custom_header_image_tag, 10, 3); 

Answer 2

아래의 단어 누름 코드를 사용해 보았습니다. 문서에서 언급 한 것처럼 모바일 또는 데스크톱에 웹 사이트로드가 있는지 감지하는 나를 위해 노력하고 있습니다.이 코드는 태블릿을 모바일로 간주합니다. 아래 링크

<?php 
if (wp_is_mobile()) { 
    /*mobile specific stuff*/ 

    /* header-a.jpg */ 

} 
else{ 
    /*desktop specific stuff*/ 


    /* header-b.jpg */ 

} 
?> 

체크 아웃,

wp is mobile