Kako dodati sloge po meri v vizualni urejevalnik WordPress

Kako dodati sloge po meri v vizualni urejevalnik WordPress

Oglejte si svoj vizualni urejevalnik WordPress. Obstaja nekaj standardnih možnosti za oblikovanje in oblikovanje vsebine, vendar ne veliko v zvezi s prilagajanjem, da bodo vaše objave in strani videti resnično izmišljene.


WordPress urejevalnik

Zdaj boste morda vedeli, da lahko med Wordovimi in vizualnimi urejevalniki v WordPressu skačete naprej in nazaj, da vstavite nekaj CSS-ja za ustvarjanje stvari, kot so gumbi in besedilni bloki, vendar je to bolečina in če nimate veliko izkušenj z urejanjem kode urejevalnik besedila izgleda nekoliko zastrašujoče.

Ali ne bi bilo lažje, če bi lahko ustvarili svoje lastne sloge, jih postavili v spustni meni v urejevalniku WordPress in se odločili, da jih boste uporabili, kadar jih boste potrebovali? Da, veliko lažje je, zato želimo tukaj opisati, kako to storiti. Upoštevajte, da čeprav se trudimo, da bi bil ta postopek čim enostavnejši, pomaga imeti nekaj znanja CSS, če želite odkriti vse prednosti slogov po meri.

Oglejmo si, kako v vizualni urejevalnik WordPress dodate sloge po meri.

Dodajte sloge po meri v WordPress Visual Editor z dodajanjem kode

Ta prva možnost zahteva, da se pozanimate o tem, kako vključiti in spremeniti CSS, vendar vas bom malo sprehodil, da vam bom pomagal naučiti osnov, da boste lahko to znanje uporabljali v prihodnosti. To je lepa možnost, če svojega spletnega mesta ne želite obtežiti s pomočjo vtičnika.

Smisel tega je, da dodate nov spustni meni, ki vključuje sloge po meri v svojem vizualnem urejevalniku WordPress, ki vam omogoča, da izberete elemente v urejevalniku in nato nanje uporabite stile po meri. Če razvijate novo temo, poiščite svoje function.php datoteko spodaj vstavite v to datoteko ali če delate z že vgrajeno temo, prilepite to kodo v funkcijo otroške teme.php.

