Sådan føjes tilpassede stilarter til WordPress Visual Editor

Sådan føjes tilpassede stilarter til WordPress Visual Editor

Se på din WordPress-visuelle editor. Der er nogle standardindstillinger til formatering og styling af dit indhold, men ikke meget med hensyn til tilpasning for at få dine indlæg og sider til at se lidt rigtig godt ud.


WordPress Editor

Nu ved du måske, at du har evnen til at hoppe frem og tilbage mellem tekst- og visuelle redaktører i WordPress for at smide nogle CSS til at oprette ting som knapper og tekstblokke, men dette er en smerte, og hvis du ikke har meget erfaring med at redigere kode Teksteditoren virker lidt skræmmende.

Ville det ikke bare være lettere, hvis du kunne oprette dine egne tilpassede stilarter, placere dem i en rullemenu i WordPress-editoren og vælge at bruge dem, når du har brug for dem? Ja, det er meget lettere, så vi vil skitsere, hvordan man gør det her. Husk, at selv om vi prøver at gøre denne proces så enkel som muligt, hjælper det med at have lidt CSS-viden, hvis du vil opdage de fulde fordele ved tilpassede stilarter.

Lad os se på, hvordan du tilføjer tilpassede stilarter til WordPress-visuelle editor.

Føj brugerdefinerede stilarter til WordPress Visual Editor ved at tilføje kode

Denne første mulighed kræver, at du ved lidt om, hvordan du integrerer og ændrer CSS, men jeg giver dig en lille gåtur igennem for at hjælpe dig med at lære det grundlæggende, så du kan bruge denne viden i fremtiden. Dette er en dejlig mulighed, hvis du ikke ønsker at afveje dit websted med et plugin.

Pointen med dette er at tilføje en ny dropdown-menu, der inkluderer tilpassede stilarter i din WordPress-visuelle editor, som giver dig muligheden for at vælge elementer i din editor og derefter anvende tilpassede stilarter på dem. Hvis du udvikler et nyt tema, skal du finde dit functions.php arkiver og anbring koden nedenfor i den fil, eller hvis du arbejder med et allerede indbygget tema indsæt denne kode i et barnetema’s features.php fil.

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

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Gå tilbage til redaktøren i et af dine WordPress-indlæg, og nu skal du se en ny “Formater” -knap i den øverste række af editoren. Læg mærke til, hvordan vi koblet ind i “mce_buttons_1? Dette placerer formatmenuknappen i den første række i mce-editoren. Du kan også bruge “mce_buttons_2” -filteret til at placere det i den anden række eller “mce_buttons_3” for at placere det i den 3. række.

Så nu du har aktiveret menupunktet, er det tid til at tilføje dine brugerdefinerede stilarter til brug i dine indlæg. Tag koden nedenfor og indsæt den i din functions.php fil, der tilføjer 2 nye stilarter til dropdown-formaterne – “Temaknap” og “Fremhæv”.

