Există mai multe modalități de a adăuga cod CSS personalizat pe un blog WordPress.

Astăzi vă voi explica punctele tari și punctele slabe ale celor două metode diferite pe care vi le propun, astfel încât să puteți alege cea care vi se potrivește cel mai bine.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

Cum puteți găsi articolele pe care doriți să le personalizați

Odată ce ai izolat partea din tema dvs. WordPress pe care doriți să o schimbați (de exemplu, titlul unui articol), va trebui determinați proprietățile CSS aplicat la acesta, astfel încât să puteți face modificările corespunzătoare. Din fericire, acest proces nu este complicat.

CSS utilizează selectoare pentru a determina ce elemente vor experimenta diferitele modificări specifice. De obicei, acest lucru se realizează prin specificarea unui " clasă "A unui element (sau element DOM). Cu toate acestea, CSS poate fi, de asemenea, utilizat pentru a defini aspectul unui întreg element (de exemplu, eticheta „ ") sau folosind identificatorul etichetei.

Din fericire, browserele populare ne permit să vedem diferitele selectoare și declarații care sunt aplicate elementelor paginii cu doar câteva clicuri. Pe Google Chrome, de exemplu, trebuie doar să evidențiați o anumită parte a documentului și apoi să faceți clic dreapta, ca în exemplul următor.

Făcând clic pe " Inspectați elementul În meniul derulant care apare, veți vedea codul HTML al paginii într-o fereastră nouă, cu elementul inspectat evidențiat în fereastra din dreapta (sau mai jos). Puteți vedea un exemplu de mai jos.

Textele acestor elemente (sau atribute) Evidențiat în roșu vă arată diferitele stiluri specifice aplicabile articolului pe care l-ați evidențiat prin inspectarea codului.

Citiți și: Cum se adaugă un meniu vertical cu CSS în Editorul Visual

De exemplu, elementul „ marimea fontului Vă spune că fontul afișat în elementul evidențiat este dimensionat în pixeli 13. Descriptorii sunt înconjurați de bretele și precedați de selectori. Numele fișierului de foaie de stil corespunzător este afișat doar în dreapta selectoarelor.

Odată ce aveți aceste informații în minte, schimbarea stilului devine ușoară. De exemplu, dacă doriți să schimbați fontul de la 13px la 14px, pur și simplu căutați fișierul dvs. de foi de stil, selectorul care corespunde cu elementul evidențiat. În general, este sub această formă: (« # plugin-infos .block-content"). Apoi puteți modifica diferitele valori ale atributelor.

Puteți face același lucru pe Firefox, doar evidențiați o anumită parte a paginii, faceți clic dreapta pe element, apoi selectați „ Inspectați elementul În meniul care apare.

Cum funcționează WordPress și CSS împreună

Este un fapt că Teme WordPress sunt create diferit. Așa că rețineți că dvs WordPress temă s-ar putea să nu respecte 100% ceea ce ați citit în secțiunile următoare.

Acestea fiind spuse, este mai mult decât probabil ca CSS-ul folosit pe blogul dvs. WordPress să fie localizat într-un fișier numit „ style.css “. Acesta este numele comun pentru o foaie de stil pentru orice tip de site web, nu doar WordPress.

Vezi și: Cum de a schimba dimensiunea imaginilor Gravatar pe WordPress

Acum este timpul să parcurgeți diferitele procese de editare.

Metoda # 1: editarea fișierului de stil al temei dvs. WordPress

Există două modalități de a accesa fișierul style.css al temei.

Primul este să-l faci din tabloul de bord WordPress. În meniul din partea stângă, selectați meniul " apariție „Și apoi” editor ".

Odată ce vă aflați pe pagina editorului, veți vedea o listă de fișiere pe o bară verticală din partea dreaptă a paginii. Derulați prin lista de fișiere. Veți vedea un fișier numit „ Stil de stil Style.css În partea de jos a paginii.

Dacă faceți clic pe numele acestui fișier, acesta va fi încărcat și afișat în editorul din mijloc. Puteți utiliza acest ecran pentru a edita fișierul.

Cealaltă modalitate de a găsi foaia de stil este să răsfoiți sistemul de operare al furnizorului dvs. de găzduire și să găsiți fișierul în WordPress temă (folosind un client FTP). Locația exactă va varia în funcție de furnizorul dvs. de găzduire. În exemplul de mai jos, numele site-ului web (în cazul nostru thecare) este un dosar în folderul public_html.

Deoarece WordPress este instalat, puteți vedea folderul wp-content în „thecare”. Subfolderul wp-content este un alt folder numit „ wp-teme", care este locul în care toate Teme WordPress sunt instalate.

De pe acest site web folosește o temă numită „ Stiri lunare via e-mail », Fișierul de stil« style.css Este localizat în folderul " Newsletter-mamă ".

Metoda # 2: utilizarea unui plugin pentru a modifica CSS

Poate că cel mai convenabil mod de a edita CSS-ul blogului dvs. WordPress este utilizarea unui plugin.

Unul dintre principalele avantaje ale utilizării unui plugin este similar cu cel al temelor pentru copii. da actualizați tema WordPress, modificările dvs. nu vor fi suprascrise, deoarece vor fi stocate separat și nu printre fișierele tematice. Celălalt avantaj, desigur, este că nu trebuie să creați o temă pentru copii.

Iată câteva plugin-uri premium pe care le puteți folosi și pentru a modifica codul CSS al dvs WordPress temă :

1. Creion galben: editor de stil CSS vizual

Yellow Pencil este un editor de stil vizual pe care îl puteți utiliza cu orice temă pentru a vă personaliza site-ul în câteva minute (fonturi, culori, animații și multe altele ...).

Ce WordPress plug-in premium va crea stiluri CSS prin fundal în timp ce te joci cu culorile de parcă ar fi un joc. A fost conceput atât pentru începători, cât și pentru utilizatori cu experiență.

Descoperiți și noi Pluginele 5 WordPress pentru a afișa notificări

Nu sunt necesare cunoștințe de codare. Însă WordPress plug-in are un editor CSS bun pentru cei cărora le place să codeze. Puteți codifica live cu acest editor și vă puteți personaliza CSS.

Descarca | Demo | web hosting

2. Custom JS și CSS pentru Gutenberg

Le WordPress plug-in JS și CSS personalizat premium pentru Gutenberg vă va permite să adăugați un număr nelimitat de stiluri personalizate editorului WYSIWYG pentru postările și paginile dvs. WordPress. Este pe deplin compatibil cu versiunea Gutenberg a WordPress.

Puteți crea pur și simplu un stil nou cu un editor CSS ușor de utilizat. Acest plugin WordPress extinde caracteristicile câmpuri personalizate a site-ului dvs. web și vă oferă posibilitatea de a modifica câmpurile personalizate cu un modul de personalizare dinamic și puternic. și funcționalitatea previzualizare în timp real din acest plugin WordPress îl face foarte confortabil și ușor de utilizat.

Descarca | Demo | web hosting

3. CSS SiteOrigin

Este de departe pluginul WordPress care oferă cele mai multe opțiuni din această listă. Cel mai uimitor lucru despre acesta din urmă este că este gratuit. Acest plugin WordPress este singurul care nu poate fi găsit în personalizator.

După instalarea și activarea pluginului, trebuie să navigați la următoarea locație „ Aspect> CSS personalizat Pentru a accesa ediția CSS a pluginului. Pe această pagină, puteți vedea un editor de text care nu oferă previzualizare în timp real. 

Citiți și articolul nostru pe 10 pluginurile WordPress pentru a crește vânzările site-ului dvs.

Pentru a accesa acesta din urmă, trebuie să faceți clic pe unul dintre cele două butoane care apar în stânga, chiar deasupra editorului. Butonul cu pictograma ochi va afișa un editor CSS vizual pe care pasionații îl vor aprecia. Pictograma cu săgețile de extensie va afișa un editor de text care va implica o stăpânire a codurilor CSS.

Descarca | Demo | web hosting

4. CSS personalizat simplu

CSS personalizat simplu este unul dintre cele mai populare plugin-uri.

Descoperiți și noi Cum să vă faceți blogul rapid: gestionarea fișierelor CSS și JS.

A fost instalat de peste 100 de ori și a primit un rating de cinci stele.

Descarca | Demo | web hosting

5. WP Adăugați CSS personalizat

Adăugați WP CSS personalizate este un plugin care vă permite să schimba aspectul unui blog WordPress articole întregi sau doar individuale. Aceasta este o opțiune excelentă dacă căutați flexibilitate în personalizarea articolelor.

Pluginul a fost descărcat de peste 10.000 de ori și se bucură în prezent de 4,3 stele.

Descarca | Demo | web hosting

6. Tema Junkie personalizat CSS

Dacă sunteți în căutarea unei soluții care să ofere o previzualizare live a modificărilor dvs., vă recomandăm să utilizați Tema Junkie CSS personalizată. 

Această soluție adaugă un manager CSS personalizat pe tabloul de bord, unde puteți adăuga propriile dvs. stiluri. De asemenea, oferă o alternativă la folosind o temă pentru copii.

Descarca | Demo | web hosting

Alte resurse recomandate

De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.

• 10 WordPress distribuirea pluginurilor pe rețelele sociale
• Cum se afișează câmpurile personalizate în afara bucla pe WordPress
• 5 pluginurile WordPress pentru a genera bani prin bloguri cu anunțuri
• Cum de a proteja raclete de conținut blog

Concluzie

Aici! Asta este pentru acest tutorial, sper că veți reuși să adăugați cod CSS personalizat pe blogul dvs. WordPress în 2 metode, dacă aveți comentarii sau sugestii, nu ezitați să ne spuneți în secțiunea rezervată pentru acestea.

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dacă v-a plăcut acest articol, nnu ezita să distribuie pe rețelele de socializare preferate. 

...