Cum să creezi o temă WordPress personalizată (6 pași simpli)

Vă întrebați cum să creați o temă WordPress personalizată?

Acest lucru poate fi dificil pentru începători, deoarece de obicei necesită experiență de codare și cunoștințe profunde despre WordPress.

În acest articol, vom arăta cum să creați o temă personalizată în câțiva pași simpli, fără a fi nevoie de codificare.

Să începem!

Ce este o temă WordPress?

Pentru început, să clarificăm ce este exact tema WordPress și în ce constă.

O temă WordPress este un set de fișiere plasate într-un folder comun din directorul Teme WordPress de pe găzduirea dvs.

Acest set include șabloane de pagină scrise în limbaje HTML, PHP și JavaScript, foi de stil CSS și grafică.

Iată un exemplu de cum arată pe un server:

Împreună, aceste fișiere definesc aspectul și aspectul site-ului dvs. WordPress.

Există 2 moduri tipice de a crea o temă personalizată de la zero:

• Fă-o singur . Necesită experiență vastă în dezvoltarea web și mult timp liber.
• Angajați un dezvoltator sau o agenție web . Prețul mediu variază de la câteva sute la câteva mii de dolari.

Din motive evidente, ambele metode sunt greu acceptabile pentru începători.

Din fericire, există o a treia modalitate de a crea o temă personalizată fără a sparge banca sau a fi un guru al codurilor.

Acest lucru este posibil prin utilizarea pluginului SeedProd. Să-l aruncăm în detaliu și să aflăm de ce este atât de popular printre utilizatorii WordPress.

De ce să folosiți SeedProd pentru a crea o temă WordPress personalizată?

SeedProd este pluginul numărul 1 pentru crearea de site-uri web pentru WordPress, cu peste un milion de instalări active.

Acesta este un adevărat schimbător de joc, deoarece vă permite să creați teme WordPress personalizate de top în câteva minute, fără a fi nevoie de codare.

Ingredientul secret este editorul vizual SeedProd, la îndemână și puternic. Folosind-o, puteți glisa și plasa cu ușurință elementele de site, blocurile sau chiar secțiuni întregi pe pagina dvs.

Iată o scurtă previzualizare a modului în care funcționează:

SeedProd optimizează automat paginile și temele pentru încărcare rapidă. Vă permite să asigurați cea mai bună experiență de utilizator pentru vizitatorii dvs.

De asemenea, sunt receptivi și gata pentru dispozitive mobile în mod implicit, așa că nu trebuie să vă faceți griji cu privire la modul în care arată site-ul dvs. pe diferite dispozitive.

Pe lângă asta, SeedProd vine cu funcții puternice precum:

• Sute de șabloane de pagină gata făcute . Nu te simți inspirat să creezi o temă de la zero? Puteți utiliza unul dintre cele peste 150 de șabloane prefabricate și le puteți personaliza cu ușurință pentru a vă satisface nevoile.
• Integrare WooCommerce . Vinde produse online? SeedProd este pe deplin compatibil cu WooCommerce, astfel încât să puteți crea în curând pagini moderne de plată, grile de produse și multe altele.
• Tabloul de bord de gestionare a abonaților de e-mail . Aveți un buletin informativ pe e-mail? SeedProd vă permite să colectați e-mailuri și să urmăriți starea abonaților dvs. pe un tablou de bord la îndemână.
• Cod optimizat SEO . Vă faceți griji pentru claritatea codului? Codul temelor și paginilor pe care le creați cu SeedProd este prietenos cu SEO și îndeplinește toate cerințele motoarelor de căutare.

În plus, SeedProd are o echipă de asistență minunată și receptivă.

Chiar dacă acest plugin este foarte ușor de utilizat, dacă vii cu întrebări, ei sunt întotdeauna gata să vină în ajutor.

Dar cifrele vorbesc mai tare decât cuvintele. SeedProd are peste 4.000 de recenzii cu o evaluare medie de 4,9 din 5 stele .

Feedback-ul utilizatorilor încântați nu lasă nicio șansă de a se îndoi că acest rating este bine meritat.

Iată ce spun oamenii despre experiența lor cu SeedProd:

Acum că știți de ce utilizarea SeedProd este cea mai bună modalitate de a crea o temă personalizată pentru începători, să vedem cum puteți face asta.

Cum se creează o temă WordPress personalizată

Acest tutorial detaliat are 6 pași simpli. Urmați-le pentru a crea o temă WordPress personalizată frumoasă, fără a atinge o singură linie de cod.

