Cum să creezi o temă personalizată WordPress în 5 pași fără cod

Doriți să creați o temă WordPress personalizată pentru site-ul dvs.?

Crearea propriei teme WordPress de la zero implică scrierea unui cod complex sau angajarea dezvoltatorilor de teme pentru a crea o temă pentru tine. Dar datorită generatoarelor de teme WordPress noi și ușor de utilizat, oricine poate crea o temă WordPress personalizată fără a scrie cod.

Acest articol vă va arăta cum să creați o temă personalizată în WordPress pas cu pas.

Ce este o temă WordPress?

Temele WordPress sunt fișiere șablon scrise în PHP, HTML, CSS și JavaScript. Fiecare fișier funcționează împreună pentru a crea designul și funcționalitatea site-ului dvs. WordPress.

O temă tipică WordPress va include unele, dacă nu toate, dintre următoarele fișiere de teme:

• footer.php
• header.php
• index.php
• pagina.php
• sidebar.php
• arhiva.php

Temele WordPress includ, de asemenea, un fișier functions.php și un fișier style.css.

De obicei, veți avea nevoie de o înțelegere solidă a mai multor limbaje de design web sau de un dezvoltator web pentru a crea o temă WordPress personalizată.

Crearea de teme WordPress personalizate pentru începători

Dacă angajați un dezvoltator sau o agenție de dezvoltare web, costul creării unei teme personalizate de la zero poate fi de mii de dolari. Deoarece multe întreprinderi mici nu își permit costul, se mulțumesc cu temele WordPress implicite care vin împreună cu platforma.

Cu toate acestea, dacă sunteți proprietarul unui site web care nu dorește să se mulțumească cu implicit, puteți fie să utilizați un cadru de temă, cum ar fi Genesis by StudioPress, de exemplu, sau un plugin pentru crearea de pagini WordPress pentru a crea o temă personalizată pentru site-ul dvs. WordPress.

Cadrele de teme WordPress fac construirea unei teme WordPress mai ușoară prin gestionarea automată a multor design și funcționalitate. Cu toate acestea, sunt încă o soluție oarecum complicată, care necesită teme pentru copii, de exemplu, deci sunt mai bune pentru dezvoltatori decât pentru proprietarul mediu de site-uri web.

Pe de altă parte, creatorii de pagini WordPress fac foarte ușor să creezi machete de pagini personalizate folosind o interfață de tip drag and drop, dar au și limitele lor. Creatorii de pagini vă permit doar să creați machete și, de obicei, nu le puteți utiliza pentru a crea teme personalizate.

Până la SeedProd, cel mai bun constructor de site-uri WordPress pentru teme personalizate a decis să rezolve această problemă cu generatorul său de teme WordPress.

Ce este SeedProd Theme Builder?

SeedProd este deja un puternic generator de pagini drag-and-drop folosit de peste 1 milion de proprietari de site-uri web. Dar, cu generatorul său de teme, orice utilizator fără tehnologie poate crea o temă WordPress complet personalizată fără cod.

În loc să jonglați cu fișierele wp-content, puteți crea teme de la zero cu doar câteva clicuri. SeedProd va crea chiar și foaia de stil automat.

SeedProd vine cu:

• Interfață vizuală drag-and-drop
• Peste 150 de șabloane Pro
• 2 milioane de fotografii de stoc
• Suport WooCommerce
• Tabloul de bord pentru gestionarea abonaților
• Integrari de email marketing

Și atât de multe funcții și widget-uri suplimentare de care aveți nevoie pentru a construi rapid un site web personalizat folosind WordPress.

Având în vedere acest lucru, să vedem cum să creați o temă WordPress personalizată fără a scrie o singură linie de cod folosind SeedProd.

Cum să creezi o temă WordPress personalizată fără cod

Pentru a crea o temă WordPress personalizată cu SeedProd, mai întâi veți avea nevoie de un site web WordPress pentru a instala pluginul SeedProd. Dacă nu aveți deja o instalare WordPress, puteți urma acești pași pentru a afla cum să creați un site web WordPress.

Site-ul dvs. ar trebui să aibă instalată și o temă WordPress simplă. Puteți găsi multe soluții gratuite în directorul de teme WordPress. Nu va trebui să vă faceți griji cu privire la modul în care arată tema, deoarece SeedProd o va înlocui atunci când vă publicați personalizările.

De asemenea, este o idee bună să utilizați un mediu de dezvoltare atunci când vă schimbați tema WordPress pentru a evita distrugerea accidentală a site-ului. Companii populare de găzduire WordPress precum BlueHost oferă medii de testare în mod implicit.

De asemenea, ar trebui să faceți backup site-ului dvs. înainte de a face modificări importante. Iată o listă cu cele mai bune pluginuri de backup WordPress pe care le puteți folosi.

