Cum să vă personalizați tema WordPress (5 moduri pas cu pas)

Dacă ați instalat o temă WordPress, dar nu este chiar potrivită pentru dvs., este posibil să vă simțiți frustrat. Există o mulțime de opțiuni disponibile pentru personalizarea temelor WordPress.

Provocarea constă în găsirea modului corect de a face acest lucru.

În această postare, vă voi îndruma prin opțiuni pentru personalizarea temei dvs. WordPress, vă ajută să decideți care este dreptul pentru dvs. și vă arată cum să o faceți în siguranță și eficient.

Preferați să vizionați versiunea noastră video? Faceți clic pe redare de mai jos:

Opțiuni pentru personalizarea unei teme

Înainte de a ne arunca cu capul și a începe să facem modificări temei dvs., este bine să înțelegem care sunt opțiunile, deoarece se potrivesc diferitelor situații.

Iată o prezentare generală a opțiunilor disponibile:

• Dacă doriți să adăugați funcționalitate temei dvs., instalați un plugin.
• Utilizați Personalizator în ecranele de administrare WordPress pentru a personaliza fonturile, culorile și poate și aspectul, în funcție de tema dvs.
• Dacă lucrați cu o temă pentru generatorul de pagini, utilizați caracteristicile sale pentru a personaliza designul site-ului dvs.
• Dacă ați instalat o temă cadru, utilizați una dintre temele secundare disponibile pentru a vă personaliza site-ul, împreună cu orice opțiuni de personalizare viabile, dețineți ecranele de administrare.
• Dacă tema dvs. este specific site-ului dvs. și vă simțiți confortabil, editați codul temei direct.
• Dacă doriți să editați codul unei teme terță parte, creați o temă secundară.

Dacă doriți să editați codul , aveți la dispoziție o serie de opțiuni, de la utilizarea editorului de blocuri la Customizer, până la editarea fișierelor. Le vom analiza pe toate în această postare, dar să începem cu cea mai simplă opțiune: instalarea unui plugin.

Chiar ai nevoie să îți personalizezi tema?

Uneori nu ai Nu trebuie să vă personalizați deloc tema: în schimb, trebuie să instalați un plugin.

Temele dictează designul site-ului dvs.: felul în care arată și modul în care afișează conținutul. Pluginurile adaugă funcționalitate suplimentară.

Dacă modificările pe care doriți să le efectuați se concentrează mai degrabă pe funcționalitate decât pe design, vă recomandăm să instalați singur un plugin. Acesta ar putea fi un plugin pe care trebuie să-l scrieți, unul pe care îl descărcați din directorul pluginului sau unul pe care îl cumpărați.

Dacă doriți să editați fișierul functions.php din tema dvs., întrebați-vă:

Aș dori să păstrez această funcționalitate dacă voi schimba temele în viitor?

Dacă răspunsul este da, codul respectiv ar trebui să apară într-un plugin, nu în tema dvs.

Exemple bune de ceea ce ați folosi un plugin în loc de o temă, inclusiv adăugarea de widgeturi, înregistrarea tipurilor de postare personalizate și taxonomii , crearea câmpurilor personalizate și adăugarea de funcții suplimentare, cum ar fi un magazin sau îmbunătățiri SEO.

Personalizarea temei dvs. WordPress prin intermediul ecranelor de administrare WordPress

Dacă modificările pe care doriți să le faceți sunt axate pe design și relativ simplu, este posibil să le puteți realiza prin intermediul ecranelor de administrare. Personalizatorul vă oferă o varietate de opțiuni pentru modificarea temei: ceea ce vă este disponibil va depinde de tema dvs. Și este posibil să vedeți ceva numit Editor în meniul Aspect. Evitați acest lucru, din motivele pe care le voi descrie în scurt timp.

Personalizarea temei dvs. prin intermediul Customizer

Cel mai simplu mod de a vă personaliza tema WordPress este utilizarea WordPress Customizer.

Accesați acest lucru în unul din cele două moduri:

• Când vizualizați site-ul dvs. (când sunteți conectat), faceți clic pe linkul Personalizare din bara de administrare din partea de sus a ecranului.
• În ecranele de administrare, faceți clic pe Aspect > Personalizați.

Acest lucru vă duce la Customizer.

