Slik legger du til tilpassede stiler i WordPress Visual Editor

Ta en titt på WordPress-visuelle redaktøren din. Det er noen standardalternativer for formatering og styling av innholdet ditt, men ikke mye med tanke på tilpasning for å få innlegg og sider til å se litt veldig fancy ut.


WordPress Editor

Nå vet du kanskje at du har muligheten til å hoppe frem og tilbake mellom tekst- og visuelle redigerere i WordPress for å kaste inn litt CSS for å lage ting som knapper og tekstblokker, men dette er vondt, og hvis du ikke har mye erfaring med å redigere kode Teksteditoren virker litt skremmende.

Ville det ikke bare vært enklere hvis du kunne lage dine egne tilpassede stiler, plassere dem i en rullegardinmeny i WordPress-editoren og velge å bruke dem når du trenger dem? Ja, det er mye enklere, så vi vil skissere hvordan du gjør det her. Husk at selv om vi prøver å gjøre denne prosessen så enkel som mulig, hjelper det å ha litt CSS-kunnskap hvis du vil oppdage fordelene med tilpassede stiler.

La oss se på hvordan du legger til tilpassede stiler i WordPress-visuelle redigeringsprogrammet.

Legg til tilpassede stiler i WordPress Visual Editor ved å legge til kode

Dette første alternativet krever at du vet litt om hvordan du kan integrere og endre CSS, men jeg vil gi deg en liten spasertur for å hjelpe deg med å lære det grunnleggende, slik at du kan bruke denne kunnskapen i fremtiden. Dette er et fint alternativ hvis du ikke vil veie ned nettstedet ditt med en plugin.

Poenget med dette er å legge til en ny nedtrekksmeny som inkluderer tilpassede stiler i din WordPress-visuelle editor, som gir deg muligheten til å velge elementer i redigeringsprogrammet og deretter bruke tilpassede stiler på dem. Hvis du utvikler et nytt tema, finn ditt functions.php arkiver og legg koden nedenfor i den filen, eller hvis du arbeider med et allerede innebygd tema, lim inn denne koden i funksjoner for et barnetema.php.

