Development

Tutorial WordPress – Cum creezi o temă de WordPress de la zero?

cum-creezi-o-tema-custom

CMS-ul WordPress este probabil cel mai simplu de înțeles și folosit dintre cele care există momentan. Acest lucru se datorează și modului în care a fost dezvoltat de-a lungul anilor și faptului că este open source și foarte customizabil.

Așadar, fără cunoștiințe PHP îți poți dezvolta propria temă de WordPress, extrem de simplă bineînțeles, dar na…pune și învață PHP dacă vrei mai mult.

Structura unei teme WordPress

Poți începe prin folosirea site-ului underscores.me pentru generarea temei cu toate fișierele necesare. Acolo trebuie să introduci un nume pentru noua temă și să apeși butonul Generate. Ce face mai exact acest site? Îți generează o arhivă cu toate fișierele necesare unei teme de WordPress, dar care în fișierul style.css a scris următoarele linii în comentariu:

/*
Theme Name: mythemename
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
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: mythemename
Tags  */

Mai sunt și alte modificări, dar fără acest comentariu în fișierul style.css tema va apărea broken în WordPress și nu va putea fi utilizată. Arhiva trebuie urcată și activată în WordPress.

Fișierele unei teme WordPress

  1. 404.php – Template-ul paginii de eroare 404
  2. archive.php – Template-ul paginii de arhivă, practic un listing de posts
  3. comments.php – Template-ul secțiunii de comentarii
  4. footer.php – Footer-ul site-ului, de obicei include un sidebar in care se adauga widgets
  5. functions.php – Fișierul unde sunt salvate funcțiile custom ale temei
  6. header.php – Header-ul site-ului, include meniul, logo-ul
  7. index.php – Default, este prima pagină, dar template-ul primei pagini poate fi schimbat prin mai multe modalități
  8. page.php – Template-ul unei pagini (Page/Pagină din panoul de administrare)
  9. search.php – Template-ul paginii de rezultate al căutării
  10. sidebar.php – Template-ul secțiunii de sidebar în care adaugi widgets
  11. single.php – Template-ul unui Post (Post/Articol din panoul de administrare)
  12. content.php – Conținutul din template-uri. Aici e mai complicată treaba, de obicei difera la fiecare post-type*.
  13. style.css – Fișierul cu toate regulile CSS care dau viață temei.

Cele de sus sunt cele mai importante fișiere și sunt prezente și în tema proaspăt generată. Pe lângă ele în alte teme veți găsi și multe multe fișiere PHP specifice WordPress:

  • author.php – Template pentru pagina de autor
  • attachment.php – Template pentru pagina unui attachment
  • image.php – Template pentru pagina unei imagini
  • front-page.php – Devine automat prima pagină a website-ului
  • home.php – Blog posts index template
  • single-{post-type}.php, – Template pentru orice custom post
  • category.php – Template pentru pagina de listing după categorie
  • tag.php – Template pentru pagina de listing după tag
  • taxonomy.php – Template pentru pagina de listing după o taxonomie
  • + altele făcute custom de developerii temelor respective.

În cazul categoriilor, ierarhia după care se folosesc template-urile php este următoarea:

  1. category-slug.php
  2. category-ID.php
  3. category.php
  4. archive.php
  5. index.php

Practic în afișarea unei categorii WordPress-ul caută fișierele în ordinea enumerată mai sus. Dacă nu găsește un fișier trece mai departe până afișează un template.

În cazul tagurilor, situația este aceeași:

  1. tag-slug.php
  2. tag-id.php
  3. tag.php
  4. archive.php
  5. index.php

În cazul taxonomiilor, situația se schimbă puțin:

  1. taxonomy-{taxonomy}-{term}.php
  2. taxonomy-{taxonomy}.php
  3. taxonomy.php
  4. archive.php
  5. index.php

Toate aceste fișiere conțin cod HTML și funcții WordPress pe care le găsiți în Codex. Funcțiile nu fac altceva decât să aducă sau să afișeze informațiile stocate în baza de date prin panoul de administrare. Dacă vă întrebați vreodată unde găsiți un anumit element din tema voastră ați putea intui bazat pe listarea de mai sus, sau puteți folosi plugin-ul What the file care vă va arăta în bara de WordPress, toate fișierele care se încarcă pe pagina curentă. Alte module utile găsiți aici.

Structura unei pagini default:

 

wordpress-basic-structure

 

Cum se includ fișiere CSS și JS suplimentare?

Prin adăugarea următoarelor linii de cod în fișierul functions.php, cu modificările de rigoare.

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

 

Sfat rapid: Nu lăsați rânduri goale la sfârșitul fișierelor php, în special în fișierul functions.php

Propun să incluzi Bootstrap și să te apuci de treabă, în momentul în care ai tema activată îți trebuie cunoștințe HTML și CSS pentru a crea cu adevărat un site în WordPress. Ca să dezvolți o temă de calitate, ai nevoie de un design bun, responsive  și să respecți toate regulile impuse de comunitate. Poți verifica tema folosind un plugin de Theme Check.

Dacă vă pot ajuta cu ceva lăsați-mi un mesaj în formularul de mai jos, sau un comentariu în secțiunea de comentarii.

Nume

Adresa de email

Problema

Now it’s Time to Get to Work!

Sper că ți-a plăcut. Apreciez dacă îl distribui. Mulțumesc și te mai aștept!

E gratuit și nu stai la coadă

Vei primi newsletter săptămânal, nu uita să confirmi înscrierea pe e-mail

Sau dă like pe Facebook

Lasă un comentariu

Comentariul tău*

Numele tău*
Site-ul tău