모바일 기기에서 워드프레스 사이트의 좌우 여백이 넓거나 좁아서 조정하는 방법에 대한 질문이 네이버 카페 등을 통해 꾸준히 올라오고 있어 이 글에서는 GeneratePress 테마가 적용된 워드프레스 사이트에 대하여 모바일 장치에서 콘텐츠 좌우 여백을 조정하는 방법에 대하여 살펴보겠습니다. 다른 테마를 사용하는 경우에도 비슷한 방법으로 접근할 수 있습니다.
워드프레스 GeneratePress 테마: 모바일 장치에서 좌우 콘텐츠 여백 조정하기
GeneratePress 테마의 경우 유료 버전에서는 Spacing 모듈을 활성화하면 외부 여백(margin) 및 내부 여백(padding)을 쉽게 설정할 수 있습니다.
무료 버전을 사용한다면 CSS를 이용하여 모바일 기기에서의 좌우 여백 공간을 조정할 수 있습니다.
아바다 등 다른 테마를 사용하는 경우에도 동일하게 접근할 수 있습니다.
- 테마 옵션에서 여백 설정 옵션을 제공하면 테마 옵션에서 변경
- 여백 관련 설정이 제공되지 않으면 CSS를 사용하여 변경
GeneratePress 유료 버전(GP Premium)을 사용하는 경우 모바일 기기에서 좌우 여백 설정하기
제너레이트프레스 테마 유료 버전인 GP Premium을 설치하여 활성화하였다면 “사용자 정의”에서 여백을 세부적으로 설정할 수 있습니다.
1 GP Premium 플러그인이 활성화되어 있다면 워드프레스 관리자 페이지 » 모양 » GeneratePress로 이동하여 Spacing 모듈을 활성화합니다. 아래 그림과 같이 맨 오른쪽의 버튼이 Deactivate로 표시되면 활성 상태입니다.
2 모양 » 사용자 정의 » Layout » Container 페이지로 이동합니다.
맨 아래의 Content Padding (콘텐츠 패딩) 섹션으로 스크롤한 다음, 모바일 기기 아이콘을 클릭합니다. 그러면 모바일 기기에 대한 내부 여백(Padding)을 설정할 수 있습니다.
3 원하는 여백이 되도록 Content Padding의 Right(오른쪽) 및 Left(왼쪽) 값을 적당히 조정하시기 바랍니다. 오른쪽의 미리 보기 화면에서 여백을 확인할 수 있습니다. (하지만 일부 환경에서는 값을 변경해도 미리 보기 화면에서 변화가 없을 수 있습니다. 그런 경우 변경 후에 실제 스마트폰 등 모바일 기기에서 확인해야 합니다.)
변경 사항을 저장하고 캐시를 삭제한 후에 모바일 장치에서 여백이 적당한지 살펴보세요.
이 방법을 이용하면 사이트 전체에 대하여 모바일 기기에서의 콘텐츠 여백이 적용됩니다. 글(포스트)이나 페이지 등 사이트의 일부에 대한 여백만 조정하고 싶다면 아래의 CSS 방법을 이용해야 합니다.
GP 테마의 무료 버전에서 모바일 기기 좌우 여백 설정하기
제너레이트프레스 무료 버전을 이용하는 경우에는 CSS를 사용하여 여백을 조정할 수 있습니다. 기본적인 CSS는 그리 어렵지 않고 익히는 데 시간이 얼마 걸리지 않으므로 기본적인 CSS를 공부하면 많은 도움이 될 것입니다. (참고로 엘리멘터와 같은 페이지 빌더를 사용할 경우 CSS를 몰라도 웬만한 설정을 할 수 있지만, CSS를 조금 알면 보다 수월하게 활용할 수 있습니다.)
GP 무료 버전을 사용한다면 모양 » 사용자 정의 » 추가 CSS에 다음과 같은 코드를 추가하여 모바일 기기에서 콘텐츠 영역의 좌우 여백을 변경할 수 있습니다. 차일드 테마를 만들고 차일드 테마 내의 스타일시트 파일(style.css)에 입력해도 됩니다.
/* GP 테마: 모바일 기기에서 좌우 여백 조정하기 */
/* GeneratePress Theme: Adjusting Left and Right Margins on Mobile Devices */
@media (max-width: 768px) {
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
padding: 20px !important;
}
}상기 커스텀 CSS 코드는 해상도가 768px 미만인 기기에만 로드됩니다. CSS 미디어 쿼리를 사용하여 기기 해상도에 따라 다른 스타일을 지정할 수 있습니다.
CSS를 조금 아신다면 블로그 글이나 카테고리 또는 태그 페이지 등 아카이브 페이지 등 특정 페이지에만 적용되도록 설정할 수 있습니다.
저는 모바일 기기에서 포스트를 제외한 모든 페이지에 대하여 좌우 여백을 25px로 설정하고, 포스트(글)에는 35px를 지정했습니다.?
변경 사항이 적용되지 않는 경우
이 글을 참고하여 설정을 변경하거나 CSS 코드를 추가해도 아무런 변화가 없는 경우에는 캐시 플러그인을 캐시를 삭제하고 모바일 기기에서도 브라우저 캐시를 삭제하면 변경 사항이 반영될 것입니다.
예를 들어, 클라우드웨이즈를 이용하고 있고 워드프레스 사이트에 Breeze 캐시 플러그인이 설치된 경우 상단 툴바의 Breeze » Purge All Cache를 클릭하여 모든 캐시를 삭제할 수 있습니다. WP Rocket 캐시 플러그인을 사용하는 경우에도 비슷한 방법으로 캐시를 제거할 수 있습니다. 캐시 제거 후 조금 시간이 지나면 변경사항이 적용될 것입니다.
워드프레스 사이트에서 설정을 변경하거나 코드를 추가한 후에 변경 사항이 곧바로 반영되지 않을 경우 보통 캐시를 삭제하면 문제가 해결될 수 있습니다.