Iată un cuprins pentru a vă ajuta să navigați:

• Pasul 1: Instalați și activați pluginul SeedProd
• Pasul 2: Selectați o temă WordPress preconstruită
• Pasul 3: Personalizați-vă părțile tematice WordPress
• Pasul 4: personalizați CSS global al temei dvs. (fără cod)
• Pasul 5: Conectați-vă la serviciul dvs. de marketing prin e-mail
• Pasul 6: Publicați tema WordPress personalizată

Pasul 1: Instalați și activați pluginul SeedProd

Pentru a începe, luați copia dvs. de SeedProd aici.

După ce ați terminat, veți primi un e-mail care conține detaliile dvs. de conectare și un link pentru a vă accesa contul SeedProd.

Urmați acest link, conectați-vă la contul dvs. SeedProd și accesați fila Descărcări .

Apoi, faceți clic pe butonul Descărcați SeedProd pentru a începe descărcarea fișierului ZIP al pluginului pe computer.

După ce ați terminat descărcarea, copiați cheia de licență în aceeași filă. Veți avea nevoie de el în continuare pentru a vă activa copia de SeedProd.

Următorul pas este să încărcați fișierul ZIP descărcat pe site-ul dvs. și să instalați pluginul.

Dacă aveți nevoie de ajutor, puteți urma acest tutorial despre cum să instalați un plugin WordPress.

După ce ați instalat pluginul, accesați tabloul de bord WordPress și faceți clic pe butonul SeedProd din panoul din stânga.

Apoi, inserați cheia de licență în câmpul de licență și apăsați butonul Verificare cheie .

Odată ce ați activat copia de SeedProd, sunteți gata să începeți să vă creați tema WordPress personalizată.

Pasul 2: Selectați o temă WordPress preconstruită

Pentru a începe, navigați la SeedProd » Theme Builder în tabloul de bord.

Pe această pagină, vă puteți gestiona temele personalizate și puteți crea altele noi.

De aici, ai 2 moduri.

Prima este să creați fiecare parte a temei dvs. personalizate de la zero.

Fiecare temă WordPress constă din următoarele părți:

• Antet
• Subsol
• Postare unică
• Pagina singura
• Arhiva (pagina de blog)
• Pagina principala
• Bara laterală

Aceste părți alcătuiesc tema dvs., iar SeedProd vă permite să le creați și să le personalizați individual.

Pentru a începe să creați o nouă parte a temei dvs., apăsați butonul Adăugați un șablon de temă nou .

Aici puteți alege tipul părții tematice, îi puteți da un nume și apoi puteți începe să o construiți de la zero.

Dar, dacă simțiți că este prea copleșitor pentru prima încercare, există o a doua modalitate de a vă crea tema WordPress personalizată.

SeedProd vine cu o mulțime de șabloane de teme prefabricate cu aspect profesional. Le puteți selecta și personaliza în funcție de nevoile dvs.

În acest tutorial, ne vom concentra exact pe acest mod, deoarece este mai ușor pentru începători și ne permite să vă arătăm mai multe funcții SeedProd.

Pentru a începe personalizarea unuia dintre șabloanele de teme gata făcute, apăsați butonul Teme .

Aici veți găsi o varietate de teme pentru diferite scopuri. De exemplu, există teme pentru bloguri personale, portofolii, site-uri de afaceri sau de comerț electronic și multe altele.

Pentru a alege o temă care vă place, plasați cursorul peste ea și faceți clic pe pictograma bifă. De exemplu, vom alege unul dintre șabloanele de pornire.

După ce ați selectat un șablon, SeedProd creează automat părțile care îl compun.

După cum puteți vedea, tema noastră nu include doar șabloane de părți ale paginii, cum ar fi antetul, subsolul și bara laterală.

Există, de asemenea, șabloane pentru pagini întregi, cum ar fi o singură pagină, postare, arhive și pagină de pornire.

Dacă nu aveți nevoie de un anumit șablon pe site-ul dvs., îl puteți anula publicând comutând comutatorul de lângă acesta.

Pentru a schimba numele unui șablon sau a edita condițiile când ar trebui să apară pe site-ul dvs., faceți clic pe linkul Editați condiții .

Va apărea o fereastră modală în care puteți numi un șablon așa cum doriți și îi puteți modifica tipul, prioritatea și condițiile.

Acum că știți cum să gestionați părți ale temei dvs., sunteți gata să începeți să o personalizați.

Pasul 3: Personalizați-vă părțile tematice WordPress

Mai întâi, să personalizăm antetul, deoarece este primul lucru pe care îl văd vizitatorii după ce vin pe site-ul tău.

