코드가 길어지면 파일의 용량이 커지고 불러와야 하는 코드가 많아지므로 웹사이트 로딩 속도가 느려질 수 있다.
그래서 워드프레스 블로그를 운영 중에 CSS / JS 파일을 나눠서 브라우저에서 필요한 코드만 적용될 수 있게 모바일 / 데스크탑 에서 별개의 CSS 또는 JS 코드를 각각 적용 하는 방법을 알아보자.
모바일 리다이렉트
모바일 페이지를 따로 만들어서 리다이렉트 되게 할 수 있다.
<?php
if ( wp_is_mobile() && (is_home() || is_front_page()) ) {
$url = home_url( 'm', 'relative' );
wp_redirect( $url );
exit;
}
?>사용된 코드 설명
if ( wp_is_mobile() && (is_home() || is_front_page()) ) { }
:
모바일에서 홈 / 프론트 페이지 접속했는지 확인
$url = home_url( ‘m’, ‘relative’ );
:
$url 변수에 home_url/m 경로를 저장한다. 예를 들어, home_url이 https://maz.kr이면 https://maz.kr/m 을 저장한다.
wp_redirect( $url );
:
저장한 $url로 리다이렉트한다.
모바일 전용 CSS / JS 파일 적용
wp-config.php에 CSS / JS 파일 추가
<?php if ( wp_is_mobile() ) {
/* 모바일 페이지에서 출력할 CSS/JS 파일 추가 */
}
else {
/* 데스크탑에서 출력할 CSS/JS 파일 추가 */
}
endif; ?>사용된 코드 설명
if ( wp_is_mobile() ) { }
:
모바일 페이지일 때 적용되는 조건문
else
:
모바일이 아닐 때 적용되는 조건문
head에 CSS 파일 추가
이 코드를 사용하려면 JS 파일에는 mobile에서만 적용될 수 있게 하는 코드를 추가로 넣어주자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Using Two CSS file for responsive website</title>
<link rel="stylesheet" media="screen and (max-width: 475px)" href="global_mobile.css" />
<link rel="stylesheet" media="screen and (min-width: 476px)" href="global_desktop.css" />
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous" defer ></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous" defer></script>
</head>
<body>
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<img src="image-1.jpg" loading="lazy" />
<img src="image-2.jpg" loading="lazy" />
<img src="image-3.jpg" loading="lazy" />
<img src="image-4.jpg" loading="lazy" />
<img src="image-5.jpg" loading="lazy" />
</div>
</body>
</html>사용된 코드 설명
media=”screen and (max-width: 475px)”
:
브라우저가 모바일 사이즈일 때를 의미한다.
media=”screen and (min-width: 476px)”
:
브라우저가 모바일 사이즈보다 클 때를 의미한다.
integrity=”sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=”
:
“Subresource Integrity” (SRI) 기능을 사용하여 파일의 무결성을 검증한다. 파일이 손상되지 않았거나 변조되지 않았음을 확인하기 위해 해시 값을 제공한다.
crossorigin=”anonymous”
:
CORS(Cross-Origin Resource Sharing) 정책을 설정한다. anonymous 값은 요청이 크로스 오리진일 때 자격 증명(쿠키 등)을 포함하지 않겠다는 의미다.
defer
:
HTML 문서가 완전히 파싱된 후에 실행한다.
참고
데브로그 - 모바일과 데스크탑 두개의 CSS 파일 사용하는 방법