비활성화됨: 테마가 editor-style.css라는 스타일시트 파일을 추가하지 않습니까?

업데이트 날짜: 2023년 1월 6일

기사 디렉토리

온라인 마케팅을 하고 싶어하는 제 친구가 최근 워드프레스를 이용해 웹사이트 만드는 법을 배우기 시작했습니다.

TinyMCE 편집기 플러그인 설정에서 TinyMCE 편집기 플러그인을 활성화하면 이러한 문제가 발생합니다▼

CSS 스타일 메뉴 만들기

editor-style.css에 사용된 CSS 스타일을 로드하고 형식 메뉴를 교체합니다.
사용 중지됨 : editor-style.css에 대한 스타일시트 파일입니다.
사용 중지됨 : Editor-style.css라는 스타일시트 파일이 테마에 의해 추가되지 않았습니다.

위의 상황이 발생하면 WordPress 비주얼 편집기가 다음과 같이 원하는 코드 스타일을 표시하지 못할 수 있습니다.

인용구, 사전, 코드...

문제 해결

실례합니다editor-style.css파일이 WordPress 테마의 루트 디렉토리에 있습니까?
어린이 테마(어린이)를 사용하고 있습니까?

워드프레스 관리자 패널 에서 게시물을 편집할 때 CSS 스타일 문제로 인해 프런트엔드와 백엔드에서 다르게 표시됩니다.

그러나 Wordpress 3.0 이후에는 다음과 같은 매우 좋은 기능이 있습니다.

즉, 앞뒷면 스타일을 통일할 수 있어 워드프레스가 배경에서 기사를 편집할 때 앞모습과 동일하게 보일 수도 있다.
마찬가지로 WordPress 백엔드에서 편집된 게시물은 프런트엔드와 다르게 표시되기 때문에 더 이상 수정할 필요가 없습니다.

워드프레스의 기본 테마인 Twenty Eleven을 열면 아래와 같은 html 주석과 코드가 있는 것을 볼 수 있습니다 ▼

//此主题使用editor-style.css为可视化编辑器设置样式，以匹配主题样式
add_editor_style();

이 주석의 의미: 비주얼 편집기는 테마 editor-style.css 스타일과 일치합니다.
이 기능은 또한 WordPress의 기본 기능이므로 구현하기가 매우 간단합니다. 활성화하기만 하면 됩니다.

WordPress 게시물은 프런트엔드와 동일한 텍스트 스타일을 어떻게 표시합니까?

1단계: editor-style.css 파일을 생성합니다.

2단계: 다음 코드를 editor-style.css 파일에 추가하세요 ▼

@import url('../style.css');

body {
margin: 14px;
max-width: 702px;
}

.post-content {
font-size: 14px;
}

3단계: editor-style.css 파일을 워드프레스 테마의 루트 디렉터리에 복사합니다.

4 단계 : functions.php 파일에 다음 코드를 추가하세요 ▼

//此主题使用editor-style.css为可视化编辑器设置样式，以匹配主题样式 
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
add_editor_style();

// 对于块编辑器
add_theme_support( 'editor-styles' );
}

5단계: 워드프레스 게시물 편집 페이지를 새로 고침합니다.