워드프레스에서 사이트를 운영하다 보면 사이드바를 조금 더 편하게 활용하고 싶은 경우가 생깁니다. 특히 최신 글이나 인기 글 위젯을 넣어두었는데 스크롤을 내리면 바로 사라져 버려 아쉽게 느껴지는 경우가 꽤 많습니다.
그래서 많이 찾게 되는 기능이 바로 플로팅 사이드바입니다. 스크롤을 내려도 사이드바가 고정된 상태로 따라다니는 방식이라 방문자가 다른 글을 보기 조금 더 편한 구조를 만들 수 있습니다. 이번에는 아스트라 테마에서 플로팅 사이드바를 설정하는 방법을 정리해봤습니다.
별도 플러그인을 설치하는 방식이 아니라 추가 CSS 코드만 넣는 방식이라 생각보다 어렵지 않은 편입니다. 추가로 기본 여백 때문에 사이드바가 좁아 보이는 경우가 있는데, 이 부분을 함께 조절하는 코드도 같이 정리했습니다.
아스트라 테마 기본 설정과 구조는 Astra 공식 사이트 자료에서도 함께 확인할 수 있습니다.
목차
어떤 방식으로 설정하는가?
이번 방법은 워드프레스 기본 기능인 “추가 CSS” 메뉴를 활용하는 방식입니다.
설정 흐름은 아래 순서로 진행하면 됩니다.
- 외모
- 사용자 정의하기
- 추가 CSS
- 코드 입력
- 공개 버튼 클릭
플러그인을 추가로 설치하지 않아도 되기 때문에 비교적 가볍게 적용할 수 있는 편입니다.
먼저 사용자 정의하기로 이동
아스트라 테마를 설치하면 외모 메뉴 아래에서 다양한 설정을 변경할 수 있습니다. 위 이미지처럼 “사용자 정의하기”로 들어가면 테마와 관련된 설정 메뉴들이 왼쪽에 표시됩니다. 위젯이나 메뉴 구조를 변경할 때도 자주 사용하는 화면입니다.
플로팅 사이드바 역시 여기서 설정을 진행하게 됩니다.
추가 CSS 메뉴 열기
사용자 정의하기 화면으로 들어가면 왼쪽 메뉴 아래쪽에 “추가 CSS” 메뉴가 있습니다. 이 메뉴는 별도 파일 수정 없이 CSS 코드를 바로 추가할 수 있는 공간입니다. 작은 디자인 수정이나 레이아웃 변경을 할 때 자주 사용하는 기능이기도 합니다.
특히 아스트라 테마는 가볍고 빠른 편이지만, 일부 기능은 직접 CSS를 넣어서 수정해야 하는 경우가 있습니다. 플로팅 사이드바 역시 그런 기능 중 하나입니다.
플로팅 사이드바 코드 추가
추가 CSS 화면으로 들어가면 코드 입력 공간이 나타납니다. 여기에 아래 코드를 넣으면 스크롤을 내려도 사이드바가 따라다니는 형태로 변경됩니다.
sticky sidebar 코드:
/**************
sticky-sidebar
**************/
@media screen and (min-width: 769px) {
#secondary {
position: sticky;
position: -webkit-sticky;
top: 6px;
}
}코드를 넣은 뒤 상단의 “공개” 버튼을 누르면 바로 적용됩니다.
현재 보고 있는 사이트처럼 스크롤을 내려도 사이드바가 고정된 상태로 따라오는 구조를 만들 수 있습니다.
실제로 많이 사용하는 이유
플로팅 사이드바를 사용하는 이유는 단순히 디자인 때문만은 아닙니다.
특히 아래 같은 상황에서 자주 사용하는 편입니다.
- 최신 글 위젯 노출
- 인기 글 유지
- 광고 영역 고정
- 카테고리 메뉴 표시
- 다운로드 버튼 유지
- 관련 글 클릭 유도
긴 글을 읽는 동안에도 사이드바 정보가 계속 보이기 때문에 블로그 구조를 조금 더 활용하기 편해지는 경우가 많습니다.
사이드바 여백 줄이는 코드
아스트라 테마는 기본적으로 사이드바 여백이 어느 정도 들어가 있습니다. 그런데 최신 글 위젯이나 썸네일 목록을 넣으면 공간이 좁아 보이는 경우가 생길 수 있습니다.
그럴 때는 아래 코드를 추가해 여백을 조금 줄이는 방식으로 조절할 수 있습니다.
.sidebar-main aside {
box-sizing: border-box;
}
.ast-right-sidebar #secondary {
padding-left: 30px;
}
/* right side padding */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
padding: 35px;
}위 코드를 함께 넣으면 사이드바 영역이 조금 더 넓어지고 글자 공간도 확보되는 편입니다.
적용 후 확인할 부분
코드를 적용한 뒤에는 실제 화면에서 한 번 확인해보는 것이 좋습니다.
특히 아래 부분을 체크하는 경우가 많습니다.
- 모바일에서 정상 동작하는가
- 스크롤 시 겹침 현상이 없는가
- 광고 영역과 충돌하지 않는가
- 긴 사이드바에서 잘리는 부분은 없는가
이번 코드는 769px 이상 화면에서만 동작하도록 설정했기 때문에 모바일에서는 일반 사이드바처럼 표시됩니다.
플러그인보다 CSS를 사용하는 이유
플로팅 기능을 제공하는 플러그인도 있지만, 단순 sticky 기능만 필요한 경우에는 CSS 방식이 조금 더 가벼운 편입니다. 특히 워드프레스는 플러그인이 많아질수록 충돌이나 속도 문제가 생기는 경우도 있기 때문에 작은 기능 정도는 직접 CSS로 처리하는 경우가 꽤 많습니다.
추가 CSS 방식은 제거도 간단합니다. 코드만 삭제하면 원래 상태로 바로 돌아갑니다.
자주 묻는 질문
모바일에서도 플로팅 사이드바가 적용되나요?
현재 코드는 PC 화면 기준으로만 동작하도록 설정했습니다. 모바일에서는 일반 사이드바 형태로 표시됩니다.
추가 CSS에 바로 붙여 넣으면 되나요?
네. 추가 CSS 화면에 그대로 붙여 넣은 뒤 공개 버튼을 누르면 적용됩니다.
아스트라 무료 버전에서도 가능한가요?
가능합니다. 별도 유료 기능 없이 CSS만으로 적용할 수 있습니다.
관련 글 추천
아스트라 테마와 함께 보면 설정 흐름을 이해하기 좋은 워드프레스 관련 글입니다.