Antet

Pentru a începe, derulați în jos pagina Creator de teme , găsiți șablonul Antet și faceți clic pe el.

Notă: antetul și subsolul sunt comune întregului site. Înseamnă că fiecare modificare pe care o faci asupra lor va fi vizibilă pe fiecare pagină a site-ului tău.

După cum puteți vedea, antetul nostru este format din două părți. Există partea stângă cu sigla site-ului și partea dreaptă cu meniul de navigare.

SeedProd are un editor vizual drag-and-drop. Puteți interacționa cu orice element de pe pagină și puteți adăuga altele noi, pur și simplu trăgându-le pe pagină.

Să încercăm să schimbăm sigla. Pentru a face acest lucru, faceți clic pe el și va apărea o bară laterală în care puteți edita setările elementului.

Fiecare tip de element din editorul SeedProd are propriul set de setări și opțiuni de personalizare.

De exemplu, logo-ul nostru are tipul Imagine . Deci are toate setările pe care le-ați aștepta în mod normal de la o imagine, cum ar fi fișierul sursă, textul alternativ, dimensiunea și multe altele.

De asemenea, puteți comuta între fila Conținut , Șabloane și Avansat din bara laterală din stânga pentru a descoperi și mai multe opțiuni de personalizare.

Acum, să presupunem că vrem să înlocuim logo-ul implicit cu al nostru.

Pentru a face acest lucru, faceți clic pe imaginea logo-ului curent și apoi puteți selecta imaginea pe care doriți să o utilizați.

Iată cum arată noul nostru logo pe site-ul nostru de testare:

Acum să schimbăm culoarea de fundal a antetului. Pentru a face acest lucru, plasați cursorul peste antet până când acesta are un contur albastru și faceți clic pe el.

După aceea, veți vedea opțiunile de personalizare a antetului în bara laterală din stânga. Are tipul de element Row .

În fila Conținut , puteți schimba culoarea de fundal a antetului, puteți să o înlocuiți cu o imagine și să alegeți lățimea antetului.

Pentru a schimba culoarea de fundal, faceți clic pe pictograma paletei de culori și selectați culoarea dorită.

Apoi, în fila Avansat , puteți adăuga o umbră sau chenar la antet, puteți modifica setările de spațiere și multe altele.

Ca atingere finală, să mărim fontul meniului de navigare. Pentru a face acest lucru, plasați cursorul peste meniu și faceți clic pe el.

Acum, în câmpul Dimensiune font din bara laterală din stânga, introduceți dimensiunea fontului dorită.

Când ați terminat de personalizat antetul, apăsați butonul Salvare din colțul din dreapta sus.

Apoi, apăsați pictograma de ieșire pentru a părăsi editorul vizual și a reveni la pagina de șabloane de teme.

În continuare, să personalizăm pagina de pornire .

Pagina principala

Pentru a face acest lucru, găsiți șablonul Pagina de pornire printre celelalte șabloane de teme și faceți clic pe el.

Șablonul nostru de pornire are o pagină de pornire cu funcții pe care le puteți găsi pe un site de afaceri tipic, cum ar fi:

• Secțiunea descriere a afacerii
• Lista clienților cu siglele lor
• Caracteristici de afaceri
• Mărturii
• Secțiunea de întrebări frecvente
• și altele…

Ca și în cazul antetului, puteți interacționa cu fiecare element de pe pagină și puteți modifica aspectul acestuia.

De exemplu, în gif-ul de mai jos puteți vedea cum schimbăm cu ușurință titlul, descrierea și textul butonului din secțiunea eroi cu doar câteva clicuri:

Acum să încercăm să adăugăm ceva nou pe pagina noastră.

Dacă nu este selectat niciun element din pagină, în bara laterală din stânga, puteți vedea fila Blocuri .

Există o mulțime de blocuri gata făcute pe care le puteți adăuga la pagina dvs. cu câteva clicuri, fără a fi nevoie de codare.

De exemplu, puteți găsi blocuri precum autorul postării, tabelul de prețuri, formularul de căutare și multe altele.

Pentru a adăuga un anumit bloc în pagina dvs., trageți și plasați-l în locul dorit.

De exemplu, să adăugăm un bloc de numărătoare inversă la secțiunea Caracteristici:

În plus, dacă accesați fila Secțiuni , veți găsi o mulțime de secțiuni prefabricate pe care le puteți adăuga și la pagina dvs., cum ar fi:

• Anteturi
• Subsolurile
• Apel la acțiune
• Caracteristici
• Mărturii
• si multe altele…

