워드프레스에서 가로 폭이 넓은 테마를 찾고 찾아도 맘에 드는 것이 없어 결국 직접 수정해서 사용 중입니다.

자식 테마 만들기는 다른 포스트에 있습니다.

자식 테마를 만든 후 부모의 스타일 시트(style.css)를 복사 후 수정해 가로 폭(다른 것도 얼마든지)을 수정해 봅시다.

제가 사용하는 테마는 ribbon lite로 이것을 기준으로 설명하지만 다른 테마들도 크게 다를 것 없습니다.

고쳐야 하는 부분을 알아내는 방법은 웹 브라우저에서 F12를 눌러 개발자 도구를 열고 넓히고자 하는 부분(본문이나 사이드바)의 HTML을 찾아 클릭한 다음 창을 줄였다 늘렸다 해보면 어떤 스타일 시트가 변해야 하는지 쉽게 알 수 있습니다.

적용되는 스타일 시트가 달라지면 실시간으로 어떤 스타일 시트 때문에 지금의 모양이 되는지 보여주니까요.

제 경우 가로 폭 최대 크기를 1050px -> 1200px로 고쳤습니다.

#page, .container {
    max-width: 1050px; -> 1200px;
    min-width: 240px;
    overflow: visible;
    margin: 0 auto;
    position: relative;
}

늘어난 가로 폭에 맞춰 본문(article)과 사이드바의 비율도 조절했습니다. 사이드바는 전과 같은 크기가 되도록 말이죠.

.article {
    width: 68.58%; -> 71%;
    max-width: 720px; -> 850px;
    float: left;
    margin-bottom: 30px;
}

.sidebar.c-4-12 {
    float: right;
    width: 28.58%; -> 25%;
    max-width: 300px;
    line-height: 20px;
}

이젠 1200px 이하에서 화면에 딱 맞게 바뀌도록 고쳐주었습니다.

@media screen and (max-width:1100px -> 1250px) { 
    #page, .container, .site-branding { max-width: 96% }
}

전보단 좀 더 높은 해상도부터 태블릿 모드(사이드바가 아래로 이동)가 되도록 했습니다.

@media screen and (max-width: 720px -> 865px) { 
    .article {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .sidebar.c-4-12 {
        width: 100%;
        float: none!important;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }
...
}