Treci la conținutul principal

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

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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 îl vor folosi. Și chiar în ciuda numeroaselor opțiuni de personalizare oferite de multe teme WordPress în aceste zile, puteți face site-ul dvs. și mai unic.

Turna vraiment atingând aspectul vizual al temei dvs. WordPress, trebuie să treceți 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ți aspectul site-ului dvs. web pentru a-l face cu adevărat unic.

Acest tutorial va analiza varietatea metodelor disponibile pentru personalizarea site-ului dvs. web cu CSS, crearea și personalizarea temelor pentru copii, folosind pluginuri personalizatoare WordPress și pluginuri CSS WordPress.

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 să revenim la motivul pentru care suntem aici

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

Majoritatea temelor WordPress folosesc codul 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 le folosesc temele WordPress, vom analiza opțiunile pe care le puteți utiliza pentru a vă personaliza blogul WordPress și vom discuta despre avantajele și dezavantajele fiecare metodă.

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

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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

Si vous voulez modifier complètement le CSS de votre blog WordPress, mais ne souhaitez pas apprendre le CSS, CSS Hero est une excellente option pour la personnalisation de votre site web, en particulier si vous utilisez un de leurs thèmes 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 utiliza alte plugin-uri WordPress pentru a da un aspect modern și a optimiza aderența blogului sau a site-ului dvs. web.

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 unul dintre cele mai puternice pluginuri de gestionare a fișierelor WordPress de pe CodeCanyon. Nici măcar nu va trebui să creați directoare 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

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Î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.

... 

Acest articol conține 1 comentariu

  1. bonjour,

    Aș dori să vă prezint pluginul Anym Live Editor care permite editarea completă a CSS sau SCSS și Javascript din orice pagină WordPress și care oferă o redare live a modificărilor făcute! În plus, pluginul este echipat cu o varietate de instrumente care vă permit să interacționați cu pagina pe care doriți să o modificați și funcționează ca orice IDE obișnuit (stil de text Sublim), dar de această dată, dedicat site-ului dvs. WordPress.

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
4 acțiuni
acțiune2
tweet
Registru2