Cum să personalizați CSS-ul site-ului dvs. WordPress? Aflați în acest articol.

Indiferent de tema WordPress pe care o alegeți pentru site-ul dvs. web, vor exista și alte site-uri web care o vor folosi. Și chiar și în ciuda numeroaselor opțiuni de personalizare oferite de mulți Teme WordPress în zilele noastre vă puteți face site-ul și mai unic.

Pentru a vraiment Pentru a atinge aspectul vizual al temei tale WordPress, trebuie să treci dincolo de personalizarea standard oferită de opțiunile sau setările unei teme WordPress. Personalizarea CSS a blogului dvs. WordPress vă va permite să modificațiapariția site-ului dvs. web pentru a o face cu adevărat unică.

Acest tutorial va analiza varietatea de metode disponibile pentru a vă personaliza site-ul web cu CSS, creând și personalizând teme pentru copii, folosind plugin-uri încorporate WordPress Customizer și WordPress plugin-uri de CSS.

Dar înainte de a începe, acordați-vă timp să aruncați o privire Cum se instalează o temă WordPressCât de multe plugin-uri ar trebui să instalez pe WordPress.

Atunci află împreună lista noastră.

CSS: Noțiuni de bază și modul în care le folosește WordPress

În primul rând: CSS înseamnă Cascading Style Sheets, care nu este mai clar decât acronimul. Deci, să o descompunem.

O foaie de stil este un document care descrie stiluri (cum ar fi font, culori etc..) să fie utilizat pentru prezentarea unui alt document. În cazul nostru, avem de-a face cu un stil al paginilor web.

ParteacascadăNumele face parte din ceea ce îl face cu adevărat puternic. Paginile web pot fi proiectate cu mai multe foi de stil, cum ar fi o cascadă în cascadă, cu foaia de jos adăugând sau înlocuind stiluri de la un nivel superior. Acest lucru este important, deoarece modul în care vă adăugați stilurile va suprascrie modificările originale.

Cum să personalizați CSS-ul site-ului dvs. WordPress

Pe cât de simplu pare, CSS poate fi folosit pentru a schimba aproape orice pe o pagină web (inclusiv aspect, culori, fonturi și chiar animații).

Aflați cum să gestionați notificările dvs. descoperind Cum de a gestiona notificările prin e-mail de pe WordPress

cele mai multe Teme WordPress utilizați un cod CSS disponibil într-un fișier numit style.css. Dacă deschideți acest fișier, veți vedea o listă completă de reguli de stil pentru tema dvs. WordPress. Orice ai face, nu modificați acest fișier! Actualizările vor suprascrie modificările.

Există mai multe moduri de a adăuga un cod CSS personalizat la tema dvs. WordPress, astfel încât modificările dvs. să supraviețuiască unei actualizări a temei WordPress.

Cum să vă personalizați site-ul WordPress cu CSS

Acum că înțelegeți mai bine ce este CSS și cum Teme WordPress folosiți-le, vom arunca o privire asupra opțiunilor pe care le puteți utiliza pentru a vă personaliza blogul WordPress și vom discuta avantajele și dezavantajele fiecărei metode.

cum să personalizați site-ul web CSS wordpress 1

La sfârșitul muncii noastre, veți putea determina ce metodă corespunde temei dvs. WordPress.

Opțiunea # 1: Personalizați CSS folosind o temă pentru copii

În cazul în care utilizați un tema copil pentru a vă personaliza codul CSS, actualizările la temele despre care am vorbit înainte nu vor mai fi o problemă. O actualizare a unei teme WordPress va afecta tema "mamă», Lăsând intacte modificările aduse temei copilului tău. Mulți dezvoltatori de teme WordPress înțeleg utilitatea unei teme pentru copii.

Descopera Atunci când și cum se instalează WordPress într-un subdirector

Crearea unei teme pentru copii este destul de simplă. Acesta constă în crearea unui folder pe găzduirea dvs. web care include un fișier style.css care listează tema părinte ca un șablon și importă fișierul style.css a temei părinte (îți amintești semnificația foilor de stil „în cascadă”?).

Codul WordPress are mai multe informații despre crearea temelor pentru copii.

cum să personalizați site-ul web CSS wordpress 1 1

După ce ați creat tema copilului și ați activat-o corect, puteți începe să vă personalizați tema WordPress. Cel mai rapid mod va fi să vă editați fișierul style.css, care poate fi accesat în două moduri.

Vezi acest articol pentru a descoperi Cum să comprimați fișierele CSS, HTML și Javascript

