Wilt u aangepaste stijlen toevoegen aan de visuele editor van WordPress? Door aangepaste stijlen toe te voegen, kunt u snel opmaak toepassen zonder naar de teksteditor te gaan. In dit artikel laten we u zien hoe u aangepaste stijlen kunt toevoegen aan de visuele editor van WordPress.
Remarque: Deze zelfstudie vereist basiskennis van CSS.
wanneer zult u moet u een aangepaste stijl toevoegen aan de WordPress Visual Editor?
Standaard biedt de visuele editor van WordPress basisopmaak- en stijlopties. Soms moet u echter aangepaste stijlen bij de hand hebben waarmee u bijvoorbeeld CSS-knoppen kunt toevoegen, inhoud, haken, enz.
U kunt altijd overschakelen van visuele editor naar teksteditor en aangepaste HTML- en CSS-code toevoegen. Maar als u bepaalde stijlen regelmatig gebruikt, is het beter om ze toe te voegen in de visuele editor, zodat u ze gemakkelijk opnieuw kunt gebruiken.
Dit bespaart u enorm veel tijd en stelt u ook in staat om altijd dezelfde stijlen overal op uw . te gebruiken Site web.
Wat nog belangrijker is, u kunt stijlen gemakkelijk bewerken of bijwerken zonder de artikelen op uw site te hoeven bewerken.
We zullen nu ontdekken hoe dit op WordPress te doen.
1-methode: voeg een aangepaste stijl toe met een plug-in
Het eerste wat u hoeft te doen, is de plug-in installeren en activeren " TinyMCE aangepaste stijlen ". Raadpleeg voor meer informatie onze stapsgewijze handleiding voor het installeren van een WordPress Plugin.
Na activering moet u ' Instellingen> Instellingen »TinyMCE Custom Styles Om de plug-ininstellingen te configureren.
Met de plug-in kunt u de locatie van stylesheetbestanden kiezen. Het kan uw thema of onderliggende themastijl gebruiken, of u kunt een aangepaste locatie kiezen.
Daarna moet je op de knop "klikken sla alle instellingen op Om uw instellingen op te slaan.
Nu kunt u uw aangepaste stijlen toevoegen. U moet naar het stijlgedeelte scrollen en op de knop klikken Voeg een nieuwe stijl toe .
U moet eerst een titel voor de stijl invoeren. Deze titel wordt weergegeven in het vervolgkeuzemenu. Dan moet je definiëren. Of het nu een rij, een blok of een selectie-element is.
Voeg daarna een CSS-klasse toe en voeg vervolgens uw CSS-regels toe zoals weergegeven in de onderstaande schermafbeelding.
Zodra u een CSS-stijl heeft toegevoegd, klikt u op de knop "alle instellingen opslaan" om uw wijzigingen op te slaan.
U kunt nu een bestaand artikel bewerken of een nieuw maken. U ziet een indeling in het vervolgkeuzemenu, op de tweede rij van de visuele editor van WordPress.
Selecteer gewoon een tekst in de editor en kies vervolgens uw aangepaste stijl uit het vervolgkeuzemenu om deze toe te passen.
U kunt nu een voorbeeld van uw artikel bekijken om te zien of uw aangepaste stijlen correct worden toegepast.
2-methode: stijlen handmatig toevoegen aan de visuele editor
Voor deze methode moet u handmatig code aan uw WordPress-bestanden toevoegen. Als dit de eerste keer is dat je dit doet, bekijk dan onze tutorial over het toevoegen van een WordPress Plugin.
Stap 1: voeg een aangepaste stijl toe uit het vervolgkeuzemenu van de visuele editor van WordPress.
Eerst voegen we een vervolgkeuzemenu toe aan de visuele editor van WordPress. Met dit vervolgkeuzemenu kunnen we onze aangepaste stijlen selecteren en toepassen.
U moet de volgende code toevoegen aan uw functions.php-bestand of uw plug-in.
functie wpb_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); $ knoppen teruggeven; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Stap 2: Opties toevoegen in het vervolgkeuzemenu
Nu moet u enkele opties toevoegen aan het vervolgkeuzemenu dat u zojuist hebt gemaakt. U kunt deze opties vervolgens kiezen en toepassen vanuit de indelingen in het vervolgkeuzemenu.
Voor deze zelfstudie voegen we drie aangepaste stijlen toe om te maken inhoud blok en knoppen.
U moet de volgende code toevoegen aan het bestand "functions.php" van uw functions.php of een specifieke plug-in.
/ * * Callback-functie om de MCE-instellingen te filteren * / function my_mce_before_init_insert_formats ($ init_array) {// Definieer de style_formats-array $ style_formats = array (/ * * Elk array-kind is een formaat met zijn eigen instellingen * Merk op dat elke array een titel heeft , blok, klassen en wrapper-argumenten * Titel is het label dat zichtbaar zal zijn in het menu Opmaak * Blok bepaalt of het een span-, div-, selector- of inline-stijl is * Met klassen kun je CSS-klassen definiëren * Wrapper, al dan niet voeg een nieuw blokniveau-element toe rond elk geselecteerd element * / array ('title' => 'Content Block', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true,), array ('title' => 'Red Button', 'block' => 'span', 'classes' => 'red-button', 'wrapper' => true,),); // Plaats de array, JSON GECODEERD, in 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); retourneer $ init_array; } // Voeg callback toe aan 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
U kunt nu een nieuw bericht op WordPress toevoegen en op de indelingen klikken in het vervolgkeuzemenu van de visuele editor. U zult merken dat uw aangepaste stijlen nu zichtbaar zijn.
Hun selectie zal echter geen verschil maken in de visuele editor van WordPress.
3 Stap: voeg een CSS-stijl toe
Nu is de laatste stap het toevoegen van CSS-stijlregels voor uw aangepaste stijlen.
U moet deze CSS toevoegen aan het style.css-bestand van uw thema of dat van het child-thema.
.content-block {border: 1px solid #eee; opvulling: 3px; achtergrond: #ccc; max-breedte: 250px; zweven: rechts; text-align: center; } .content-block: na {clear: both; } .blue-button {achtergrondkleur: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; grensradius: 6px; rand: 1px effen # 057fd0; display: inline-blok; cursor: punt; kleur: #ffffff; opvulling: 6px 24px; tekstversiering: geen; } .red-knop {achtergrondkleur: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; grensradius: 6px; border: 1px solid # 942911; display: inline-blok; cursor: punt; kleur: #ffffff; opvulling: 6px 24px; tekstversiering: geen; }
Het editorstijlblad bepaalt het uiterlijk van uw inhoud in de visuele editor. Raadpleeg de documentatie om te zien hoe u de locatie van dit bestand kunt vinden.
Als uw thema geen stylesheet-bestand heeft, kunt u er altijd een maken. Maak gewoon een nieuw CSS-bestand en noem het " Custom-editor-style.css .
U moet dit bestand uploaden naar de hoofdmap van uw thema en vervolgens deze code toevoegen aan het bestand "functions.php" van uw thema.
function my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css'); } add_action ('init', 'my_theme_add_editor_styles');
Dat is alles. U hebt zojuist uw aangepaste stijlen toegevoegd in de visuele editor van WordPress. U kunt nu de aanpassingen maken waarvan u denkt dat ze juist zijn.
Deel deze tutorial met je vrienden op je favoriete sociale netwerken.
