CSS를 사용하여 간단하게 하단에 DIV 요소를 고정할 수 있습니다.
위 그림에서는 워드프레스의 footer.php 파일 맨 아래에 div 요소를 하단 중앙에 정렬한 예를 보여줍니다. 이를 위해서는 다음과 비슷한 코드를 header.php나 footer.php 파일 등의 적당한 곳에 추가합니다. 반드시 차일드 테마를 만들어 작업하세요.
<div id="fixedfooter"> <div class="inner">Sticky Bottom DIV element</div> </div>
그리고 다음과 비슷한 CSS 코드를 추가합니다.
#fixedfooter {
position:fixed;
left:0px;
bottom:0px;
width: 100%;
text-align: center;
}
.inner {
background:#1E299D;
color: white;
width: 200px;
padding: 15px;
display: inline-block;
}
워드프레스에서 테마 파일을 수정하지 않고 테마 함수 파일에 코드를 추가하고 싶은 경우 다음과 같은 코드를 테마 함수 파일에 추가할 수 있습니다. (이 경우에도 자식 테마를 만들어 작업하세요.)
// HTML to wp_footer()에 추가
function child_theme_footer_script() { ?>
<!-- HTML 코드 추가하기 -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );
만약 모바일 기기 하단에 고정된 배너 표시하고 싶은 경우 CSS 미디어 쿼리(media query)를 사용하여 모바일 기기에서만 표시되도록 하고 PC에서는 숨길 수 있습니다. 다음 글을 참고해보세요:
워드프레스에서 CSS 코드를 추가하고 싶은 경우 이 글을 참고하여 사용자 CSS 코드를 추가할 수 있습니다. (테마 파일 내의 스타일시트 파일을 수정하지 말고 차일드 테마를 만들고 CSS를 추가하거나 워드프레스 알림판 내에서 추가하시기 바랍니다.)
댓글 남기기