워드프레스 블록 에디터, 실제처럼 꾸미기! (자식 테마로 너비&폰트 정복 ✨ - Hello Elementor 기준)

안녕하세요, 워드프레스 블로거 여러분! 😊 혹시 관리자 화면의 블록 에디터에서 글을 쓸 때, “어? 왜 이렇게 좁아 보이지?”, “실제 발행될 글꼴이랑 너무 다른데?” 하는 생각, 한 번쯤 해보신 적 없으신가요? 😥 저도 그랬답니다! 관리자 화면에서 보이는 것과 실제 독자들이 보는 화면이 다르면, 글의 레이아웃이나 가독성을 예측하기 어려워서 여간 불편한 게 아니죠.

하지만! 이런 고민을 싹 해결할 수 있는 아주 멋진 방법이 있답니다! 바로 자식 테마(Child Theme)를 만들어서 에디터 스타일을 내 마음대로 바꾸는 거예요! 🎨 오늘은 제가 직접 Hello Elementor 테마를 부모로 사용해서 자식 테마를 만들고, 블록 에디터의 너비와 글꼴을 실제 발행될 화면과 거의 똑같이 맞췄던 경험을 여러분께 자세히 공유해 드리려고 해요. 이렇게 하니 글을 쓰면서 최종 결과물을 미리 보는 것처럼 작업할 수 있어서 정말 정말 편리해졌답니다! 자, 그럼 지금부터 저와 함께 차근차근 따라 해 볼까요? 😉

🤔 잠깐! 자식 테마(Child Theme), 왜 필요할까요?

“그냥 원래 테마 파일 수정하면 안 되나요?” 하고 궁금해하실 수 있어요. 물론 가능하지만, 몇 가지 중요한 이유 때문에 자식 테마 사용을 강력 추천 드린답니다!

👍 안전한 커스터마이징 : 부모 테마의 파일을 직접 수정하면, 나중에 부모 테마가 업데이트될 때 내가 변경했던 내용이 싹~ 사라져 버릴 수 있어요! 😱 하지만 자식 테마에서 작업하면, 부모 테마는 안전하게 업데이트하면서 내가 추가하거나 변경한 내용은 그대로 유지할 수 있답니다.
👍 쉬운 관리 : 어떤 부분을 수정했는지 자식 테마 파일들만 보면 되니까 관리가 훨씬 쉬워요.
👍 원본 보존 : 혹시나 수정한 내용에 문제가 생겨도, 자식 테마만 비활성화하면 되니까 원래 부모 테마로 쉽게 돌아갈 수 있어요.

그래서 테마를 조금이라도 내 입맛에 맞게 바꾸고 싶다면, 자식 테마를 만드는 것이 기본 중의 기본이랍니다! 😊

🛠️ 준비물: 우리에게 필요한 것들

이번 작업은 Hello Elementor 테마를 기준으로 진행할 거예요!

워드프레스에 Hello Elementor 테마 설치 및 활성화 (부모 테마가 될 거예요!)
코드를 작성할 수 있는 텍스트 에디터 (VS Code, Sublime Text, 노트패드 등 뭐든 좋아요!)

자, 준비되셨다면 이제 본격적으로 자식 테마를 만들어볼까요?

🚀 자식 테마 만들기: 단계별로 따라 해봐요!

1단계: 자식 테마 폴더 만들기 📁

가장 먼저 우리 컴퓨터에 자식 테마 파일들을 담을 폴더를 만들어야 해요. 저는 부모 테마 이름 뒤에 -child를 붙여서 hello-elementor-child 라는 이름으로 폴더를 만들었어요! 이렇게 이름을 지으면 나중에 관리하기 편하답니다. 😊 부모 테마 폴더의 이름을 확인하시면 이름짓기 편하겠죠?

2단계: style.css 파일 만들기 (자식 테마의 심장! ❤️)