funksjon myprefix_mce_buttons_1 ($ knapper) {
array_unshift ($ knapper, 'styleselect');
return $ knapper;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Gå tilbake til redaktøren i et av dine WordPress-innlegg, og nå bør du se en ny “Formater” -knapp i den øverste raden i redaktøren. Legg merke til hvordan vi koblet oss til “mce_buttons_1? Dette plasserer menyknappen for formater i den første raden i mce-redigereren. Du kan også bruke “mce_buttons_2” -filteret for å plassere det i den andre raden eller “mce_buttons_3” for å plassere det i den tredje raden.

Så nå som du har aktivert menypunktet, er det på tide å legge til dine egendefinerte stiler som du kan bruke i innleggene dine. Ta koden oppført nedenfor og lim den inn i din functions.php -fil som vil legge til to nye stiler i rullegardinmenyen Formater – “Temaknapp” og “Merk”.

/ **
* Legg til tilpassede stiler i rullegardinmenyen mce-formater
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funksjon myprefix_add_format_style ($ init_array) {
$ style_formats = matrise (
// Hvert matrisebarn er et format med egne innstillinger - legg til så mange du vil
array (
'title' => __ ('Theme Button', 'text-domain'), // Tittel for dropdown
'selector' => 'a', // Element som skal målrettes i redigereren
'klasser' => 'temaknapp' // Klassens navn brukt til CSS
),
array (
'title' => __ ('Marker', 'text-domain'), // Tittel for dropdown
'inline' => 'spenn', // Pakk et spenn rundt det valgte innholdet
'Classes' => 'text-highlight' // Klassens navn brukt til CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
returner $ init_array;
}
add_filter ('liten_mce_before_init', 'myprefix_add_format_style');

Du kan endre titlene for å vise forskjellige navn i rullegardinmenyen, legge til / fjerne elementer fra matrisen osv. Du kan endre omtrent hva som helst i denne koden for å avsløre dine egne tilpassede formatstiler, husk å sjekke ut WordPress Codex for en mer detaljert forklaring av de aksepterte parametere og returverdier.

Nå som du har nye stiler, kan du fremheve innhold i redaktøren din og bruke stilene. Legg merke til hvordan “Temaknapp” -formatet har en valgparameter? Dette betyr at stilen bare kan brukes på den spesifikke velgeren (i dette tilfellet koden “a” eller “link”). Det andre formatet vi la til “Høydepunkt” har ikke en valgparameter, men snarere en “inline” -parameter som forteller den om å bruke stilen på hvilken tekst du har fremhevet i redigeringsprogrammet og pakke den inn i et spenn med det unike klassnavnet ditt. Du kan se et eksempel fra Total WordPress-temaet vårt om hvordan vi har brukt formater, slik at brukere enkelt kan bruke et sjekklisteutseende på alle kuler i redigeringsprogrammet..

sjekkliste

Så nå kan du bruke dine tilpassede formater, men de ser ikke annerledes ut før du har lagt til noen tilpassede CSS på nettstedet ditt for å style dem. Du bør finne stilarket for temaet ditt (hvis du bygger ditt eget) eller barnetemaet og lime inn følgende CSS-kode i filen.

.temaknapp {
skjerm: inline-block;
polstring: 10 15px;
farge: #fff;
bakgrunn: # 1796c6;
tekstdekorasjon: ingen;
}
.tema-knapp: svev {
tekstdekorasjon: ingen;
uklarhet: 0,8;
}
.teksthøydepunkt {
bakgrunn: # FFFF00;
}

Nå kommer dette til å legge til styling til de nye formatene for front-end, så når du bruker den kan du se dem live. Jippi! Men ville det ikke være fint å se stilene dine i selve redigeringsprogrammet når de blir brukt? For å gjøre dette må du gjøre bruk av funksjonen “editor stylesheet” i WordPress. Hvis du bygger ditt eget tema, vil du opprette en ny css-fil i temaet som heter “editor-style.css” (du kan navngi det du vil, bare husk å redigere kodebiten nedenfor tilsvarende) med den tilpassede CSS lagt til for formatene dine, og legg deretter til funksjonen nedenfor for å laste den inn i backend.

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

Hvis du jobber med en annens tema, må du legge dette til i ditt barnetema, bare husk å gi det et unikt navn slik at det ikke kommer i konflikt med foreldertemaet ditt, eller hvis foreldertemaet allerede har en CSS-fil for redaktøren kan du faktisk kopiere den og lime den inn i barnetemaet ditt (uten å legge til PHP-koden over), og deretter legge til den nye CSS-en din, fordi WordPress vil sjekke barnetemaet før du legger inn redaktørens CSS-fil for foreldertemaet, og hvis den finner det, vil det laste det fra barnetemaet i stedet.

Legg tilpassede stiler til WordPress Visual Editor med en fin plugin

Hvis du ikke har tid til å leke med kode, eller du ikke kan forstå det selv, er det gode nyheter. Det er en plugin som lar deg fullføre nøyaktig hva vi nettopp gjorde ovenfor uten å måtte skru rundt med koden.

TinyMCE Custom Styles-plugin

Bare søk etter, installer og aktiver TinyMCE Custom Styles-plugin og aktiver det på ditt WordPress-nettsted.

TinyMCE Custom Styles Settings

Gå til Innstillinger> TinyMCE prof.style på venstre side av WordPress-dashbordet. Det er her du endrer innstillingene for plugin-modulen.

TinyMCE Custom Styles Settings

Plugin-enheten lar deg velge hvor stilarkene dine er, eller hvor du vil plassere dem. Det anbefales at du oppretter en ny tilpasset katalog. Velg det tredje alternativet og gi katalogen et navn, og flytt deretter nedover for å klikke på Lagre innstillinger alternativet før du går videre til neste trinn.

TinyMCE Custom Styles Legg til nytt

Når du har lagret innstillingene, blar du ned for å velge Legg til ny stil-knappen.

TinyMCE tilpassede stiler

Det er her du tilpasser hva du vil at dine tilpassede stiler skal se ut. Det er i utgangspunktet en enkel nettbasert redaktør som genererer CSS-koden for deg. Skriv inn en tittel for hva du vil vise i rullegardinmenyen. Velg om du vil velge en velger, inline eller blokkeringstype. Bruk gjerne skjermdumpet over til å fylle ut CSS-klasser og stiler, eller lag dine egne avhengig av hva du planlegger å bruke rullegardinmenyen til. Når du er ferdig, klikker du på Lagre innstillinger nederst på siden.

TinyMCE Custom Styles Format

Nå er det på tide å se hvordan den nye tilpassede stilen ser ut i redaktøren din. Åpne et nytt innlegg eller en side og finn rullegardinmenyen Formater på venstre side av Visual Editor. Det dukker opp i andre linje. Når du klikker på rullegardinmenyen, vil den avsløre den nye stilen du nettopp opprettet.

TinyMCE tilpassede stiler Format i bruk

Klikk på alternativet Big Blue Button, eller hva du enn opprettet for å se det avslørt i redaktøren din. For å bruke den bare markere teksten du vil formatere, klikk deretter på alternativet og voila!

Konklusjon

Det er alt for nå! Du kan alltid lære mer om hvordan du bruker nye stylinger ved å sjekke ut WordPress codex-side dedikert til dette emnet.

Gi oss beskjed i kommentarfeltet hvis du har spørsmål om hvordan du legger til tilpassede stiler i WordPress-visuelle redigeringsprogrammet. Og føl deg fri til å dele uvanlige stiler du har laget for å gjøre nettstedet ditt litt bedre!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me