워드프레스 GeneratePress 테마: 콘텐츠 폭 조정하기 (PC 레이아웃을 모바일 레이아웃과 동일하게 설정하기)

GeneratePress 테마는 빠른 속도 때문에 워드프레스 블로그에 많이 사용되고 있습니다. 우리나라에서는 특히 수익형 블로그에 이 테마가 많이 활용되고 있습니다. 

GP 테마에서는 콘텐츠 컨테이너 폭을 조정할 수 있습니다. 최소 700px로 설정이 가능하며, 이보다 더 작게 컨테이너 너비를 조정하고 싶은 경우에는 CSS를 사용할 수 있습니다.

워드프레스 GeneratePress 테마: 콘텐츠 폭을 조정하는 방법 (PC 레이아웃을 모바일 레아아웃과 동일하게 설정하기)

아래 그림과 같이 사이드바를 표시하지 않고 콘텐츠 폭을 좁게 설정하면 독자들이 글 읽기에 집중하도록 하는 도 도움이 될 수 있습니다.

GeneratePress 테마에서 위의 그림과 같이 설정하는 방법에 대하여 살펴보겠습니다.

먼저 사이드바를 제거해 보도록 하겠습니다.

모양 » 사용자 정의 » Layout » Sidebars로 이동합니다. 아래와 같은 그림이 표시되면 사이드 레이아웃, 블로그 사이드바 레이아웃, 싱글 포스트 사이드바 레이아웃을 설정할 수 있습니다.

블로그 글에서만 사이드바를 제거하려면 Single Post Sidebar Layout의 옵션을 Content (no sidebars)를 선택합니다.

오른쪽 사이드바를 표시하려면 Content / Sidebar 옵션을 선택합니다. 일반적으로 오른쪽 사이드바를 많이 표시하지만 수익형 블로그에서는 사이드바를 표시하지 않는 경우가 많습니다.

콘텐츠 폭을 조정하려면 모양 » 사용자 정의 » Layout » Container로 이동합니다.

Container Width를 원하는 값으로 조정합니다. 최소 700px에서 최대 2000px까지 설정이 가능합니다. PC에서도 모바일 기기에서 보는 것처럼 레이아웃을 구성하고 싶은 경우에는 컨테이너 폭을 700px 이하로 조정하는 것도 고려할 수 있습니다.

더 좁게 설정하고 싶은 경우 다음과 같은 CSS 코드를 모양 » 사용자 정의 » 추가 CSS에 추가합니다.

.grid-container {
    max-width: 550px !important;
}

위의 코드를 추가하면 콘텐츠 너비의 최대 크기가 550px로 제한됩니다. 원하는 숫자 값으로 바꾸어 테스트해 보시기 바랍니다. 

상기의 방법으로 컨테이너 폭을 조정하면 PC에서도 모바일과 비슷한 레이아웃 효과를 얻을 수 있습니다.

PC에서도 모바일 기기에 표시되는 햄버거 메뉴를 표시하고 싶은 경우에는 모양 » 사용자 정의 » Layout  » Primary Navigation에서 Mobile Menu Breakpoint(모바일 메뉴 분기점)를 최대 값(2000px)으로 설정할 수 있습니다.

위와 같이 설정하면 2000px 이하의 해상도에서는 모바일 메뉴가 표시됩니다.

참고

GeneratePress 테마: 헤더, 푸터, 사이드바 제거하기 - 워드프레스 정보꾸러미

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)