모든 워드프레스 테마에는 style.css 파일이 꼭 필요해요! 이 파일은 테마의 정보를 담고 있고, CSS 스타일을 정의하는 곳이기도 하죠. hello-elementor-child 폴더 안에 style.css 파일을 만들고 아래 내용을 꼼꼼하게 입력해주세요.

/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Text Domain: hello-elementor-child
Version: 1.0.0
Author: Your Name (여러분의 이름을 넣어주세요!)
Author URI: Your Website URL (여러분의 웹사이트 주소를 넣어주세요!)
Description: A child theme for Hello Elementor. (자식 테마에 대한 간단한 설명!)
*/

body {
  /* 여기에 여러분이 원하는 전체 사이트 스타일을 추가할 수 있어요!
     예를 들어, body { background-color: #f0f0f0; } 처럼요.
     지금은 블록 에디터 스타일에 집중할 거라 비워둘게요! */
}

코드 해설 타임! 🔍

/* ... */: 이 부분은 주석(Comment)이에요. 워드프레스가 이 테마 정보를 읽을 때 사용하는 중요한 부분들이랍니다!
Theme Name: Hello Elementor Child : 자식 테마의 이름이에요. 워드프레스 관리자 화면 > 외모 > 테마 목록에 이 이름으로 표시된답니다.
Template: hello-elementor : 이 부분이 정말 중요해요! 부모 테마의 폴더 이름을 정확하게 적어줘야 해요. 우리는 Hello Elementor 테마를 부모로 사용할 거니까 hello-elementor라고 적어줬어요. (대소문자도 정확하게!)
Text Domain : hello-elementor-child : 테마의 텍스트를 번역 가능하게 할 때 사용되는 고유 식별자예요. 보통 테마 폴더 이름과 같게 해준답니다.
Version: 1.0.0 : 자식 테마의 버전이에요. 나중에 수정할 때마다 버전을 올려주면 관리하기 좋아요.
Author, Author URI, Description: 테마 제작자 정보와 설명을 적는 곳이에요. 여러분의 정보로 채워주세요! 😊
body { ... }: 이 부분부터는 실제 CSS 스타일을 작성하는 곳이에요. 지금은 블록 에디터 스타일링이 주 목적이라 비워뒀지만, 나중에 여러분 사이트 전체에 적용될 CSS를 여기에 추가할 수 있답니다!

3단계: 블록 에디터 너비 조절하기 (theme.json 파일 만들기 📏)

워드프레스 최신 버전에서는 theme.json 파일을 통해 테마의 다양한 디자인 설정을 제어할 수 있어요. 블록 에디터의 너비도 이 파일을 통해 조절할 수 있답니다! hello-elementor-child 폴더 안에 theme.json 파일을 만들고 아래 내용을 넣어주세요.

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "1340px",
      "wideSize": "1340px"
    }
  }
}

코드 해설 타임! 🔍

"version": 2: theme.json 파일의 규격 버전이에요. 보통 2를 사용해요.
"settings": { ... }: 테마의 전반적인 설정을 정의하는 부분이에요.
"layout": { ... }: 레이아웃과 관련된 설정을 하는 곳이죠.
"contentSize": "1340px": 블록 에디터에서 기본 콘텐츠 블록(예: 단락 블록)이 가질 수 있는 최대 너비를 설정해요. 저는 실제 제 블로그 콘텐츠 영역 너비에 맞춰서 1340px로 설정했어요. 여러분의 사이트 콘텐츠 너비에 맞게 조절해주세요!
"wideSize": "1340px": ‘넓은 정렬(wide alignment)’을 지원하는 블록(예: 이미지 블록의 넓은 너비 옵션)이 가질 수 있는 최대 너비예요. 저는 콘텐츠 너비와 동일하게 1340px로 설정했지만, 필요에 따라 다르게 설정할 수도 있답니다.

이 theme.json 파일 덕분에 블록 에디터의 기본 너비가 우리가 원하는 만큼 넓어져서, 실제 발행될 때의 모습과 비슷하게 글을 작성할 수 있게 돼요! 👍