Pentru a adăuga o nouă secțiune la pagină, treceți mouse-ul peste secțiunea dorită și faceți clic pe pictograma plus.

De exemplu, să adăugăm o nouă secțiune îndemn la acțiune pe pagina noastră.

În mod implicit, noua secțiune va apărea chiar la sfârșitul paginii.

Pentru a schimba poziția secțiunii, îndreptați un cursor peste marginea superioară, alegeți opțiunea Mutare secțiune și trageți-o în același mod ca un bloc.

Când ați terminat de personalizat pagina de pornire, puteți vedea cum arată pe dispozitivele mobile.

Pentru a face acest lucru, faceți clic pe pictograma de previzualizare mobilă din colțul din stânga jos.

Dacă există blocuri sau secțiuni care nu arată corect, le puteți muta până când sunteți sigur că versiunea dvs. mobilă oferă cea mai bună experiență de utilizator.

Când sunteți mulțumit de pagina dvs. de pornire, nu uitați să apăsați butonul Salvare pentru a salva toate modificările pe care le-ați făcut.

Index blog, arhive și pagini de căutare

Să ne uităm acum la un șablon care se numește Index blog, Arhive, Căutare .

După cum puteți presupune din numele său, acest șablon este responsabil pentru afișarea paginii de postări de blog, arhivele și rezultatele căutării.

Acest lucru este util, deoarece puteți modifica aspectul a 3 pagini simultan.

Deoarece ați învățat deja cum să personalizați paginile și să adăugați noi blocuri și secțiuni la ele, să ne concentrăm pe configurarea unor elemente specifice.

De exemplu, dacă dați clic pe elementul Postări , puteți modifica ordinea postărilor, puteți exclude postările din anumite categorii, etichete sau autori și multe altele.

În plus, sunteți liber să personalizați complet aspectul listei de postări.

Și anume, puteți modifica numărul de coloane și postări pe pagină, puteți schimba vizibilitatea numelui autorului, data publicării, ora și numărul de comentarii.

Este rar ca un constructor de site-uri web să vă permită să controlați astfel de lucruri, fără a fi nevoie de codare, ceea ce este un alt motiv pentru popularitatea SeedProd.

Postare unică

Când ați terminat de personalizat pagina de blog, să edităm și șablonul Postare unică .

O postare tipică de blog are următoarele părți:

• Imagine prezentată
• Titlul postării
• Postați informații
• Postați conținut
• Caseta de autor
• Secțiunea de comentarii

Cel mai bun lucru este că, cu SeedProd, puteți personaliza complet fiecare dintre aceste părți.

De exemplu, dacă faceți clic pe elementul Post info , puteți adăuga noi date utile la acesta.

Poate fi un moment al publicării sau modificării, informații suplimentare despre autorul postării sau altceva pe care doriți să specificați.

De exemplu, să presupunem că vrem să afișăm numărul de comentarii în secțiunea noastră de informații despre postare. Pentru a începe, apăsați butonul Adăugare articol .

Apoi, faceți clic pe meniul derulant Tip și selectați opțiunea Comentarii .

După aceea, veți vedea că numărul de comentarii este afișat acum în interiorul elementului de informații despre postare.

În acest fel, puteți personaliza cu ușurință orice element de pe pagină.

Bara laterală

Să schimbăm, de asemenea, aspectul barei laterale a temei noastre. Mergeți la tabloul de bord al generatorului de teme și faceți clic pe șablonul Bară laterală .

Bara laterală este foarte populară printre proprietarii de site-uri WordPress. Este un loc grozav pentru a pune elemente relevante ale site-ului web, cum ar fi o listă de postări recente, formularul de abonare și multe altele.

Și sunt vești bune. SeedProd vă permite să vă personalizați bara laterală complet în același mod ca și alte șabloane.

De exemplu, puteți adăuga un formular de înscriere la newsletter prin e-mail în bara laterală cu câteva clicuri.

Pentru a face acest lucru, pur și simplu trageți și plasați elementul Formular Optin din fila Blocuri în bara laterală:

Apoi, dacă dați clic pe el, puteți modifica numărul de câmpuri, tipul acestora și multe altele.

Acum că știți cum să lucrați în editorul vizual SeedProd, sunteți gata să personalizați CSS-ul global al temei.

Pasul 4: personalizați CSS global al temei dvs. (fără cod)

Mai întâi, să clarificăm ce este CSS și cum puteți schimba aspectul global al site-ului dvs. prin editarea acestui fișier.

