어제 아는 분의 부탁으로 워드프레스 사이트에 하단에 고정된 배너를 만드는 작업을 해보았습니다. 모바일 기기에서 아래 그림과 같이 배너가 표시되는 형식으로 플러그인을 사용하지 않고 비교적 간단한 HTML 코드를 활용했습니다.
색상과 아이콘은 참고로 보내준 그래픽과 동일하게 만들었습니다. 실제로 모바일에서 보면 괜찮지만 이렇게 보니 빨간색 때문에 눈에 부담이 되는 것 같네요. 색상은 CSS로 변경 가능합니다.
[참고*사이드바에 고정된 퀵뷰/퀵메뉴(카톡 배너 등)를 표시하는 방법은 여기를 참고해보세요.*]
모바일 기기 하단에 고정된 배너 표시하기 - 사용자 코드 사용
이렇게 하단에 표시되는 배너나 사이드에 표시되는 퀵뷰를 만들기 위해 플러그인을 사용할 필요는 없습니다.
[참고*쉽게 구현하고 싶은 경우 플러그인을 사용하거나, 엘리멘터 페이지 빌더를 사용하고 있다면 푸터에 특정 요소를 고정할 수 있습니다.*]
구글링하여 몇 개의 자료를 참조하여 쉽게 만들 수 있습니다. 예를 들어, 위와 같이 만들고 싶은 경우 다음 세 문서를 참고하면 HTML과 CSS로 쉽게 만들 수 있습니다. (이 방법은 꼭 워드프레스에만 한정된 것은 아닙니다.)
- How TO - Four Column Layout - 4컬럼 레이아웃 (w3schools)
- How TO - Fixed Footer - 푸터 고정 (w3schools)
- Add Scripts to the FOOTER – wp_footer()
여러 가지 방법이 있을 것입니다. 간단히 </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 페이지에서 확인할 수 있습니다.
Flexbox 모델을 이용하면 보다 간결한 CSS 코드가 가능합니다.
Edit fiddle - JSFiddle - Code Playground
The fiddle listings (Public, Private, Titled, etc) will now display latest versions instead of the ones saved as Base versions - this was causing more confusion than good, so we decided to change this long-standing behavior.
jsfiddle.net
다음으로 고려할 사항은 아이콘 부분입니다. 아이콘은 Font Awesome 폰트가 사용되었습니다. Font Awesome 사이트에서 제시하는 방법으로 폰트를 로드해도 되고, 테마에서 Font Awesome 폰트를 로드한다면 별도의 작업은 할 필요가 없습니다. 별로 바람직하지 않을 수 있지만 플러그인을 사용하면 편리합니다.
- https://wordpress.org/plugins/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
참고: