De berichteditor in WordPress is, zoals de naam al aangeeft, bedoeld om berichten en inhoud te kunnen bewerken. Standaard is het niet toegestaan ​​om aangepaste CSS-klassen toe te voegen. Als u aangepaste CSS-stijlen of -klassen wilt toevoegen, is de enige manier om over te schakelen naar de modus "Tekst" en deze toe te voegen aan de HTML-code.

Omdat WordPress zo aanpasbaar is, zijn er manieren om je leven gemakkelijker te maken door aangepaste stijlopties toe te voegen aan de WordPress berichteditor. Met deze aangepaste opties kunt u de CSS-stijlen toepassen met slechts een paar klikken. U hoeft niet langer naar de tekstmodus over te schakelen of alle CSS-klassen die in uw berichten staan ​​te onthouden om ze er mooier uit te laten zien.

Er zijn een aantal manieren waarop u aangepaste stijlopties kunt toevoegen aan de WordPress-berichteditor. De eerste is om een ​​gratis plug-in te gebruiken en de tweede is om een ​​codefragment toe te voegen. Beide methoden werken op dezelfde manier, dus volg degene waarmee u vertrouwd bent.

Opmerking : voordat ik verder ga, ga ik ervan uit dat je basis-HTML en CSS kent en dingen als CSS-klassen, blokniveau-elementen, HTML-elementen, kenmerken, enz. Kunt begrijpen.

1. Gebruik een plug-in

De eenvoudigste manier om aangepaste stijlopties toe te voegen in de WordPress berichteditor is om een ​​plugin genaamd TinyMCE Custom Styles te gebruiken.

Het goede aan deze plug-in is dat er automatisch een editor-stylesheet wordt gemaakt waarin u aangepaste CSS-stijlen kunt toevoegen. Dit is erg handig wanneer u de front-end stijlen gerelateerd aan links, afbeeldingen, formulieren, knoppen, etc. wilt zien in de berichteditor.

1. Om te beginnen, download, installeer en activeer TinyMCE aangepaste stijlen zoals elke andere WordPress plug-in. Ga na het activeren naar de pagina met plug-ininstellingen door naar "Instellingen -> Aangepaste stijlen voor TinyMCE" te gaan.

2. Meteen na de start verschijnt in de plug-in een foutmelding met de vraag waar u het editor stylesheetbestand wilt plaatsen. Afhankelijk van uw thema, kunt u kiezen uit drie opties. Lees deze opties aandachtig door en kies degene die voor u geschikt is. In mijn geval heb ik de tweede optie gekozen omdat ik een aangepast kindthema voor Genesis gebruik. Klik op de knop "Alle instellingen opslaan" om de wijzigingen op te slaan.

3. Blader omlaag en klik op de knop "Nieuwe stijl toevoegen". Voer nu de naam van de stijl in, selecteer een type (dwz inline, blok of selector), voer de typewaarde in en vervolgens de CSS-klasse.

4. Aan de rechterkant van de pagina vergeet niet om te selecteren of het element een "Wrapper" is of niet. Als u deze optie selecteert, maakt de stijl een nieuw blokniveau-element rond het geselecteerde blokniveau-element in de berichteditor.

5. Als u wilt, kunt u zelfs aangepaste CSS-stijlen toevoegen door te klikken op "Nieuwe stijl toevoegen" verschijnen onder de categorie "CSS-stijlen". Ik raad u echter aan om die stijlen toe te voegen aan het bestand "editor-style.css" in uw themamap (als u de tweede optie zoals ik in de tweede stap hebt geselecteerd). Het maakt het gemakkelijk te beheren.

6. Als u klaar bent, klikt u op de knop "Alle instellingen opslaan" die aan het einde van de pagina verschijnt.

