În acest articol, vom învăța cum să creăm o temă wordpress. Mai întâi, vom crea un șablon HTML + CSS pe care îl vom pune în structura temei noastre wordpress. După ce ați terminat de citit acest articol, vă puteți crea propriul șablon pentru wordpress sau, mai degrabă, îl veți crea pe măsură ce citiți și finalizați exercițiile practice. Veți ști cum funcționează tema și veți putea implementa în mod independent nucleul temei wordpress din alte șabloane HTML/CSS. Să începem?
Introducere - structura temei wordpress
Structura unei teme wordpress este extrem de simplă. La subiect avem un dosar index.php, el este responsabil de asamblarea pieselor șablonului. Alții sunt conectați la acest fișier: antet.php,subsol.php... Aceste fișiere (bucăți din șablon) sunt folosite pe orice pagină a site-ului. Știm că nu toate paginile sunt construite după același șablon, așa că tema wordpress are alte fișiere, cum ar fi arhive.php sau singur.php... De asemenea, puteți crea propriul tip de pagini dacă doriți să fie complet diferite de celelalte de pe site. Este foarte confortabil.
Dacă examinați cu atenție structura temei și citiți conținutul fișierelor, veți înțelege intuitiv ce este. Dar mai sunt câteva puncte pe care le vom lua în considerare. Vă puteți întoarce oricând la această pagină și puteți citi cum se face totul.
Acum să ne uităm la crearea unui șablon în etape:
Pasul 1 - style.css
Un fișier CSS este un fișier de parametri și soluții de proiectare pentru elementele șablonului HTML. Trebuie să redenumiți fișierul CSS principal (dacă aveți mai multe) la stil.css... În continuare, trebuie să adăugați următoarele informații comentate la începutul acestui fișier:
/ * Numele temei: Typography Paramount Theme URI: http: // site / Descriere: Un șablon fără imagini care se concentrează pe Typography..0. Comentarii generale / Declarație de licență, dacă este cazul. ... * /
Acest cod va afișa informațiile despre subiect pentru administratori. Asigurați-vă că este la începutul fișierului și că nu există caractere de spațiu alb în fața acestuia!
Apoi, am creat un alt fișier numit 1. css, și puneți-l în folder tipografie-primată pe care l-am creat în folderul wordpress al temei. Este necesar să respectați cu strictețe această structură pentru ca wordpress să poată vedea acest fișier.
Pasul 2 - antet și subsol
În acest pas, vom crea două fișiere: antet.phpși subsol.php mentionat mai devreme. Deși nu sunt de bază și sunt opționale în temă, sunt folosite în majoritatea șabloanelor, așa că le vom crea.
Header.php
Să începem cu acest fișier. Creați un fișier și dați-i un nume antet.php, apoi inserați codul dat în el și salvați. Acest fișier va fi afișat pe toate paginile șablonului nostru.
Un șablon fără imagini care se concentrează pe tipografie.
Tipografia primordială
Până acum, nu a existat nimic special despre o temă simplă html/css. Dar acum vom înlocui unele dintre elemente cu etichete wordpress.
>
/">
Acestea sunt doar câteva dintre etichetele pe care le cunosc. Veți găsi multe mai multe pe site-ul oficial: codex.wordpress.org.
atribute_limbii ()- Afișează tipul de limbă pentru etichetă .
info blog ()- Folosit pentru a afișa informații despre site, toți parametrii pot fi găsiți în codexul WordPress.
wp_title ()- Returnează titlul paginii.
wp_head ()- include javascript și alte elemente necesare.
get_option ()- obține opțiunile necesare pentru lucrul cu baza de date.
Footer.php
Acum să creăm așa-numitul „subsol de site”. Creați un fișier subsol.phpși pune următorul cod în el. Acest subsol va afișa anul, numele site-ului și linkurile rss.
phpthe_timp ("Y ");?>- afișează anul curent.
- numele blogului.
- adăugarea unui link către fluxul rss al blogului.
wp_footer ()- acest lucru este necesar pentru nucleul wordpress în sine, care adaugă acolo elementele de care are nevoie.
Pasul 3 - fișierul șablon wordpress principal
Este timpul să creați un fișier șablon wordpress de bază care va include partea de sus și de jos a site-ului. Creați un fișier index.php... Acesta este unul dintre cele două fișiere de teme wordpress necesare (celălalt este style.css). Lipiți fișierul nou creat cu următorul cod:
Acest cod ajută wordpress să obțină informații unde să se conecteze antet.phpși subsol.php... Să mai adăugăm câteva rânduri între aceste etichete:
">
la | |
Woops...
Ne pare rău, nu am găsit nicio postare.
Acest fragment de cod primește informații despre postările de blog disponibile și, dacă există, le afișează. Dacă nu sunt găsite, atunci partea de cod este afișată după ceea ce ne anunță că blogul este încă gol.
A adăugat și eticheta care afișează linkuri de navigare, astfel încât utilizatorii să poată citi postările adăugate anterior.
Un exemplu despre cum funcționează o temă wordpress
Acum că avem o aparență de temă, să vedem un exemplu despre cum funcționează tema wordpress creată.
Avem patru fișiere în tema noastră, acest lucru este suficient pentru început. În articolul următor, vom adăuga fișierul singur.php care va fi afișat la afișarea unei anumite postări. Acest fișier va include, spre deosebire de fișier index.php.
Dacă mai aveți întrebări sau neînțelegeri cu privire la crearea unui șablon wordpress (temă), exprimați-vă preocupările în comentariile de mai jos!Dacă doriți ca site-ul dvs. wordpress să arate promițător, atunci mai întâi ar trebui să vă gândiți să creați o temă unică pentru el. Acest proces este destul de laborios, deoarece este direct legat de diverse codificări și scripturi. Să o dezactivăm de la zero.
Aproape fiecare temă wordpress este instalată în directorul wp-content / themes și constă din 3 categorii de fișiere:
- fisiere de foi de stil;
- fișiere de funcționalități suplimentare;
- fișiere șablon.
Fișierele foilor de stil sunt style.css. Ei sunt responsabili pentru culoarea, dimensiunea, fontul și alți parametri ai elementelor site-ului. Fiecare site are doar 1 fișier style.css. Dacă deschideți acest fișier, atunci în partea de sus puteți vedea informații despre titlu, autor și o scurtă descriere a subiectului. Când vă creați propria temă, puteți introduce informații despre dvs. în style.css.
Următoarea categorie este fișierele cu funcționalități suplimentare. Acestea includ functions.php, al cărui principiu îl face să arate ca un plugin. Datorită acestui fișier, puteți personaliza vizual tema chiar în panoul de administrare. De obicei, lista de setări nu este foarte largă (numele site-ului, culoarea navigației și panourile laterale ale site-ului etc.). Dacă tema este multifuncțională, atunci lista de setări va fi mult mai largă.
Acum să trecem la fișierele șablon. Funcția lor principală este de a genera pagini care sunt solicitate de vizitatorii site-ului. Fișierele șablon au extensia „.php”. Cele mai multe teme de bază pot conține doar un fișier șablon numit index.php. În acest caz, toate paginile site-ului vor fi identice. Acest design este cel mai adesea folosit pentru a crea resurse Internet cu baze de date, atunci când designul nu joacă un rol cheie.
Dacă nu ați mai făcut niciodată un design, ar trebui să încercați mai întâi să creați o temă simplă. Pentru funcționarea normală, aveți nevoie de cel puțin 2 dintre următoarele fișiere: style.css și index.php.
După cum înțelegeți, fișierele cu funcționalități suplimentare în acest caz nu pot fi utilizate. Dintre fișierele șablon, index.php este unul dintre cele mai flexibile. Poate genera independent anteturi, diverse blocuri, subsol (subsol), conținut și alte elemente ale site-ului.
Este de remarcat faptul că acei parametri care nu sunt generați de fișierul index.php vor fi generați de fișiere standard. De exemplu, dacă tema dvs. este formată din doar 2 dintre fișierele de mai sus, dar utilizatorul are nevoie să genereze un formular pentru adăugarea de comentarii, atunci această funcție va fi realizată de standardul comments.php. Prin urmare, dacă doriți ca tema dvs. să fie mai unică, atunci merită să faceți fișiere șablon suplimentare. Să le luăm în considerare pe cele principale.
- Pentru a adăuga comentarii, ați ghicit, se folosește șablonul comments.php.
- Dacă doriți să faceți un pop-up cu comentarii, atunci în astfel de scopuri aveți nevoie de comments-popup.php.
- Pentru a genera pagina de pornire, se folosește home.php.
- Fișierul single.php este responsabil pentru afișarea articolelor site-ului. Dacă nu aveți un astfel de fișier, atunci index.php își va executa funcția.
- Fișierul page.php generează pagini individuale ale site-ului.
- Pentru a afișa informații despre autor, aveți nevoie de author.php.
- Category.php este responsabil pentru categorii.
- Afișarea arhivelor, a datei și a căutării se realizează prin fișierele archive.php, date.php și respectiv search.php.
- Pentru ca site-ul dvs. să afișeze o pagină unică de eroare 404, va trebui să adăugați 404.php.
- Subsolul și subsolul site-ului sunt generate de fișierele header.php și, respectiv, footer.php.
Crearea manuală a unei teme unice de la zero
Mai întâi trebuie să instalați un șablon potrivit. Poate fi găsit atât pe site-ul oficial wordpress.org, cât și în altă parte. Se recomandă utilizarea site-ului oficial, deoarece orice terță parte poate conține fișiere rău intenționate și link-uri rupte.
După ce ați făcut alegerea, puteți începe să descărcați arhiva. La sfârșitul procesului, va trebui să îl despachetați și să încărcați fișierele în anumite foldere de pe site (arhiva conține de obicei o mică instrucțiune). Descărcarea se poate face folosind programul FileZilla sau direct din hosting, dacă acceptă această opțiune. Acum trebuie doar să mergeți la secțiunea „Teme”, să o selectați pe cea pe care ați descărcat-o și să faceți clic pe butonul „Activare”.
De asemenea, îl puteți selecta chiar în panoul de administrare wordpress. În acest caz, nu trebuie să îl descărcați. Trebuie doar să faceți clic pe butonul „Instalare” și apoi pe „Activare”. Înainte de instalare, se recomandă să efectuați o previzualizare.
Acum că tema este activată, puteți trece la unicizarea acesteia. Primul pas este să vă gândiți la partea de sus a site-ului (header). Acesta este primul lucru care atrage atenția vizitatorilor tăi, așa că ar trebui să-l iei cu responsabilitate. De obicei, antetul constă din numele site-ului, logo și informații scurte despre conținut. Antetul poate fi creat în orice editor grafic. Chiar și în Paint standard. Designerii mai avansați folosesc Adobe Photoshop.
Numele site-ului ar trebui să fie scurt și ușor de reținut. Există multe stiluri diferite din care puteți alege în Adobe Photoshop. Când creați un logo, este posibil să aveți nevoie de forme diferite. Acestea pot fi descărcate de pe site-ul oficial Adobe Photoshop.
După ce faceți un desen al antetului într-un editor grafic, va trebui să îl încărcați pe site-ul dvs. web. Când descărcarea este completă, o adresă URL va apărea în dreapta imaginii și va trebui copiată. Apoi trebuie să mergeți la secțiunea „Editor” și să selectați fișierul care este responsabil pentru generarea antetului (header.php). În ea, va trebui să găsiți adresa URL a imaginii curente și să o înlocuiți cu cea pe care ați primit-o la încărcarea imaginii antet. După aceea, va trebui să actualizați fișierul. Acum puteți trece la verificarea afișajului antetului.
Dacă antetul tău are alți parametri decât cel standard, atunci aceștia pot fi ajustați în header.php. Lățimea este controlată de atributul width, iar înălțimea este controlată de înălțime. Ajustările pot fi făcute în pixeli și procente. Deci, dacă doriți doar să întindeți capacul, atunci setați-l la 100%.
Dacă doriți, puteți adăuga link-uri active către paginile site-ului wordpress în antet. Acest lucru se poate face folosind diverse servicii. Există o mulțime de ele pe Internet. Majoritatea lucrează pe același principiu. Conturați zona dorită a antetului, care va fi rezervată pentru link, iar serviciul vă va oferi codul de care aveți nevoie. Apoi va trebui să adăugați acest cod în fișierul header.php. Aveți grijă când îl adăugați. Fiecare punct contează. Dacă adăugați codul în locul greșit, linkurile active nu vor apărea în antet.
După înlocuirea antetului standard, puteți începe să înlocuiți fundalul implicit al site-ului wordpress, widget-urile, navigarea, subsolul și alte componente ale site-ului wordpress. De asemenea, pot fi desenate în orice editor grafic și încărcate pe site sub forma unei imagini.
Cu tine merită să iei în considerare că nu ar trebui să fie strălucitor. Majoritatea webmasterilor preferă să folosească un fundal alb. Nu rănește ochii și nu distrage atenția de la conținutul principal.
Pentru a crea o navigare de calitate de la zero, aveți nevoie de puține cunoștințe despre etichete, cum ar fi