4단계: 블록 에디터에 커스텀 스타일 적용 준비 (functions.php 파일 만들기 ⚙️)

이제 블록 에디터에 우리가 직접 만든 CSS 스타일을 적용할 수 있도록 워드프레스에 알려줘야 해요. 이 역할은 functions.php 파일이 담당한답니다! hello-elementor-child 폴더 안에 functions.php 파일을 만들고 아래 코드를 입력해주세요.

<?php
/**
 * Hello Elementor Child Theme functions and definitions
 */

/**
 * 블록 에디터에 커스텀 스타일을 적용합니다.
 */
function hello_child_after_setup_theme() {
    // 1. 테마가 에디터 스타일을 지원하도록 설정합니다.
    add_theme_support( 'editor-styles' );

    // 2. 'editor-style.css' 파일을 에디터 스타일시트로 추가합니다.
    //    이 파일에 실제 에디터에 적용될 CSS를 작성할 거예요!
    add_editor_style( 'editor-style.css' );
}
// 'after_setup_theme' 액션 훅에 우리가 만든 함수를 연결합니다.
// 테마가 설정된 후에 이 함수가 실행되도록 하는 거예요.
add_action( 'after_setup_theme', 'hello_child_after_setup_theme');
?>

코드 해설 타임! 🔍

<?php ... ?>: PHP 코드가 시작되고 끝나는 것을 알려주는 태그예요.
function hello_child_after_setup_theme() { ... }: 우리가 직접 만든 함수예요. 이 함수 안에서 블록 에디터 스타일 설정을 할 거예요.
add_theme_support( 'editor-styles' );: “우리 테마는 이제 블록 에디터 스타일을 직접 꾸밀 거예요!”라고 워드프레스에 선언하는 것과 같아요. 이게 있어야 add_editor_style() 함수가 작동한답니다.
add_editor_style( 'editor-style.css' );: 실제로 블록 에디터에 적용될 CSS 파일의 이름을 지정해주는 거예요. 우리는 editor-style.css라는 이름의 파일을 만들어서 여기에 스타일을 작성할 거랍니다. 이 파일은 자식 테마 폴더(hello-elementor-child) 바로 아래에 있어야 해요!
add_action( 'after_setup_theme', 'hello_child_after_setup_theme');: 워드프레스가 테마를 초기 설정하는 after_setup_theme 시점에 우리가 만든 hello_child_after_setup_theme 함수를 실행하도록 연결해주는 거예요. 이렇게 해야 테마가 준비되자마자 에디터 스타일 설정을 할 수 있답니다.

이 functions.php 파일 덕분에, 이제 우리가 만들 editor-style.css 파일에 작성하는 CSS가 블록 에디터 화면에 마법처럼 적용될 거예요! ✨

5단계: 블록 에디터 스타일 직접 꾸미기 (editor-style.css 파일 만들기 🎨)

드디어! 블록 에디터 화면을 직접 꾸밀 시간이에요! hello-elementor-child 폴더 안에 editor-style.css 파일을 만들고, 아래 예시처럼 원하는 스타일을 작성해주세요.

/* 블록 에디터 전체 래퍼(Wrapper) 스타일 */
.editor-styles-wrapper {
    /* 여기에 여러분이 사용하는 실제 웹사이트의 글꼴(font-family)을 지정해주세요!
       예시로 omnigothic, paperlogy, sans-serif 를 사용했어요.
       웹폰트를 사용한다면 해당 웹폰트가 로드되도록 설정해야 할 수도 있어요. */
    font-family: omnigothic, paperlogy, sans-serif;
    font-size: 17px; /* 원하는 기본 글자 크기를 지정하세요. */
    line-height: 1.8; /* 원하는 줄 간격을 지정하세요. 가독성에 중요해요! */
    color: #333; /* 원하는 기본 글자 색상을 지정하세요. */
}

