Želite li dodati prilagođene stilove u WordPressov vizualni uređivač? Dodavanje prilagođenih stilova omogućuje vam brzo primjenjivanje oblikovanja bez odlaska u uređivač teksta. U ovom ćemo vam članku pokazati kako dodati prilagođene stilove u WordPressov vizualni uređivač.
Remarque: Uputa za ovo zahtijeva osnovno znanje o CSS-u.
Kada molim te trebate dodati prilagođeni stil u WordPress Visual Editor?
Prema zadanim postavkama, WordPressov vizualni uređivač nudi osnovne mogućnosti oblikovanja i stiliziranja. Međutim, ponekad ćete trebati pri ruci imati prilagođene stilove koji će vam omogućiti da, na primjer, dodate CSS gumbe, sadržaj, kuke itd.
Uvijek se možete prebaciti s vizualnog uređivača na uređivač teksta i dodati prilagođeni HTML i CSS kôd. Ali ako redovito koristite određene stilove, bilo bi ih bolje dodati u vizualni uređivač kako biste ih mogli lako ponovno upotrijebiti.
Ovo će vam uštedjeti ogromnu količinu vremena, a također vam omogućiti da uvijek koristite iste stilove posvuda na vašem web stranica.
Što je još važnije, možete jednostavno uređivati ili ažurirati stilove bez potrebe za uređivanjem članaka na vašoj web lokaciji.
Sada ćemo otkriti kako to učiniti na WordPressu.
1 metoda: Dodajte prilagođeni stil s dodatkom
Prvo što trebate učiniti je instalirati i aktivirati dodatak " TinyMCE prilagođeni stilovi ". Za više detalja pogledajte naš vodič korak po korak o tome kako instalirati a WordPress plugin.
Nakon aktivacije morate posjetiti " Postavke> Postavke »TinyMCE prilagođeni stilovi Za konfiguriranje postavki dodatka.
Dodatak vam omogućuje odabir lokacije datoteka stilskih tablica. Može koristiti vašu temu ili stil podređene teme ili možete odabrati prilagođenu lokaciju.
Nakon toga morate kliknuti na gumb " spremite sve postavke Za pohranjivanje vaših postavki.
Sada možete dodati svoje prilagođene stilove. Trebate se pomaknuti do odjeljka stila i kliknuti na gumb Dodajte novi stil ".
Prvo morate unijeti naslov za stil. Ovaj će se naslov prikazati u padajućem izborniku. Tada trebate definirati. Bez obzira radi li se o retku, bloku ili elementu odabira.
Nakon toga dodajte CSS klasu, a zatim dodajte svoja CSS pravila kao što je prikazano na snimci zaslona u nastavku.
Nakon što dodate CSS stil, jednostavno kliknite gumb "spremi sve postavke" da biste spremili promjene.
Sada možete urediti postojeći članak ili stvoriti novi. Vidjet ćete format na padajućem izborniku, u drugom redu WordPress vizualnog uređivača.
Samo odaberite tekst u uređivaču, a zatim s padajućeg izbornika odaberite svoj stil da biste ga primijenili.
Sada možete pregledati članak da biste vidjeli primijenjuju li se prilagođeni stilovi ispravno.
2 metoda: ručno dodavanje stilova u vizualni uređivač
Ova metoda zahtijeva ručno dodavanje koda u vaše WordPress datoteke. Ako ovo radite prvi put, pogledajte naš vodič o tome kako dodati a WordPress plugin.
Korak 1: Dodajte prilagođeni stil iz padajućeg izbornika WordPress Visual Editor-a.
Prvo ćemo dodati padajući izbornik u WordPressov vizualni uređivač. Ovaj padajući izbornik tada će nam omogućiti odabir i primjenu naših prilagođenih stilova.
Morate dodati sljedeći kod u datoteku functions.php ili vaš dodatak.
funkcija wpb_mce_buttons_2 ($ gumbi) {array_unshift ($ gumbi, 'styleselect'); gumbi za povratak $; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Korak 2: Kako dodati opcije u padajućem izborniku
Sada ćete na padajući izbornik koji ste upravo stvorili trebati dodati neke mogućnosti. Tada ćete moći odabrati i primijeniti ove opcije iz formata na padajućem izborniku.
Za ovaj vodič ćemo dodati tri prilagođena stila za izradu sadržaj blok i gumbi.
Morat ćete dodati sljedeći kôd u datoteku "functions.php" svoje funkcije functions.php ili određeni dodatak.
/ * * Funkcija povratnog poziva za filtriranje postavki MCE * / funkcija my_mce_before_init_insert_formats ($ init_array) {// Definiranje polja style_formats $ style_formats = array (/ * * Svako podređeno polje niza ima vlastite postavke * Primijetite da svaki niz ima naslov , blok, klase i armaturni argumenti * Naslov je oznaka koja će biti vidljiva u izborniku Formati * Blok definira je li to raspon, div, selektor ili umetnuti stil * Klase vam omogućuju definiranje CSS klasa * Omotač da li dodajte novi element na razini bloka oko bilo kojeg odabranog elementa * / array ('title' => 'Blok sadržaja', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true,), array ('title' => 'Crveni gumb', 'blok' => 'raspon', 'klase' => 'crveni gumb', 'omot' => istina,),); // Umetni niz, JSON ENCODED, u 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); vrati $ init_array; } // Prikači povratni poziv na 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Sada možete dodati novi post na WordPressu i kliknuti formate s padajućeg izbornika vizualnog uređivača. Primijetit ćete da su vaši prilagođeni stilovi sada vidljivi.
Međutim, njihov izbor neće imati nikakve razlike na vizualnom uređivaču WordPress-a.
3 Korak: Dodajte CSS stil
Sada je posljednji korak dodavanje pravila CSS stila za vaše prilagođene stilove.
Morat ćete dodati ovaj CSS u datoteku style.css svoje teme ili podređene teme.
.content-block {border: 1px solid #eee; podstava: 3px; pozadina: #ccc; maksimalna širina: 250 piksela; plutati: desno; poravnanje teksta: središte; } .content-block: nakon {clear: both; } .plavi gumb {background-color: # 33bdef; -moz-radijus-granice: 6px; -webkit-border-radius: 6px; radijus obruba: 6px; obrub: 1px solid # 057fd0; prikaz: inline-block; kursor: točka; boja: #ffffff; popunjavanje: 6px 24px; ukras teksta: nijedan; } .crveni gumb {background-color: # bc3315; -moz-radijus-granice: 6px; -webkit-radijus-granice: 6px; radijus obruba: 6 piksela; obrub: 1px solid # 942911; prikaz: inline-block; kursor: točka; boja: #ffffff; popunjavanje: 6px 24px; ukras teksta: nijedan; }
List stilova uređivača kontrolira izgled vašeg sadržaj u vizualnom uređivaču. Provjerite dokumentaciju da vidite kako pronaći lokaciju ove datoteke.
Ako vaša tema nema datoteku stilskog lista, tada je uvijek možete stvoriti. Samo stvorite novu CSS datoteku i nazovite je " Custom-urednik style.css ".
Morate prenijeti ovu datoteku u korijenski direktorij teme, a zatim dodati ovaj kôd u datoteku "functions.php" svoje teme.
funkcija my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css'); } add_action ('init', 'my_theme_add_editor_styles');
To je sve. Upravo ste dodali svoje prilagođene stilove u WordPressov vizualni uređivač. Sada možete izvršiti prilagodbe za koje mislite da su ispravne.
Slobodno dijelite ovaj tutorial sa svojim prijateljima na svojim omiljenim društvenim mrežama.
