Vill du lägga till anpassade stilar på WordPress Visual Editor? Genom att lägga till anpassade stilar kan du snabbt använda formatering utan att gå till textredigeraren. I den här artikeln visar vi dig hur du lägger till anpassade stilar till WordPress visuella redigerare.
Anm: Denna handledning kräver grundläggande kunskaper om CSS.
När kommer du behöver du lägga till en anpassad stil på WordPress Visual Editor?
Som standard erbjuder WordPresss visuella redigerare grundläggande formaterings- och stilalternativ. Men ibland måste du ha anpassade stilar till hands som gör att du till exempel kan lägga till CSS-knappar, innehåll, krokar osv.
Du kan alltid byta från visuell redigerare till textredigerare och lägga till anpassad HTML- och CSS-kod. Men om du regelbundet använder vissa stilar skulle det vara bättre att lägga till dem i den visuella redigeraren så att du enkelt kan återanvända dem.
Detta kommer att spara enormt mycket tid och gör att du alltid kan använda samma stilar överallt på din webbplats.
Ännu viktigare är att du enkelt kan redigera eller uppdatera stilar utan att behöva redigera artiklarna på din webbplats.
Vi kommer nu att upptäcka hur vi gör detta på WordPress.
1-metod: Lägg till en anpassad stil med ett plugin
Det första du behöver göra är att installera och aktivera plugin " TinyMCE Custom Styles ". För mer information se vår steg-för-steg-guide om hur man installerar en Wordpress plugin.
Efter aktiveringen måste du besöka " Inställningar> Inställningar »TinyMCE anpassade stilar För att konfigurera insticksinställningarna.
Insticksprogrammet låter dig välja platsen för stilmallsfiler. Den kan använda ditt tema eller ditt barntema, eller så kan du välja en anpassad plats.
Därefter måste du klicka på knappen " spara alla inställningar För att lagra dina inställningar.
Nu kan du lägga till dina anpassade stilar. Du måste bläddra till stilsektionen och klicka på knappen Lägg till ny stil ".
Du måste först ange en titel för stilen. Denna titel visas i rullgardinsmenyn. Då måste du definiera. Oavsett om det är en rad, ett block eller ett urvalselement.
Lägg sedan till en CSS-klass och lägg sedan till dina CSS-regler som visas på skärmdumpen nedan.
När du har lagt till en CSS-stil klickar du bara på knappen "spara alla inställningar" för att spara dina ändringar.
Du kan nu redigera en befintlig artikel eller skapa en ny. Du kommer att märka ett format i rullgardinsmenyn i den andra raden i WordPress-visuella redigeraren.
Välj bara en text i redigeraren och välj sedan din anpassade stil i rullgardinsmenyn för att tillämpa den.
Du kan nu förhandsgranska din artikel för att se om dina anpassade stilar tillämpas korrekt.
2-metod: Lägg manuellt till stilar till Visual Editor
Denna metod kräver att du manuellt lägger till kod till dina WordPress-filer. Om det här är första gången du gör detta, kolla in vår handledning om hur du lägger till en Wordpress plugin.
Steg 1: Lägg till en anpassad stil från rullgardinsmenyn i WordPress Visual Editor.
Först lägger vi till en rullgardinsmeny i WordPress visuella redigerare. Den här rullgardinsmenyn låter oss sedan välja och tillämpa våra anpassade stilar.
Du måste lägga till följande kod till din functions.php fil eller på din plugin.
funktion wpb_mce_buttons_2 ($ knappar) {array_unshift ($ knappar, 'styleselect'); returnera $ -knappar; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Steg 2: Hur man lägger till alternativ i rullgardinsmenyn
Nu måste du lägga till några alternativ i rullgardinsmenyn du just skapade. Du kommer då att kunna välja och tillämpa dessa alternativ från formaten i rullgardinsmenyn.
För den här handledningen kommer vi att lägga till tre anpassade stilar att skapa innehåll block och knappar.
Du måste lägga till följande kod i "functions.php" -filen för dina functions.php eller ett specifikt plugin.
/ * * Återuppringningsfunktion för att filtrera MCE-inställningarna * / funktion my_mce_before_init_insert_formats ($ init_array) {// Definiera style_formats array $ style_formats = array (/ * * Varje arraybarn är ett format med sina egna inställningar * Observera att varje array har titel , block, klasser och omslagargument * Titel är den etikett som kommer att visas i menyn Formater * Block definierar om det är en span, div, väljare eller inline-stil * Classes låter dig definiera CSS-klasser * Wrapper om du lägg till ett nytt blocknivåelement runt alla valda 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' => 'Röd knapp', 'block' => 'span', 'klasser' => 'röd knapp', 'omslag' => sant,),); // Infoga matrisen, JSON KODAD, i 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); returnera $ init_array; } // Bifoga återuppringning till 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Du kan nu lägga till ett nytt inlägg på WordPress och klicka på formaten i den nedrullningsbara menyn för den visuella redigeraren. Du kommer att märka att dina anpassade stilar nu är synliga.
Men deras val kommer inte att göra någon skillnad för den visuella redaktören för WordPress.
3 Steg: Lägg till en CSS-stil
Det sista steget är nu att lägga till CSS-stilregler för dina anpassade stilar.
Du måste lägga till den här CSS i stilen.css-filen för ditt tema eller den för underordnat tema.
.content-block {border: 1px solid #eee; stoppning: 3px; bakgrund: #ccc; max-bredd: 250px; flyta: höger; textjustera: centrum; } .content-block: efter {clear: både; } .blå-knapp {bakgrundsfärg: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; gränsradie: 6 pixlar; kantlinje: 1px fast # 057fd0; display: inline-block; markör: punkt; färg: #ffffff; stoppning: 6 pixlar 24 pixlar; text-dekoration: ingen; }. röd-knapp {bakgrundsfärg: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; gränsradie: 6 pixlar; gräns: 1px fast # 942911; display: inline-block; markör: punkt; färg: #ffffff; stoppning: 6 pixlar 24 pixlar; text-dekoration: ingen; }
Redaktörens formatmall styr utseendet på din innehåll i den visuella editorn. Kontrollera dokumentationen för att se hur du hittar platsen för denna fil.
Om ditt tema inte har en stilarkfil kan du alltid skapa en. Skapa bara en ny CSS-fil och ge den namnet " Anpassad-editor-style.css ".
Du måste ladda upp den här filen till ditt temas rotkatalog och sedan lägga till den här koden i ditt temas "functions.php" -fil.
my_theme_add_editor_styles function () {add_editor_style (specialanpassad editor-style.css '); } Add_action ( 'init', 'my_theme_add_editor_styles');
Det är allt. Du har precis lagt till dina anpassade stilar i WordPress visuella redigerare. Du kan nu göra de anpassningar som du tycker är rätt.
Dela gärna denna tutorial med dina vänner på dina favorit sociala nätverk.
