Kuinka lisätä mukautettuja tyylejä WordPress Visual Editoriin

Kuinka lisätä mukautettuja tyylejä WordPress Visual Editoriin

Tutustu WordPress-visuaaliseen editoriin. Sisällön muotoiluun ja muotoiluun on joitain vakiovaihtoehtoja, mutta ei paljon räätälöinnin suhteen, jotta viestit ja sivut näyttävät hiukan todella hienoilta.


WordPress Editor

Nyt saatat tietää, että sinulla on mahdollisuus hypätä edestakaisin WordPressin Teksti- ja Visual-editorien välillä heittääksesi joitain CSS-tiedostoja esimerkiksi painikkeiden ja tekstilohkojen luomiseen, mutta tämä on tuskaa, ja jos sinulla ei ole paljon kokemusta koodin muokkaamisesta tekstieditori näyttää hieman pelottavalta.

Eikö olisi vain helpompaa, jos voisit luoda omia mukautettuja tyylejä, sijoittaa ne WordPress-editorin pudotusvalikkoon ja käyttää niitä aina, kun tarvitset niitä? Kyllä, se on paljon helpompaa, joten haluamme hahmotella, miten se tehdään täällä. Muista, että vaikka yritämme tehdä tästä prosessista mahdollisimman yksinkertaista, se auttaa saamaan vähän CSS-tietämystä, jos haluat löytää mukautettujen tyylien täydet edut.

Katsotaanpa, miten muokattuja tyylejä lisätään WordPress-visuaaliseen muokkausohjelmaan.

Lisää mukautettuja tyylejä WordPress Visual Editoriin lisäämällä koodi

Tämä ensimmäinen vaihtoehto edellyttää sinun tietävän vähän CSS: n sisällyttämisestä ja muokkaamisesta, mutta annan sinulle pienen ohjeen, jonka avulla voit oppia perusteet, jotta voit käyttää tätä tietoa tulevaisuudessa. Tämä on hieno vaihtoehto, jos et halua punnita sivustoasi laajennuksella.

Tämän tarkoituksena on lisätä uusi avattava valikko, joka sisältää mukautettuja tyylejä WordPress-visuaalisessa editorissa, joka antaa sinulle mahdollisuuden valita elementtejä editorissa ja sitten soveltaa niihin mukautettuja tyylejä. Jos olet kehittämässä uutta teemaa, etsi functions.php tiedosto ja aseta alla oleva koodi kyseiseen tiedostoon tai jos työskentelet jo rakennetun teeman kanssa, liitä tämä koodi alateeman funktion.php tiedostoon.

