Uitgeschakeld: het thema voegt geen stylesheetbestand toe met de naam editor-style.css?

Een vriend van mij die online marketing wil gaan doen , is onlangs begonnen met het leren bouwen van een website met WordPress.

TinyMCE editor plug-in inschakelen, in de instellingen van TinyMCE editor plug-in, een dergelijk probleem ondervonden▼

Menu in CSS-stijl maken

• Laad de CSS-stijlen die worden gebruikt in editor-style.css en vervang het menu Opmaak.
• Uitgeschakeld: Het stylesheetbestand voor editor-style.css.
• Uitgeschakeld: Een stylesheetbestand met de naam editor-style.css is niet toegevoegd door uw thema.

Als de bovenstaande situatie zich voordoet, kan de visuele editor van WordPress mogelijk niet de gewenste codestijl weergeven, zoals:

• blokquote, pre, code...

Problemen oplossen

1. Pardoneditor-style.cssbestand, staat het in de hoofdmap van het WordPress-thema?
2. Gebruik je child-thema's (child)?

Wanneer we berichten bewerken in het WordPress-beheerpaneel , zien de front-end en back-end er anders uit vanwege CSS-stijlproblemen...

Maar na Wordpress 3.0 heeft het zeer goede eigenschappen:

• Dat wil zeggen, de voor- en achterkant kunnen worden verenigd, dus als Wordpress artikelen op de achtergrond bewerkt, kan het er ook hetzelfde uitzien als de voorkant.
• Evenzo hoeven we het bericht dat is bewerkt in de WordPress-backend niet langer aan te passen, omdat deze anders wordt weergegeven dan de frontend.

Als we het standaardthema Twenty Eleven van Wordpress openen, kunnen we zien dat er een html-opmerking en code is zoals deze ▼

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

• Wat deze opmerking betekent: De visuele editor komt overeen met de stijl van thema-editor-style.css.
• Deze functie is ook heel eenvoudig te implementeren, omdat het de standaardfunctie van WordPress is, we hoeven hem alleen maar te activeren.

Hoe geven WordPress-berichten dezelfde tekststijl weer als de frontend?

Stap 1: Maak het bestand editor-style.css aan.

Stap 2: Voeg de volgende code toe aan het bestand editor-style.css ▼

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

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

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

Stap 3: Kopieer het bestand editor-style.css naar de hoofdmap van je WordPress-thema.

Stap 4 : Voeg de volgende code toe aan het bestand 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' );
}

Stap 5: Vernieuw de pagina voor het bewerken van berichten in WordPress.

• Controleren en bevestigen of de tekststijlen aan de voor- en achterkant van WordPress hetzelfde zijn?

注意 事项

Als uw WordPress-thema geen CSS-stijlen toevoegt aan de "quote tag blockquote" en "code tag pre/code", moet u de bijbehorende CSS-code toevoegen aan het style.css-bestand van het WordPress-thema.

Raadpleeg voor meer informatie de volgende zelfstudie voor het bouwen van een website ▼

🔗Hoe gebruik je blockquote? Demo-effect van de blockquote-tag in HTML

🔗Wat is pre in CSS-stijl? De functie van de pre-automatische regelafbrekingscodetag in HTML