Creează-ți propria temă WordPress

În articolele anterioare, am examinat cum puteți personaliza un site web WordPress, vă puteți crea propria temă sau șabloane pentru copii.

Astăzi, vom vedea cum vă puteți construi propria temă WordPress. Haide să mergem!

De ce să vă construiți propria temă WordPress?

WordPress oferă mai multe moduri de a vă personaliza site-ul web. Deci, de ce ai simți nevoia să-ți creezi propria temă? În unele cazuri, temele disponibile s-ar putea să nu se potrivească cu designul mărcii dvs. sau să aibă funcțiile de care aveți nevoie. O temă personalizată ar putea rezolva această problemă și vă poate oferi exact stilul de site dorit cu toate funcțiile de care aveți nevoie, fără a fi nevoie să vă bazați pe o temă terță parte.

Cerințe înainte de a crea o temă

Pentru a putea replica următorii pași în exemplul de mai jos, trebuie să avem o instalare WordPress configurată și gata de funcționare, fie local, fie pe un spațiu de server pe care îl administrați. Nu încercați acest lucru pe un site live. Creați un mediu de testare.

De asemenea, sunt necesare cunoștințe de lucru și înțelegere a CSS, PHP și HTML.

Creați Tema

Vom numi tema noastră „Prima mea temă”. Primul pas este crearea fișierelor necesare pentru ca tema să fie vizibilă în zona de administrare. Pentru a face acest lucru vom crea un fișier style.css și index.php.

Creăm un subfolder pentru tema noastră, sub folderul wp-content/themes/ pe care îl numim „my-first-theme” și adăugăm aceste 2 fișiere în acel folder.

În acest moment, tema ar trebui să fie vizibilă ca o alegere în zona de administrare.

Dacă unul dintre aceste fișiere lipsește, veți primi un mesaj de avertizare că tema este ruptă. De exemplu, dacă lipsește index.php, veți vedea ceva de genul acesta:

În interiorul fișierului style.css vom adăuga câteva comentarii care spun WordPress despre tema noastră. Cea mai importantă informație este numele sub care va fi listat. În afară de asta, puteți spune cine este autorul sau puteți oferi un URI de autor, astfel încât utilizatorii să poată vizita un site web pentru a afla mai multe despre tema dvs. Dați o descriere care să fie afișată în pop-up-ul modal al temei de administrare și versiunea instalării.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

NOTĂ: De asemenea, vă puteți defini licența. Dacă doriți ca tema dvs. să fie distribuită pe WordPress, tema trebuie să fie compatibilă cu GPL.

Dacă trebuie să afișați o imagine de logo, inserați un fișier screenshot.png în același spațiu în care se află fișierele style.css și index.php.

Acum, dacă vă activați tema în ecranul de administrare al temelor, ar trebui să vedeți ceva de genul acesta:

Și dacă faceți clic pe „Detaliile temei”, ar trebui să vedeți asta:

Fișiere tematice

Acum este timpul să scrieți un cod în fișierul index.php. Ca test, deschideți fișierul cu editorul preferat și introduceți orice fel de element HTML, de exemplu

 <h1>My First Theme's Content</h1>

Salvați fișierul și vizitați front end. Ar trebui să vedeți doar titlul „Conținutul primei mele teme”

În acest moment, trebuie să decideți ce aspect va avea tema dvs.

Aspectul temei

Rutele de urmat de aici sunt nelimitate. Vă recomandăm să vă faceți timp și să studiați cum funcționează temele WordPress. Mai important, asigurați-vă că înțelegeți pe deplin ierarhia șablonului înainte de a continua cu structurarea propriei teme.

Găzduiește-ți site-ul web cu Pressidium

GARANTIE 60 DE ZILE BANI RAPIS

VEZI PLANUL NOSTRU

Pe scurt, ceea ce face WordPress este o modalitate de a apela diferite fișiere php în funcție de tipul de conținut. Acest lucru se realizează cu interogări. O interogare verifică dacă pagina vizualizată în prezent are postări sau este o pagină cu rezultate de căutare sau orice alt tip de conținut și emite codul corespunzător.

Un exemplu clasic este separarea antetului și a subsolului prin crearea de fișiere individuale pentru fiecare dintre ele. Pentru a vedea un exemplu foarte simplificat despre cum puteți face acest lucru singur, introduceți această bucată de cod în fișierul index.php.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Acest cod, folosind funcțiile WordPress construite wp_head() și wp_footer(), oferă un aspect implicit al conținutului, care include un antet cu logo, titlu și meniu, corpul principal în care interogările vor afișa conținutul potrivit și un subsol care conține informațiile site-ului.

Dacă dorim să împărțim acest cod și să folosim fișiere separate header.php și footer.php, atunci ar trebui să creați fișierele în folderul temei.

Și împărțiți codul astfel:

Index.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Footer.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Si asta e! Ai creat prima ta temă!

Teme de început

Ne-am uitat mai sus la cum să creați o temă manual... ce fișiere trebuie create și ce cod puteți include. Dacă sunteți deja familiarizat cu acest lucru, puteți economisi ceva timp descărcând o temă de pornire WordPress în câteva secunde. Încercați Underscore, de exemplu, unde puteți doar să dați un nume și să descărcați imediat fișierul zip al temei.

Minunat, nu?

Concluzie

O temă personalizată WordPress este o soluție excelentă atunci când aveți nevoie de mai multă flexibilitate ca dezvoltator. Crearea unei teme poate părea un proces descurajantă. Sperăm, așa cum a arătat acest articol, este de fapt destul de ușor de făcut. Cheia este să nu te grăbiți înainte de a începe să codificați. Fă un pas înapoi, studiază structura temei care corespunde cerințelor tale și apoi mergi la ea.