Hur du lägger till anpassade stilar i WordPress Visual Editor

Hur du lägger till anpassade stilar i WordPress Visual Editor

Ta en titt på din WordPress-visuella redaktör. Det finns några standardalternativ för formatering och styling av ditt innehåll, men inte mycket när det gäller anpassning för att få dina inlägg och sidor att bli lite riktigt snygga.


WordPress Editor

Nu kanske du vet att du har förmågan att hoppa fram och tillbaka mellan text- och visuella redigerare i WordPress för att kasta in vissa CSS för att skapa saker som knappar och textblock, men det är ont och om du inte har mycket erfarenhet av att redigera kod Text Editorn verkar vara lite skrämmande.

Skulle det inte bara vara enklare om du kunde skapa dina egna anpassade stilar, placera dem i en rullgardinsmeny i WordPress-redigeraren och välja att använda dem när du behöver dem? Ja, det är mycket lättare, så vi vill beskriva hur du gör det här. Tänk på att även om vi försöker göra denna process så enkel som möjligt, hjälper det att ha lite CSS-kunskap om du vill upptäcka alla fördelar med anpassade stilar.

Låt oss ta en titt på hur du lägger till anpassade stilar i WordPress-visuella redigeraren.

Lägg till anpassade stilar i WordPress Visual Editor genom att lägga till kod

Det första alternativet kräver att du vet lite om hur du integrerar och modifierar CSS, men jag ska ge dig en liten promenad genom att hjälpa dig lära dig grunderna så att du kan använda denna kunskap i framtiden. Detta är ett trevligt alternativ om du inte vill väga ner din webbplats med ett plugin.

Poängen med detta är att lägga till en ny rullgardinsmeny som innehåller anpassade stilar i din WordPress visuella redigerare, som ger dig möjligheten att välja element i din redigerare och sedan använda anpassade stilar på dem. Om du utvecklar ett nytt tema ska du hitta din functions.php arkivera och placera koden nedan i den filen eller om du arbetar med ett redan inbyggt tema klistra in den här koden i funktioner för ett barntema funktioner.php.