/* 개별 블록들의 최대 너비 및 가운데 정렬 */
/* theme.json에서 설정한 contentSize와 일치시키거나,
   여기서 더 세밀하게 제어할 수 있어요. */
.wp-block {
    max-width: 1340px; /* theme.json의 contentSize와 맞추거나, 여기서 직접 조절! */
    /* margin: 0 auto; */
    /* 블록들을 에디터 중앙에 위치시키려면 이 주석을 푸세요. 단, 에디터 UI와 충돌이 없는지 확인 필요 */
}

/* 특정 블록(예: H2 제목) 스타일 예시 */
.editor-styles-wrapper h2 {
    font-size: 28px; /* H2 제목의 글자 크기 */
    font-weight: bold; /* H2 제목의 굵기 */
    color: #111; /* H2 제목의 색상 */
    margin-top: 2em; /* H2 제목 위쪽 여백 */
    margin-bottom: 1em; /* H2 제목 아래쪽 여백 */
}

/* 단락(Paragraph) 블록 스타일 예시 */
.editor-styles-wrapper p {
    margin-bottom: 1.5em; /* 단락 아래쪽 여백 */
}

/* 더 많은 스타일을 추가해서 실제 웹사이트와 최대한 비슷하게 만들어보세요! */

코드 해설 타임! 🔍

.editor-styles-wrapper { ... }: 블록 에디터의 글쓰기 영역 전체를 감싸는 부분에 적용될 스타일이에요.
- font-family: 여기에 여러분의 웹사이트에서 실제로 사용하는 글꼴 이름을 순서대로 적어주세요! 만약 웹폰트(@font-face나 구글 폰트 등)를 사용한다면, 해당 웹폰트가 에디터에서도 로드될 수 있도록 추가 작업이 필요할 수 있어요. (가장 간단한 방법은 functions.php에서 add_editor_style()로 웹폰트 CSS 파일도 함께 추가하는 것이랍니다!)
- font-size, line-height, color: 실제 웹사이트의 본문 글자 크기, 줄 간격, 글자 색상과 최대한 비슷하게 맞춰주세요.
.wp-block { ... }: 에디터 내의 각 블록(단락, 제목, 이미지 등)에 적용될 스타일이에요.
- max-width: 1340px;: 여기서도 블록의 최대 너비를 설정할 수 있어요. theme.json에서 설정한 contentSize와 맞추거나, 여기서 더 구체적으로 조절할 수도 있답니다. 실제 웹사이트 콘텐츠 영역의 너비와 동일하게 해주면 정말 편해요!
- /* margin: 0 auto; */: 이 주석을 풀면 블록들이 에디터 화면 중앙에 정렬될 수 있지만, 때로는 에디터 UI와 어색하게 보일 수 있으니 테스트해보시고 결정하세요!
.editor-styles-wrapper h2 { ... }, .editor-styles-wrapper p { ... }: 특정 HTML 태그(여기서는 H2 제목과 단락)에 대한 스타일을 지정하는 예시예요. 실제 여러분의 웹사이트 디자인에 맞춰서 제목 크기, 색상, 여백 등을 자유롭게 꾸며보세요!

중요 팁! 🌟
크롬이나 파이어폭스 같은 브라우저의 ‘개발자 도구(검사)‘ 기능을 이용하면, 여러분의 실제 웹사이트에서 각 요소(제목, 본문, 이미지 등)에 어떤 CSS 스타일이 적용되어 있는지 쉽게 확인할 수 있어요! 그 스타일들을 참고해서 editor-style.css 파일에 하나씩 옮겨오면, 블록 에디터 화면을 실제와 거의 똑같이 만들 수 있답니다! 😊

6단계: 자식 테마 압축 및 워드프레스에 업로드하기 📦➡️💻

자, 이제 우리가 만든 파일들을 모두 모아서 워드프레스에 설치할 시간이에요!

