본문 바로가기

모바일 기기 하단에 고정된 배너 표시하기

2019.07.30 댓글 7

어제 아는 분의 부탁으로 워드프레스 사이트에 하단에 고정된 배너를 만드는 작업을 해보았습니다.

워드프레스 하단 배너 고정

색상과 아이콘은 참고로 보내준 그래픽과 동일하게 만들었습니다. 실제로 모바일에서 보면 괜찮지만 이렇게 보니 빨간색 때문에 눈에 부담이 되는 것 같네요. 색상은 CSS로 변경 가능합니다.

이렇게 하단에 표시되는 배너나 사이드에 표시되는 퀵뷰를 만들기 위해 플러그인을 사용할 필요는 없습니다.

구글링하여 몇 개의 자료를 참조하여 쉽게 만들 수 있습니다. 예를 들어, 위와 같이 만들고 싶은 경우 다음 세 문서를 참고하면 HTML과 CSS로 쉽게 만들 수 있습니다. (이 방법은 꼭 워드프레스에만 한정된 것은 아닙니다.)

여러 가지 방법이 있을 것입니다. 간단히 </body> 태그 바로 앞에 하단에 고정하는 HTML 태그를 추가하고 CSS로 하단에 고정할 수 있습니다.

</body> 태그 바로 앞에 HTML 태그를 추가하려면 다음과 같은 코드를 사용 중인 테마의 함수 파일에 추가하면 됩니다. (또는, 테마의 footer.php 파일에 직접 코드를 추가하는 것도 가능합니다. 그러면 차일드 테마를 만들어서 작업하시기 바랍니다.)

// Add HTML to wp_footer()
function child_theme_footer_script() { ?>
 <!-- HTML 코드 추가하기 -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );

HTML 코드는 w3schools에서 제시하는 코드를 응용할 수 있습니다.

<div class="footer-row">
  <div class="footer-column">컬럼1</div>
  <div class="footer-column">컬럼2</div>
  <div class="footer-column">컬럼3</div>
  <div class="footer-column">컬럼4</div>
</div>

이런 형식으로 위의 <!--HTML 코드 추가하기 --> 부분에 넣도록 합니다.

다음으로 다음과 같은 CSS 코드를 추가합니다.

.footer-column {
  float: left;
  width: 25%;
}
/* Clear floats after the columns */
.footer-row:after {
  content: "";
  display: table;
  clear: both;
}
/* 배너를 고정시킴 */
.footer-row {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

실제 작동을 다음 jsfiddle 페이지에서 확인할 수 있습니다.

다음으로 고려할 사항은 아이콘 부분입니다. 아이콘은 Font Awesome  폰트가 사용되었습니다. Font Awesome 사이트에서 제시하는 방법으로 폰트를 로드해도 되고, 테마에서 Font Awesome 폰트를 로드한다면 별도의 작업은 할 필요가 없습니다. 별로 바람직하지 않을 수 있지만 플러그인을 사용하면 편리합니다.

그리고 모바일에서만 표시되도록 하는 방법은 간단하게는 CSS 미디어 쿼리를 사용하면 됩니다. 워드프레스에서 제공하는 wp_is_mobile 함수를 사용할 수 있습니다.

참고로 이 함수는 정교하지 않기 때문에 실제 상업용 사이트에는 적합하지 않다고 합니다. 모바일과 태블릿 기기를 감지하여 true를 반환합니다.

This function will return true for a tablet, as it too is considered a mobile device. It is not a substitute for CSS media queries or styling per platform.

태블릿도 모바일 기기로 간주되기 때문에 이 함수는 태블릿에 대하여 true를 반환합니다. 이 함수는 CSS 미디어 쿼리나 플랫폼별 스타일링을 대체하지 않습니다.

wp_is_mobile 함수를 사용하는 경우 다음과 같은 형식으로 응용할 수 있습니다(워드프레스 Codex 문서 참조).

if ( wp_is_mobile() ) {
 /* Include/display resources targeted to phones/tablets here */
 /* 폰/태블릿용 코드를 여기에 추가 */ 
} else {
 /* Include/display resources targeted to laptops/desktops here */
 /* 노트북/데스크톱용 코드를 여기에 추가 */
}

jQuery나 javascript를 사용하여 지연 로드되도록 만드는 방법도 고려해볼 수 있습니다.

위의 내용은 전문적인 내용이 아니므로 참고만 하시기 바랍니다. 혹시 잘못된 내용이 있거나 더 좋은 방법이 있는 경우 알려주시면 글을 수정하도록 하겠습니다.

참고:

 

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글7