Cum să adăugați stiluri personalizate la WordPress Visual Editor

Cum să adăugați stiluri personalizate la WordPress Visual Editor

Aruncați o privire la editorul dvs. vizual WordPress. Există câteva opțiuni standard pentru formatarea și stilizarea conținutului dvs., dar nu foarte mult în ceea ce privește personalizarea pentru a face postările și paginile dvs. să pară într-adevăr fanteziste.


Editor WordPress

Acum, este posibil să știți că aveți capacitatea de a sări înainte și înapoi între editorii Text și Visual din WordPress pentru a arunca unele CSS pentru a crea lucruri precum butoanele și blocurile de text, dar aceasta este o durere și dacă nu aveți multă experiență de editare a codului, editorul de text pare puțin intimidant.

Nu ar fi doar mai ușor dacă ați putea să vă creați propriile stiluri personalizate, să le plasați într-un meniu derulant în editorul WordPress și să alegeți să le utilizați ori de câte ori aveți nevoie de ele? Da, este mult mai ușor, așa că vrem să prezentăm cum se face aici. Rețineți că, deși încercăm să facem acest proces cât mai simplu, acesta vă ajută să aveți un pic de cunoștințe CSS dacă doriți să descoperiți beneficiile complete ale stilurilor personalizate.

Să aruncăm o privire la cum să adăugați stiluri personalizate la editorul vizual WordPress.

Adăugați stiluri personalizate în editorul vizual WordPress adăugând cod

Această primă opțiune necesită să știți puțin despre cum să încorporați și modificați CSS, dar vă voi oferi o scurtă plimbare pentru a vă ajuta să învățați elementele de bază, pentru a putea utiliza aceste cunoștințe în viitor. Aceasta este o opțiune frumoasă dacă nu doriți să vă cântăriți site-ul cu un plugin.

Ideea este să adăugați un nou meniu derulant care include stiluri personalizate în editorul vizual WordPress, care vă oferă posibilitatea de a selecta elemente din editorul dvs. și apoi de a le aplica stiluri personalizate. Dacă dezvoltați o nouă temă, localizați-vă functions.php fișați și plasați codul de mai jos în acel fișier sau dacă lucrați cu o temă deja construită, lipiți acest cod în fișierul funcției temei copilului.php.