Primul este să utilizați editorul inclus în tabloul de bord WordPress, făcând clic pe Aspect> Editor. L 'editor afișează o listă de fișiere din dreapta disponibile în temă (Sunt afișate numai fișierele populare). Dosarul tău style.css va fi chiar în partea de jos a listei și făcând clic pe opțiune Foaie de stil fișierul tău style.css va percepe taxa.

Puteți adăuga modificările în această locație și puteți salva modificarea.

WordPress foaie de stil

Cealaltă modalitate de a accesa fișierul style.css (cel pe care îl recomandăm) este să răsfoiți fișierele din găzduirea dvs. web prin intermediul unui client FTP sau un manager de fișiere. Dosarul temei copil pe care l-ați creat va fi în „ wp-content> teme« . Veți putea utiliza un editor de text pentru a edita fișierul style.css.

Opțiunea nr. 2: Personalizați CSS din Customizer

Începând cu WordPress 4.7, utilizatorii pot adăuga CSS personalizat direct din zona de administrare WordPress. Este foarte ușor și veți putea vedea modificările dvs. cu previzualizarea în timp real.

cum să personalizați site-ul web CSS wordpress 2

Mai întâi, trebuie să accesați pagina Teme »Personalizează.

Acces la personalizatorul WordPress pentru a personaliza tema

Aceasta va lansa interfața de personalizare a temei WordPress.

Veți vedea previzualizarea în timp real a site-ului dvs. web în partea dreaptă, cu o grămadă de opțiuni în panoul din stânga. Faceți clic pe fila CSS suplimentare pe panoul din stânga.

Fila va glisa afară pentru a vă arăta o zonă simplă în care puteți adăuga CSS personalizat. De îndată ce adăugați o regulă CSS validă, o veți putea vedea aplicată în panoul de previzualizare în timp real al site-ului dvs. web.

introduceți cod CSS suplimentar și publicați

Puteți continua să adăugați cod CSS personalizat, până când sunteți mulțumit de aspectul pe site-ul dvs. web. Nu uitați să faceți clic pe „ Salvați și publicați În vârf când ai terminat.

Notă: Orice CSS personalizat pe care îl adăugați utilizând Customizer este disponibil numai cu acea temă specială WordPress. Dacă doriți să o utilizați cu alte teme, va trebui să copiați și să inserați în noua temă folosind aceeași metodă.

Opțiunea # 3: Personalizați CSS folosind un plugin

Avantajul utilizării unui plugin pentru personalizarea CSS este că păstrați pluginul chiar dacă faceți o modificare a temei WordPress. Acest lucru are compromisurile sale, deoarece stilurile nu se pot afișa bine pe toate temele WordPress.

Iată câteva pluginuri:

1. CSS personalizat în Jetpack (gratuit)

Plugin-ul WordPress Jetpack  este instalat pe peste un milion de site-uri web WordPress și, probabil, și pe dvs. Acesta oferă funcții disponibile pe WordPress.com pentru site-urile web găzduite de sine și oferă și un modul de personalizare CSS.

jetpack-forme-plugin

Odată ce modulul este activat în tabloul de bord Jetpack, va fi disponibil un editor CSS personalizat, care vă permite să vă personalizați tema WordPress fără a crea o temă copil. Accesați editorul urmând această cale " Aspect> Editați CSS« .

2. CSS personalizat simplu (gratuit)

Dacă în schimb doriți o opțiune autonomă, CSS personalizat simplu este o alegere bună. Acest plugin gratuit, utilizat pe mai mult de site-urile 200.000 cu un rating de stele 4,9, vă va ajuta cu siguranță să vă personalizați blogul CSS WordPress.

un singur custom-css

Acest plugin nu necesită nicio configurație, trebuie doar să instalați și să activați pluginul. Pentru a vă modifica codul CSS, accesați „ Aspect> CSS personalizat«  în tabloul de bord WordPress. Aplicați modificările CSS în caseta de text și, odată ce ați terminat, salvați setările.

3. CSS Hero (de la 14 USD pe an)

Opțiunea finală pentru pluginul WordPress pe care o analizăm astăzi este un plugin premium WordPress numit CSS Hero. De la 14 $ pe an pentru un singur site web, acest plugin vă permite să vă personalizați tema WordPress folosind o interfață intuitivă.

CSS Hero WordPress Plugin