toiminto myprefix_mce_buttons_1 ($ -painikkeet) {
array_unshift ($ -painikkeet, 'styleselect');
paluu $ -painikkeet;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Palaa editoriin yhdessä WordPress-viesteistäsi ja nyt sinun pitäisi nähdä uusi ”Formats” -painike editorin ylimmässä rivissä. Huomaa, kuinka olemme koukussa “mce_buttons_1”? Tämä asettaa muotoilut-valikkopainikkeen Mce-editorin ensimmäiselle riville. Voit käyttää myös ”mce_buttons_2” -suodatinta sijoittaaksesi sen toiselle riville tai “mce_buttons_3” sijoittaaksesi sen kolmanteen riviin.

Joten nyt, kun olet ottanut valikkokohteen käyttöön, on aika lisätä muokatut tyylit käytettäväksi viesteissäsi. Ota alla oleva koodi ja liitä se omaan functions.php tiedosto, joka lisää 2 uutta tyyliä Avattavat muodot -kohtaan – ”Teemapainike” ja “Korosta”.

/ **
* Lisää mukautettuja tyylejä Mce-muodot-pudotusvalikkoon
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
toiminto myprefix_add_format_styles ($ init_array) {
$ style_formats = taulukko (
// Jokainen matriisin lapsi on muoto, jolla on omat asetukset - lisää niin monta kuin haluat
array (
'title' => __ ('Teemapainike', 'tekstialue'), // Otsikon pudotusvalikkoon
'selector' => 'a', // Elementti, johon kohde kohdistetaan editorissa
'class' => 'teema-painike' // CSS: llä käytetty luokan nimi
),
array (
'title' => __ ('Korosta', 'text-domain'), // Otsikon avattavaksi
'inline' => 'span', // Kääri span valitun sisällön ympärille
'luokka' => 'tekstin korostus' // CSS: ssä käytetty luokan nimi
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
palauta $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Voit muuttaa otsikoita näyttääksesi erilaisia ​​nimiä pudotusvalikossa, lisätä / poistaa kohteita taulukosta jne. Voit muokata mitä tahansa koodissa paljastaaksesi omat muokatut tyylit, muista tutustua WordPress Codex saadaksesi perusteellisempi selitys hyväksytyistä parametreista ja palautusarvoista.

Nyt kun sinulla on uusia tyylejä, voit korostaa sisältöä editorissa ja käyttää tyylejä. Huomaa, kuinka ”teemapainike” -muodossa on valitsinparametri? Tämä tarkoittaa, että tyyliä voidaan käyttää vain kyseiseen valitsimeen (tässä tapauksessa “a” tai “link” -tagi). Toisessa muodossa, jonka lisäsimme ”Korosta”, ei ole valintaparametria, vaan pikemminkin ”inline” -parametri, joka käskee soveltamaan tyyliä mihin tahansa tekstiin, jonka olet korostanut editorissa ja kääri se span yksilöllisen luokan nimen kanssa. Voit nähdä Total WordPress -teemastamme esimerkin siitä, kuinka olemme käyttäneet muotoja, jotta käyttäjät voivat helposti käyttää tarkistuslistan ulkoasua editorin luetteloihin.

tarkistuslista

Joten nyt voit käyttää mukautettuja muotojasi, mutta ne eivät näytä erilaisilta, ennen kuin olet lisännyt sivustollesi mukautetun CSS: n tyyliä varten. Sinun tulisi etsiä teeman (jos rakennat omaa) tai lapsiteeman tyylitaulukko ja liittää seuraava CSS-koodi tiedostoon.

.teemapainike {
näyttö: inline-block;
täyte: 10 15px;
väri: #fff;
tausta: # 1796c6;
tekstikoriste: ei mitään;
}
.teemapainike: vie hiiri {
tekstikoriste: ei mitään;
opasiteetti: 0,8;
}
.tekstin korostus {
tausta: # FFFF00;
}

Nyt tämä lisää tyyliä uusiin käyttöliittymämuotoihisi, joten kun sovellus on käytössä, näet ne live-tilassa. Jee! Mutta eikö olisi hienoa nähdä tyylit myös todellisessa editorissa, kun niitä käytetään? Tätä varten sinun on käytettävä WordPressin ”editor tyylitaulukko” -toimintoa. Jos rakennat omaa teemaa, haluat luoda uuden css-tiedoston teemasi nimeltä “editor-style.css” (voit nimetä sen mitä haluat, muista muokata alla olevaa katkelmaa vastaavasti) mukautetulla CSS: llä lisätty formaatioillesi ja lisää sitten alla oleva toiminto ladataksesi sen taustaohjelmaan.

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

Jos työskentelet jonkun toisen teeman kanssa, sinun on lisättävä tämä lapsiteemaasi, muista vain antaa sille yksilöllinen nimi, jotta se ei olisi ristiriidassa vanhemman teeman kanssa tai jos vanhemmalla teemallasi on jo CSS-tiedosto editori, jonka voit itse kopioida ja liittää sen lapsiteemaasi (lisäämättä yllä olevaa PHP-koodia) ja lisätä sitten uusi CSS, koska WordPress tarkistaa lapsiteeman ensin ennen vanhemman teeman editorin CSS-tiedoston lataamista ja jos se löytää sen, se lataa se sen sijaan lapsiteemasta.

Lisää mukautettuja tyylejä WordPress Visual Editoriin mukavalla lisäosalla

Jos sinulla ei ole aikaa pelata koodilla tai et pysty tajuamaan sitä itse itse, on hyviä uutisia. Siellä on laajennus, jonka avulla voit suorittaa tarkalleen sen, mitä juuri teimme yllä, joutumatta kiertämään koodia.

TinyMCE Custom Styles -laajennus

Etsi, asenna ja aktivoi vain TinyMCE Custom Styles -laajennus ja aktivoi se WordPress-sivustossasi.

TinyMCE mukautettujen tyylien asetukset

Mene Asetukset> TinyMCE -profiilit WordPress-kojelaudan vasemmalla puolella. Tässä voit muokata laajennuksen asetuksia.

TinyMCE mukautettujen tyylien asetukset

Laajennus antaa sinun valita, missä tyylitaulukot ovat tai mihin haluat sijoittaa ne. On suositeltavaa luoda uusi mukautettu hakemisto. Valitse kolmas vaihtoehto ja anna hakemistolle nimi ja siirrä sitten sivua alaspäin napsauttaaksesi Tallenna asetukset vaihtoehto ennen kuin siirryt seuraavaan vaiheeseen.

TinyMCE-mukautetut tyylit Lisää uusia

Kun olet tallentanut asetukset, vieritä alas ja valitse Lisää uusi tyyli -painike.

TinyMCE mukautettujen tyylien asetukset

Täällä voit mukauttaa miltä haluat mukautettujen tyyliesi näyttävän. Se on periaatteessa yksinkertainen verkkopohjainen editori, joka luo sinulle CSS-koodin. Kirjoita otsikko kaikelle, jonka haluat näkyvän avattavassa valikossa. Valitse, haluatko valitsimen, rivin vai estotyypin. Voit vapaasti käyttää yllä olevaa kuvakaappaa CSS-luokkien ja tyylien täyttämiseen tai luoda omia riippuen siitä, mitä aiot käyttää avattavaa valikkoa varten. Kun olet valmis, napsauta Tallenna asetukset sivun alareunassa.

TinyMCE mukautettujen tyylien muoto

Nyt on aika nähdä, kuinka uusi mukautettu tyyli näyttää editorissa. Avaa uusi viesti tai sivu ja etsi avattava Muodot-valikko Visual-editorin vasemmalla puolella. Se näkyy toisella rivillä. Kun napsautat avattavaa valikkoa, se paljastaa juuri luomasi uuden tyylin.

TinyMCE Custom Styles Format käytössä

Napsauta Big Blue Button -vaihtoehtoa tai mitä tahansa luomaasi, nähdäksesi sen paljastavan editorissa. Korosta se vain korostamalla muotoiltava teksti ja napsauta sitten vaihtoehtoa ja voila!

johtopäätös

Tässä kaikki tältä erää! Voit aina oppia lisää uusien tyylien käytöstä tarkistamalla WordPress-koodisivu omistettu tähän aiheeseen.

Kerro meille kommentti-osiossa, jos sinulla on kysyttävää siitä, kuinka lisätä mukautettuja tyylejä WordPress-visuaaliseen editoriin. Voit jakaa kaikki epätavalliset tyylit, jotka olet luonut sivustosi näyttämiseksi hieman mukavammalta!

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