WordPress 블록 편집기가 프론트 엔드 디자인처럼 보이도록

프론트 엔드 디자인과 일치하여 WordPress 블록 편집기의 출현을 만드십시오!

WordPress 사용자로서 기사 편집을 위해 동시에 두 개의 탭을 열어야합니까? 한 탭은 새로운 Gutenberg 블록 편집기를 보여주고 다른 탭은 최종 렌더링이 잘못되지 않도록 기사의 프론트 엔드 효과를 미리 봅니다.

WordPress 테마 스타일은 웹 사이트의 프론트 엔드에만 영향을 미치며 백엔드 편집기는 일반적으로 프론트 엔드와 매우 다릅니다. 그러나 이것은 변하지 않습니다! 맞춤형 스타일 시트를 사용하면 WordPress 편집기를 거의 완벽하게 미러링 할 수 있습니다.

이것은 두 가지 간단한 단계 만 수행합니다.

1. 테마의 functions.php 파일에 몇 줄의 PHP 코드를 추가하여 편집기에 사용자 정의 스타일 시트를로드하도록 알려줍니다.
2. 이 사용자 정의 스타일 시트를 작성하고 구성하십시오.

시작하자!

1 단계 : functions.php 파일을 수정합니다

자체가 개발되지 않은 WordPress 테마를 사용하는 경우 기본 테마를 수정하기 전에 하위 주제를 작성하는 것이 좋습니다 .

테마의 functions.php 파일 (일반적으로 테마 폴더의 루트 디렉토리에 위치)을 열고 파일 끝에 다음 코드를 추가하십시오.

 // gutenberg custom stylesheet add_theme_support ( 'editor-styles');
add_editor_style ( 'editor-style.css'); // 스타일 시트 파일을 올바르게 가리키고 있는지 확인하십시오.

이 코드는 WordPress에게 사용자 정의 스타일 시트를 사용하여 Gutenberg와 협력하고 스타일 시트 파일 ( editor-style.css )의 위치를 ​​지정한다고 말합니다.

2 단계 : CSS 스타일을 작성하십시오

이제 우리는 CSS 작성 과정에 들어갑니다.

다양한 WordPress 테마로 인해 모든 테마에 맞는 스타일 시트를 작성하는 것은 불가능합니다. 다음 예는 내 웹 사이트에서 사용한 주제를 기반으로하며 웹 사이트의 스타일 시트를 구축하는 방법을 이해하는 데 도움이됩니다. 기사가 끝나면 신속하게 시작하는 데 도움이되는 템플릿이 제공됩니다.

editor-style.css 라는 새 파일을 만들고 테마의 루트 디렉토리 (또는 자식 테마 디렉토리)에 배치하십시오.

블록 편집기의 CSS 스타일은 표준 CSS와 약간 다릅니다. 예를 들어, 다음 코드는 기사에서 텍스트 크기를 올바르게 적용 할 수 없습니다.

 H2 {
  글꼴 크기 : 1.75EM;
}

스타일을 올바르게 설정하려면 블록 편집기에서 블록을 찾아야합니다. 이것은 의미합니다<h2></h2> .rich-text.block-editor-rich-text__editable 클래스를 사용하여 요소를 스코핑해야합니다.

 h2.rich-text.block-editor-rich-text__editable {
  글꼴 크기 : 1.75EM;
}

공통 블록 편집기 요소를 스타일로 만들기 위해이 패턴을 따르는 기본 CSS 파일을 만들었습니다. GitHub에서 파일을 가져 와서 테마와 일치하도록 스타일을 바꿀 수 있습니다.

여기에서 스타일 빌드 프로세스를 자세히 확장하지는 않지만 템플릿은 명확한 아이디어를 제공해야합니다. 좋은 출발점은 프론트 엔드 스타일 시트에서 요소를 복사하는 것이지만 블록 편집기 창에 적용되도록 일부 요소 클래스를 변경해야 할 수도 있습니다.

의심스러운 경우 브라우저 개발자 도구를 사용하여 요소를 확인하고 해당 클래스 이름을 결정하십시오. 위의 링크의 템플릿은 대부분의 요소를 포함해야합니다.

효과 디스플레이

먼저 사용자 정의 스타일 시트없이 WordPress 편집기를 살펴 보겠습니다.

그런 다음 테스트 웹 사이트 프론트 엔드를 비교하십시오.

둘 사이의 차이는 중요합니다. 내 테스트 사이트는 많은 그라디언트, 사용자 정의 글꼴, 버튼 스타일 및 참조 블록을 사용하며 컨테이너는 간단한 사각형이 아닙니다.

좋아하든 아니든, 이것이 기본 Gutenberg 편집기 UI와 큰 차이라는 데 동의 할 것입니다. 그렇기 때문에 기사를 미리보기 위해 탭 페이지를 별도로 열어야합니다.

이제 사용자 정의 스타일을로드하고 효과를 보자.

바라보다! 편집자 UI는 이제 내 웹 사이트의 프론트 엔드와 거의 동일하게 보입니다. 내용 너비, 글꼴, 색상 및 다양한 요소는 프론트 엔드와 일치합니다. 나는 기사의 제목과 같은 아름다운 배경을 가지고 있습니다!

즉, 다른 탭에서 더 이상 미리 볼 필요가 없습니다. 시원하지 않습니까?

WordPress 편집기를 프론트 엔드 모양과 일치하게 유지하면 효율성이 크게 향상 될 수 있습니다. 나에게있어, 기사를 편집 할 때 프론트 엔드 효과를 볼 수 있도록 탭을 자주 전환하면 내 생각을 방해 할 것이므로 피하는 것을 선호합니다.

위의 단계가 동일한 효과를 달성하는 데 도움이되기를 바랍니다!

위 내용은 WordPress 블록 편집기가 프론트 엔드 디자인처럼 보이도록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!