În captura de ecran de mai sus, am a instalat o temă gratuită numită ColorMag care are o mulțime de opțiuni de personalizare. S-au adăugat secțiuni la Customizer pentru caracteristicile de design, inclusiv o imagine a antetului, rețelele de socializare, culorile categoriilor și o filă Opțiuni de proiectare care vă duce la mai multe file în care puteți face modificări în aspectul și designul site-ului dvs.

Diferite teme au opțiuni de personalizare diferite, dar temele mai noi par să adauge tot mai multe din ele tot timpul. Dacă găsiți o temă care vă place, dar care nu este chiar potrivită pentru dvs., s-ar putea să constatați că personalizarea acesteia vă oferă exact designul și aspectul de care aveți nevoie.

Editorul de teme (și De ce să nu îl utilizați) it)

În ecranele de administrare, este posibil să observați o opțiune numită Editor de temă, pe care o accesați prin Aspect > Editor de temă.

Acest lucru vă oferă acces la fișierele din tema dvs. , ceea ce înseamnă că le puteți edita direct.

Nu.

Chiar dacă vă simțiți bine să scrieți CSS sau PHP, editarea fișierelor din tema dvs. așa este o idee foarte proastă, din două motive:

• Dacă ați ați cumpărat sau descărcat o temă terță parte, orice modificări pe care le faceți se vor pierde data viitoare când actualizați tema (și ar trebui să vă mențineți tema actualizată din motive de securitate).
• Mai important, dacă faceți o schimbare care vă rupe site-ul, nu va fi urmărită și versiunea anterioară a fișierului nu va fi modificată. Ați putea sparge irevocabil site-ul.

Dacă doriți să editați codul din tema dvs., ar trebui să faceți acest lucru folosind un editor de cod (consultați cei mai buni editori HTML gratuiți) și nu ar trebui Nu editați fișierele de pe site-ul dvs. live până nu le-ați testat pe un site de intermediere. Dacă trebuie să editați o temă terță parte, ar trebui să o faceți printr-o temă pentru copii. Mai multe despre aceste aspecte mai târziu în această postare.

WordPress știe cât de nesigur este să folosiți editorul de teme: vă oferă chiar și un avertisment atunci când încercați să îl accesați.

Deci, luați sfatul WordPress: nu utilizați editorul de teme!

Utilizarea constructorilor de pagini și a cadrelor pentru a vă personaliza tema WordPress

O mare parte din temele WordPress au opțiuni de personalizare, ceea ce înseamnă că puteți face modificări în design și aspect prin Customizer.

Dar unele teme duc acest lucru mai departe și sunt concepute pentru a fi extinse și personalizate semnificativ. Aceste teme se numesc cadre tematice.

O altă opțiune este să utilizați un plugin care vă permite să proiectați site-ul dvs. utilizând o interfață ușor de utilizat: acestea sunt numite constructori de pagini.

Utilizarea unei pagini Builder pentru a vă personaliza tema

Plugin-urile Page Builder sunt concepute pentru a vă facilita setarea designului site-ului dvs., utilizând o interfață care vă permite să vedeți ce obțineți.

Instalați un plugin pentru generatorul de pagini cu o temă compatibilă, apoi folosiți opțiunile pe care vi le oferă pentru a proiecta site-ul exact așa cum doriți.

Unul dintre cei mai cunoscuți constructori de pagini este Elementor, dar puteți afla câteva alternative în rezumatul nostru de generatori de pagini.

Generatorii de pagini vă permit să vă editați postările și paginile cu o interfață drag-and-drop, ceea ce înseamnă că puteți vedea cum va arăta conținutul dvs. și poate face ca fiecare pagină să fie unică.

Mai jos, folosesc generatorul de pagini Elementor cu tema Hello Elementor, care este compatibilă cu aceasta.

Constructorii de pagini vă oferă multă flexibilitate în ceea ce privește aspectul și designul paginilor dvs. Dacă sunteți obișnuiți cu un constructor de site-uri web precum Wix, acestea vă pot ajuta să facilitați tranziția către WordPress. Și dacă preferați o interfață WYSIWYG pentru conținutul dvs. WordPress, acestea vă pot ajuta să vă proiectați rapid paginile.

Utilizarea unui cadru tematic pentru a vă personaliza tema

O alternativă la constructorii de pagini este tema cadre. Acestea sunt suite de teme concepute pentru a lucra împreună. Există o temă părinte care este cadrul și o gamă de teme copil pe care le puteți utiliza pentru a personaliza tema principală și a face să arate așa cum doriți.