Proiectat pentru a lucra cel mai bine zeci de teme WordPress compatibile , CSS Hero vă oferă un control total asupra tuturor elementelor din tema dvs. WordPress. Pentru teme care nu sunt pe lista lor, puteți utiliza Mod rachetă pentru a activa personalizarea CSS Hero.

CSS Hero elimină necesitatea de a înțelege sintaxa CSS prin simplificarea interacțiunii cu codul printr-o interfață, iar acest lucru este valabil pentru animații și tranziții. De asemenea, puteți previzualiza modificările în timp real și puteți reveni la o versiune anterioară.

Descoperi Cum să mutați comentariile de la un articol la altul pe WordPress

Dacă doriți să schimbați complet CSS-ul blogului dvs. WordPress, dar nu doriți să învățați CSS, CSS Hero este o opțiune excelentă pentru personalizarea site-ului dvs. web, mai ales dacă utilizați una dintre temele lor WordPress.

Deși știți că conținutul este important, totuși, veți dori ca site-ul dvs. web să iasă din mulțime, chiar dacă utilizați o temă populară WordPress. Cu CSS, puteți personaliza designul site-ului dvs. web, astfel încât acesta să fie complet unic.

Mergeți mai departe descoperind Cum pentru a permite utilizatorilor să editeze anumite pagini

Prin urmare, există mai multe modalități de a personaliza CSS-ul temei dvs. WordPress:

  1. o temă pentru copii.
  2. personalizatorul.
  3. un plugin CSS.

Descoperiți și câteva plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. Reclamați publicitatea

WP PRO Advertising System este un plugin de gestionare a publicității WordPress, care oferă locații strategice 18 pentru a vă ajuta să afișați reclame pe site-ul dvs. web. De asemenea, are o secțiune de statistici detaliate din care veți vedea performanțele fiecărui anunț.

Adning Advertising WordPress plugin

Această caracteristică este crucială, deoarece vă va ajuta să vă îmbunătățiți campania și să vă maximizați profiturile. Acest plugin WordPress Adsense vine, de asemenea, cu o caracteristică unică numită anunțuri de fundal. Vă permite să afișați reclame ca fundal al conținutului dvs.

În plus, deoarece este compatibil cu plugin-uri, cum ar fi WPBakery et Revoluția Slider, puteți afișa anunțurile dvs. sub formă de glisante sau le puteți plasa oriunde pe site-ul dvs. web.

Descarca | Demo | web hosting

2. WP Media File Manager

WP Media File Manager este un plugin WordPress care facilitează organizarea bibliotecii media într-o formă de ierarhie, utilizând funcționalitatea Drag and Drop. Este una dintre WordPress plugin-uri cel mai puternic manager de fișiere de pe CodeCanyon. Nici măcar nu va trebui să creați foldere manual.

WP Media File Manager WordPress Media Library Foldere Categorii Încărcare plugin

Acest plugin WordPress vă permite să încărcați mii de fișiere din managerul de fișiere al computerului dvs. pe site, copiind automat ierarhia folderului sursă. Dacă doriți să aveți același fișier în foldere diferite, știți că aveți acum o bibliotecă media reală care oferă această funcționalitate.

Spuneți adio problemelor de descărcare a anumitor tipuri de fișiere, acum trebuie doar să instalați acest plugin WordPress și să îl lăsați să vă ajute să vă gestionați fișierele.

Descarca | Demo | web hosting

3. Meniul eroilor

Hero Menu este un plugin WordPress pentru mega meniu. Și, deși nu este prea eroic, are toate caracteristicile necesare pentru doar 19 USD. La fel ca Mega Main Menu, este un plugin care conține și produse prezentate pe CodeCanyon și are în prezent aproape 4500 de vânzări în credit.

Plugin de meniu erou WordPress Mega Menu

În secțiunea de caracteristici, veți realiza rapid că este destul de ușor să creați un megamenu. Procesul durează doar câțiva pași. În plus, veți observa că pluginul este compatibil cu WooCommerce, oferă un design receptiv și o interfață „drag and drop” pentru a crea meniurile.

Generatorul de meniuri îmbunătățește utilizarea pluginului și simplifică foarte mult slujba cumpărătorului. Integrarea UI este, de asemenea, o treabă excelentă, iar UI se comportă perfect cu alte pluginuri.

Descarca | Demo | web hosting

Resurse recomandate

Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.

Concluzie

Acolo! Gata pentru acest tutorial. Sperăm că acest tutorial v-a arătat cum să personalizați CSS-ul site-ului dvs. WordPress. Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate

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.

Dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii.

...