funkcija myprefix_mce_buttons_1 ($ gumbi) {
array_unshift (gumbi $, 'styleselect');
vrnite $ gumbe;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Vrnite se do urejevalnika v enem od svojih WordPress objav in zdaj bi morali v zgornji vrstici urejevalnika videti nov gumb “Formati”. Opazite, kako smo se povezali v »mce_buttons_1? To postavi gumb menija formatov v prvo vrstico urejevalnika mce. S pomočjo filtra “mce_buttons_2” ga lahko postavite tudi v drugo vrstico ali “mce_buttons_3”, če ga želite namestiti v 3. vrstico.

Zdaj, ko ste omogočili točko menija, je čas, da v svojih objavah dodate svoje sloge po meri. Vzemite spodnjo kodo in jo prilepite v svojo function.php datoteka, ki bo dodana 2 nova sloga v spustni meni Formati – “Gumb za teme” in “Označi”.

/ **
* Dodajte sloge po meri v spustni meni formatov mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funkcija myprefix_add_format_styles ($ init_array) {
$ style_formats = matrika (
// Vsak niz matrike je formata z lastnimi nastavitvami - dodajte toliko, kot želite
matrika (
'title' => __ ('Gumb za temo', 'text-domain'), // Naslov za spustno mesto
'selector' => 'a', // Element za ciljanje v urejevalniku
'class' => 'gumb-tema' // Ime razreda, ki se uporablja za CSS
),
matrika (
'title' => __ ('Označi', 'besedilno domeno'), // Naslov za spustno mesto
'inline' => 'span', // Omogoči razpon okoli izbrane vsebine
'class' => 'text -light' // Ime razreda, ki se uporablja za CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
vrniti $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Naslove lahko spremenite tako, da se v spustnem meniju prikažejo različna imena, dodate / odstranite elemente iz matrike itd. V tej kodi lahko spremenite skoraj vse, da razkrijete svoje lastne sloge oblikovanja po meri, ne pozabite preveriti WordPress Codex za bolj poglobljeno razlago sprejetih parametrov in vrnjenih vrednosti.

Zdaj, ko imate nove sloge, lahko v urejevalniku označite vsebino in jih uporabite. Opazite, kako ima format „Gumb teme“ izbirni parameter? To pomeni, da je slog mogoče uporabiti samo za določen izbirnik (v tem primeru oznako “a” ali “link”). Drugi format, ki smo mu dodali »Označi«, nima parametra za izbiro, temveč parametra »vmesnik«, ki mu pove, da uporablja slog za ne glede na besedilo, ki ste ga izpostavili v urejevalniku, in ga zavijte v razponu z vašim edinstvenim imenom razreda. Lahko si ogledate primer iz naše teme Total WordPress o tem, kako smo uporabljali formate, tako da lahko uporabniki preprosto uporabijo pogled na kontrolni seznam na katero koli oznako v urejevalniku.

kontrolni seznam

Zdaj lahko uporabljate svoje oblike po meri, vendar ne bodo videti drugače, dokler na spletno mesto ne dodate nekaterih CSS-jev po meri, da jih oblikujete. Poiščite tabelo slogi za svojo temo (če gradite svojo) ali nadrejeno temo in v datoteko prilepite naslednjo kodo CSS.

.gumb-tema {
zaslon: inline-block;
oblazinjenje: 10 15px;
barva: #fff;
ozadje: # 1796c6;
urejanje besedila: nič;
}
.gumb-tema: premaknite miško {
urejanje besedila: nič;
motnost: 0,8;
}
.osvetlitev besedila {
ozadje: # FFFF00;
}

Zdaj bo to dodalo oblikovanje vašim novim formatom za sprednji del, tako da jih lahko, ko jih nanesete, vidite v živo. Juhu! Toda ali ne bi bilo lepo, ko bi bili v uporabi tudi vaši slogi v dejanskem urejevalniku? Če želite to narediti, boste morali v WordPressu uporabiti funkcijo urejevalnega lista za urejevalnike. Če gradite svojo lastno temo, boste v svoji temi želeli ustvariti novo datoteko css, imenovano »editor-style.css« (lahko ji poimenujete karkoli želite in se prepričajte, da delček spodaj ustrezno uredite) s prilagojenim CSS dodano za svoje formate in nato dodajte spodnjo funkcijo, da jo naložite v zaledje.

funkcija myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
dodajanje ('init', 'myprefix_theme_add_editor_styles');

Če delate s temo nekoga drugega, boste to morali dodati v svojo otroško temo, le prepričajte se, da ji daste edinstveno ime, da ne bo v nasprotju z vašo nadrejeno temo ali če vaša matična tema že ima datoteko CSS za urejevalnik ga lahko dejansko kopirate in prilepite v otroško temo (ne da bi zgoraj dodali PHP kodo), nato pa dodajte nov CSS, ker bo WordPress najprej preveril nadrejeno temo, preden bo naložil datoteko CSS urejevalnika nadrejene teme, in če jo najde, bo namesto tega ga naložite iz otroške teme.

Dodajte sloge po meri v vizualni urejevalnik WordPress z lepim dodatkom

Če se nimate časa igrati s kodo ali je ne znate sami razbrati, so dobre novice. Obstaja vtičnik, ki vam omogoča, da dokončate točno tisto, kar smo pravkar storili zgoraj, ne da bi se vam bilo treba pri kodi priviti.

TinyMCE vtičnik po meri

Preprosto poiščite, namestite in aktivirajte TinyMCE vtičnik po meri slogov in ga aktivirajte na svojem mestu WordPress.

Nastavitve slogov po meri TinyMCE

Pojdi do Nastavitve> prof.styles TinyMCE na levi strani nadzorne plošče WordPress. Tukaj spremenite svoje nastavitve za vtičnik.

Nastavitve slogov po meri TinyMCE

Vtičnik vam omogoča, da izberete, kje so vaše tabele stilov ali kam jih želite umestiti. Priporočljivo je, da ustvarite nov imenik po meri. Izberite tretjo možnost in imenujte imenik, nato pa se pomaknite navzdol po strani in kliknite svoj Shrani nastavitve možnost pred nadaljevanjem naslednjega koraka.

TinyMCE slogi po meri Dodaj novo

Ko shranite nastavitve, se pomaknite navzdol in izberite gumb Dodaj nov slog.

Možnosti stilov po meri TinyMCE

Tukaj prilagodite, kako želite, da izgledajo vaši prilagojeni slogi. V bistvu je preprost spletni urejevalnik, ki ustvari kodo CSS za vas. V spustni meni vnesite naslov za vse, kar želite prikazati. Izberite, ali želite vrsto izbirnika, inline ali blokade. Uporabite zgornji posnetek zaslona za izpolnjevanje razredov in slogov CSS ali ustvarite svoje, odvisno od tega, kaj nameravate uporabiti spustni meni. Ko končate, na dnu strani kliknite Shrani nastavitve.

Oblika slogov TinyMCE po meri

Zdaj je čas, da vidite, kako izgleda nov slog po meri v vašem urejevalniku. Odprite novo objavo ali stran in poiščite spustni meni Formati na levi strani urejevalnika Visual. Prikaže se v drugi vrstici. Ko kliknete spustni meni, bo razkril nov slog, ki ste ga pravkar ustvarili.

TinyMCE Oblika slogov po meri se uporablja

Kliknite na gumb Big Blue Button ali karkoli ste ustvarili, da ga vidite v svojem urejevalniku. Če želite uporabiti, preprosto označite besedilo, ki ga želite oblikovati, nato kliknite svojo možnost in voila!

Zaključek

To je vse za zdaj! Vedno se lahko naučite več o uporabi novih stilov, tako da preverite Stran s kodeksom WordPress posvečena tej temi.

V razdelku s komentarji nam sporočite, če imate kakršna koli vprašanja o dodajanju slogov po meri v vizualni urejevalnik WordPress. Delite vse nenavadne sloge, ki ste jih ustvarili, da bo vaše spletno mesto videti lepše!

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