Un exemplu de cadre tematice este Divi, care are opțiuni de personalizare care vă permit să modificați și mai mult designul temei copilului dvs., inclusiv o interfață de glisare și fixare similară cu cea a constructorilor de pagini.

Editarea codului temei dvs. WordPress

Dacă vă convine să editați CSS și / sau PHP, atunci puteți editați codul din temă pentru a vă personaliza tema.

Acest lucru vă oferă cel mai mare grad de control.

Dacă vă editați propria temă, care este specifică site-ului dvs. și a fost dezvoltat special pentru acesta, apoi puteți face modificări ale temei direct. Dar dacă lucrați cu o temă terță parte și doriți să o editați, ar trebui să creați o temă secundară pentru a evita pierderea modificărilor la următoarea actualizare a temei.

Editarea fișierelor temei

Primul pas pentru editarea temei dvs. WordPress este să înțelegeți ce fișiere tematice controlează ce și pe care va trebui să le editați.

Foaia de stil

Fiecare temă WordPress are o foaie de stil, numită style.css. Acesta conține tot codul pentru stilizarea site-ului dvs.: aspect, fonturi, culori și multe altele.

Dacă doriți să schimbați culorile din tema dvs., de exemplu, veți face modificări la foaia de stil. Dacă doriți să adăugați un font nou, veți folosi foaia de stil pentru ao aplica la diferite elemente, cum ar fi textul corpului și titlurile.

Acordați atenție când editați foaia de stil: specificitatea înseamnă că codul unui element nu vine întotdeauna de unde cred că este.Elementele vor moșteni stilul de la alte elemente care se află deasupra lor în ierarhia paginii, cu excepția cazului în care adăugați stilul specific elementului inferior.

Pentru a descoperi ce CSS afectează elementele de pe pagină, puteți utilizați inspectorul din browser pentru a vizualiza CSS (Chrome DevTools în acest exemplu):

Puteți utiliza apoi acest lucru pentru a scrie CSS noi care vizează elemente individuale sau o serie de elemente sau clase de pe pagină.

Dacă toate aceste discuții despre elemente, clase și specificitate sunt noi pentru dvs., vă recomandăm să evitați editarea directă a CSS-ului temei dvs. Cel puțin până când nu ați aflat mai multe despre CSS și cum funcționează.

Fișierul cu funcții

Un alt fișier pe care aproape fiecare temă îl va avea este fișierul cu funcții (functions.php) . Acesta este fișierul care face ca o grămadă de lucruri să funcționeze în tema dvs. În interiorul acestuia, puteți găsi cod pentru a înregistra caracteristici tematice, cum ar fi imagini prezentate, widgeturi și multe altele.

Dacă sunteți tentați să adăugați cod funcțional temei dvs., acesta este locul în care îl veți adăuga. Dar atenție: în majoritatea cazurilor, ar trebui să scrieți un plugin. Întrebați-vă:

Aș dori să păstrez această funcționalitate dacă voi schimba temele în viitor?

Dacă răspunsul este da, scrieți un plugin în loc să adăugați cod în fișierul funcțiilor. Pluginurile nu trebuie să fie mari: nu există nimic care să vă împiedice să creați unul pentru câteva linii de cod.

Fișierul funcțiilor este scris în PHP, deci va trebui să vă familiarizați cu acea. Nu copiați orbește codul pe care îl găsiți printr-o căutare Google: faceți-vă timp pentru a afla ce face acest cod și pentru a-l înțelege. În acest fel, este mai puțin probabil să adăugați cod care nu este atât de bun pe cât ar trebui să fie.

Fișierele șabloanelor temei

Majoritatea fișierelor dintr-o temă sunt fișiere șablon tematic. . Acestea sunt fișiere care determină ce conținut produce WordPress pe o anumită pagină și sunt alese în funcție de ierarhia șablonului.

Dacă doriți să modificați modul în care conținutul este afișat pe un anumit tip de postare, pagină sau arhivă , va trebui să editați unul dintre aceste fișiere sau să creați unul nou.

De exemplu, spuneți că tema dvs. are un fișier archive.php care este utilizat pentru a afișa pagini de arhivă pentru categorii și etichete. Doriți să faceți modificări la modul în care sunt afișate etichetele. Deci, creați un fișier numit „tag.php”, care se va baza pe archive.php cu modificările dvs.

Din nou, aveți grijă să editați fișierele: acestea ar putea să vă spargă site-ul. Încercați întotdeauna pe un local instalarea utilizând mai întâi un instrument precum DevKinsta și / sau site-ul intermediar.

