Disabled: The theme does not add a stylesheet file named editor-style.css?

have something to doWeb Promotionfriend, recently started learning to useWordPress website.

Enable TinyMCE editor plug-in, in the settings of TinyMCE editor plug-in, encountered such a problem▼

Create CSS style menu

• Load the CSS styles used in editor-style.css and replace the Format menu.
• disabled: The stylesheet file for editor-style.css.
• disabled: A stylesheet file named editor-style.css was not added by your theme.

If the above situation occurs, the WordPress visual editor may not be able to display the code style we want, such as:

• blockquote, pre, code...

Troubleshoot

1. Excuse meeditor-style.cssfile, is it in the root directory of the WordPress theme?
2. Are you using child themes (child)?

When we areWordPress backendWhen editing an article in the middle, due to the CSS style problem, the foreground and background display are different...

But after Wordpress 3.0, it has very good features:

• That is, the front and back styles can be unified, so when Wordpress edits articles in the background, it can also look the same as the front.
• Similarly, we no longer need to modify the post edited in the WordPress backend because it is displayed differently from the frontend.

If we open Wordpress's default theme Twenty Eleven, we can see that there is an html comment and code like this ▼

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

• What this comment means: The visual editor matches the theme editor-style.css style.
• This function is also very simple to implement, because it is the default function of WordPress, we just need to activate it.

How do WordPress posts display the same text style as the frontend?

Step 1:Create editor-style.css file

Step 2:Add the following code to the editor-style.css file▼

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

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

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

Step 3:Copy the editor-style.css file to the root directory of your WordPress theme.

No. 4 step : Add the following code to the functions.php file▼

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

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

Step 5:Refresh the WordPress post edit page

• Check and confirm whether the text styles in the front and back of WordPress are the same?

Please Note

If your WordPress theme does not add CSS styles to the "quote tag blockquote" and "code tag pre/code", you need to add the corresponding CSS code to the style.css file of the WordPress theme.

For details, please check the following website building tutorial ▼

How to use blockquote? HTML blockquote tag demo effect

In WordPress article editing, there is a common "Blockquote" button ▼ When used, it will add aMark to invoke some quoted statement or highlight. What does blockquote mean?The following is Chen Wei...

What is pre in CSS style? The role of pre wrapping code tags in HTML

We need to learn some basic knowledge of CSS and HTML to build a website with WordPress: due to the CSS style files of some WordPress themes, the pre and code tag styles are not added.Most browsers currently supportmark. h...