본문으로 바로가기
  1. Home
  2. 워드프레스/사용 팁
  3. 모바일 기기 하단에 고정된 배너 표시하기

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

· 댓글 8

어제 아는 분의 부탁으로 워드프레스 사이트에 하단에 고정된 배너를 만드는 작업을 해보았습니다. 모바일 기기에서 아래 그림과 같이 배너가 표시되는 형식으로 플러그인을 사용하지 않고 비교적 간단한 HTML 코드를 활용했습니다.

워드프레스 하단 배너 고정

색상과 아이콘은 참고로 보내준 그래픽과 동일하게 만들었습니다. 실제로 모바일에서 보면 괜찮지만 이렇게 보니 빨간색 때문에 눈에 부담이 되는 것 같네요. 색상은 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;
}

[참고*사용자 정의 CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS에 추가하거나 차일드 테마 내의 스타일시트 파일(style.css)에 추가하시기 바랍니다. 후자의 방법은 FTP 접속이 가능해야 합니다.*]

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

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

그리고 모바일에서만 표시되도록 하는 방법은 간단하게는 CSS 미디어 쿼리를 사용하면 됩니다. CSS 미디어쿼리에 대해서는 W3Schools 문서를 참고해보세요.

워드프레스에서 제공하는 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 */
 /* 노트북/데스크톱용 코드를 여기에 추가 */
}

참고로 Mobile Detect 플러그인을 사용하면 wp_is_mobile 함수의 버그가 수정되어 wp_is_mobile 함수를 사용하더라도 모바일에서만 작동합니다.

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

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

쉬운 방법 - 플러그인 사용

위에서는 직접 코드를 만들어 적용하는 방법으로 HTML, CSS 등에 익숙하지 않으면 어렵게 느껴질 것입니다. 쉬운 방법으로 플러그인을 사용하는 것입니다. 다음 글에 소개된 "Mobile Contact Bar"와 같은 플러그인을 활용해볼 수 있을 것 같습니다.

엘리멘터: 요소를 푸터나 헤더에 고정 

엘리멘터를 사용하는 경우 배너를 비롯한 다양한 요소를 헤더나 푸터에 고정할 수 있습니다.

 

워드프레스 엘리멘터 페이지 빌더: 헤더나 푸터에 배너 고정하기

워드프레스에서는 다양한 방법으로 헤더나 푸터에 배너를 고정할 수 있습니다. Top Bar 플러그인을 사용하면 심플한 배너를 헤더나 푸터에 고정하는 것이 가능합니다. 엘리멘터 페이지 빌더를 사

avada.tistory.com

참고:

 

💬 댓글 8
logo

이렇게라도 할수 있으면 좋겠네요...
배우고 싶은게 많습니다 .ㅎ

logo

직접 배우시면 좋겠지만... 더 생산적인 일을 하시고 이런 작업은 외주로...ㅎㅎ

사실 그리 복잡한 것은 아니지만, 알면 쉽고 모르면 어려운 것 같습니다.

즐거운 하루 보내세요.

logo

워드님, 참 대단하십니다. 이거 다 구글링 하고 공부해서 하신거잔아요~!

logo

공부하는 데 구글이 많이 도움이 됩니다.ㅎㅎ

logo

좋은 정보 감사합니다. ㅎ 거기에 광고도 넣을 수 있겠네요

logo

이 블로그의 하단(PC에서 볼 때)처럼 배너나 광고를 넣을 수 있습니다.

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

요즘 오르는 것들이 많네요⋯

💬空空(공공)

도메인은 평생 등록이 없습니⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

일년간 쓰는 가격인가요? 평⋯

💬다이아지니

티스토리 리다이렉트는 언젠⋯

💬흔남.

가끔 접속 장애가 생기면 멍⋯

💬空空(공공)

워드프레스 시작 가이드

워드프레스 시작하기
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드