WordPress CSS voor editor inladen zonder thema via plugin

Vraag:

Het valt me op dat voor een WordPress website met het Hestia thema in de editor vette tekst niet als vet word getoond.

Als ik dit via de browser inspecteer zie ik dat tekst, tussen strong tags, wordt voorzien van standaard opmaak.

Aan de voorkant van de website wordt vette tekst wel juist getoond. Ik wil dit oplossen door eigen CSS toe te voegen aan de editor van WordPress.

De website maakt geen gebruik van een child theme of Gutenberg.

Antwoord:

Je kan dit doen door een eigen CSS bestand in te laden via add_editor_style(). Heb je een bestaand thema gebruikt maar hiervoor geen child thema toegevoegd, dan kan je als alternatieve oplossing een simpele plugin maken.

Stap 1:
Maak in de map wp-content/plugins een nieuwe map met een duidelijke naam, bijvoorbeeld “eigencss”

Stap 2:
Voeg in deze map een CSS bestand toe met de naam “eigencss.css en plaats daarin de CSS voor de klassieke WordPress editor

Stap 3:
Voeg in deze map een PHP bestand toe met de naam die gelijk is aan de map, dus “eigencss.php”

Stap 4:
Voeg onderstaande PHP code toe aan het bestand uit stap 3.

<?php
/**
Plugin Name: Eigen CSS
Plugin URI:
Description: Deze plugin bevat de CSS voor de klassieke editor.
Author: Tim de Hoog
Version: 1.0
Author URI: https://www.timdehoog.nl
 */

function custom_load_editor_css() {
    add_editor_style( plugin_dir_url( __DIR__ ) . '/eigencss/eigencss.css' );
}
add_action('admin_init', 'custom_load_editor_css');

Stap 5:
Upload de map “eigencss” naar de map “plugins” op de server en activeer de plugin.

Stap 6:
Controleer of de klassiek editor nu wel de juiste opmaak toont.

Laat een reactie achter

Your email address will not be published. Required fields are marked *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.