GeneratePress는 빠르고 가벼워서 우리나라에서 특히 수익형 블로그에 많이 사용됩니다. 이 테마를 이용하여 초보자는 심플한 블로그를 운영할 수 있고 전문 사용자는 빠른 속도를 유지하면서 복잡한 사이트를 제작할 수 있습니다.
GeneratePress 테마에서 사이드바를 표시하도록 설정하는 경우 사이드바의 콘텐츠가 적으면 아래 빈 칸이 어색하게 표시될 수 있습니다. 이 경우 사이드바 높이를 전체 높이로 설정하면 보다 자연스럽게 사이트를 만들 수 있습니다.
워드프레스 GeneratePress 테마 사이드바 높이를 전체 높이로 설정하는 방법
제너레이트프레스 테마는 현존하는 테마 중에서 가장 빠른 테마 중 하나로 평가받고 있고 우리나라에서는 특히 블로그 운영에 많이 이용됩니다. 이 블로그에도 현재 GeneratePress 테마가 적용되어 있습니다.😄
하지만 GP 테마를 GenerateBlocks와 함께 사용하면 엘리멘터 없이 빠른 속도를 내는 복잡한 사이트를 만들 수 있습니다. 예를 들어, 복잡한 애니메이션 효과가 적용된 불닭닷컴 사이트가 GenerateBlocks를 활용하여 만들어졌습니다(참고).
엘리멘터(Elementor)는 편리하지만 사이트 속도에 영향을 미칠 수 있고, 엘리멘터용 애드온 플러그인을 추가로 설치하면 사이트 속도가 더욱 느려지고 카페24나 가비아 등 일부 국내 호스팅에서는 메모리 등 서버 리소스 부족으로 에러가 발생하기도 합니다.
GeneratePress 테마 사이드바 설정하기
GeneratePress 테마가 적용된 경우 워드프레스 관리자 페이지 » 모양 » 사용자 정의 » 레이아웃 » 사이드바에서 사이트 전체, 블로그, 단일 포스트에 대하여 사이드바 스타일을 지정할 수 있습니다.
일반적으로 사이드바를 오른쪽에 표시하게 되는데요. 상기 그림에서 내용 / 사이드바 옵션을 선택하면 우측 사이드바가 활성화됩니다.
사이드바 설정 페이지에서 사이드바 너비(폭)과 위젯 패딩도 설정할 수 있습니다. 사이드바 너비는 비율(%)로만 지정할 수 있고, 고정 너비를 이용하고 싶다면 CSS 코드로 조정할 수 있습니다. 다음 글에서 GP 테마 사이드바 너비를 설정하는 방법을 참고할 수 있습니다.
사이드바가 전체 높이로 표시되지 않는 경우
사이드바를 활성화하면 사이드바 영역에 콘텐츠가 짧으면 그림과 같이 사이드바가 어색하게 표시될 수 있습니다.
상기 그림에서 오른쪽 사이드바의 높이를 왼쪽의 콘텐츠 영역의 높이와 동일하게 맞추고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.
body.right-sidebar .site-content, #right-sidebar {
display: flex;
}
#right-sidebar .inside-right-sidebar {
display: flex;
flex-direction: column;
}
#right-sidebar .widget:last-child {
flex: 1;
}상기 코드는 GeneratePress 포럼 게시글에서 인용한 것입니다. 코드를 모양 » 사용자 정의 » 추가 CSS에 추가하거나 차일드 테마의 스타일시트 파일(style.css)에 추가할 수 있습니다.
상기 코드를 입력하고 사이트를 새로 고침하면 사이드바가 전체 높이로 표시될 것입니다.
적용되지 않으면 캐시 플러그인의 캐시를 삭제하고 브라우저 캐시를 삭제하면 제대로 보일 것입니다.
댓글 남기기