미디어 쿼리를 통해 다른 템플릿을로드 할 수 있습니까?

Question

나는 워드 프레스 사이트를 가지고 있으며 다른 화면 크기에서 응답 성을 위해 CSS를 조정하고 있습니다. 특정 유형의 게시물에 대한 테마가 포함 된 템플릿을 변경했습니다. 작은 화면 크기에서 원본 템플릿을 사용하고 싶습니다. 내가 이것에 대해 어떻게 생각하는지에 대한 제안? 감사!

Answer 1

미디어 쿼리는 브라우저에 의해 계산되는 반면 템플릿은 서버에 의해 계산되므로이 작업을 직접 수행 할 방법이 없습니다.

일반적인 방법은 서버 측에 다양한 템플릿을 포함시키고 미디어 쿼리를 사용하여 원하는 템플릿 만 표시하는 것입니다.

이 같은 것을보고 할 것 : 다음

<div class="mobile"> 
    <?php get_template_part("content", "mobile"); ?> 
</div> 

<div class="desktop"> 
    <?php get_template_part("content", "desktop"); ?> 
</div> 

그리고 당신의 CSS에서 :

.desktop { display: none; } 

@media (min-width: 800px) { 
    .mobile { display: none; } 
    .desktop { display: block; } 
} 

이 반대 모바일 바탕 화면 템플릿을 숨길 것이다. 데스크톱 템플릿을 content-desktop.php에서로드하고 모바일 템플릿은 content-mobile.php에서로드합니다.

쉽고 빠르지 만 일반적으로 반응 형 웹 사이트를 만드는 가장 좋은 방법은 아닙니다. 왜냐하면 콘텐츠를 두 번로드 할 것이기 때문에이 방법을 유지하기가 더 어려울 것입니다. 선. 그러나 일을 신속하게 처리 할 수있는 좋은 방법입니다.