/ **
* Føj brugerdefinerede stilarter til rullemenuen mce-formater
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funktion myprefix_add_format_style ($ init_array) {
$ style_formats = array (
// Hvert array-barn er et format med dets egne indstillinger - tilføj så mange som du vil
array (
'title' => __ ('Tema-knap', 'tekst-domæne'), // Titel til dropdown
'selector' => 'a', // Element, der skal målrettes i editor
'klasser' => 'tema-knap' // Klassenavn brugt til CSS
),
array (
'title' => __ ('Fremhæv', 'tekst-domæne'), // Titel til dropdown
'inline' => 'span', // Indpak et omfang omkring det valgte indhold
'Classes' => 'text-highlight' // Klassenavn brugt til CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
returner $ init_array;
}
add_filter ('lille_mce_before_init', 'myprefix_add_format_style');

Du kan ændre titlerne til at vise forskellige navne i din dropdown-menu, tilføje / fjerne elementer fra matrixen osv. Du kan ændre stort set alt i denne kode for at afsløre dine egne tilpassede formatformater, sørg for at tjekke WordPress Codex for en mere dybdegående forklaring af de accepterede parametre og returværdier.

Nu hvor du har nye stilarter, kan du fremhæve indhold i din editor og anvende stilarterne. Bemærk, hvordan “Tema-knap” -formatet har en vælgerparameter? Dette betyder, at stilen kun kan anvendes på den specifikke valg (i dette tilfælde mærket “a” eller “link”). Det andet format, vi tilføjede “Fremhæv”, har ikke en vælgerparameter, men snarere en “inline” -parameter, der fortæller den at anvende stilen til uanset tekst, du har fremhævet i din editor og indpakke den i et spænd med dit unikke klassnavn. Du kan se et eksempel fra vores Total WordPress-tema om, hvordan vi har brugt formater, så brugere let kan anvende et tjekliste-look på alle punkter i editoren.

check-liste

Så nu kan du bruge dine tilpassede formater, men de ser ikke anderledes ud, før du har tilføjet nogle brugerdefinerede CSS til dit websted for at style dem. Du skal finde typografien til dit tema (hvis du bygger dit eget) eller underordnet tema og indsætte følgende CSS-kode i filen.

.tema-knap {
display: inline-block;
polstring: 10 15px;
farve: #fff;
baggrund: # 1796c6;
tekstdekoration: ingen;
}
.tema-knap: hover {
tekstdekoration: ingen;
opacitet: 0,8;
}
.tekst-fremhævning {
baggrund: # FFFF00;
}

Nu vil dette tilføje styling til dine nye formater til front-end, så når de anvendes, kan du se dem live. Yay! Men ville det ikke være rart at også se dine stilarter i den egentlige editor, når de anvendes? For at gøre dette skal du gøre brug af funktionen “editor stylesheet” i WordPress. Hvis du bygger dit eget tema, vil du oprette en ny css-fil i dit tema kaldet “editor-style.css” (du kan navngive det, hvad du vil, bare sørg for at redigere kodestykket nedenfor) med den brugerdefinerede CSS tilføjet til dine formater, og tilføj derefter funktionen nedenfor for at indlæse den i backend.

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

Hvis du arbejder med en andens tema, bliver du nødt til at tilføje dette i dit barn-tema, bare sørg for at give det et unikt navn, så det ikke er i konflikt med dit overordnede tema, eller hvis dit overordnede tema allerede har en CSS-fil til editoren kan du faktisk kopiere det og indsætte det i dit underordnede tema (uden at tilføje PHP-koden ovenfor), så tilføj din nye CSS, fordi WordPress vil tjekke underordnet først inden indlæsning af det overordnede temas editor CSS-fil, og hvis det finder det, vil det indlæs det fra barnets tema i stedet.

Føj brugerdefinerede stilarter til WordPress Visual Editor med et pænt plugin

Hvis du ikke har tid til at lege med kode, eller du ikke kan forstå det selv, er der gode nyheder. Der er et plugin, der giver dig mulighed for at udfylde nøjagtigt det, vi lige har gjort ovenfor, uden at skulle skrue rundt med koden.

TinyMCE Custom Styles-plugin

Du skal blot søge efter, installere og aktivere TinyMCE Custom Styles-plugin og aktiver det på dit WordPress-sted.

TinyMCE Custom Styles-indstillinger

Gå til Indstillinger> TinyMCE prof.style på venstre side af dit WordPress-dashboard. Det er her du ændrer dine indstillinger for plugin.

TinyMCE Custom Styles-indstillinger

Plugin giver dig mulighed for at vælge, hvor dine stilark er, eller hvor du vil placere dem. Det anbefales, at du opretter et nyt brugerdefineret bibliotek. Vælg den tredje mulighed, og giv dit bibliotek et navn, og flyt derefter ned på siden for at klikke på dit Gem indstillinger før du fortsætter til næste trin.

TinyMCE tilpassede stilarter Tilføj nyt

Når du har gemt indstillingerne, skal du rulle ned for at vælge knappen Tilføj ny stil.

TinyMCE-indstillinger for brugerdefinerede stilarter

Det er her du tilpasser, hvad du vil have dine tilpassede stilarter til at se ud. Det er dybest set en simpel webbaseret editor, der genererer CSS-koden til dig. Indtast en titel til, hvad du vil vise i rullemenuen. Vælg, om du vil have en vælger-, inline- eller blokertype. Brug gjerne skærmbilledet ovenfor til at udfylde CSS klasser og stilarter, eller oprette dine egne afhængigt af hvad du planlægger at bruge rullemenuen til. Når det er gjort, skal du klikke på Gem indstillinger nederst på siden.

TinyMCE tilpasset formatformat

Nu er det tid til at se, hvordan den nye brugerdefinerede stil ser ud i din editor. Åbn et nyt indlæg eller en side, og find rullemenuen Formater i venstre side af Visual Editor. Det vises på anden linje. Når du klikker på rullemenuen, afslører den den nye stil, du lige har oprettet.

TinyMCE tilpassede stilarter Format i brug

Klik på indstillingen Big Blue Button, eller hvad du end har oprettet, for at se den afsløret i din editor. For at bruge den skal du blot fremhæve den tekst, du vil formatere, og derefter klikke på din mulighed og voila!

Konklusion

Det er alt for nu! Du kan altid lære mere om, hvordan du bruger nye stylinger ved at tjekke til WordPress-kodex-side dedikeret til dette emne.

Lad os vide det i kommentarfeltet, hvis du har spørgsmål til, hvordan du tilføjer tilpassede stilarter til WordPress-visuelle editor. Og du er velkommen til at dele alle usædvanlige stilarter, du har oprettet for at få dit websted til at se lidt pænere ud!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map