funktion myprefix_mce_buttons_1 ($ knappar) {
array_unshift ($ knappar, 'stilsval');
returnera $ knappar;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Gå tillbaka till redaktören i ett av dina WordPress-inlägg och nu bör du se en ny “Formats” -knapp i den översta raden i redaktören. Lägg märke till hur vi anslöt oss till “mce_buttons_1? Detta placerar formatmenyknappen i den första raden i mce-redigeraren. Du kan också använda “mce_buttons_2” -filtret för att placera det i den andra raden eller “mce_buttons_3” för att placera det i den tredje raden.

Så nu när du har aktiverat menyposten är det dags att lägga till dina anpassade stilar att använda i dina inlägg. Ta koden nedan och klistra in den i din functions.php fil som lägger till två nya stilar i rullgardinsmenyn Formater – “Temaknapp” och “Markera”.

/ **
* Lägg till anpassade stilar i rullgardinsmenyn mce-format
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funktion myprefix_add_format_style ($ init_array) {
$ style_formats = array (
// Varje matrisbarn är ett format med sina egna inställningar - lägg till så många du vill
array (
'title' => __ ('Temaknapp', 'text-domän'), // Titel för dropdown
'selector' => 'a', // Element att rikta in i redigeraren
'klasser' => 'temaknapp' // Klassnamn som används för CSS
),
array (
'title' => __ ('Markera', 'text-domän'), // Titel för dropdown
'inline' => 'span', // Slå in ett spann runt det valda innehållet
'Classes' => 'text-highlight' // Klassnamn som används för CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
returnera $ init_array;
}
add_filter ('liten_mce_before_init', 'myprefix_add_format_style');

Du kan ändra titlarna för att visa olika namn i din rullgardinsmeny, lägga till / ta bort objekt från matrisen etc. Du kan ändra nästan vad som helst i den här koden för att avslöja dina egna formatformat, se till att kolla in WordPress Codex för en mer djupgående förklaring av de accepterade parametrarna och returvärdena.

Nu när du har nya stilar kan du markera innehåll i din redigerare och tillämpa stilarna. Lägg märke till, hur “temaknapp” -formatet har en väljarparameter? Detta innebär att stilen endast kan tillämpas på den specifika väljaren (i detta fall taggen “a” eller “länk”). Det andra formatet som vi lagt till “Highlight” har inte en väljarparameter utan snarare en “inline” -parameter som säger att den ska tillämpa stilen på vilken text du har markerat i din redigerare och linda in den i ett intervall med ditt unika klassnamn. Du kan se ett exempel från vårt Total WordPress-tema om hur vi har använt format så att användare enkelt kan tillämpa en checklista-look på alla kulor i redigeraren.

checklista

Så nu kan du använda dina anpassade format, men de ser inte annorlunda ut förrän du har lagt till några anpassade CSS på din webbplats för att utforma dem. Du bör hitta formatmallen för ditt tema (om du bygger ditt eget) eller underordnatema och klistra in följande CSS-kod i filen.

.temaknapp {
display: inline-block;
stoppning: 10 15px;
färg: #fff;
bakgrund: # 1796c6;
textdekoration: ingen;
}
.tema-knapp: sväva {
textdekoration: ingen;
opacitet: 0,8;
}
.text-highlight {
bakgrund: # FFFF00;
}

Nu kommer detta att lägga till styling till dina nya format för front-end så när du applicerar kan du se dem live. Jippie! Men skulle det inte vara trevligt att också se dina stilar i själva redigeraren när de appliceras? För att göra detta måste du använda funktionen ”editor stylesheet” i WordPress. Om du bygger ditt eget tema kommer du att skapa en ny css-fil i ditt tema som heter “editor-style.css” (du kan namnge det du vill bara vara säker på att redigera utdraget nedan därefter) med den anpassade CSS läggs till för dina format och lägg sedan till funktionen nedan för att ladda den i backend.

funktion myprefix_theme_add_editor_style () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_style');

Om du arbetar med någon annans tema måste du lägga till detta i ditt barn-tema, bara se till att ge det ett unikt namn så att det inte strider mot ditt överordnade tema eller om ditt överordnade tema redan har en CSS-fil för redaktören kan du faktiskt kopiera den och klistra in den i ditt barntema (utan att lägga till PHP-koden ovan) lägg sedan till din nya CSS eftersom WordPress kommer att kontrollera underordnatema först innan du laddar det överordnade temat redaktörens CSS-fil och om det hittar det kommer det ladda det från barntemat istället.

Lägg till anpassade stilar i WordPress Visual Editor med ett trevligt plugin

Om du inte har tid att leka med kod, eller om du inte kan förstå det själv, finns det goda nyheter. Det finns en plugin som låter dig fullfölja exakt vad vi precis gjorde ovan utan att behöva skruva runt med koden.

TinyMCE Custom Styles Plugin

Sök bara efter, installera och aktivera TinyMCE Custom Styles-plugin och aktivera den på din WordPress-webbplats.

TinyMCE Custom Styles Settings

Gå till Inställningar> TinyMCE prof.style på vänster sida av din WordPress-instrumentpanelen. Det är här du ändrar dina inställningar för plugin-programmet.

TinyMCE Custom Styles Settings

Plugin låter dig välja var dina stilmallar är eller var du vill placera dem. Vi rekommenderar att du skapar en ny anpassad katalog. Välj det tredje alternativet och ge katalogen ett namn och flytta sedan ner för att klicka på din Spara inställningar alternativet innan du fortsätter till nästa steg.

TinyMCE anpassade stilar Lägg till nytt

När du har sparat inställningarna bläddrar du ner för att välja knappen Lägg till ny stil.

TinyMCE anpassade stilar alternativ

Det är här du anpassar hur du vill att dina anpassade stilar ska se ut. Det är i grunden en enkel webbaserad redaktör som genererar CSS-koden åt dig. Skriv in en titel för vad du vill visa i rullgardinsmenyn. Välj om du vill välja en väljare, inline eller blocktyp. Använd gärna skärmdumpen ovan för att fylla i CSS klasser och stilar, eller skapa din egen beroende på vad du tänker använda rullgardinsmenyn för. När du är klar klickar du på Spara inställningar längst ner på sidan.

TinyMCE anpassade formatformat

Nu är det dags att se hur den nya anpassade stilen ser ut i din redigerare. Öppna ett nytt inlägg eller en sida och leta ner rullgardinsmenyn Formater på den vänstra sidan av Visual Editor. Det dyker upp i den andra raden. När du klickar på rullgardinsmenyn kommer det att avslöja den nya stilen du just har skapat.

TinyMCE anpassade formatformater som används

Klicka på alternativet Big Blue Button, eller vad du skapade för att se det avslöjat i din redaktör. För att använda den markerar du bara den text du vill formatera, klicka sedan på ditt alternativ och voila!

Slutsats

Det var allt tills vidare! Du kan alltid lära dig mer om hur du använder nya stylingar genom att kolla in WordPress codex-sida ägnas åt detta ämne.

Låt oss veta i kommentarsavsnittet om du har några frågor om hur du lägger till anpassade stilar i WordPress-visuella redigeraren. Dela gärna alla ovanliga stilar du har skapat för att din webbplats ska bli lite trevligare!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map