워드프레스 인기 테마 중 하나인 OceanWP에서 본문의 콘텐츠가 적으면 하단의 푸터가 본문 바로 아래에 위치하여 브라우저에서 볼 때 푸터 아래에 여백이 있어 보기가 좋지 않습니다.
본문 콘텐츠 길이가 매우 짧더라도 푸터는 하단에 유지되도록 하는 것이 보기에 좋을 수 있습니다. 일부 테마에서는 본문 콘텐츠가 짧아도 푸터가 하단에 유지됩니다. 베스트셀링 테마인 아바다 (Avada) 테마의 경우 확인해보니 본문 콘텐츠 길이가 짧으면 OceanWP와 비슷한 현상이 발생하는 것 같습니다. 아래 그림가 같이 푸터 아래에 여백이 생깁니다.
스크롤 시 푸터를 하단에 유지하는 방법 (fixed 아님)
콘텐츠 길이가 짧더라도 푸터가 하단에 유지되도록 하거나 스크롤 시에 푸터가 위로 따라 올라오는 경우 CSS를 사용하여 푸터를 하단에 유지되도록 할 수 있습니다. 참고로 position: fixed;를 사용하여 푸터를 하단에 항상 고정되어 표시되도록 할 수 있지만, 이것은 원하는 바가 아닐 수 있을 것입니다.
CSS를 사용하여 푸터를 하단에 유지하는 방벙에 대해 간략히 살펴보겠습니다. 이와 관련하여 How to stick footer to bottom (not fixed) even with scrolling라는 stackoverflow 글이 있지만, 저는 테스트해보니 잘 작동하지 않았습니다. 이 문서에서 제시하는 방법으로 가능한지 먼저 테스트해보시기 바랍니다.
HTML 예시:
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>HTML 구조와 위와 비슷하다면 다음과 같은 CSS 코드를 응용하여 푸터를 하단에 유지시킬 수 있습니다.
CSS 예시:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* 푸터 높이 */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* 푸터 높이 */
}예를 들어, 워드프레스 OceanWP 테마에서는 다음과 같은 CSS 코드로 테스트해볼 수 있습니다.
#wrap {
min-height: 100vh;
}
#main {
padding-bottom: 102px;
}
.site-footer {
position: absolute !important;
bottom: 0;
width: 100%;
height: 102px;
} height 값을 적절히 변경하여 마음에 들도록 푸터가 하단되도록 시도해보시기 바랍니다.
아바다 테마에서는 테스트해보지 않았지만, 이론상 위의 방법으로 가능할 것 같습니다.
Flexbox를 사용하는 경우 Footer at bottom of page or content, whichever is lower 글을 참고해볼 수 있습니다. 다양한 코드 예시가 있으므로 적당한 것을 시도해볼 수 있습니다.
※파트너스 활동으로 일정액의 수수료를 제공받을 수 있습니다.
참고
워드프레스 아스트라 테마: Header Footer Builder 도입
워드프레스 인타 테마 중 하나인 아스트라 테마는 현재 100만 개 이상 사이트에 설치되어 사용되고 있습니다. Astra 테마에서 간단하게 요소를 끌어서 놓는 방식으로 헤더와 푸터를 만들 수 있는 H
avada.tistory.com
워드프레스 쿠팡 파트너스 상품글 자동 포스팅 수익화 - 워드프레스 정보꾸러미
해외에서는 아마존 상품을 소개하여 수수료를 받을 수 있지만, 아마존이 국내에 진출하지 않아서 아마존 어필리에이트는 큰 효과는 없을 것입니다. 우리나라에서는 쿠팡 파트너스 프로그램을
www.thewordcracker.com
https://avada.tistory.com/2241
워드프레스 GeneratePress 테마: 구글 페이지 스피드 인사이트 점수
GeneratePress 테마가 설치된 워드프레스 사이트에 PHP 8.0을 적용한 후에 구글 페이지 스피드 인사이트 툴을 사용하여 점수를 확인해보니 모바일과 PC 모두 점수가 향상되었습니다. 블루호스트 등의
avada.tistory.com