CSS înseamnă foi de stil în cascadă. Este un fișier care conține cod care determină stilul, tipografia și culorile globale ale site-ului dvs.

Când modificați aspectul unui element din fișierul CSS, acele modificări se aplică acelui element pe întregul site.

Fiecare temă WordPress are propriul fișier CSS. De obicei, pentru a-i face modificări, trebuie să aveți cunoștințe în dezvoltarea web.

Dar, SeedProd vă permite să personalizați CSS-ul global al site-ului dvs. într-un editor simplu și prietenos pentru începători.

Pentru a începe, faceți clic pe șablonul CSS global din tabloul de bord pentru șabloane de temă.

Aceasta vă va duce la editorul vizual de setări CSS globale.

În partea stângă, veți găsi file în care puteți schimba culoarea site-ului, fonturile, fundalul și multe altele.

Și în partea dreaptă, puteți vedea rezultatele modificărilor pe care le-ați făcut în timp real.

De exemplu, să schimbăm fontul titlurilor. Pentru a face acest lucru, faceți clic pe fila Fonturi .

Pentru a schimba fontul tuturor titlurilor de la H1 la H6, selectați un font nou din meniul derulant sub titlul Font antet .

Dacă doriți să schimbați fontul unui anumit titlu, puteți comuta comutatorul Afișare setări H1 – H6 .

Apoi, faceți clic pe butonul Editare de lângă opțiunea Tipografie a unui titlu ales și selectați fontul pe care doriți să îl aveți.

De exemplu, vom schimba fontul titlului H1 în Comic Sans . După cum puteți vedea, fontul s-a schimbat instantaneu.

Când ați terminat de ajustat setările CSS, faceți clic pe butonul Salvare pentru a salva modificările pe care le-ați făcut.

Urmând acest mod, puteți personaliza o mulțime de lucruri legate de aspectul temei dvs. personalizate WordPress.

Acum că știți cum să editați setările globale CSS, sunteți gata să mergeți mai departe și să vă conectați contul de serviciu de marketing prin e-mail.

Pasul 5: Conectați-vă la serviciul dvs. de marketing prin e-mail

SeedProd are o integrare perfectă cu cele mai populare servicii de marketing prin e-mail. Această listă include, dar nu se limitează la, Mailchimp, Constant Contact și Drip.

Aceasta este o veste grozavă dacă aveți deja o bază activă de abonați la e-mail sau doriți să începeți să creșteți prima listă de e-mailuri.

Pentru a vă conecta contul de marketing prin e-mail, navigați mai întâi la fila Theme Builder și faceți clic pe orice șablon.

Apoi, accesați fila Conectare din panoul de sus.

Odată ajuns acolo, îndreptați cursorul peste un serviciu pe care îl utilizați, apăsați butonul Conectare și urmați instrucțiunile de pe ecran.

Când ați terminat de conectat serviciul de e-mail, apăsați butonul Salvare din dreapta sus pentru a salva modificările.

Acum SeedProd va colecta e-mailuri ale vizitatorilor care au completat formularul dvs. de optin și le va adăuga la baza dvs. de e-mail.

Pasul 6: Publicați tema WordPress personalizată

Pasul final este să publicați tema personalizată și să o publicați pe site-ul dvs. web.

Pentru a face asta, mai întâi, accesați SeedProd » Theme Builder din tabloul de bord WordPress.

Apoi, comutați comutatorul Activare tema SeedProd din dreapta sus.

Asta e. Tema dvs. personalizată WordPress este live și o puteți vedea pe site-ul dvs.

Pentru a face acest lucru, apăsați butonul Vizitați site -ul de sub numele site-ului dvs. din partea stângă sus a tabloului de bord WordPress.

Iată pagina noastră de pornire personalizată:

Iată pagina de arhivă:

Și iată șablonul unic de postare de blog pe care l-am personalizat și cu doar câteva clicuri folosind SeedProd:

În acest articol, ați învățat cum să creați o temă WordPress personalizată în 6 pași simpli, fără a fi nevoie de codare.

Dacă sunteți gata să începeți să vă creați propria temă personalizată WordPress, vă puteți lua copia SeedProd de aici.

Căutați pluginul WordPress puternic pentru a îmbunătăți căutarea pe site-ul dvs.? Consultați cele mai bune pluginuri de căutare WordPress pentru a vă îmbunătăți prezentarea de căutare pe site.

Vrei să lansezi un magazin online? Aruncă o privire la cele mai bune pluginuri WordPress de comerț electronic pentru prezentarea descărcărilor digitale.