Indiferent de tipurile de fișiere pe care trebuie să le editați, ar trebui să le faceți corect. Citiți secțiunea de mai jos despre cele mai bune practici pentru a afla cum să editați cod într-un mod care nu vă va sparge site-ul și nu vă va provoca dureri de cap de securitate.

Personalizarea unei teme terță parte cu o temă pentru copii

Dacă tema sunteți rularea pe site-ul dvs. este de la o terță parte și doriți să editați codul, va trebui să creați o temă secundară.

Acest lucru se datorează faptului că, dacă editați tema direct și apoi o actualizați ( pe care ar trebui), veți pierde toate modificările pe care le-ați făcut.

Crearea unei teme copil constă din patru pași:

1. Creați un folder nou în wp-content / teme.
2. În acel folder, creați o foaie de stil. În foaia de stil respectivă, tel l WordPress că aceasta este o temă secundară a temei dvs. existente.
3. Adăugați copii ale fișierelor pe care doriți să le editați la tema copil și editați-le acolo.
4. Activați tema copil site-ul dvs.

WordPress va folosi întotdeauna un fișier din tema copil pentru a afișa conținut, cu excepția cazului în care există un fișier mai mare în ierarhie în tema părinte. Dacă există două versiuni ale aceluiași fișier, acesta îl va folosi pe cel din tema copil. Aceasta înseamnă că noul dvs. fișier din tema copil îl va suprascrie pe cel din tema părinte.

Cele mai bune practici pentru personalizarea temelor WordPress

Deci intenționați să vă personalizați tema. Înainte de a merge mai departe și de a face modificările, urmați aceste sfaturi pentru a vă asigura că o faceți în siguranță și că nu vă veți rupe site-ul, nu îl veți face vulnerabil la atacuri și nu veți pierde codul.

Dacă este posibil , Personalizați fără a edita codul

Dacă vă puteți face personalizările prin Customizer sau în altă parte în ecranele de administrare, acest lucru este mai sigur decât editarea codului.

Editați codul numai dacă familiarizați cu CSS (pentru foaia de stil) și PHP (pentru alte fișiere tematice) și știți cum să o faceți în siguranță.

Utilizați un site de dezvoltare locală pentru a vă face modificările

Dacă editați codul din tema dvs. sau creați o temă copil pentru a face modificări, ar trebui să efectuați lucrările de dezvoltare pe un instalarea locală a WordPress cu tema instalată și conținutul copiat de pe site-ul dvs. live.

În acest fel, aveți o oglindă a site-ului dvs. live pentru a testa modificările. Lucrul pe un site local nu va avea niciun efect asupra site-ului dvs. live și poate fi mai rapid.

Chiar dacă utilizați Customizer, poate fi util să utilizați o versiune locală a site-ului dvs. pentru testare pe măsură ce vă pot publica modificările și le puteți testa fără a afecta site-ul live.

Odată ce ați testat modificările aduse temei, o puteți încărca pe site-ul dvs. live sau, chiar mai bine, o puteți testa pe un site-ul intermediar și apoi împingeți-l să fie activ.

Utilizați controlul versiunilor

Când efectuați modificări temei dvs., ar trebui să utilizați controlul versiunilor pentru a urmări modificările dvs.

În cel mai simplu caz, aceasta înseamnă schimbarea numărului versiunii temei și păstrarea copiilor ambelor versiuni. Dar dacă gong-ul dvs. face controlul versiunii în mod corespunzător, trebuie să utilizați un serviciu precum GitHub pentru a urmări modificările dvs.

În acest fel, dacă o modificare cauzează probleme, o puteți reveni cu ușurință fără a fi nevoie să faceți manual editări.

Controlul versiunii este și mai util dacă lucrați ca parte a unei echipe, deoarece veți putea vedea ce fac ceilalți membri. Asigurați-vă că citiți ghidul nostru git vs Github.

Utilizați un site de intermediere pentru a vă testa modificările

Dacă aveți acces la un site de intermediere (cum ar fi instalarea gratuită a lui Kinsta care vine cu planuri), testarea pe aceasta înainte de activarea noii versiuni a temei dvs. (sau a noii teme copil) pe site-ul dvs. live este cel mai sigur mod de a continua.

Acest lucru se datorează faptului că orice site local va avea unele diferențe față de site-ul dvs. live: este pe un alt server (unul creat pe computerul dvs. local), este posibil să ruleze o versiune diferită de PHP sau oricare dintre celelalte instrumente care rulează site-ul dvs.

