Ønsker du at tilføje tilpassede stilarter på WordPress visuelle editor? Tilføjelse af brugerdefinerede typografier giver dig mulighed for hurtigt at anvende formatering uden at gå til teksteditoren. I denne artikel viser vi dig, hvordan du tilføjer brugerdefinerede stilarter til WordPress visuelle editor.

stylesinwpeditor

Bemærk: Denne tutorial kræver grundlæggende viden om CSS.

Hvornår vil du har brug for at tilføje en brugerdefineret stil på WordPress Visual Editor?

Som standard tilbyder WordPresss visuelle editor grundlæggende formaterings- og stylingmuligheder. Men nogle gange bliver du nødt til at have brugerdefinerede stilarter ved hånden, som giver dig mulighed for for eksempel at tilføje CSS-knapper, indhold, kroge osv.

Du kan altid skifte fra visuel editor til teksteditor og tilføje tilpasset HTML og CSS-kode. Men hvis du bruger bestemte stilarter regelmæssigt, ville det være bedre at tilføje dem i den visuelle editor, så du nemt kan genbruge dem.

Dette vil spare dig for en enorm mængde tid, og giver dig også mulighed for altid at bruge de samme styles overalt på din Websted.

Mere vigtigt er det, at du nemt kan redigere eller opdatere stilarter uden at skulle redigere artiklerne på dit websted.

Vi vil nu opdage, hvordan vi gør dette på WordPress.

1-metode: Tilføj en brugerdefineret stil med et plugin

Den første ting du skal gøre er at installere og aktivere plugin " TinyMCE-tilpassede stilarter ". For flere detaljer se vores trin for trin guide til, hvordan du installerer en WordPress plugin.

Efter aktivering skal du besøge " Indstillinger> Indstillinger »TinyMCE brugerdefinerede stilarter Sådan konfigureres plugin-indstillingerne.

Kontrol-of-plugin-TinyMCE

Pluginnet giver dig mulighed for at vælge placeringen af ​​stylesheet-filer. Det kan bruge dit tema eller dit barntema stil, eller du kan vælge en brugerdefineret placering.

Derefter skal du klikke på knappen " gem alle indstillinger For at gemme dine indstillinger.

Nu kan du tilføje dine tilpassede stilarter. Du skal rulle til stilsektionen og klikke på knappen Tilføj ny stil '.

Du skal først indtaste en titel til stilen. Denne titel vises i rullemenuen. Så skal du definere. Uanset om det er en række, en blok eller et markeringselement.

Derefter tilføj en CSS-klasse, og tilføj derefter dine CSS-regler som vist på skærmbilledet nedenfor.

herske-of-stil-css

Når du har tilføjet en CSS-stil, skal du blot klikke på knappen "gem alle indstillinger" for at gemme dine ændringer.

Du kan nu redigere en eksisterende artikel eller oprette en ny. Du vil se et format i rullemenuen i den anden række i WordPress-visuelle editor.

stil-tilpas-editor-wordpress

Vælg bare en tekst i editoren, og vælg derefter din brugerdefinerede stil i rullemenuen for at anvende den.

Du kan nu se en forhåndsvisning af din artikel for at se, om dine brugerdefinerede stilarter anvendes korrekt.

2-metode: Tilføj manuelt stilarter til den Visual Editor

Denne metode kræver, at du manuelt tilføjer kode til dine WordPress-filer. Hvis det er første gang, du gør dette, så tjek vores vejledning om, hvordan du tilføjer en WordPress plugin.

Trin 1: Tilføj en brugerdefineret stil fra rullemenuen i WordPress Visual Editor.

Først tilføjer vi en rullemenu på WordPress visuelle editor. Denne rullemenu giver os derefter mulighed for at vælge og anvende vores brugerdefinerede typografier.

Du skal føje følgende kode til din functions.php-fil eller dit plugin.

funktion wpb_mce_buttons_2 ($ knapper) {array_unshift ($ knapper, 'styleselect'); returnere $ knapper; } tilføj_filter ('mce_buttons_2', 'wpb_mce_buttons_2');

Trin 2: Sådan tilføjes indstillinger i rullemenuen

Nu skal du tilføje nogle muligheder til rullemenuen, du lige har oprettet. Du vil derefter være i stand til at vælge og anvende disse muligheder fra formaterne i rullemenuen.

Til denne tutorial tilføjer vi tre brugerdefinerede stilarter til at oprette indhold blok og knapper.

Du bliver nødt til at tilføje følgende kode til "functions.php" -filen på din functions.php eller et specifikt plugin.

/ * * Callback-funktion for at filtrere MCE-indstillingerne * / funktion my_mce_before_init_insert_formats ($ init_array) {// Definer style_formats array $ style_formats = array (/ * * Hvert array-barn er et format med sine egne indstillinger * Bemærk, at hver array har titel , blok, klasser og indpakningsargumenter * Titel er den etiket, der vil være synlig i menuen Formater * Blok definerer, om det er et span, div, selector eller inline-stil * Classes giver dig mulighed for at definere CSS-klasser * Wrapper, om eller ikke tilføj et nyt element på blokniveau omkring 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 knap', 'blok' => 'spænd', 'klasser' => 'rød knap', 'indpakning' => sand,),); // Indsæt arrayet, JSON KODET, i '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 kan nu tilføje et nyt indlæg på WordPress og klikke på formaterne i rullemenuen til den visuelle editor. Du vil bemærke, at dine tilpassede stilarter nu er synlige.

Deres valg vil dog ikke gøre nogen forskel for den visuelle editor af WordPress.

3 Trin: Tilføj en CSS-stil

Nu er det sidste trin at tilføje CSS-stilregler til dine tilpassede stilarter.

Du bliver nødt til at tilføje denne CSS i style.css-filen for dit tema eller for under-temaet.

.content-block {border: 1px solid #eee; polstring: 3 px; baggrund: #ccc; maks. bredde: 250 px; flyde: højre; tekstjustering: center; } .content-block: efter {clear: begge; } .blå-knap {baggrundsfarve: # 33bdef; -moz-border-radius: 6 pixel; -webkit-border-radius: 6 pixel; border-radius: 6px; kant: 1px fast # 057fd0; display: inline-blok; markør: punkt; farve: #ffffff; polstring: 6px 24px; tekst-dekoration: ingen; }. rød-knap {baggrundsfarve: # bc3315; -moz-border-radius: 6 pixel; -webkit-border-radius: 6 pixel; border-radius: 6px; kant: 1 px solid # 942911; display: inline-blok; markør: punkt; farve: #ffffff; polstring: 6px 24px; tekst-dekoration: ingen; }

oversigt-over-knapper-TinyMCE-adding-of-style-personalizes

Editorens typografiark styrer udseendet af din indhold i den visuelle editor. Se dokumentationen for at se, hvordan du finder placeringen af ​​denne fil.

Hvis dit tema ikke har en stilarkfil, kan du altid oprette en. Opret bare en ny CSS-fil og navngiv den " Brugerdefineret-editor-style.css '.

Du skal uploade denne fil til dit temas rodmappe og derefter tilføje denne kode til dit temas "funktioner.php" -fil.

funktion 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 lige tilføjet dine tilpassede stilarter i WordPress visuelle editor. Du kan nu foretage de tilpasninger, som du synes er rigtige.

Del denne tutorial med dine venner på dine foretrukne sociale netværk.