dezvoltare tema wordpress

Dezvoltare tema WordPress – Partea I (Pregatirea fisierelor)

Ce sunt temele?

Temele wordPress sunt o colectie de fisiere text ce au ca scop personalizarea site-ului web din punct de vedere estetic si imbunatatirea experientei utilizatorului prin adaugarea unor functionalitati extra menite sa usureze navigarea acestuia in pagini.
Prin personalizare ne referim la implementarea unor sabloane ce au la baza limbajele html si CSS. Cand vine vorba de functionalitati ne referim la adaugarea unor elemente precum: o bara de cautare in continutul site-ului, o bara laterala numita si sidebar care poate contine elemente importante pentru utilizator, adaugarea unor meniuri de navigare in diverse locuri ale paginilor etc.

Cum functioneaza temele?

Inainte de a incepe sa dezvoltam o tema WordPress va trebui sa avem in vedere faptul ca aceasta va avea nevoie de o permanenta mentenanta si de actualizari periodice. Unele persoane isi pot pune la inceput intrebarea de ce trebuie sa adaug periodic anumite actualizari teme proprii create. E bine raspunsul este ca din motive de securitate ori WordPress-ul se actualizeaza periodic la ultima versiune aparuta. Prin actualizarea WordPress-ului putem intelege trecerea la o versiune mai noua de pe PHP. Neactualizarea unei teme in astfel de situatii poate genera erori pe site si unele parti ale acestuia sa nu mai functioneze corespunzator. Prin trecerea la o noua versiune de pe PHP, anumite linii de cod existente in fisierele temei pot fi depreciate si necesita imbunatatirea lor. Spre exemplu, o functie implicita WordPress-ului care face trimitere la o anumita sectiune a site-ului isi poate schimba denumirea. De altfel, va trebui sa avem scris sau descarcat un sablon care sa corespunda nevoilor noastre. Odata pregatit, acesta va fii introdus in structura codului din anumite fisiere pentru a stiliza paginile. Indiferent daca descarcam un sablon sau il scriem noi de la zero acesta este esential in dezvoltarea unei teme. Cu ajutorul acestui sablon putem alege de exemplu latimea continutului pe care paginile ar trebui sa il aiba, culorile principale si secundare ale site-ului, tipul de organizare a continutului pe coloane si randuri si nu in ultimul rand introducerea unor animatii atractive care sa ofere utilizatorilor o experienta placuta.
Dupa structura lor si dupa rolul pe care acestea il au fisierele din cadrul unei teme WordPress pot fi: fisiere sablon, fisiere pentru functionalitati si fisiere de stilizare. Fisierele de stil joaca un rol important in design-ul paginilor. In alta ordine de idei, fisierul style.css este cel care genereaza informatiile despre tema din care face parte si o face pe aceasta sa fie vizibila in panoul de control WordPress. Fisierele de sablon sunt acele fisiere care adauga cate un template pentru sectiunile din site care ar trebui sa apara pe toate paginile sau cel putin pe majoritatea. Orice site contine cel putin:

– un header (partea de sus a paginilor care poate contine logo-ul, meniul de navigare, butoane social media si tagurile pentru titlu, descriere sau limba folosita),
-un footer (sectiunea de jos a paginilor in care pot fi introduse datele de contact, formulare, termenii sau conditiile de utilizare a site-ului),
-un sidebar (bara laterala) si partea centrala a paginilor utilizata pentru continut.

Daca intram in fisierele unei teme existente vom vedea ca aceste sabloane sunt create fiecare in cate un fisier separat si sunt introduse in fiecare dintre celelalte pagini prin intermediul unor functii implicite WordPress-ului, precum:

<?php get_header();?> //introducerea antetului creat in pagina respectiva

<?php get_sidebar();?> //introducerea barii laterale in pagina respectiva

<?php get_footer();?> //introducerea subsolului creat in pagina respectiva

<?php get_search_form();?> //introducerea unui instrument de cautare a continutului site-ului in pagina respectiva

Acest lucru face ca întregul cod al paginilor să fie mai ușor de citit nefiind nevoie să rescriem aceste secțiuni de fiecare dată când cream o pagină noua.
Intâlnim de asemenea și fișiere ce au ca scop introducerea a diverse funcționalități necesare în tema nou creata. De regulă aceste funcționalități sunt scrise intr-un un fișier numit functions.php. Acest fisier functions.php creează practic elementele ce țin de experiența utilizatorului pe care vrem să le introducem în temă. Spre exemplu dacă vrem ca temă să aibă un meniu, un sidebar sau o bară de căutare, acestea trebuiesc întâi configurate în acest fișier și după aceea invocate în paginile de șablon.

