Postredigereren i WordPress, som navnet tilsier, er ment å la deg redigere innlegg og innhold. Som standard tillater det ikke at du legger til i egendefinerte CSS-klasser. Hvis du vil legge til tilpassede CSS-stiler eller klasser, er den eneste måten å bytte til "Tekst" -modus og legge den til HTML-koden.

Siden WordPress er så tilpassbar, er det måter å gjøre livet ditt lettere ved å legge til tilpassede stilalternativer til WordPress-postredigeren. Ved hjelp av disse egendefinerte alternativene kan du bruke CSS-stilene med bare noen få klikk. Du trenger ikke lenger å bytte til tekstmodus eller huske alle CSS-klassene som går inn i innleggene dine for å få dem til å se bedre ut.

Det er et par måter du kan legge til tilpassede stilalternativer til WordPress-postredigering. Den første er å bruke en gratis plugin, og den andre er å legge til en kodestykke. Begge metodene fungerer veldig like, så følg den du er komfortabel med.

Merk : Før jeg fortsetter, antar jeg at du kjenner grunnleggende HTML og CSS og kan forstå ting som CSS-klasser, blokknivåelementer, HTML-elementer, attributter, etc.

1. Bruk av et plugin

Den enkleste måten å legge til tilpassede stilalternativer i WordPress-postredigeren, er å bruke et plugin som heter TinyMCE Custom Styles.

Det gode ved dette pluginet er at det automatisk lager et editor stilark der du kan legge til tilpassede CSS-stiler. Dette er veldig nyttig når du vil se front-end-stilene relatert til koblinger, bilder, skjemaer, knapper, etc., brukt i innleggsredigeren.

1. For å komme i gang, last ned, installer og aktiver TinyMCE-tilpassede stiler som alle andre WordPress-pluginprogrammer. Etter å ha aktivert, gå til plugininnstillingssiden ved å navigere til "Innstillinger -> TinyMCE tilpassede stiler."

2. Rett utenfor fanen, vil pluginet vise en feilmelding og spør om å velge hvor du vil plassere editor-stilarkfilen. Avhengig av temaet kan du velge mellom tre alternativer. Les disse alternativene nøye, og velg det som passer for deg. I mitt tilfelle valgte jeg det andre alternativet fordi jeg bruker et tilpasset Genesis barn tema. Klikk på "Lagre alle innstillinger" -knappen for å lagre endringene.

3. Rull ned og klikk på "Legg til ny stil" -knappen. Skriv inn navnet på stilen, velg en type (dvs. inline, blokk eller velg), skriv inn typeverdien og deretter CSS-klassen.

4. På høyre side må du ikke glemme å velge om elementet er "Wrapper" eller ikke. Hvis du velger dette alternativet, vil stilen opprette et nytt blokknivåelement rundt det valgte blokknivåelementet i innleggredigeren.

5. Hvis du vil, kan du til og med legge til tilpassede CSS-stiler ved å klikke på "Legg til ny stil" som står under kategorien "CSS-stiler". Imidlertid anbefaler jeg at du legger til de stilene i filen "editor-style.css" i temakatalogen din (hvis du har valgt det andre alternativet som jeg i det andre trinnet). Det gjør det enkelt å administrere.

6. Når du er ferdig, klikk på "Lagre alle innstillinger" -knappen som vises på slutten av siden.

7. Det er det. Fra nå av vil du se en ny rullegardinmeny kalt "Formater" i postredigeringsprogrammet. I den nedtrekksmenyen kan du finne det nylig lagt til tilpassede stilalternativet sammen med andre forhåndsdefinerte. For å bruke stilen klikker du bare på den, og den nødvendige CSS-koden blir automatisk lagt til postredigereren. Du ser denne koden i tekstmodus.

8. Hvis du har lagt til nødvendige stiler til editor-style.css-filen, vil disse stilene gjenspeiles i innleggredigeren når du bruker stilalternativet fra rullegardinmenyen.

I fremtiden hvis du deaktiverer eller fjerner pluginet, vil editorens stilark ikke bli slettet. Du kan imidlertid ikke lenger få tilgang til de egendefinerte alternativene i innleggredigeren.

Relatert : Slik sletter ubrukt database tabeller i WordPress

2. Manuell metode

Hvis du ikke liker å bruke et plugin, kan du oppnå det samme ved å legge til en enkel kodebit i filen "functions.php". Det er to deler til dette: en er for å legge til knappen til verktøylinjen for å sette inn CSS-kode, og den andre er å lage CSS-stilen i postredigeren.

Legg til egendefinerte CSS-stilknapper på verktøylinjen

Legg til følgende til slutten av filen "functions.php". Denne koden er faktisk gitt av WordPress selv.

 // Tilbakeringingsfunksjon for å sette 'styleselect' inn i $ knapper array funksjonen my_mce_buttons_2 ($ knapper) {array_unshift ($ buttons, 'styleselect'); returner $ knapper; } // Registrer vår tilbakeringing til riktig filter add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // Tilbakeringingsfunksjon for å filtrere MCE-innstillingsfunksjonen my_mce_before_init_insert_formats ($ init_array) {// Definer style_formats array $ style_formats = array (// Hvert array barn er et format med sin egen innstillingsgruppe ('title' => '.translation', 'block' => 'blockquote', 'classes' => 'oversettelse', 'wrapper' => sann, ), array ('title' => '⇠.rtl', 'block' => 'blockquote' 'class' => 'rtl', 'wrapper' => true), array ('title' => ' wrapper '=> sant, ), ); // Sett inn arrayet, JSON ENCODED, til 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); returner $ init_array; } // Hent tilbakering til 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Du må tilpasse koden for å gjenspeile stilalternativer. I ovennevnte kode er hver gruppe et eget stilalternativ. Skriv inn stiltittelen ved siden av "tittel", blokktype ved siden av "blokk", CSS klasse ved siden av "klasser", og hvis elementet er en wrapper, skriv "true" ved siden av "wrapper." Hvis ikke, skriv "falsk."

Når som helst du vil legge til et nytt stilalternativ, kan du bare duplisere arrayet og endre feltene. I mitt tilfelle befolket jeg den første gruppen som gjenspeiler alternativet "Blå knapp".

Når du er ferdig med tilpasningen, lagre og last opp den endrede "functions.php" -filen til serveren din.

Opprett Editor Stylesheet

Opprett en fil med navnet "editor-style.css." Nå legger du til relevante CSS-stiler du vil se i innleggredigeren. Ikke glem at CSS-klassene du lager i filen "editor-style.css", skal samsvare med CSS-klassene i den ovennevnte stilkoden.

Nå åpner du temaet "functions.php" -filen og legger til følgende kode.

 // Legg til egendefinert editor stilarkfunksjon mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles');

Last opp både filen "editor-style.css" og "functions.php" til serveren din. Det er alt der er å gjøre. Fra nå av kan du bruke de egendefinerte stilalternativene fra WordPress-postredigereren.

Du kan se stilene som brukes i sanntid.

Kommentar nedenfor dele dine tanker og erfaringer med å bruke metodene ovenfor for å legge til tilpassede stilalternativer i WordPress-postredigereren.