Vil du legge til tilpassede stiler på WordPress Visual Editor? Ved å legge til egendefinerte stiler kan du raskt bruke formatering uten å gå til teksteditoren. I denne artikkelen vil vi vise deg hvordan du legger til egendefinerte stiler i WordPress visual editor.
Merk: Denne opplæringen krever grunnleggende kunnskaper om CSS.
Når vil du trenger du å legge til en tilpasset stil på WordPress Visual Editor?
Som standard tilbyr WordPresss visuelle editor grunnleggende formaterings- og stilalternativer. Noen ganger må du imidlertid ha egendefinerte stiler tilgjengelig som lar deg for eksempel legge til CSS-knapper, innhold, kroker osv.
Du kan alltid bytte fra visuell editor til tekstredigerer og legge til tilpasset HTML og CSS-kode. Men hvis du bruker visse stiler regelmessig, ville det være bedre å legge dem til i den visuelle redigereren, slik at du enkelt kan bruke dem på nytt.
Dette vil spare deg for mye tid, og lar deg også alltid bruke de samme stilene overalt på din nettstedet Web.
Enda viktigere er at du enkelt kan redigere eller oppdatere stiler uten å måtte redigere artiklene på nettstedet ditt.
Vi vil nå oppdage hvordan du gjør dette på WordPress.
1 Metode: Legg til en tilpasset stil med en plugin
Det første du trenger å gjøre er å installere og aktivere plugin-modulen " TinyMCE tilpassede stiler ". For mer informasjon se vår trinnvise veiledning for hvordan du installerer en WordPress Plugin.
Etter aktivering må du gå til " Innstillinger> Innstillinger »TinyMCE Custom Styles For å konfigurere plugin-innstillingene.
Programtillegget lar deg velge plasseringen av stilarkfiler. Den kan bruke temaet eller barnetemastilen din, eller du kan velge en egendefinert plassering.
Etter det må du klikke på knappen " lagre alle innstillinger For å lagre innstillingene dine.
Nå kan du legge til dine tilpassede stiler. Du må bla til stilseksjonen og klikke på knappen Legg til ny stil '.
Du må først oppgi en tittel for stilen. Denne tittelen vises i rullegardinmenyen. Da må du definere. Enten det er en rad, en blokk eller et utvalgselement.
Deretter legger du til en CSS-klasse, og deretter legger du til CSS-reglene som vist på skjermbildet nedenfor.
Når du har lagt til en CSS-stil, klikker du bare på "lagre alle innstillinger" -knappen for å lagre endringene.
Du kan nå redigere en eksisterende artikkel eller opprette en ny. Du vil legge merke til et format i rullegardinmenyen i den andre raden i WordPress-visuelle redigereren.
Bare velg en tekst i redigeringsprogrammet, og velg deretter din tilpassede stil fra rullegardinmenyen for å bruke den.
Du kan nå forhåndsvise artikkelen din for å se om dine tilpassede stiler bruker riktig.
2-metode: Legg til stiler manuelt i Visual Editor
Denne metoden krever at du manuelt legger til kode i WordPress-filene dine. Hvis dette er første gang du gjør dette, så sjekk veiledningen vår om hvordan du legger til en WordPress Plugin.
Trinn 1: Legg til en tilpasset stil fra rullegardinmenyen til WordPress Visual Editor.
Først legger vi til en rullegardinmeny på WordPress Visual Editor. Denne rullegardinmenyen lar oss deretter velge og bruke våre tilpassede stiler.
Du må legge til følgende kode i din functions.php-fil eller din plugin.
funksjon wpb_mce_buttons_2 ($ knapper) {array_unshift ($ knapper, 'styleselect'); returner $ knapper; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Trinn 2: Slik legger du til alternativer i rullegardinmenyen
Nå må du legge til noen alternativer i rullegardinmenyen du nettopp opprettet. Du vil da kunne velge og bruke disse alternativene fra formatene i rullegardinmenyen.
For denne opplæringen vil vi legge til tre egendefinerte stiler for å lage innhold blokk og knapper.
Du må legge til følgende kode i "functions.php" -filen til functions.php eller et bestemt plugin.
/ * * Tilbakekallingsfunksjon for å filtrere MCE-innstillingene * / funksjon my_mce_before_init_insert_formats ($ init_array) {// Definer style_formats array $ style_formats = array (/ * * Hvert arraybarn er et format med egne innstillinger * Legg merke til at hver array har tittel , blokk, klasser og innpakningsargumenter * Tittel er etiketten som vil være synlig i Formater-menyen * Blokk definerer om det er et spennvidde, div, velger eller innebygd stil * Klasser lar deg definere CSS-klasser * Innpakning om ikke legg til et nytt element på blokknivå rundt alle valgte elementer * / 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', 'blokk' => 'spenn', 'klasser' => 'rød knapp', 'omslag' => sann,),); // Sett inn matrisen, JSON KODET, i 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); returner $ init_array; } // Fest tilbakeringing til 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Du kan nå legge til et nytt innlegg på WordPress og klikke på formatene fra rullegardinmenyen for visuell editor. Du vil merke at de tilpassede stilene dine nå er synlige.
Valget deres vil imidlertid ikke gjøre noen forskjell for den visuelle redaktøren av WordPress.
3 Trinn: Legg til en CSS-stil
Nå er det siste trinnet å legge til CSS-stilregler for dine tilpassede stiler.
Du må legge til denne CSS i style.css-filen for temaet ditt eller for barnetemaet.
.innholdsblokk {border: 1px solid #eee; polstring: 3px; bakgrunn: #ccc; maks bredde: 250px; flyte: høyre; tekstjustering: sentrum; } .innholdsblokk: etter {klart: begge deler; } .blå knapp {bakgrunnsfarge: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid # 057fd0; display: inline-block; markør: punkt; farge: #ffffff; polstring: 6px 24px; tekstdekorasjon: ingen; }. rød-knapp {bakgrunnsfarge: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid # 942911; display: inline-block; markør: punkt; farge: #ffffff; polstring: 6px 24px; tekstdekorasjon: ingen; }
Redaktørens stilark styrer utseendet til din innhold i den visuelle editoren. Sjekk dokumentasjonen for å se hvordan du finner plasseringen til denne filen.
Hvis temaet ikke har en stilarkfil, kan du alltid opprette en. Bare lag en ny CSS-fil og gi den navnet " Custom-editor-style.css '.
Du må laste opp denne filen til temaets rotkatalog, og deretter legge til denne koden i temaets "functions.php" -fil.
fungere my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css'); } add_action ('init', 'my_theme_add_editor_styles');
Det er alt. Du har nettopp lagt til dine tilpassede stiler i WordPress visuelle redigeringsprogram. Du kan nå foreta de tilpasningene du synes er riktige.
Del denne opplæringen med vennene dine på dine sosiale nettverk.