7. Dat is alles. Vanaf nu zie je een nieuw vervolgkeuzemenu met de naam "Formaten" in de berichteditor. In dat vervolgkeuzemenu vindt u de nieuw toegevoegde aangepaste stijloptie samen met andere vooraf geconfigureerde opties. Als u de stijl wilt gebruiken, klikt u erop en wordt de benodigde CSS-code automatisch toegevoegd aan de berichteditor. Je ziet die code in de tekstmodus.

8. Als u vereiste stijlen hebt toegevoegd aan het editor-style.css-bestand, worden die stijlen weerspiegeld in de berichteditor wanneer u de stijloptie in het vervolgkeuzemenu gebruikt.

Als u in de toekomst de plug-in uitschakelt of verwijdert, wordt de editor stylesheet niet verwijderd. U hebt echter geen toegang meer tot de aangepaste opties in de berichteditor.

Gerelateerd : Hoe Ongebruikte databasetabellen in WordPress verwijderen

2. Handmatige methode

Als u geen plug-in wilt gebruiken, kunt u hetzelfde bereiken door een eenvoudig codefragment toe te voegen aan uw "functions.php" -bestand. Dit bestaat uit twee delen: de ene is voor het toevoegen van de knop aan de werkbalk om CSS-code in te voegen, en de tweede is om de CSS-stijl live te maken in de berichteditor.

Voeg aangepaste CSS-stijlknoppen toe aan de werkbalk

Voeg het volgende toe aan het einde van uw "functions.php" -bestand. Deze code wordt eigenlijk verstrekt door WordPress zelf.

 // Callback-functie om 'styleselect' in te voegen in de $ buttons array-functie my_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); terug $ -knoppen; } // Registreer onze callback naar het juiste filter add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // Terugroepfunctie om de functie MCE-instellingen te filteren my_mce_before_init_insert_formats ($ init_array) {// Definieer de array style_formats $ style_formats = array (// Elk array-kind is een indeling met een eigen instellingenarray ('title' => '.translation', 'block' => 'blockquote', 'classes' => 'translation', 'wrapper' => true, ), array ('title' => '⇠.rtl', 'block' => 'blockquote', 'classes' => 'rtl', 'wrapper' => true, ), array ('title' => '.ltr⇢', 'block' => 'blockquote', 'classes' => 'ltr', ' wrapper '=> true, ), ); // Plaats de array, JSON ENCODED, in 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); return $ init_array; } // Callback toevoegen aan 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

U moet de code aanpassen aan uw stijlopties. In de bovenstaande code is elke array een afzonderlijke stijloptie. Voer je stijltitel in naast 'titel', bloktype naast 'blok', CSS-klasse naast 'klassen' en als het element een wrapper is, typ je 'waar' naast 'wrapper'. Als dit niet het geval is, typ je “false”.

Telkens wanneer u een nieuwe stijloptie wilt toevoegen, dupliceert u gewoon de array en past u de velden aan. In mijn geval heb ik de eerste array ingevuld om mijn "Blue Button" -optie weer te geven.

Zodra u klaar bent met de aanpassing, slaat u het gewijzigde "functions.php" -bestand op en uploadt u het naar uw server.

Creëer Editor Stylesheet

Maak een bestand met de naam "editor-style.css." Voeg nu relevante CSS-stijlen toe die je zou willen zien in de berichteditor. Vergeet niet dat de CSS-klassen die u in het bestand "editor-style.css" maakt, overeenkomen met de CSS-klassen in de bovenstaande code voor stijlopties.

Open nu het "functions.php" -bestand van het thema en voeg de volgende code toe.

 // Aangepaste editor voor editor-stylesheets toevoegen mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles');

Upload zowel het bestand "editor-style.css" als "functions.php" naar uw server. Dat is alles wat er te doen is. Vanaf nu kunt u de aangepaste stijlopties van de WordPress berichteditor gebruiken.

U kunt de stijlen in realtime zien toepassen.

Reageer hieronder en deel uw gedachten en ervaringen over het gebruik van de bovenstaande methoden om aangepaste stijlopties toe te voegen in de WordPress berichteditor.