GeneratePress 테마는 가장 빠른 워드프레스 테마 중 하나로 평가되며 우리나라에서는 특히 수익형 블로그를 비롯한 블로그 운영에 많이 사용됩니다. GeneratePress 테마 유료 버전과 GenerateBlocks를 사용하여 엘리멘터 페이지 빌더 없이 복합한 사이트 제작도 가능합니다(“불닭닷컴 사이트 GenerateBlocks로 제작” 참고).
제너레이트프레스 테마는 사이드바 고정 기능은 제공하지 않지만, CSS나 자바스크립트를 사용하여 스크롤 시 사이드바가 고정되도록 할 수 있습니다.
워드프레스 GeneratePress 테마 사이드바 고정 방법
이 블로그는 워드프레스닷컴(WordPress.com)의 개인 플랜을 이용 중이지만 운이 좋게 GeneratePress 테마가 적용되어 있습니다. (본래 GeneratePress 테마는 비즈니스 요금제 이상에서만 활성화 가능)
개인 요금제에서는 제약이 많지만 2025년 9월 8일부터 개인/프리미엄 요금제에서도 플러그인 설치가 허용되어 플러그인을 사용하여 CSS/자바스크립트/PHP 코드를 추가할 수 있게 되었습니다.
심플하게 블로그를 운영하려거나 워드프레스에 대하여 잘 아는 사용자라면 개인 요금제를 이용하여 블로그를 운영하는 것도 가능하겠지만, 워드프레스의 기능을 제대로 활용하려면 웹호스팅에 가입하여 워드프레스 사이트를 운영하는 설치형을 권장합니다.
GeneratePress 테마에서 사이드바를 고정하는 몇 가지 방법이 있습니다. 여기에서는 이 블로그에서와 같이 PC에서 스크롤 시 사이드바가 고정되도록 하는 방법에 대하여 살펴보겠습니다.
CSS 코드를 사용하여 사이드바 고정 방법
CSS sticky 속성을 사용하여 GP 테마의 오른쪽 사이드바를 고정하는 방법입니다.
/* GeneratePress 테마 사이드바 고정 */
@media (min-width: 1025px) {
.site-content {
display: flex;
align-items: flex-start;
}
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 20px;
align-self: flex-start;
z-index: 10;
}
}
/* 선택사항: 관리자 바가 있을 경우 */
.admin-bar #right-sidebar {
top: 52px;
}
@media (min-width: 783px) {
.admin-bar #right-sidebar {
top: 52px;
}
}상기 코드를 차일드 테마의 스타일시트 파일(style.css)에 추가하거나 관리자 페이지의 모양 » 사용자 정의 » 추가 CSS에 추가할 수 있습니다.
참고로 어드민 바(관리자 표시줄) 높이는 해상도에 따라 다음과 같습니다.
- 모바일 (782px 이하): 46px
- 데스크톱 (783px 이상): 32px
조금 더 정교하게 설정하려는 경우 일반 사용자(비로그인 사용자)가 방문할 때 top의 높이를 0으로 설정하는 경우 다음과 같이 top 값을 지정할 수 있습니다.
| 상황 | top 값 |
|---|---|
| 일반 사용자 | 0 |
| 관리자 (모바일, ~782px) | 46px |
| 관리자 (데스크톱, 783px~) | 32px |
이렇게 설정하면 로그인 상태에서도 관리자 바에 가려지지 않고 정확하게 고정됩니다!
자바스크립트를 사용하여 사이드바 고정하기
상기 CSS 코드를 사용하면 사이드바가 잘 고정되지만, 어떤 이유로 잘 작동하지 않는다면 자바스크립트를 이용하는 것도 고려할 수 있습니다.
JS 코드:
<script>
(function () {
'use strict';
// ---- Config ----
const MIN_VIEWPORT_WIDTH = 769; // 768px 이하면 숨김/비활성
const INITIAL_TOP = 100; // 초기 sticky top(px)
const STICKY_TOP = -5; // 스크롤 후 sticky top(px)
const EASE = 0.18; // 보간 속도(0~1)
const BODY_FLAG = 'cc-202510-sticky-sidebar';
const SIDEBAR_SEL = '#right-sidebar';
const sidebar = document.querySelector(SIDEBAR_SEL);
if (!sidebar) return;
let enabled = false;
let rafId = 0;
let targetTop = INITIAL_TOP;
let currentTop = INITIAL_TOP;
function enable() {
if (enabled) return;
document.body.classList.add(BODY_FLAG);
currentTop = INITIAL_TOP;
targetTop = INITIAL_TOP;
sidebar.style.setProperty('--cc-top', INITIAL_TOP + 'px');
enabled = true;
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize);
}
function disable() {
if (!enabled) return;
document.body.classList.remove(BODY_FLAG);
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
cancelAnimationFrame(rafId);
rafId = 0;
enabled = false;
}
function onResize() {
// 왜: 브레이크포인트 아래 레이아웃 보존
if (window.innerWidth < MIN_VIEWPORT_WIDTH) {
disable();
} else {
enable();
}
}
function updateTargetTopByScroll() {
const y = window.pageYOffset || document.documentElement.scrollTop || 0;
const threshold = INITIAL_TOP - STICKY_TOP; // 95
if (y >= threshold) {
targetTop = STICKY_TOP;
} else {
const t = y / threshold;
targetTop = Math.round(INITIAL_TOP - (INITIAL_TOP - STICKY_TOP) * t);
}
}
function animate() {
// 왜: 튐 방지(부드러운 보간)
currentTop += (targetTop - currentTop) * EASE;
if (Math.abs(targetTop - currentTop) < 0.5) currentTop = targetTop;
sidebar.style.setProperty('--cc-top', currentTop + 'px');
if (currentTop !== targetTop) {
rafId = requestAnimationFrame(animate);
} else {
rafId = 0;
}
}
function ensureAnimation() {
if (!rafId) rafId = requestAnimationFrame(animate);
}
function onScroll() {
updateTargetTopByScroll();
ensureAnimation();
}
// 초기 실행
if (window.innerWidth >= MIN_VIEWPORT_WIDTH) enable();
updateTargetTopByScroll();
ensureAnimation();
// 로드 후 레이아웃 변동 대응
window.addEventListener('load', onResize);
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(() => {
if (enabled) onScroll();
});
}
})();
</script>CSS 코드:
/* ===== cc-202510: Sticky Right Sidebar ===== */
body.cc-202510-sticky-sidebar #right-sidebar {
position: sticky;
top: var(--cc-top, 100px); /* 초기엔 자동 위치와 유사, 스크롤 시 보간값 적용 */
align-self: flex-start; /* Why?: flex 컨테이너에서 늘어짐 방지 */
will-change: top;
}
/* ≤768px 강제 비활성(숨김 효과) */
@media (max-width: 768px) {
body.cc-202510-sticky-sidebar #right-sidebar {
position: static !important;
top: auto !important;
}
}상기 CSS와 JavaScript 코드를 적용하면 이 블로그에서와 같이 사이드바가 고정됩니다. 자바스크립트 코드는 WPCode를 사용하여 푸터 섹션에 추가하거나, 조금 더 효과적으로 추가하려는 경우 GP Premium을 사용한다면 Element로 wp_footer에 추가할 수 있습니다.
플러그인을 사용하여 사이드바 고정하기
제너레이트프레스 테마에서는 CSS나 JS를 사용하여 사이드바를 고정할 수 있지만, 보다 쉬운 방법으로 WP Sticky Sidebar – Floating Sidebar On Scroll for Any Theme와 같은 플러그인을 사용하는 것도 가능합니다.
플러그인을 사용하면 편리하지만, 사이트 속도에 영향을 미치거나 다른 플러그인과 충돌을 일으킬 가능성이 있으므로, 가급적 플러그인 사용은 최소화하는 것이 바람직합니다.
GeneratePress가 아닌 다른 테마를 사용하는 경우 붙박이 사이드바 기능을 제공하지 않으면 WP Sticky Sidebar 플러그인의 사용을 고려해볼 수 있습니다. (CSS를 조금 안다면 먼저 CSS로 사이드바 고정을 시도해보고 잘 안 되면 이런 플러그인을 사용해 보세요.)
마치며
이상으로 GeneratePress 테마의 오른쪽 사이드바를 CSS/JS를 사용하여 고정하는 방법에 대하여 살펴보았습니다. 아스트라(Astra)나 다른 테마에서도 비슷하게 적용할 수 있습니다.
아바다(Avada), 뉴스페이퍼(Newspaper) 등 일부 유료 테마에서는 자체적으로 사이드바 고정 기능을 제공하기도 합니다. 그런 경우에는 테마 옵션의 기능을 활용할 수 있습니다.