Postredaktøren i WordPress, som navnet antyder, er beregnet til at lade dig redigere indlæg og indhold. Som standard tillader det ikke dig at tilføje i brugerdefinerede CSS-klasser. Hvis du vil tilføje brugerdefinerede CSS-stilarter eller -klasser, er den eneste måde at skifte til "Tekst" -tilstand og tilføje den til HTML-koden.

Da WordPress er så tilpasset, er der måder at gøre dit liv lettere ved at tilføje brugerdefinerede stilindstillinger til WordPress-postredaktøren. Ved hjælp af disse brugerdefinerede indstillinger kan du anvende CSS-stilarter med et par klik. Du behøver ikke længere at skifte til teksttilstand eller huske alle de CSS-klasser, der går ind i dine indlæg for at få dem til at se pænere ud.

Der er et par måder, du kan tilføje tilpassede stilindstillinger til WordPress-postredaktør. Den første er at bruge et gratis plugin, og det andet er at tilføje et kodestykke. Begge metoder fungerer meget ens, så følg den, du er komfortabel med.

Bemærk : Jeg går ud fra, at du kender basic HTML og CSS og kan forstå ting som CSS klasser, blokniveau elementer, HTML elementer, attributter osv.

1. Brug af et plugin

Den nemmeste måde at tilføje brugerdefinerede stil indstillinger i WordPress post editor er at bruge et plugin kaldet TinyMCE Custom Styles.

Det gode ved dette plugin er, at det automatisk opretter et editor stilark, hvor du kan tilføje brugerdefinerede CSS-stilarter. Dette er meget nyttigt, når du vil se de forreste stilarter relateret til links, billeder, formularer, knapper mv., Der anvendes inden for postredaktøren.

1. For at komme i gang skal du downloade, installere og aktivere TinyMCE Custom Styles som ethvert andet WordPress-plugin. Efter aktivering skal du gå til siden for pluginindstillinger ved at navigere til "Settings -> TinyMCE Custom Styles."

2. Lige fra flagermuset viser proppen en fejlmeddelelse, der beder om at vælge, hvor du vil placere editorens stilarkfil. Afhængigt af dit tema kan du vælge mellem tre muligheder. Læs disse muligheder omhyggeligt, og vælg den, der passer til dig. I mit tilfælde valgte jeg den anden mulighed, fordi jeg bruger et brugerdefineret Genesis barn tema. Klik på knappen "Gem alle indstillinger" for at gemme ændringerne.

3. Rul ned og klik på knappen "Tilføj ny stil". Indtast nu navnet på stilen, vælg en type (dvs. inline, blok eller vælg), indtast typen værdi og derefter CSS klassen.

4. Glem ikke at vælge om elementet er en "Wrapper" eller ej, i højre side. Hvis du vælger denne indstilling, opretter stilen et nyt blokniveauelement omkring det valgte blokniveauelement i postredigeringsprogrammet.

5. Hvis du vil, kan du endda direkte tilføje brugerdefinerede CSS-stilarter ved at klikke på "Tilføj ny stil", der vises under kategorien "CSS Styles". Jeg anbefaler dog, at du tilføjer disse stilarter i filen "editor-style.css" i din temakatalog (hvis du har valgt den anden mulighed som mig i andet trin). Det gør det nemt at styre.

6. Når du er færdig, klik på knappen "Gem alle indstillinger", der vises i slutningen af ​​siden.

7. Det er det. Fra nu af ses der en ny dropdown-menu kaldet "Formater" i postredaktøren. I den dropdown-menu kan du finde den nyligt tilføjede brugerdefinerede stil sammen med andre forudkonfigurerede. For at bruge stilen skal du blot klikke på den, og den nødvendige CSS-kode bliver automatisk tilføjet til postredaktøren. Du ser denne kode i teksttilstand.

8. Hvis du har tilføjet de ønskede stilarter til editor-style.css-filen, vil disse stilarter blive afspejlet i postredigeringsprogrammet, når du bruger stilindstillingen fra rullemenuen.

I fremtiden, hvis du deaktiverer eller fjerner plugin'et, vil editorens stylesheet ikke blive slettet. Du kan dog ikke længere få adgang til de brugerdefinerede valgmuligheder i postredigeringsprogrammet.

Relateret : Sådan slettes ubrugte database tabeller i WordPress

2. Manuel metode

Hvis du ikke kan lide at bruge et plugin, kan du opnå det samme ved at tilføje en simpel kodestykke til din "functions.php" -fil. Der er to dele til dette: Den ene er for at tilføje knappen til værktøjslinjen for at indsætte CSS-kode, og den anden er at gøre CSS-stilen levende i postredaktøren.

Tilføj Custom CSS Style Buttons til Toolbar

Tilføj følgende til slutningen af ​​din "functions.php" -fil. Denne kode er faktisk leveret af WordPress selv.

 // Tilbagekaldsfunktion for at indsætte 'styleselect' i $ knapper array funktionen my_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); returner $ knapper; } // Registrer vores tilbagekald til det relevante filter add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // Tilbagekaldsfunktion til at filtrere MCE-indstillingsfunktionen my_mce_before_init_insert_formats ($ init_array) {// Definer style_formats array $ style_formats = array (// Hvert array barn er et format med dets egen indstillingsgruppe ('title' => '.translation', 'block' => 'blockquote', 'classes' => 'oversættelse', 'wrapper' => ægte, ), array ('title' => '⇠.rtl', 'block' => 'blockquote' 'klasser' => 'rtl', 'wrapper' => sandt), array ('title' => '.ltrlader', 'blok' => 'blockquote', 'klasser' => 'ltr' wrapper '=> sandt, ), ); // Indsæt arrayet, JSON ENCODED, til 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); returner $ init_array; } // Vedhæft tilbagekald til 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Du skal tilpasse koden for at afspejle dine stilindstillinger. I ovenstående kode er hver matrix en separat stilindstilling. Indtast din stiltitel ved siden af ​​"title", blok type ved siden af ​​"blokke", CSS klasse ved siden af ​​"klasser", og hvis elementet er en wrapper, skriv "true" ud for "wrapper." Hvis det ikke er tilfældet, skriv "falsk."

Når som helst du vil tilføje en ny stil indstilling, simpelthen duplikere array og ændre felterne. I mit tilfælde befolket jeg den første matrix for at afspejle min "blå knap" mulighed.

Når du er færdig med tilpasningen, gem og upload den ændrede "functions.php" -fil til din server.

Opret Editor Stylesheet

Opret en fil med navnet "editor-style.css." Tilføj nu relevante CSS-stilarter, du gerne vil se i postredigeringsprogrammet. Glem ikke, at de CSS-klasser, du opretter i filen "editor-style.css", skal svare til CSS-klasserne i ovenstående stiloptionskode.

Nu åbner du temaets "functions.php" -fil og tilføjer følgende kode.

 // Tilføj brugerdefineret editor stilark funktion mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles');

Upload både filen "editor-style.css" og "functions.php" til din server. Det er alt, hvad der skal gøres. Fra nu af kan du bruge de brugerdefinerede stiloptioner fra WordPress-postredaktøren.

Du kan se stilarterne anvendt i realtid.

Kommenter nedenfor, og del dine tanker og erfaringer med at bruge ovenstående metoder til at tilføje brugerdefinerede stilindstillinger i WordPress-postredaktøren.