Pregatirea fisierelor

Pentru a începe să cream o temă nouă va trebui înainte de toate să ne gândim la un nume sugestiv și să avem pregătit un template. Primul lucru pe care îl facem în acest demers este să creăm un folder în care vom introduce treptat fișierele necesare pentru tema respectivă. Putem crea acest folder direct pe calculatorul nostru și ulterior să îl încărcăm arhivat cu extensiei .zip în folderul de teme al WordPress-ului urmând calea din panoul de control Cpanel sau prin FTP public_html/wp-content/themes.
Folderul în care vom pune fișierele teme nu este cel care va genera și numele implicit al temei, iar el poate fi diferit de acesta. El trebuie să fie sugestiv iar dacă este compus din mai mult de un cuvânt va trebui evitam spatiile libere prin inlocuirea acestora cu “_” sau “-“. Spre exemplu, daca vrem sa numim tema “scoala de vara”, vom folosi “scoala_de_vara” ca denumire a folderului.
După ce am creat acest folder putem începe cu introducerea fișierelor de bază in interiorul acestuia. In functie de tipul de site, putem opta pentru fisiere precum:
-style.css
-index.php
-front-page.php
-header.php
-footer.php
-single.php
-archive.php
-functions.php
-home.php
-sidebar.php
-search.php
-page.php
-comments.php
-404.php
-category.php
-taxonomy.php
-author.php

Importanta denumirilor fisierelor

Atunci cand creati pagini pentru tema dumneavoastra, este foarte important sa nu utilizati alte denumiri decat cele prezentate, pentru ca WordPress-ul preia automat continutul acestor pagini si il afiseaza acolo unde il invocati. Spre exemplu, ca sa adaugati un antet in toate paginile, veti utiliza functia get_header() care va cauta in folderul temei daca exista un fisier intitulat header.php, iar daca acesta exista va afisa automat continutul acestuia.Exista desigur, situatii in care puteti opta sa creati mai multe tipuri de anteturi de pagina, pentru diferite locuri din site. Acest lucru se poate realiza prin adaugarea unui slug in denumirea paginilor si in functiile de invocare.
Folosirea unui fisier header-doi.php va putea fi solicitat in alte pagini adaugand ca parametru pentru functia get_header() ultima parte a numelui paginii.

invocare header.php -> get_header();
invocare header-doi.php -> get_header("doi");

In continuarea vom prezenta fiecare din aceste pagini, ce sunt, la ce folosesc si cum pot fi personalizate.

Crearea temei

Bun, acum ca am creat un folder in care am adaugat cateva fisiere noi, acum va trebui sa introducem si continut si informatii despre tema in sine. Vom incepe cu deschiderea fisierului style.css. Pentru a spune WordPress-ului ca in acest folder este vorba de o tema, astfel incat acesta sa o afiseze in panoul principal de unde sa o putem activa si utilza, va trebui sa introducem urmatorul antet in pagina style.css:

/*
Theme Name: Scoala de vara
Theme URI: http://scoaladevara.site/
Author: Popescu Robert
Author URI: http://popescurobert.site/
Description: Aceasta este tema oficiala a Scolii de vara cu numele "x"
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Scoala de vara Romania
Tags */

Acest antet poate fi adaptat astfel:

  • in sectiunea Theme Name inlocuiti “Scoala de vara” cu numele temei pe care vreti sa o creati
  • dupa Theme URI treceti site-ul unde poate fi gasit tema (daca exista)
  • Author – numele dvs
  • Author URI – site-ul autorului (optional, daca exista)
  • Description – descrierea temei
  • Version – versiunea (daca veniti in timp cu actualizari, tema poate include o versiune mai noua, de exemplu 1.1 sau 2.0)
  • sectiunile Licence si Licence URI – in situatia in care detineti o licenta pentru utilizarea temei, aceasta va trebui mentionata aici
  • Text Domain – este necesar pentru a sugera daca tema este pentru uz local sau international. In cazul in care doriti sa o incarcati in depozitele WordPress, persoanele care o gasesc in cautari vor fi instiintati daca tema este adaptabila pentru traduceri sau nu.

Dupa ce ati adaugat acest antet vom observa ca tema incepe sa devina vizibila in pagina Aspect>teme din panoul WordPress. Insa decoamdata nu va face nimic daca o activa, intru-cat nu am adaugat nimic inca in continut.
Pentru a adauga o imagine temei in aceasta pagina va trebui sa introducem o imagine in folderul pe care l-am creat pe care sa o denumim screenshoot.jpg.

Vezi continuarea articolului aici.

Distribuie: