Doriți să adăugați stiluri personalizate pe editorul vizual WordPress? Adăugarea stilurilor personalizate vă permite să aplicați rapid formatarea fără a accesa editorul de text. În acest articol, vă vom arăta cum să adăugați stiluri personalizate editorului vizual WordPress.

stylesinwpeditor

Remarque: Acest tutorial necesită cunoștințe de bază despre CSS.

când va tine trebuie să adăugați un stil personalizat în Editorul vizual WordPress?

În mod implicit, editorul vizual WordPress oferă opțiuni de bază de formatare și stil. Cu toate acestea, uneori va trebui să aveți la îndemână stiluri personalizate care vă vor permite, de exemplu, să adăugați butoane CSS, cuprins, cârlige etc.

Puteți comuta oricând de la editor vizual la editor de text și puteți adăuga cod HTML și CSS personalizat. Dar dacă utilizați anumite stiluri în mod regulat, atunci ar fi mai bine să le adăugați în editorul vizual, astfel încât să le puteți reutiliza cu ușurință.

Acest lucru vă va economisi o cantitate imensă de timp și, de asemenea, vă va permite să utilizați întotdeauna aceleași stiluri peste tot pe dvs site-ul web.

Mai important este că puteți edita sau actualiza cu ușurință stilurile fără a fi necesar să editați articolele de pe site-ul dvs.

Vom descoperi acum cum se face acest lucru pe WordPress.

Metoda 1: adăugați un stil personalizat cu un plugin

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul " TinyMCE Custom Styles ". Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un WordPress plug-in.

După activare, trebuie să vizitați " Setări> Setări »Stiluri personalizate TinyMCE Pentru a configura setările pluginului.

Control-de-plugin-TinyMCE

Plugin-ul vă permite să alegeți locația fișierelor foile de stil. Poate folosi tema dvs. sau stilul temei copilului sau puteți alege o locație personalizată.

După aceea, trebuie să faceți clic pe butonul " salvați toate setările Pentru a stoca setările.

Acum puteți adăuga stilurile dvs. personalizate. Trebuie să derulați la secțiunea de stil și să faceți clic pe buton Adăugați un stil nou ".

Mai întâi trebuie să introduceți un titlu pentru stil. Acest titlu va fi afișat în meniul derulant. Apoi, trebuie să definiți. Indiferent dacă este un rând, un bloc sau un element de selecție.

După aceea, adăugați o clasă CSS și apoi adăugați regulile dvs. CSS așa cum se arată în captura de ecran de mai jos.

regula-de-stil-css

După ce ați adăugat un stil CSS, pur și simplu faceți clic pe butonul „Salvați toate setările” pentru a salva modificările.

Acum puteți edita un articol existent sau puteți crea unul nou. Veți observa un format în meniul derulant, în al doilea rând al editorului vizual WordPress.

Stilul-Customize-editor-WordPress

Doar selectați un text în editor, apoi alegeți stilul personalizat din meniul derulant pentru a-l aplica.

Acum puteți previzualiza articolul pentru a vedea dacă stilurile dvs. personalizate se aplică corect.

Metoda 2: Adăugați manual stiluri la editorul vizual

Această metodă necesită să adăugați manual cod în fișierele dvs. WordPress. Dacă este prima dată când faceți acest lucru, consultați tutorialul nostru despre cum să adăugați un WordPress plug-in.

Pasul 1: adăugați un stil personalizat din meniul derulant al Editorului vizual WordPress.

Mai întâi, vom adăuga un meniu derulant pe editorul vizual WordPress. Acest meniu derulant ne va permite apoi să selectăm și să aplicăm stilurile noastre personalizate.

Trebuie să adăugați următorul cod în fișierul functions.php sau pluginul.

funcția wpb_mce_buttons_2 ($ butoane) {array_unshift ($ butoane, 'styleselect'); returnează butoanele $; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');

Pasul 2: Cum să adăugați opțiuni în meniul derulant

Acum va trebui să adăugați câteva opțiuni la meniul derulant pe care tocmai l-ați creat. Apoi veți putea alege și aplica aceste opțiuni din formatele din meniul derulant.

Pentru acest tutorial, vom adăuga trei stiluri personalizate pentru a crea cuprins bloc și butoane.

Va trebui să adăugați următorul cod la fișierul „functions.php” al funcțiilor dvs..php sau la un plugin specific.

/ * * Funcția de apelare inversă pentru a filtra setările MCE * / funcția my_mce_before_init_insert_formats ($ init_array) {// Definiți array-ul style_formats $ style_formats = array (/ * * Fiecare copil matrice este un format cu propriile setări * Observați că fiecare matrice are titlu , bloc, clase și argumente wrapper * Titlul este eticheta care va fi vizibilă în meniul Formate * Blocul definește dacă este un stil span, div, selector sau inline * Classes vă permite să definiți clase CSS * Wrapper dacă trebuie sau nu să adăugați un nou element la nivel de bloc în jurul oricăror elemente selectate * / matrice ('title' => 'Bloc de conținut', 'block' => 'span', 'classes' => 'bloc de conținut', 'wrapper' => true,), array ('title' => 'Buton albastru', 'block' => 'span', 'classes' => 'buton albastru', 'wrapper' => true,), array ('title' => 'Buton roșu', 'bloc' => 'span', 'classes' => 'buton roșu', 'wrapper' => adevărat,),); // Inserați matricea, JSON ENCODED, în 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); returnează $ init_array; } // Atașați callback la 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Acum puteți adăuga o nouă postare pe WordPress și puteți face clic pe formate din meniul drop-down al editorului vizual. Veți observa că stilurile dvs. personalizate sunt acum vizibile.

Cu toate acestea, selecția lor nu va face nicio diferență asupra editorului vizual al WordPress.

Pasul 3: adăugați un stil CSS

Acum, ultimul pas este să adăugați reguli de stil CSS pentru stilurile dvs. personalizate.

Va trebui să adăugați acest CSS în fișierul style.css al temei dvs. sau al temei copil.

.content-block {border: 1px solid #eee; umplutură: 3 px; fundal: #ccc; lățime maximă: 250 px; plutitor: dreapta; text-align: centru; } .content-block: după {clear: both; } .blue-button {background-color: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; raza chenarului: 6px; chenar: 1px solid # 057fd0; afișaj: bloc în linie; cursor: punct; culoare: #ffffff; umplutură: 6px 24px; decor-text: nici unul; } .buton-roșu {fundal-culoare: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; raza chenarului: 6px; chenar: 1px solid # 942911; afișaj: bloc în linie; cursor: punct; culoare: #ffffff; umplutură: 6px 24px; decor-text: nici unul; }

prezentare generală a-butoane adăugare-de-stil-personalizează-TinyMCE-

Foaia de stil editor controlează aspectul dvs cuprins în editorul vizual. Verificați documentația pentru a vedea cum să găsiți locația acestui fișier.

Dacă tema dvs. nu are un fișier de foaie de stil, atunci puteți crea oricând unul. Doar creați un fișier CSS nou și denumiți-l " Personalizat-redactor-style.css ".

Trebuie să încărcați acest fișier în directorul rădăcină al temei dvs., apoi să adăugați acest cod în fișierul „functions.php” al temei.

funcția my_theme_add_editor_styles () {add_editor_style ('custom-editor-style.css'); } add_action ('init', 'my_theme_add_editor_styles');

Asta e tot. Tocmai v-ați adăugat stilurile personalizate în editorul vizual WordPress. Acum puteți face personalizările pe care le considerați corecte.

Simțiți-vă liber să împărtășiți acest tutorial cu prietenii de pe rețelele de socializare preferate.