Desativado: O tema não adiciona um arquivo de folha de estilo chamado editor-style.css?

tem algo para fazerPromoção na Webamigo, recentemente comecei a aprender a usarSite WordPress.

Ative o plug-in do editor TinyMCE, nas configurações do plug-in do editor TinyMCE, encontrou esse problema▼

Criar menu de estilo CSS

• Carregue os estilos CSS usados ​​em editor-style.css e substitua o menu Formatar.
• Desativado: O arquivo de folha de estilo para editor-style.css.
• Desativado: Um arquivo de folha de estilo chamado editor-style.css não foi adicionado pelo seu tema.

Se a situação acima ocorrer, o editor visual do WordPress pode não conseguir exibir o estilo de código que desejamos, como:

• blockquote, pré, código...

Solucionar problemas

1. Desculpeeditor-style.cssarquivo, está no diretório raiz do tema WordPress?
2. Você está usando temas filho (filho)?

quando estamosback-end do WordPressAo editar um artigo no meio, devido ao problema de estilo CSS, a exibição de primeiro e segundo plano são diferentes...

Mas depois do Wordpress 3.0, ele tem recursos muito bons:

• Ou seja, os estilos de frente e verso podem ser unificados, portanto, quando o Wordpress edita artigos em segundo plano, ele também pode ter a mesma aparência da frente.
• Da mesma forma, não precisamos mais modificar o post editado no backend do WordPress porque ele é exibido de forma diferente do frontend.

Se abrirmos o tema padrão do Wordpress Twenty Eleven, podemos ver que existe um comentário html e um código como este ▼

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

• O que este comentário significa: O editor visual corresponde ao estilo editor-style.css do tema.
• Esta função também é muito simples de implementar, pois é a função padrão do WordPress, basta ativá-la.

Como as postagens do WordPress exibem o mesmo estilo de texto que o frontend?

Etapa 1:Criar arquivo editor-style.css

Etapa 2:Adicione o seguinte código ao arquivo editor-style.css▼

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

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

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

Etapa 3:Copie o arquivo editor-style.css para o diretório raiz do seu tema WordPress.

Capítulo 4 Etapa:Adicione o seguinte código ao arquivo 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' );
}

Etapa 5:Atualize a página de edição de postagem do WordPress

• Verifique e confirme se os estilos de texto na frente e no verso do WordPress são os mesmos?

注意 事项

Se o seu tema WordPress não adiciona estilos CSS ao "quote tag blockquote" e "code tag pre/code", você precisa adicionar o código CSS correspondente ao arquivo style.css do tema WordPress.

Para obter detalhes, consulte o seguinte tutorial de criação de sites ▼

Como usar o blockquote? Efeito de demonstração da tag blockquote HTML

Na edição de artigos do WordPress, existe um botão comum "Blockquote" ▼ Quando usado, ele adiciona umMarque para invocar alguma declaração ou destaque entre aspas. O que significa bloco de citação?O seguinte é Chen Wei...

O que é pré no estilo CSS? O papel das tags de código de pré-empacotamento em HTML

Precisamos aprender alguns conhecimentos básicos de CSS e HTML para construir um site com o WordPress: devido aos arquivos de estilo CSS de alguns temas do WordPress, os estilos pre e code tag não são adicionados.A maioria dos navegadores atualmente suportamarca. h...