Creeaza o tema personalizata in WordPress de la zero

Iti doresti sa creezi o tema WordPress de la zero? Te simti coplesit/a de varietatea informatiilor gasite pe internet?

Crearea unei teme personalizate WordPress necesita creativitate, dar si cunostinte de baza in HTML si CSS. De asemenea, e important sa intelegi si cum gandeste consumatorul, astfel incat site-ul WordPress sa fie cat mai usor de folosit.

Cu cat tema va fi mai friendly pentru vizitatori, cu atat cresc sansele ca acestia sa devina clientii business-ului, rezultand o tema de succes.

Crearea unui folder nou

Ca si un prim pas in realizarea unei teme personalizate WordPress, este alcatuirea unui folder in folderul wp-content/themes din WordPress. Iti vei da seama ca esti in locul potrivit atunci cand vei observa folderele cu temele implicite ale WordPress-ului.

De retinut! E important ca toate temele sa fie plasate in acest folder, la fel cum toate plugin-urile sunt asezate in folderul cu plugin-uri.

In ceea ce priveste numele folderului, e recomandat sa fie acelasi cu numele temei. Daca numele contine mai mult de un singur cuvant, foloseste semnul minus in loc de spatiu si foloseste litere mici. De exemplu, daca numele temei e The Blue Theme, folderul s-ar numi wp-content/theme/the-blue-theme.

Creaza un fisier nou in folderul temei

In folderul temei alcatuieste un fisier nou care sa se numeasca style.css. Acest lucru il poti efectua cu un simplu editor text ca si Notepad, sau poti folosi si ceva mai avansat ca si Sublime Text.

Dupa crearea acestui fisier e necesar sa adaugi un header, un stylesheet header pentru acest fisier. In acest fel, WordPress primeste toate informatiile necesare despre tema ta, de la nume, autor, licenta.

Aici trebuie introdus codul:


/*
Theme Name: My New Theme
Theme URI: https://your-website.come/my-new-theme/
Author: Your WordPress.org Username (or Real Name)
Author URI: https://your-website.com/
Description: A basic WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: basic, blog, right-sidebar
Text Domain: my-new-theme
*/


Alcatuieste un alt fisier nou cu editorul de text

Ca si un al treilea pas in realizarea unei teme personalizate WordPress, alcatuieste un fisier nou cu ajutorul editorului de text si numeste-l index.php, deoarece cele mai simpliste teme WordPress au nevoie de doar doua fisiere pentru a functiona: index.php si style.css.

Dupa acesti pasi, poti merge la Apperance in WordPress si iti poti activa tema noua. Deoarece nu e nimic aaugat in index.php, tema e acum o pagina alba.

Creeaza structura HTML in index.php

Pentru ca browserul sa iti poata reda tema si continutul acesteia, e nevoie sa adaugi de elemente de HTML sau basic markup in fisierul index.php.

In cod se vor gasi parti de PHP care se numesc template tags; acestea fiind esentiale in dezvoltarea temei. Acestea permit WordPress-ului sa acceseze orice informatii sunt necesare si chiar si ce actiune vrei sa dezvolti.

Extrage antentul si subsolul din index.php

WordPress prezinta flexibilitate in ceea ce privesc template-urile, ceea ce face ca procesul de dezvoltare al temelor WordPress sa fie mult mai usor. Fiecare tema WordPress se imparte in cel putin 3 fisiere diferite, asa incat sunt destul de rare cazurile in care gasesti o tema sa aibe toate elementele de markup intr-un singur fisier.

Mai exact, antentul se salveaza in header.php, subsolul in footer.php, iar restul ramanand in index.php.

Adauga Loop

Loop este codul folosit pentru a afisa postarile din WordPress. Acest cod functioneaza in mai multe etape. In prima etapa se verifica daca exista postari. In cazul in care sunt postari, WordPress este instructionat sa adune datele pentru fiecare postare (autor, continut, data, titlu, etc) si sa o faca disponibila pentru tine, astfel ca tu sa poti lucra cu aceste date.

In cazul in care alte postari nu se mai gasesc sau nu exista postarii, codul loop te informeaza si se incheie procesul.

Nu uita de stilizare

Stilul pe care il alegi pentru tema ta personalizata e un pas important, intrucat intr-o oarecare masura prezinta felul business-ului sau blog-ului. Stilul se refera la fontul pe care alegi sa il folosesti, culoarea de background, alinierea textului, si multe altele.

Pentru a adauga stilizare temei tale ai nevoie de fisierul style.css in care vei copia si adauga codul tau CSS.

Daca iti doresti sa inveti programare web de la zero, dar nu numai, gasesti datele mele de contact aici!

Anunțuri

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s