Cum se adaugă opțiuni de stil personalizate în WordPress Post Editor

Cum se adaugă opțiuni de stil personalizate în WordPress Post Editor
⏱️ 7 min read

Editorul de mesaje din WordPress, după cum sugerează și numele său, este menit să vă permită să editați postări și conținut. În mod implicit, nu vă permite să adăugați în clase CSS personalizate. Dacă doriți să adăugați stiluri sau clase CSS personalizate, singura modalitate este să treceți la modul „Text” și să îl adăugați la codul HTML.

Deoarece WordPress este atât de personalizabil, există modalități de a vă face viața mai ușoară prin adăugarea de opțiuni de stil personalizate editorului de mesaje WordPress. Folosind aceste opțiuni personalizate, puteți aplica stilurile CSS cu doar câteva clicuri. Nu mai trebuie să treceți la modul text sau să vă amintiți toate clasele CSS care intră în postările dvs. pentru a le face să arate mai frumos.

Există câteva moduri în care puteți adăuga opțiuni de stil personalizate editorului de mesaje WordPress. Primul este să folosiți un plugin gratuit, iar al doilea este să adăugați un fragment de cod. Ambele metode funcționează foarte similar, deci urmați-o pe cea cu care vă simțiți confortabil.

Notă: înainte de a continua, presupun că cunoașteți HTML și CSS de bază și puteți înțelege lucruri precum clase CSS, elemente de nivel bloc, elemente HTML, atribute etc.

Cum Se Remediază Datele Mobile Car...
Cum Se Remediază Datele Mobile Care Nu Funcționează Pe Android

1. Utilizarea unui plugin

Cel mai simplu mod de a adăuga opțiuni de stil personalizate în editorul de mesaje WordPress este să folosiți un plugin numit Stiluri personalizate TinyMCE.

Lucrul bun al acestui plugin este că creează automat o foaie de stil de editor în care puteți adăuga stiluri CSS personalizate. Acest lucru este foarte util atunci când doriți să vedeți stilurile front-end legate de link-uri, imagini, formulare, butoane etc., aplicate în editorul de mesaje.

1. Pentru a începe, descărcați, instalați și activați Stiluri personalizate TinyMCE ca orice alt plugin WordPress. După activare, accesați pagina cu setările pluginului navigând la „Setări -> Stiluri personalizate TinyMCE”.

2. Chiar de pe bat, pluginul va afișa un mesaj de eroare prin care se solicită să alegeți unde doriți să plasați fișierul de foaie de stil al editorului. În funcție de tema dvs., puteți alege între trei opțiuni. Citiți cu atenție aceste opțiuni și alegeți-o pe cea potrivită pentru dvs. În cazul meu, am ales a doua opțiune, deoarece folosesc o temă personalizată pentru copii Genesis. Faceți clic pe butonul „Salvați toate setările” pentru a salva modificările.

wp-post-editor-loc-editor-foaie de stil

3. Derulați în jos și faceți clic pe butonul „Adăugați un stil nou”. Acum, introduceți numele stilului, selectați un tip (adică, în linie, bloc sau selector), introduceți valoarea tipului, apoi clasa CSS.

wp-post-editor-configure-style-options

4. În partea dreaptă, nu uitați să selectați dacă elementul este sau nu „Wrapper”. Dacă selectați această opțiune, stilul va crea un nou element la nivel de bloc în jurul elementului selectat la nivel de bloc din editorul de mesaje.

5. Dacă doriți, puteți chiar să adăugați direct stiluri CSS personalizate făcând clic pe „Adăugați un stil nou” care apare în categoria „Stiluri CSS”. Cu toate acestea, vă recomand să adăugați aceste stiluri în fișierul „editor-style.css” aflat în directorul temei (dacă ați selectat a doua opțiune ca mine în al doilea pas). Este ușor de gestionat.

wp-post-editor-css-style

6. După ce ați terminat, faceți clic pe butonul „Salvați toate setările” care apare la sfârșitul paginii.

7. Gata. De acum înainte veți vedea un nou meniu derulant numit „Formate” în editorul de mesaje. În acel meniu derulant puteți găsi opțiunea de stil personalizat nou adăugată împreună cu alte opțiuni preconfigurate. Pentru a utiliza stilul, trebuie doar să faceți clic pe acesta, iar codul CSS necesar va fi adăugat automat la editorul de mesaje. Veți vedea codul respectiv în modul text.

wp-post-editor-style-option-1

8. Dacă ați adăugat stiluri necesare în fișierul editor-style.css, aceste stiluri vor fi reflectate în editorul de mesaje atunci când utilizați opțiunea de stil din meniul derulant.

wp-post-editor-style-applied-1

În viitor, dacă dezactivați sau eliminați pluginul, foaia de stil a editorului nu va fi ștearsă. Cu toate acestea, nu mai puteți accesa opțiunile personalizate din editorul de mesaje.

2. Metoda manuală

Dacă nu vă place să utilizați un plugin, atunci puteți realiza același lucru adăugând un fragment de cod simplu în fișierul dvs. „functions.php”. Există două părți la aceasta: una este pentru adăugarea butonului la bara de instrumente pentru a insera codul CSS, iar a doua este pentru a face stilul CSS live în editorul de mesaje.

Adăugați butoane de stil CSS personalizate în Bara de instrumente

Adăugați următoarele la sfârșitul fișierului „functions.php”. Acest cod este de fapt furnizat de WordPress în sine.

Trebuie să personalizați codul pentru a reflecta opțiunile de stil. În codul de mai sus, fiecare matrice este o opțiune de stil separată. Introduceți titlul de stil lângă „titlu”, tip de bloc lângă „bloc”, clasă CSS lângă „clase”, iar dacă elementul este un wrapper, tastați „true” lângă „wrapper”. În caz contrar, tastați „false”.

Oricând doriți să adăugați o nouă opțiune de stil, pur și simplu copiați matricea și modificați câmpurile. În cazul meu, am completat prima matrice pentru a reflecta opțiunea „Buton albastru”.

wp-post-editor-options-code-added

După ce ați terminat personalizarea, salvați și încărcați fișierul modificat „functions.php” pe server.

Creați foaia de stil Editor

Creați un fișier cu numele „editor-style.css”. Acum, adăugați stiluri CSS relevante pe care doriți să le vedeți în editorul de mesaje. Nu uitați că clasele CSS pe care le creați în fișierul „editor-style.css” ar trebui să se potrivească cu clasele CSS din codul de opțiuni de stil de mai sus.

Acum, deschideți fișierul „functions.php” al temei și adăugați următorul cod.

Încărcați atât fișierul „editor-style.css”, cât și fișierul „functions.php” pe serverul dvs. Asta e tot ce trebuie făcut. De acum înainte puteți utiliza opțiunile de stil personalizate din editorul de mesaje WordPress.

wp-post-editor-style-option-2

Puteți vedea stilurile aplicate în timp real.

wp-post-editor-style-applied-2

Comentează mai jos, împărtășind gândurile și experiențele tale cu privire la utilizarea metodelor de mai sus pentru a adăuga opțiuni de stil personalizate în editorul de mesaje WordPress.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

You may also like...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x