Desactivado: o tema non engade un ficheiro de folla de estilo chamado editor-style.css?

ter algo que facerPromoción Webamigo, recentemente comezou a aprender a usarSitio web de WordPress.

Habilitar o complemento do editor TinyMCE, na configuración do complemento do editor TinyMCE, atopouse con tal problema▼

Crear menú de estilo CSS

• Cargue os estilos CSS usados ​​en editor-style.css e substitúa o menú Formato.
• Desactivado: O ficheiro da folla de estilo para editor-style.css.
• Desactivado: O teu tema non engadiu un ficheiro de folla de estilo chamado editor-style.css.

Se ocorre a situación anterior, é posible que o editor visual de WordPress non poida mostrar o estilo de código que queremos, como:

• cita de bloque, pre, código...

Solucionar problemas

1. Con permisoeditor-style.cssficheiro, está no directorio raíz do tema de WordPress?
2. Estás a usar temas infantís (nenos)?

cando estamosBackend de WordPressAo editar un artigo no medio, debido ao problema de estilo CSS, a visualización do primeiro plano e do fondo son diferentes...

Pero despois de Wordpress 3.0, ten características moi boas:

• É dicir, pódense unificar os estilos de fronte e de atrás, polo que cando Wordpress edita artigos en segundo plano, tamén pode ter o mesmo aspecto que a fronte.
• Do mesmo xeito, xa non necesitamos modificar a publicación editada no backend de WordPress porque se mostra de forma diferente á frontend.

Se abrimos o tema predeterminado de Wordpress, Twenty Eleven, podemos ver que hai un comentario html e un código coma este ▼

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

• Que significa este comentario: o editor visual coincide co estilo editor-style.css do tema.
• Esta función tamén é moi sinxela de implementar, xa que é a función predeterminada de WordPress, só necesitamos activala.

Como as publicacións de WordPress mostran o mesmo estilo de texto que a interface?

Capitulo 1:Crea un ficheiro editor-style.css

Capitulo 2:Engade o seguinte código ao ficheiro editor-style.css▼

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

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

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

Capitulo 3:Copia o ficheiro editor-style.css no directorio raíz do teu tema de WordPress.

Capítulo 4 步:Engade o seguinte código ao ficheiro 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' );
}

Capitulo 5:Actualiza a páxina de edición de publicacións de WordPress

• Comproba e confirma se os estilos de texto na parte frontal e traseira de WordPress son iguais?

注意 事项

Se o teu tema de WordPress non engade estilos CSS á "quote tag blockquote" e "code tag pre/code", debes engadir o código CSS correspondente ao ficheiro style.css do tema de WordPress.

Para obter máis información, consulte o seguinte tutorial de creación de sitios web ▼

🔗Como usar blockquote? Efecto de demostración da etiqueta blockquote en HTML

🔗Que é pre en estilo CSS? A función da etiqueta de código de salto de liña preautomático en HTML