function myprefix_mce_buttons_1 ($ butoane) {
array_unshift (butoane $, 'styleselect');
returneaza butoanele $;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Reveniți la editor într-una dintre postările dvs. WordPress și acum ar trebui să vedeți un nou buton „Formate” în rândul de sus al editorului. Observați cum ne-am agatat în „mce_buttons_1? Aceasta plasează butonul de meniu formate în primul rând al editorului mce. De asemenea, puteți utiliza filtrul „mce_buttons_2” pentru a-l plasa în al doilea rând sau „mce_buttons_3” pentru a-l plasa în cel de-al treilea rând..

Deci, acum când ați activat elementul de meniu, este timpul să adăugați stilurile dvs. personalizate pentru a fi utilizate în postările dvs. Luați codul menționat mai jos și lipiți-l în dvs. functions.php fișier care va adăuga 2 stiluri noi în derularea Formate – „Butonul temă” și „Evidenție”.

/ **
* Adăugați stiluri personalizate la meniul drop formate mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
function myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// Fiecare copil de matrice este un format cu setările proprii - adăugați câte doriți
array (
'title' => __ ('Buton temă', 'text-domeniu'), // Titlu pentru dropdown
'selector' => 'a', // Elementul de țintit în editor
'classes' => 'buton tematic' // Numele clasei utilizate pentru CSS
),
array (
'title' => __ ('Evidențiați', 'text-domeniu'), // Titlu pentru dropdown
'inline' => 'span', // Înfășurați un interval în jurul conținutului selectat
'classes' => 'text-highlight' // Numele clasei utilizate pentru CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
returna $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Puteți schimba titlurile pentru a afișa diferite nume în meniul vertical, adăuga / elimina elemente din tablă etc. Puteți modifica aproape orice din acest cod pentru a dezvălui propriile stiluri de format personalizat, asigurați-vă că verificați WordPress Codex pentru o explicație mai detaliată a parametrilor și valorilor returnate acceptate.

Acum că aveți stiluri noi, puteți evidenția conținut în editorul dvs. și puteți aplica stilurile. Observați, cum formatul „Buton Tema” are un parametru selector? Aceasta înseamnă că stilul poate fi aplicat numai la acel selector specific (în acest caz eticheta „a” sau „link”). Al doilea format pe care l-am adăugat „Highlight” nu are un parametru de selectare, ci mai degrabă un parametru „inline” care îi spune să aplice stilul la textul pe care l-ați evidențiat în editorul dvs. și să-l înfășurați într-un interval cu numele dvs. de clasă unic. Puteți vedea un exemplu din tema noastră Total WordPress despre modul în care am folosit formate, astfel încât utilizatorii să poată aplica cu ușurință un aspect de listă de control oricărui buletin din editor.

lista de verificare

Așadar, acum puteți utiliza formatele dvs. personalizate, dar nu vor arăta altfel până când nu ați adăugat unele CSS personalizate pe site-ul dvs. pentru a le stila. Ar trebui să localizați fișa de stil pentru tema dvs. (dacă vă construiți) sau tema copil și să lipiți următorul cod CSS în fișier.

.butonul tematic {
afișare: bloc în linie;
captusire: 10 15px;
culoare: #fff;
fundal: # 1796c6;
text-decor: nici unul;
}
.theme-button: hover {
text-decor: nici unul;
opacitate: 0,8;
}
.text-evidențiat {
fundal: # FFFF00;
}

Acum, aceasta va adăuga stilul la noile dvs. formate pentru front-end, astfel încât atunci când este aplicat, le puteți vedea în direct. Ura! Dar nu ar fi frumos să vă vedeți și stilurile în editorul propriu atunci când acestea sunt aplicate? Pentru a face acest lucru, va trebui să folosiți funcția „foaie de stil editor” în WordPress. Dacă îți creezi propria temă, atunci vei dori să creezi un nou fișier css în tema ta numită „editor-style.css” (poți numi orice vrei, asigură-te că editați fragmentul de mai jos) cu CSS personalizat adăugat pentru formatele dvs. și apoi adăugați funcția de mai jos pentru a o încărca în backend.

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

Dacă lucrați cu tema altcuiva, atunci va trebui să adăugați aceasta în tema copilului dvs., trebuie doar să vă asigurați că îi dați un nume unic, astfel încât să nu intre în conflict cu tema părintească sau dacă tema părintească are deja un fișier CSS pentru editorul puteți să-l copiați și să-l lipiți în tema copilului dvs. (fără a adăuga codul PHP de mai sus) apoi adăugați-vă noul CSS, deoarece WordPress va verifica mai întâi tema copil înainte de a încărca fișierul CSS al editorului temei părinte și dacă îl va localiza încărcați-l din tema copilului.

Adăugați stiluri personalizate la editorul vizual WordPress cu un plugin frumos

Dacă nu aveți timp să vă jucați cu codul sau nu vă puteți da seama singur, există vești bune. Există un plugin care vă permite să completați exact ceea ce tocmai am făcut mai sus, fără a fi nevoie să înșurubați codul.

Pluginul personalizat pentru stiluri personalizate TinyMCE

Pur și simplu căutați, instalați și activați Pluginul TinyMCE Custom Styles și activați-l pe site-ul dvs. WordPress.

Setări TinyMCE personalizate pentru stiluri

Mergi la Setări> Stiluri prof. TinyMCE în partea stângă a tabloului de bord WordPress. Aici modificați setările pentru plugin.

Setări TinyMCE personalizate pentru stiluri

Pluginul vă permite să alegeți unde sunt foile de stil sau unde doriți să le plasați. Este recomandat să creezi un nou director personalizat. Selectați a treia opțiune și dați un nume directorului dvs., apoi mutați pagina în jos pentru a face clic pe dvs. Salvează setările opțiune înainte de a trece la pasul următor.

Stiluri personalizate TinyMCE Adaugă nou

După ce salvați setările, derulați în jos pentru a selecta butonul Adaugă stil nou.

Opțiuni de stiluri personalizate TinyMCE

Aici veți personaliza cum doriți să arate stilurile dvs. personalizate. Este practic un simplu editor web care generează codul CSS pentru dvs. Introduceți un titlu pentru orice doriți să apară în meniul derulant. Alegeți dacă doriți un tip de selector, inline sau bloc. Simțiți-vă liber să utilizați imaginea de mai sus pentru a completa clasele și stilurile CSS sau pentru a vă crea propriul dvs. în funcție de ceea ce intenționați să utilizați meniul derulant pentru. Odată terminat, faceți clic pe Salvare Setări din partea de jos a paginii.

Format de stiluri personalizate TinyMCE

Acum este timpul să vedem cum arată noul stil personalizat în editor. Deschideți o nouă postare sau pagină și localizați meniul vertical Formates în partea stângă a editorului Visual. Ea apare în a doua linie. După ce faceți clic pe meniul derulant, acesta va dezvălui noul stil pe care tocmai l-ați creat.

Format de stiluri personalizate TinyMCE în uz

Faceți clic pe opțiunea Buton albastru mare, sau orice ați creat, pentru a o vedea în editor. Pentru a-l utiliza, evidențiați pur și simplu textul pe care îl doriți formatat, apoi faceți clic pe opțiunea dvs. și voilați!

Concluzie

Asta este tot pentru acum! Puteți afla întotdeauna mai multe despre cum să utilizați stiluri noi verificând Pagina codului WordPress dedicat acestui subiect.

Spuneți-ne în secțiunea de comentarii dacă aveți întrebări despre cum să adăugați stiluri personalizate la editorul vizual WordPress. Și nu ezitați să împărtășiți orice stiluri neobișnuite pe care le-ați creat pentru a face site-ul dvs. să arate puțin mai frumos!

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