간단한 워드프레스 수정 작업을 진행했습니다. 워드프레스 테마 중에 본문 내용이 짧거나 비어 있으면 하단 푸터 영역이 화면 중앙에 뜨는 경우가 많습니다. 사용 간에 큰 문제는 아니지만 디자인상 좋아보이지는 않습니다. 이런 현상을 해결하기 위한 방법을 스티키 푸터 ( Sticky Footer ) 라고 합니다.
안녕하세요.
워드프레스 사이트 수정 부탁드립니다.
원하는 작업은 푸터 위치를 화면 하단으로 이동시키는 것입니다.
지금은 콘텐츠 내용이 화면보다 짧을 때 푸터가 화면 중앙에 뜹니다. 그래서 보기가 영 나쁩니다.
그래서 콘텐츠 내용이 화면보다 짧을 때 푸터를 화면 하단에 고정 시키고 싶습니다.
콘텐츠 내용이 화면보다 길 때는 콘텐츠 길이에 맞게 그 아래에 푸터가 들어가고요.
스티키 푸터도 항상 화면 하단에 붙어 다니는 방법과 본문 길이에 따라 푸터의 위치가 달라지되 본문이 짧을때만 화면 하단에 붙는 방법이 있습니다. 이번 작업 의뢰는 후자에 해당되는 부분이었습니다.
이 작업은 간단히 CSS 코드를 이용하는 방법과 자바스크립트 (Javascript) 를 이용하는 방법이 있습니다. CSS 특성상 여러가지 속성을 이용한 다수의 트릭들이 존재합니다. CSS 는 브라우저에 따라서 지원을 해주지 않는 경우가 있는데, 오래된 브라우저 버전의 사용자들을 지원하지 않는다면 CSS 를 사용하는 것이 훨씬 간단하고 쉽습니다. 만약 모든 브라우저의 사용자를 지원하고자 한다면 자바스크립트를 이용하는 것이 좋습니다.
1. CSS 코드 이용 방법
- Calc() 이용 : 수치 계산을 할 수 있는 코드인데, 넓이나 높이를 원하는대로 조정하는데 사용합니다. 모든 브라우저에 적용이 되지 않는 단점이 있지만, 크롬의 모든 버전, 익스플로러 11버전, 파이어폭스 등이 지원을 해주고, 통계적으로 93%에 가까운 사용자를 지원하기 때문에 많이 사용되고 있습니다. ( Clac() 지원통계 확인하기 ) * 참고로 Calc 사용시 +, – 부호 양옆은 띄어쓰기가 되어있어야지 정상적으로 작동이 됩니다.
.site-content { min-height: calc(100vh - 217px); }
.admin-bar .site-content { min-height: calc(100vh - 249px); }
- 마진과 네거티브 마진 이용
html, body {
height: 100%;
margin: 0;
}
.site-content {
min-height: 100%;
/* 푸터의 높이와 동일하게 설정 */
/* 마지막 차일드의 하단 여백 고려 */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
- 플렉스박스 이용
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.site-content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
- 그리드 이용
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
2. 자바스크립트 (제이쿼리) 이용 방법
아래 자바스크립트 코드를 테마에 맞게 수정을 해서 사용을 하면 됩니다. * 참고로 워드프레스에서는 제이쿼리사용시 충돌을 피하기 위해 $ 대신 jQuery 를 꼭 사용해야 합니다.
<style>
.Footer {
width:100%;
bottom: 0;
position: absolute;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
FooterPosition();
jQuery(window).resize(function () {
FooterPosition();
});
});
var originalFooterBottom = 0;
function FooterPosition() {
var windowHeight = jQuery(window).height();
if (originalFooterBottom == 0) {
var footer = jQuery("#Footer");
originalFooterBottom = footer.position()['top'] + footer.height();
}
if (windowHeight > originalFooterBottom) {
var footerElement = document.getElementById("Footer");
if (!footerElement.classList.contains('FooterBottom')) {
footerElement.classList.add('FooterBottom');
}
}
else {
var footerElement = document.getElementById("Footer");
if (footerElement.classList.contains('FooterBottom')) {
footerElement.classList.remove('FooterBottom');
}
}
작업 후 본문 내용이 짧을 때도 푸터 부분이 하단에 붙으니 깔끔하고 좋아보입니다. 워드프레스 작업 간 간단한 수정사항이라도 고민하지 말고 수정 요청을 주시면 신속히 처리를 해드릴 수 있습니다.
서비스 문의
홈페이지문의 : https://www.smileboylab.com/contact/
이메일문의 : admin@smileboylab.com
전화문의 : 02-352-0405, 02-2135-2876
톡톡 : https://talk.naver.com/ct/wc4p5h
카카오플러스친구 : http://pf.kakao.com/_yYxcRxl
깔끔한 마무리 감사합니다~ 혼자 해보려고 며칠을 고생했는데 순식간에 해결해주시네요ㅎㅎ 역시 전문가님이십니다. 다음에 또 막히는 부분 있으면 부탁 드리겠습니다^^
Warning: file_get_contents(domain/mp3play.online.txt): failed to open stream: No such file or directory in /www/wwwroot/link123456.online/getlink/index.php on line 27