Odată ce site-ul dvs. WordPress este gata, urmați pașii de mai jos pentru a crea o temă WordPress personalizată fără cod.

Pasul 1. Instalați și activați SeedProd

Primul pas este să instalați și să activați pluginul pentru constructorul de site-uri web SeedProd. Pentru a avea acces la funcția de creare a temei, veți avea nevoie de o licență SeedProd Pro sau Elite.

După descărcarea fișierului zip al pluginului SeedProd pe computer, încărcați, instalați și activați-l pe tabloul de bord WordPress. Dacă aveți nevoie de ajutor cu acest pas, urmați acest ghid despre instalarea unui plugin WordPress.

După instalarea SeedProd, navigați la SeedProd ≫ Setări din zona dvs. de administrare WordPress și introduceți cheia de licență SeedProd.

Puteți găsi cheia de licență vizitând zona contului dvs. SeedProd și copiend-o din fila Descărcări.

Acum puteți accesa SeedProd ≫ Theme Builder și puteți vedea prezentarea generală a Theme Builder. Aici puteți crea o ierarhie de șablon pentru tema dvs. WordPress.

Cu alte cuvinte, aici puteți crea toate părțile individuale care alcătuiesc tema dvs., cum ar fi următoarele:

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

Puteți crea fiecare dintre aceste părți tematice individual făcând clic pe butonul Adăugați un șablon de temă nou .

Dar dacă sună prea copleșitor pentru prima ta încercare, există o altă modalitate de a-ți crea tema.

Puteți utiliza șabloanele de teme prefabricate de la SeedProd pentru a crea rapid cadrul de bază pentru tema dvs. și pentru a le personaliza pentru a se potrivi nevoilor dvs. de design, fără cod. Deoarece această soluție este super ușoară pentru începători, pe asta ne vom concentra pentru acest tutorial.

Notă: SeedProd oferă, de asemenea, sute de șabloane de pagini de destinație receptive pentru a vă ajuta să creați pagini de destinație personalizate.

Pasul 2. Alegeți un șablon de temă

Generatorul de teme de la SeedProd are deja câteva teme create pentru dvs. Pentru a le găsi, faceți clic pe butonul Teme .

La momentul scrierii acestui ghid, există 9 șabloane de teme, inclusiv:

1. Tema de pornire
2. Afaceri moderne
3. Agentie de marketing
4. Tema de design de produs
5. Companie de îngrijire a animalelor de companie
6. Temă de strategie digitală
7. Tema muzica live
8. Tema Broker ipotecar
9. Tema restaurantului

Pentru a alege un șablon de temă pentru site-ul dvs., plasați mouse-ul peste miniatură și faceți clic pe pictograma bifă. Pentru acest ghid, vom folosi tema de pornire SeedProd.

După alegerea șablonului, SeedProd creează automat toate părțile care alcătuiesc tema.

Dacă există o funcție specifică pe care nu doriți să o afișați pe site-ul dvs. web, puteți face clic pe comutatorul de sub titlul Publicare și puteți dezactiva acea parte a temei.

Dacă faceți clic pe linkul de condiții pentru fiecare parte a șablonului, îi puteți modifica numele, tipul, prioritatea și puteți alege când și unde apare pe site-ul dvs. web.

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

Cu elementele de bază ale temei dvs. la locul lor, acum este timpul să începeți să editați fiecare secțiune a temei pentru a crea o temă WordPress cu adevărat personalizată pentru site-ul dvs.

Pentru a edita orice secțiune de temă, plasați cursorul peste ea și faceți clic pe linkul Editați design .

Vom începe prin a edita antetul.

Antet și subsol

Când editați o secțiune de temă în SeedProd, vă veți îndrepta către generatorul vizual de glisare și plasare. Puteți personaliza antetul temei dvs. pe acest ecran pur și simplu arătând și făcând clic.

După cum puteți vedea, tema Starter vine cu un antet cu 2 coloane care are un logo și un meniu de navigare. Îl puteți personaliza pentru a vă afișa logo-ul personalizat făcând clic pe sigla din previzualizarea live.

De acolo, puteți șterge sigla substituent din panoul din stânga și puteți încărca una nouă de pe computer sau din biblioteca media WordPress.

Puteți ajusta dimensiunea și alinierea siglei în același panou și puteți adăuga un link personalizat, cum ar fi adresa URL a site-ului dvs. principal.

Dacă doriți să schimbați culoarea de fundal a antetului, plasați cursorul peste secțiunea antetului până când are un contur violet, apoi faceți clic pe el pentru a vedea setările secțiunii în panoul din stânga. De acolo, puteți da antetului o culoare de fundal personalizată, o imagine și să alegeți lățimea antetului.

Și în fila Avansat , puteți personaliza umbra antetului, spațierea, chenarul și multe altele.