Faceți o copie a site-ului dvs. live pe serverul dvs. de intermediere și apoi încărcați și activați noul dvs. temă. Testați-vă cu atenție site-ul pentru a vă asigura că totul funcționează, iar apoi puteți să introduceți modificările pe site-ul dvs. live.

Asigurați-vă că tema este receptivă

Orice modificare pe care trebuie să o faceți temei dvs. funcționează atât pe mobil, cât și pe desktop.

Având din ce în ce mai mulți oameni care accesează internetul prin intermediul telefonului mobil și indexul Mobile-first de la Google, probabil că acum este mai important ca tema dvs. să funcționeze pe mobil decât ea face pe desktop. Deci, orice modificare pe care o aduceți temei dvs. trebuie să fie compatibilă cu dispozitivele mobile sau, de preferință, mobilă mai întâi, acolo unde este relevant.

Acest lucru se va aplica în principal oricăror modificări pe care le aduceți stilului sau aspectului: verificați dacă noul aspect funcționează pe mobil și că ați adăugat interogări media, astfel încât aspectul să se adapteze la diferite dimensiuni de ecran.

Dacă tema dvs. nu răspunde, va avea un impact negativ pe clasamentul și ratele de conversie ale motorului dvs. de căutare.

Dacă nu aveți acces la o mulțime de dispozitive mobile diferite pe care să le testați, puteți utiliza un instrument precum BrowserStack pentru a vedea cum arată site-ul dvs. pe diferite dispozitive. De asemenea, puteți utiliza instrumentele pentru dezvoltatori din browserul dvs. și vizualizările responsive din Customizer.

Asigurați-vă că personalizările dvs. nu au impact asupra accesibilității

Orice modificare a temei dvs. trebuie să fie accesibilă și pentru utilizatorii cu dizabilități sau cu deficiențe senzoriale .

Nu este vorba doar de a vă asigura că site-ul dvs. funcționează pe cititoarele de ecran: alte considerații, cum ar fi schemele de culori și dimensiunile fontului, sunt importante pentru un număr mare de persoane.

Dacă modificările pe care îl faceți temei dvs. este să faceți culorile mai strălucitoare sau textul mai mic, gândiți-vă din nou: acest lucru ar putea face dificilă citirea sau interacțiunea cu site-ul dvs.

Înainte de a face modificări live, utilizați un verificator de accesibilitate pentru a testa site-ul și asigurați-vă că nu exclude persoanele.

Rămâneți la standardele de codare WordPress

Dacă editați codul din tema dvs. sau creați un chi Tema, trebuie să vă asigurați că codul dvs. este în conformitate cu standardele de codare WordPress.

Aceste standarde există pentru a asigura coerența și calitatea codului și pentru a evita codul care este o mizerie. Există standarde pentru PHP, CSS și JavaScript, deci luați ceva timp pentru a verifica cele relevante pentru dvs. și asigurați-vă că le respectați.

Dacă tema dvs. WordPress existentă este bine codificată și scrieți orice nou cod într-un mod care este în concordanță cu acesta, sunteți pe cale să vă asigurați că codul dvs. este conform. Asigurați-vă că adăugați comentarii la toate modificările pe care le aduceți temei, astfel încât dvs. sau alții să știți ce ați făcut atunci când reveniți să lucrați la cod în viitor.S-ar putea să credeți că nu veți uita, dar după câteva luni, este surprinzător de ușor să uitați de ce ați editat o linie de cod.

Trebuie să vă personalizați tema #WordPress pentru a o face unică? Există o mulțime de opțiuni! Alege-l pe cel potrivit pentru tine în ghidul nostru detaliat! 👚👔Faceți clic pe Tweet

Rezumat

Personalizarea temei WordPress nu este atât de dificilă. Uneori este un caz simplu de a utiliza Customizer pentru a face modificări la fonturi sau culori (asigurați-vă că citiți ghidul nostru aprofundat despre fonturile WordPress). Alteori, trebuie să creați o nouă temă copil pentru a adăuga un nou fișier șablon la o temă.

Opțiunile pe care le aveți pentru personalizarea temei includ utilizarea unui plugin sau a Customizerului, editarea directă a codului temei WordPress. , sau crearea unei teme copil.

Identificați opțiunea potrivită pentru dvs. și configurați-vă personalizările în siguranță, totul fără a vă sparge site-ul.