제너레이트프레스 테마 사이드바 하단 고정, 모바일에서 제거하는 방법

워드프레스 제너레이트프레스 테마가 설치된 블로그에서 이용할 수 있는 사이드바 하단 고정하는 방법과 모바일에서 제거하는 방법을 설명드리겠습니다. 간단한 CSS 코드를 블로그에 적용시키는 방법이니 천천히 따라해 보세요.

제너레이트프레스 테마 사이드바 하단 고정과 모바일 화면 제거하는 이유

사이드바의 상단을 고정하면 내용이 많은 경우 하단 내용을 볼 수 없게 됩니다. 이와 반대로 스크롤을 아래로 내릴 때 고정하도록 변경하면, 하단에 광고를 넣었을 경우 스크롤을 따라 광고가 따라오게 됩니다.

제너레이트프레스 테마를 사용할 경우 사이드바 맨 하단을 고정해 300×600 크기의 광고를 넣어 방문자가 아래로 스크롤 할 때 사이드바의 맨 아래 있는 광고가 따라 다니게 할 수 있습니다.

애드센스 광고는 크기가 클 수록 단가가 높기 때문에 사이드바 하단에 애드센스 광고를 넣고 고정시키는 것이 유리합니다.

제너레이트프레스 테마는 모바일 화면에서도 사이드바가 나오게 되는데 맨 아래에 표시가 됩니다. 모바일 화면은 작은데 이 모든 내용을 표시하게 되면 중복되는 내용도 있을 수 있고 뭔가 지저분해 보이기 때문에 모바일 화면에서 제거하는 것이 좋습니다.

사이드바 하단 고정하는 방법

제너레이트프레스 테마를 안전하게 수정하려면 차일드 테마를 설치한 후 css를 수정하는 것을 추천드립니다. 자세한 이유는 아래 카드를 참고해 보세요.

generatepress 차일드 테마를 사용하는 이유와 다운로드 및 설치하는 방법
워드프레스로 테마를 수정해서 사용하는 경우 원본인 부모 테마의 손상을 주지 않기 위해 차일드(자식) 테마를 설치해서 수정해 보세요.

이 블로그도 제너레이트프레스 테마를 이용하고 있습니다. 블로그 내용을 보기 위해 아래로 스크롤할 때 우측 사이드바의 광고가 고정되어 따라 내려 오는 걸 볼 수 있을 겁니다. 천천히 따라해 보시면 블로그 적용에 성공할 겁니다.

우선 제너레이트프레스에서 사이드바 스크롤을 고정하는 것은 너무 쉽습니다. 아래의 단계를 보고 그대로 따라하면 바로 적용할 수 있습니다.

워드프레스 관리자 페이지
메뉴에서 “외모”
“사용자 정의하기”
“추가 CSS” 선택
아래 코드를 복사한 다음 붙여 넣고 저장을 해주세요.

/* GeneratePress 테마 사이드바 고정 */
@media (min-width: 769px) {
.site-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}

#right-sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 0.1rem;
align-self: flex-end;
}
}
/* GeneratePress 테마 사이드바 고정 끝 */

사이드바 모바일에서 제거하는 방법

워드프레스 제너레이터 테마는 모바일에 사이드바 내용이 표시가 됩니다. 블로그 게시물 맨 아래로 스크롤 하면 사이드바의 내용이 나옵니다.

블로그 내용만 있어도 충분한데 사이드바의 내용이 나오게 되면서 모바일 페이지가 지저분해 보이기도 합니다. 모바일 화면에서 사이드바를 제거하는 방법도 마찬가지로 css에 내용을 추가하는 방법을 설정이 가능합니다.

위와 같이 추가 css로 들어간 다음 아래 코드를 복사 붙여넣기 한 뒤 저장해 주세요.

/*모바일 사이드바 제거*/
@media(max-width: 768px) { 
#right-sidebar { 
display: none; 
 }
}
/*모바일 사이드바 제거 끝*/