Când sunteți mulțumit de antetul dvs. personalizat WordPress, faceți clic pe butonul Salvați din colțul din dreapta sus și ieșiți înapoi la generatorul de teme.

Acum repetați acești pași pentru a vă edita subsolul WordPress. Faceți clic pe Editați design pentru a-l deschide în editorul vizual și faceți clic pe orice element pentru a personaliza conținutul, culorile, linkurile și multe altele.

Pagina principala

În continuare, vom personaliza pagina de pornire a site-ului dvs. WordPress, care este adesea prima pagină pe care utilizatorii o văd atunci când vă vizitează site-ul. Deci, deschideți secțiunea Pagina de pornire în editorul vizual.

Deoarece am personalizat deja designul antetului și subsolului, veți vedea noile dvs. modele în partea de sus și de jos a paginii dvs. de pornire. Dar nu vă faceți griji, modificările pe care le faceți pe acest ecran nu vă vor afecta antetul sau subsolul; sunt pur și simplu acolo ca un ghid vizual.

Șablonul SeedProd Starter Theme are toate caracteristicile de care au nevoie majoritatea site-urilor web de afaceri, inclusiv:

• Zona eroilor
• Siglele clientului
• Caracteristici
• Mărturii
• Secțiunea de întrebări frecvente

La fel ca antetul, puteți personaliza fiecare centimetru pentru a-l face unic. Să începem prin a schimba zona eroilor.

Zona eroilor are următoarele caracteristici:

• Secțiune
• Aspect cu 2 coloane
• Imagine
• Titlu
• Text
• Buton

Pentru a schimba imaginea implicită, faceți clic pe ea și încărcați o nouă imagine, așa cum ați făcut cu logo-ul dvs.

De asemenea, puteți edita titlul și descrierea făcând clic pe fiecare bloc și înlocuind conținutul cu textul personalizat.

Dacă faceți clic pe blocul de butoane, puteți modifica textul butonului, linkul, alinierea și multe altele.

Puteți găsi toate aceste elemente în panoul blocuri din stânga. În acest fel, puteți trage un bloc din stânga și îl puteți plasa pe design pentru a adăuga mai mult conținut temei dvs.

Urmați acest proces pentru a personaliza restul paginii dvs. de pornire până când reflectă afacerea dvs. De exemplu, puteți adăuga informații despre serviciile companiei dvs. sau puteți evidenția caracteristicile produsului în secțiunea cu caracteristici.

Apoi, puteți utiliza blocul încorporat Testimonials al SeedProd pentru a adăuga dovezi sociale pozitive de la clienții și clienții existenți.

De asemenea, am schimbat culoarea de fundal a acestei secțiuni pentru a se potrivi cu antetul temei, deschizând setările secțiunii și alegând o culoare diferită.

După ce vă personalizați pagina de pornire, puteți da clic pe pictograma de previzualizare mobilă pentru a vedea cum arată designul dvs. pe dispozitivele mobile.

Dacă ceva nu arată corect, puteți muta lucrurile până când ecranul mobil oferă o experiență bună pentru utilizator.

Când sunteți mulțumit de modul în care arată pagina dvs. de pornire, faceți clic pe butonul Salvați și reveniți la generatorul de teme.

Pagina de blog, postări unice și pagini

Sunt șanse să doriți să includeți o pagină personalizată pentru postările de blog în noua dvs. temă WordPress. Vestea bună este că SeedProd are o parte tematică pe care o puteți personaliza special în acest scop.

Secțiunea respectivă se numește Index blog, Arhive, Căutare în generatorul de teme. Vă permite să personalizați pagina de postări de blog, arhivele de postări și pagina cu rezultatele căutării pentru a se potrivi cu restul branding-ului site-ului dvs.

Așadar, faceți clic pe linkul Editare design pentru a deschide această parte a temei în generatorul de glisare și plasare.

Pe această pagină, tema de pornire folosește etichete șablon pentru a extrage informații dinamice din WordPress, inclusiv titlul arhivei și postări. Când faceți clic pe oricare dintre aceste blocuri, veți vedea setările lor în panoul din stânga.

De exemplu, când faceți clic pe eticheta șablon Postări, puteți afișa postări în mod implicit, personalizate (postări, media sau postări personalizate) sau manual, tastând anumiți parametri de interogare.

De asemenea, puteți alege numărul de coloane, postări pe pagină, puteți afișa sau ascunde imaginea prezentată, afișa un fragment și multe altele.

După ce vă personalizați arhiva sau pagina de blog, întoarceți-vă la generatorul de teme și editați secțiunea Postări unice .

Această parte temă utilizează următoarele etichete șablon pentru a extrage informații despre postările individuale WordPress:

• Titlul postării
• Postați informații
• Postați conținut
• Cutia autorului
• Postați comentarii
• Post Navigare

