워드프레스 블록 에디터의 편집 화면 너비가 좁은 경우 100% 폭으로 설정하는 방법

Last Updated: 2024년 12월 26일 댓글

대부분의 워드프레스 테마에서는 블록 에디터의 편집 화면 너비가 적당한 너비로 설정되어 있지만, 일부 테마의 경우 블록 에디터 편집 화면에서 블록들의 최대 폭이 좁게 지정되어 편집 화면에 여백이 너무 많거나 완전히 채워지지 않는 경우가 있습니다.

워드프레스 Awaken 테마와 Spiel 테마 등 일부 테마의 경우 블록 편집기의 블록들의 최대 너비가 제한되어 있고 admin_head 훅을 사용하여 블록 에디터의 스타일을 조정하려고 시도해도 변경이 되지 않을 수 있습니다.

이 블로그에는 현재 GeneratePress 테마가 설치되어 있는데, GP 테마도 살펴보니 블록 에디터에서 편집 화면이 1120px 또는 그보다 좁게 설정되어 있는 것 같습니다. 이 블로그에서는 745px 정도로 설정되어 있네요.

이 글에서는 블록 에디터의 편집 화면에서 블록들의 너비가 제한되어 있는 경우 너비 제한을 해제하는 방법에 대하여 살펴보겠습니다.

워드프레스 블록 에디터의 편집 화면 너비가 좁은 경우 100% 폭으로 설정하는 방법

일부 워드프레스 테마에서 블록 에디터 편집 화면에서 블록들의 폭이 좁게 제한되어 있는 경우가 있습니다. 보통은 적당한 폭으로 설정되어 문제가 없지만, 너무 좁은 경우 보기가 안 좋거나 글을 작성하는 데 방해가 될 수 있습니다.

Awaken 테마의 경우 다음과 같은 스타일이 적용되어 블록들의 최대 너비가 747px로 설정되어 있습니다.

.wp-block {
    max-width: 747px;
}

Spiel 테마는 아래와 같은 스타일이 테마에서 로드되어 최대 폭이 650px로 제한됩니다.

.editor-visual-editor__post-title-wrapper > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 650px;
    margin-left: auto !important;
    margin-right: auto !important;
}

이 경우 다음과 같은 코드를 차일드 테마의 함수 파일에 추가하면 문제가 해결될 수 있습니다.

function full_width_editor_custom_style() {
    echo '<style>
        .editor-styles-wrapper .wp-block,
        .editor-post-title,
        .editor-post-title__input {
            max-width: 100% !important;
            width: 100% !important;
        }
    </style>';
}
add_action('admin_head', 'full_width_editor_custom_style');

하지만 Spiel 테마와 Awaken 테마에서는 위의 코드를 추가해도 문제가 해결되지 않습니다.

테마가 add_theme_support( 'editor-styles' )을 선언하고 있고, “에디터용 CSS”를 로드하고 있을 가능성이 있습니다. 특히 블록 에디터 지원 테마는 보통 이렇게 구성된다고 합니다. Spiel 테마는 블록 기반 테마입니다.

만약 테마에서 에디터 스타일을 등록해두었다면, 테마가 제공하는 스타일이 우선순위를 가져갈 수 있습니다.

이 경우에는 editor-style.css 파일을 직접 만들어서 테마(또는 차일드 테마)에 등록하는 방식으로 접근해야 합니다.

이런 작업은 초보자에게 쉽지 않으므로 간단한 워드프레스 플러그인을 만들어 보았습니다. 플러그인은 네이버 카페에서 다운로드할 수 있습니다.

GeneratePress 테마에서도 블록 에디터의 블록들의 최대 폭이 제한되어 있을 수 있습니다. 제너레이트프레스 테마를 사용하는 경우에도 위의 플러그인을 사용하면 블록 에디터의 폭이 100%로 설정됩니다.

플러그인 설치 방법

플러그인은 유료 플러그인을 설치하는 것과 동일하게 업로드 방식으로 설치하시면 됩니다. 워드프레스 알림판 » 플러그인 » 새 플러그인 추가로 이동하여 플러그인 업로드 버튼을 클릭합니다.

워드프레스 플러그인 설치

플러그인 추가 페이지가 표시되면 찾아보기... 버튼을 클릭하여 다운로드한 zip 파일을 지정하거나 zip 파일을 파일 선택 필드로 끌어다 놓은 다음, 지금 설치 버튼을 클릭하여 설치할 수 있습니다.

블록 에디터에서 블록들의 최대 폭을 특정 너비 값으로 설정하기

블록들의 최대 폭을 100%가 아닌 특정 너비 값로 지정하고 싶은 경우에는 플러그인에 포함된 스타일시트 파일(CSS 파일)에서 max-width 값을 변경하면 됩니다. 플러그인에 포함된 CSS 파일에는 다음과 같은 코드가 입력되어 있습니다. 아래의 코드에서 max-width 값을 적절히 변경(예: 1200px)하세요.

.editor-styles-wrapper .wp-block {
    max-width: 100% !important; /* 100%를 원하는 값으로 변경 */
    width: 100% !important;
}

원하는 경우 추가적인 스타일을 CSS 파일에 추가할 수 있습니다.

위의 플러그인은 일부 테마에서만 테스트했습니다. 작동하지 않는 테마가 있다면 아래 댓글을 통해 테마 이름을 알려주시면 제가 시간이 될 때 확인하여 코드를 업데이트할 수 있으면 업데이트하도록 하겠습니다. 단, 유료 테마의 경우 제가 확인하지 못할 수 있습니다.

마치며

이상으로 블록 에디터에서 편집 화면이 좁은 경우 편집 화면 너비를 100%나 특정 너비값으로 설정하는 방법에 대하여 살펴보았습니다.

GeneratePress 테마에서도 편집 화면 폭이 좁을 수 있으며, Awaken, Spiel 등 일부 테마에서 편집기의 블록들의 너비가 제한되어 있습니다. Awaken과 Spiel 테마는 사용자들이 그리 많은 편은 아닙니다.

참고


댓글 남기기

Leave a Comment

카카오톡 상담 카톡 서비스 상담