파일 정리: hello-elementor-child 폴더 안에 아래 파일들이 모두 들어있는지 확인해주세요.
- style.css
- theme.json
- functions.php
- editor-style.css
압축하기: hello-elementor-child 폴더 전체를 ZIP 파일 형식으로 압축해주세요. (폴더 이름과 동일하게 hello-elementor-child.zip 파일이 만들어지겠죠?)
워드프레스에 업로드:
- 워드프레스 관리자 화면으로 접속하세요.
- 왼쪽 메뉴에서 [외모] → [테마]로 이동하세요.
- 페이지 상단의 [새로 추가] 버튼을 클릭하세요.
- 다시 페이지 상단의 [테마 업로드] 버튼을 클릭하세요.
- [파일 선택] 버튼을 눌러 방금 만든 hello-elementor-child.zip 파일을 선택하고, [지금 설치] 버튼을 누르세요.
자식 테마 활성화: 테마가 성공적으로 설치되면, [활성화] 링크를 클릭해서 Hello Elementor Child 테마를 활성화해주세요!

🎉 결과 확인! 이제 글쓰기가 즐거워져요!

자식 테마를 활성화하고 블록 에디터에서 새 글을 작성하거나 기존 글을 편집해보세요! 어때요? 이전에 비해 에디터 너비도 훨씬 넓어지고, 글꼴이나 제목 스타일도 실제 웹사이트에서 보이는 것과 거의 비슷해졌을 거예요! 😍 이제 글을 쓰면서 “발행하면 어떻게 보일까?” 하고 계속 미리보기를 누르지 않아도, 에디터 화면에서 바로바로 확인하며 작업할 수 있으니 얼마나 편한지 몰라요!

이제 여러분도 에디터 스타일링 전문가! 🎓

오늘은 저와 함께 자식 테마를 만들어서 워드프레스 블록 에디터의 너비와 글꼴, 스타일을 실제 웹사이트와 비슷하게 꾸며보는 방법을 알아봤어요. 처음에는 조금 복잡해 보였을지 몰라도, 차근차근 따라 해보니 생각보다 어렵지 않으셨죠? 😊 부모 테마의 functions.php를 직접 수정하는 것보다 훨씬 안전하고, theme.json과 editor-style.css를 통해 세밀하게 제어할 수 있다는 점이 정말 매력적이에요!

이제 여러분도 답답했던 블록 에디터 환경에서 벗어나, 훨씬 쾌적하고 효율적으로 글을 작성할 수 있게 되었을 거예요! 오늘 배운 내용을 바탕으로 여러분의 블록 에디터를 더욱 멋지게 꾸며보세요! 💪

오늘 이 글이 블록 에디터 때문에 고민했던 분들께 시원한 해결책이 되었기를 바라며, 다음에 또 유용하고 재미있는 이야기로 찾아올게요! 그때까지 안녕! 👋

워드프레스 블록 에디터, 실제처럼 꾸미기! (자식 테마로 너비&폰트 정복 ✨ – Hello Elementor 기준)

목차

🤔 잠깐! 자식 테마(Child Theme), 왜 필요할까요?

🛠️ 준비물: 우리에게 필요한 것들

🚀 자식 테마 만들기: 단계별로 따라 해봐요!

1단계: 자식 테마 폴더 만들기 📁

2단계: style.css 파일 만들기 (자식 테마의 심장! ❤️)

3단계: 블록 에디터 너비 조절하기 (theme.json 파일 만들기 📏)

4단계: 블록 에디터에 커스텀 스타일 적용 준비 (functions.php 파일 만들기 ⚙️)

5단계: 블록 에디터 스타일 직접 꾸미기 (editor-style.css 파일 만들기 🎨)

6단계: 자식 테마 압축 및 워드프레스에 업로드하기 📦➡️💻

🎉 결과 확인! 이제 글쓰기가 즐거워져요!

이제 여러분도 에디터 스타일링 전문가! 🎓

댓글 남기기 응답 취소