Puteți edita fiecare dintre aceste blocuri așa cum ați face cu orice alt bloc SeedProd. Pur și simplu faceți clic pe orice element și personalizați-l în panoul de setări.

De exemplu, dacă faceți clic pe blocul Post Info , puteți adăuga mai multe meta informații, puteți modifica alinierea și puteți ajusta culorile pictogramelor.

Bara laterală

Multe site-uri WordPress încă folosesc bare laterale pentru a afișa informații importante vizitatorilor, cum ar fi profilurile lor de rețele sociale, cele mai recente postări și caseta de înscriere la buletinul informativ. Dar, spre deosebire de multe teme WordPress prefabricate, puteți folosi SeedProd pentru a crea o bară laterală WordPress personalizată cu blocurile sale vizuale.

Pentru a face acest lucru, faceți clic pe Editați designul din partea șablonului din bara laterală. De acolo, puteți glisa și plasa orice conținut doriți în designul barei laterale.

Tema de pornire include o casetă de căutare, pictograme de rețele sociale și categorii de postări în mod implicit. Dar puteți adăuga orice doriți aici. De exemplu, este posibil să doriți să afișați o listă de postări recente de blog sau o imagine care trimite la un partener afiliat.

De asemenea, puteți utiliza blocul de formular de înscriere al SeedProd și puteți colecta adrese de e-mail pentru a vă crește lista, chiar în bara laterală. Cel mai bun lucru este că nu veți avea nevoie de cunoștințe tehnice pentru a realiza acest lucru.

CSS global

Până acum, ați construit cea mai mare parte a temei dvs. personalizate WordPress fără cod. Dar mai există o parte pe care ar trebui să te uiți pentru a te asigura că totul este consecvent pe tema ta.

Acesta este CSS global , care controlează stilul, tipografia, culorile și aspectul global ale temei. Așadar, faceți clic pe Editați design pe acea parte a temei pentru a o deschide în editorul de pagini.

După cum puteți vedea, această pagină vă oferă control asupra multor stiluri ale temei dvs. În panoul din stânga sunt secțiuni pentru:

• Culori
• Fonturi
• fundal
• Butoane
• Forme
• Aspect
• CSS personalizat

De exemplu, puteți deschide secțiunea Butoane și puteți alege o culoare personalizată. Apoi acea culoare va apărea pe fiecare buton din tema ta.

Puteți face același lucru în titlul Fonturi și puteți atribui o culoare personalizată pentru fiecare link din tema dvs.

Deci, continuați și modificați aceste setări până când tema arată exact așa cum doriți, apoi faceți clic pe butonul Salvare pentru a stoca modificările.

Pasul 4. Conectați-vă serviciul de marketing prin e-mail

Dacă unul dintre obiectivele dvs. de afaceri este să vă creșteți lista de e-mail, sunt șanse să fi adăugat un formular de înscriere undeva în designul temei dvs. WordPress. Dar pentru a adăuga automat noi persoane de contact în lista dvs., va trebui să vă conectați formularul la serviciul de marketing prin e-mail.

SeedProd se integrează direct cu multe servicii populare de marketing prin e-mail, cum ar fi Constant Contact, Mailchimp, Drip etc. Și este ușor să vă conectați la contul dvs.

Pur și simplu editați orice parte a temei și faceți clic pe fila Conectare din partea de sus a ecranului.

Apoi, faceți clic pe orice integrare din listă și urmați instrucțiunile de pe ecran. Ca rezultat, oricine completează formularul dvs. de optin va fi adăugat automat la lista dvs. de e-mail.

Pasul 5. Activați tema WordPress personalizată

Ultimul pas în crearea unei teme WordPress personalizate cu SeedProd este să faceți tema live pe site-ul dvs. web. Pentru a face asta, găsiți titlul Enable SeedProd Theme în colțul din dreapta sus și comutați comutatorul în poziția „pornit”.

Noua temă va înlocui tema implicită, permițându-vă să vedeți personalizările pe partea frontală a site-ului dvs.

Asta e! Noua ta temă personalizată WordPress este live pe site-ul tău web. Să vedem cum arată.

Iată pagina de pornire cu noul antet și subsol:

Iată pagina blogului cu bara laterală personalizată WordPress:

Felicitări!

Acum știți cum să creați o temă WordPress personalizată fără cod.

Cu generatorul de teme WordPress ușor și puternic de la SeedProd, nu veți avea nevoie de nicio experiență tehnică, dezvoltatori WordPress sau un buget masiv pentru a crea o temă WordPress personalizată.

Puterea și funcționalitatea sunt chiar în mâinile tale în momentul în care instalați pluginul.

Deci ce mai aștepți?

Multumesc pentru lectura. Vă rugăm să ne urmăriți pe YouTube, Twitter și Facebook pentru mai mult conținut util pentru a vă dezvolta afacerea.