Postredigeraren i WordPress, som namnet antyder, är avsedd att låta dig redigera inlägg och innehåll. Som standard tillåter du inte att du lägger till i anpassade CSS-klasser. Om du vill lägga till egna CSS-stilar eller klasser är det enda sättet att växla till "Text" -läget och lägga till det i HTML-koden.

Eftersom WordPress är så anpassningsbar finns det sätt att göra ditt liv enklare genom att lägga till anpassade stilalternativ till WordPress-postredigeraren. Med hjälp av dessa anpassade alternativ kan du använda CSS-stilar med bara några få klick. Du behöver inte längre växla till textläge eller komma ihåg alla CSS-klasserna som går in i dina inlägg så att de blir snyggare.

Det finns ett par sätt att lägga till anpassade stilalternativ till WordPress-postredigeraren. Den första är att använda ett gratis plugin, och det andra är att lägga till en kodbit. Båda metoderna fungerar väldigt på samma sätt, så följ den du är bekväm med.

Obs! Innan jag går antar jag att du vet grundläggande HTML och CSS och kan förstå saker som CSS-klasser, blocknivåelement, HTML-element, attribut etc.

1. Använda ett plugin

Det enklaste sättet att lägga till anpassade stilalternativ i WordPress-postredigeraren är att använda ett plugin som heter TinyMCE Custom Styles.

Det fina med det här pluginet är att det automatiskt skapar ett editor-stilark där du kan lägga till anpassade CSS-format. Det här är väldigt användbart när du vill se frontend-stilar relaterade till länkar, bilder, blanketter, knappar etc. som appliceras i postredigeraren.

1. För att komma igång, ladda ner, installera och aktivera TinyMCE Custom Styles som alla andra WordPress-plugin. Efter aktivering, gå till plugininställningar sidan genom att navigera till "Inställningar -> TinyMCE Anpassade stilar."

2. Riktigt från fladdermusen visar plugin ett felmeddelande som ber dig välja vart du vill placera editorens stilarkfil. Beroende på ditt tema kan du välja mellan tre alternativ. Läs dessa alternativ noggrant och välj det som passar dig. I mitt fall valde jag det andra alternativet eftersom jag använder ett anpassat Genesis barntema. Klicka på "Spara alla inställningar" knappen för att spara ändringarna.

3. Bläddra ner och klicka på knappen "Lägg till ny stil". Ange nu namnet på stilen, välj en typ (dvs inline, block eller selector), skriv in typvärdet och sedan CSS-klassen.

4. På höger sida glöm inte att välja om elementet är en "Wrapper" eller ej. Om du väljer det här alternativet skapar stilen ett nytt blocknivåelement runt det valda blocknivåelementet i inläggsredigeraren.

5. Om du vill kan du även direkt lägga till anpassade CSS-stilar genom att klicka på "Lägg till ny stil" som visas under kategorin "CSS-stilar". Jag rekommenderar dock att du lägger till dessa stilar i filen "editor-style.css" i din temakatalog (om du har valt det andra alternativet som jag i det andra steget). Det gör det enkelt att hantera.

6. När du är klar klickar du på knappen "Spara alla inställningar" som visas i slutet av sidan.

7. Det är det. Från och med nu ser du en ny rullgardinsmeny som heter "Formater" i postredigeraren. I den nedrullningsbara menyn kan du hitta det nyligen tillagda anpassade stilalternativet tillsammans med andra förkonfigurerade. För att använda stilen klickar du bara på den och den nödvändiga CSS-koden läggs automatiskt till postredigeraren. Du ser den koden i textläget.

8. Om du har lagt till önskade stilar i filen editor.style.css kommer dessa stilar att återspeglas i inläggsredigeraren när du använder stilalternativet från rullgardinsmenyn.

I framtiden om du inaktiverar eller tar bort plugin kommer inte editorens stilark att raderas. Du kan dock inte längre komma åt de anpassade alternativen i inläggsredigeraren.

Relaterat : Så här tar du bort oanvända databas tabeller i WordPress

2. Manuell metod

Om du inte gillar att använda ett plugin kan du uppnå samma sak genom att lägga till en enkel kodbit till din "functions.php" -fil. Det finns två delar till detta: en är för att lägga till knappen till verktygsfältet för att infoga CSS-kod, och den andra är att göra CSS-stilen live i postredigeraren.

Lägg till anpassade CSS Style-knappar till verktygsfältet

Lägg till följande till slutet av din "functions.php" -fil. Denna kod är faktiskt tillhandahållen av WordPress själv.

 // Återuppringningsfunktion för att infoga 'styleselect' i $ -knappars array-funktionen my_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); returnera $ knappar; } // Registrera vår återuppringning till lämpligt filter add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // Återuppringningsfunktion för att filtrera MCE-inställningsfunktionen my_mce_before_init_insert_formats ($ init_array) {// Definiera style_formats array $ style_formats = array (// Varje array barn är ett format med egen inställnings array ('title' => '.translation', 'block' => 'blockquote', 'classes' => 'translation', 'wrapper' => sant), array ('title' => '⇠.rtl', 'block' => 'blockquote' 'classes' => 'rtl', 'wrapper' => true), array ('title' => '.ltrlistor', 'block' => 'blockquote', 'classes' => 'ltr' wrapper '=> true)); // Infoga arrayen, JSON ENCODED, till 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); returnera $ init_array; } // Anslut återuppringning till 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Du måste anpassa koden för att återspegla dina stilalternativ. I ovanstående kod är varje matris ett separat stilalternativ. Skriv in din stiltitel bredvid "titel", blocktyp bredvid "block", CSS-klass bredvid "klasser" och om elementet är ett omslag, skriv "true" bredvid "wrapper." Om det inte är det, skriv "falsk."

När som helst du vill lägga till ett nytt stilalternativ, helt enkelt duplicera arrayen och ändra fälten. I mitt fall befolkade jag den första arrayen för att återspegla min "Blue Button" -alternativ.

När du är klar med anpassningen, spara och ladda upp den ändrade filen "functions.php" till din server.

Skapa Editor Stylesheet

Skapa en fil med namnet "editor-style.css." Lägg nu till relevanta CSS-stilar som du vill se i postredigeraren. Glöm inte att CSS-klasserna du skapar i filen "editor-style.css" ska matcha CSS-klasserna i ovanstående stilalternativskod.

Öppna nu ditt temas "functions.php" -fil och lägg till följande kod.

 // Lägg till anpassad editor stilarksfunktion mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles');

Ladda upp både filen "editor-style.css" och "functions.php" till din server. Det är allt som finns att göra. Från och med nu kan du använda anpassade stilalternativen från WordPress-postredigeraren.

Du kan se de stilar som används i realtid.

Kommentar nedan delar dina tankar och erfarenheter angående användning av ovanstående metoder för att lägga till anpassade stilalternativ i WordPress-postredigeraren.