Dezvoltare teme custom

Template Hierarchy este sistemul prin care WordPress determină ce fișier template să folosească pentru fiecare tip de pagină. Înțelegerea acestei ierarhii este esențială pentru dezvoltarea temelor.

Ierarhia simplificată:

Pagina de start:
front-page.php → home.php → index.php

Articol singular:
single-{post-type}-{slug}.php → single-{post-type}.php → single.php → singular.php → index.php

Pagină:
{template-custom}.php → page-{slug}.php → page-{id}.php → page.php → singular.php → index.php

Categorie:
category-{slug}.php → category-{id}.php → category.php → archive.php → index.php

Tag:
tag-{slug}.php → tag-{id}.php → tag.php → archive.php → index.php

Taxonomie custom:
taxonomy-{taxonomy}-{term}.php → taxonomy-{taxonomy}.php → taxonomy.php → archive.php → index.php

Autor:
author-{nicename}.php → author-{id}.php → author.php → archive.php → index.php

Arhivă dată:
date.php → archive.php → index.php

Căutare:
search.php → index.php

404:
404.php → index.php

Atașament:
{mime-type}.php → attachment.php → single-attachment.php → single.php → index.php

Un child theme moștenește funcționalitățile și stilurile temei părinte, permițând personalizări fără a modifica tema originală.

Structura minimă child theme:

tema-copil/
├── style.css          ← Obligatoriu: meta + stiluri custom
├── functions.php      ← Obligatoriu: enqueue stiluri părinte
└── template-parts/    ← Opțional: override template-uri specifice

style.css - child theme:

/*
Theme Name:   Tema GOAI Child
Template:     tema-parinte
Description:  Child theme pentru Tema Părinte
Author:       GOAI
Version:      1.0.0
*/

/* Stiluri custom aici */

functions.php - child theme:

<?php
// Încărcare stiluri tema părinte + child
function goai_child_enqueue_styles() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'parent-style' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'goai_child_enqueue_styles' );

Full Site Editing este paradigma modernă în WordPress (de la 5.9+). Permite editarea întregului site din editorul de blocuri, inclusiv header, footer și template-uri.

Structura unui block theme:

tema-block/
├── style.css
├── functions.php
├── theme.json            ← Configurare globală (culori, fonturi, spacing)
├── templates/            ← Template-uri HTML (blocuri)
│   ├── index.html
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   ├── 404.html
│   └── search.html
├── parts/                ← Părți reutilizabile
│   ├── header.html
│   ├── footer.html
│   └── sidebar.html
└── patterns/             ← Block patterns predefinite
└── hero.php

Exemplu theme.json:

{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "primary", "color": "#ccac65", "name": "Gold" },
{ "slug": "secondary", "color": "#01ce4c", "name": "Green" },
{ "slug": "dark", "color": "#1b2028", "name": "Dark" }
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "'Segoe UI', sans-serif",
"slug": "primary",
"name": "Primary"
}
],
"fontSizes": [
{ "slug": "small", "size": "0.875rem", "name": "Small" },
{ "slug": "medium", "size": "1rem", "name": "Medium" },
{ "slug": "large", "size": "1.5rem", "name": "Large" }
]
},
"layout": { "contentSize": "800px", "wideSize": "1200px" }
}
}