Cum creați un child theme WordPress pas cu pas

Cum creați un child theme WordPress pas cu pas

Cum creați un child theme WordPress pas cu pas este un subiect esențial pentru oricine dorește să personalizeze aspectul unui site fără a pierde modificările la actualizarea temei părinte.

Un child theme moștenește funcționalitățile temei principale și vă permite să adăugați sau să suprascrieți elemente în siguranță.

Cum creați un child theme WordPress pas cu pas

Un child theme este un subdirector în wp-content/themes/ care preia toate caracteristicile temei părinte. Când actualizați tema părinte, modificările dumneavoastră rămân intacte în child theme.

Această abordare este recomandată oficial de WordPress.org și este folosită de majoritatea dezvoltatorilor profesioniști.

De ce aveți nevoie de un child theme

Fără un child theme, orice modificare făcută direct în fișierele temei se pierde la prima actualizare. Aceasta include modificări CSS, funcții PHP personalizate și template-uri modificate.

Child theme-ul rezolvă această problemă permanent. Toate modificările dumneavoastră sunt stocate separat și supraviețuiesc oricărei actualizări.

Avantajele utilizării unui child theme

  • Modificările sunt protejate la actualizarea temei părinte
  • Puteți suprascrie orice template din tema principală
  • Debugging mai ușor, deoarece codul personalizat este separat
  • Posibilitatea de a reveni rapid la tema originală dezactivând child theme-ul
  • Organizarea mai bună a codului custom

Pasul 1: Crearea directorului child theme

Conectați-vă la server prin FTP sau folosiți File Manager din cPanel. Navigați la wp-content/themes/ și creați un director nou.

Numele directorului trebuie să fie descriptiv. Dacă tema părinte se numește „flavor”, creați directorul flavor-child.

wp-content/themes/flavor-child/

Acest director va conține toate fișierele personalizate ale child theme-ului dumneavoastră.

Pasul 2: Crearea fișierului style.css

Fișierul style.css este obligatoriu și conține headerul care identifică child theme-ul. Creați fișierul în directorul child theme:

/*
Theme Name: Flavor Child
Theme URI: https://site-ul-dvs.ro
Description: Child theme pentru tema Flavor
Author: Numele Dumneavoastră
Author URI: https://site-ul-dvs.ro
Template: flavor
Version: 1.0.0
Text Domain: flavor-child
*/

/* Stiluri personalizate aici */

Linia Template: flavor este cea mai importantă. Aceasta trebuie să corespundă exact numelui directorului temei părinte (cu litere mici).

Greșeli frecvente în style.css

Cea mai comună greșeală este scrierea incorectă a valorii Template. Aceasta trebuie să fie numele exact al directorului temei părinte, nu numele afișat.

Verificați numele directorului în wp-content/themes/ și copiați-l exact, inclusiv literele mari sau mici.

Pasul 3: Crearea fișierului functions.php

Fișierul functions.php din child theme încarcă stilurile temei părinte. Fără acest pas, site-ul va apărea fără stilizare.

<?php
/**
 * Functions child theme Flavor
 */

// Incarca stilurile temei parinte
function flavor_child_enqueue_styles() {
    wp_enqueue_style(
        'flavor-parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'flavor-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('flavor-parent-style'),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'flavor_child_enqueue_styles');

Funcția get_template_directory_uri() returnează URL-ul temei părinte, iar get_stylesheet_directory_uri() returnează URL-ul child theme-ului.

De ce nu folosim @import

Metoda veche cu @import url('../flavor/style.css'); în style.css este depășită. Aceasta adaugă o cerere HTTP suplimentară și încetinește încărcarea paginii.

Metoda cu wp_enqueue_style() este recomandarea oficială WordPress și permite gestionarea corectă a dependențelor între fișierele CSS.

Pasul 4: Activarea child theme-ului

Mergeți în panoul WordPress la Aspect > Teme. Veți vedea child theme-ul în lista de teme disponibile. Apăsați „Activează”.

Dacă child theme-ul nu apare, verificați fișierul style.css, în special linia Template. Asigurați-vă că nu există erori de sintaxă în functions.php.

Pasul 5: Suprascrierea template-urilor

Pentru a modifica un template din tema părinte, copiați fișierul din directorul temei părinte în child theme, păstrând aceeași structură de directoare.

De exemplu, pentru a modifica template-ul pentru pagina de articol singular:

# Copiati fisierul din tema parinte
cp wp-content/themes/flavor/single.php wp-content/themes/flavor-child/single.php

Modificați apoi copia din child theme. WordPress va folosi automat versiunea din child theme în locul celei din tema părinte.

Template-uri din subdirectoare

Dacă tema părinte are template-uri în subdirectoare (de exemplu, template-parts/header.php), creați aceeași structură în child theme:

wp-content/themes/flavor-child/template-parts/header.php

WordPress caută mai întâi în child theme. Dacă nu găsește fișierul, folosește versiunea din tema părinte.

Adăugarea de funcționalități noi

Fișierul functions.php din child theme este locul ideal pentru funcții personalizate. Spre deosebire de template-uri, functions.php din child theme nu îl suprascrie pe cel din tema părinte, ci se încarcă în plus.

// Adaugare widget area in footer
function flavor_child_widgets_init() {
    register_sidebar(array(
        'name'          => 'Footer Extra',
        'id'            => 'footer-extra',
        'description'   => 'Zona de widget-uri suplimentara in footer',
        'before_widget' => '<div class="footer-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4>',
        'after_title'   => '</h4>',
    ));
}
add_action('widgets_init', 'flavor_child_widgets_init');

Eliminarea funcțiilor din tema părinte

Dacă tema părinte folosește funcții atașate la hook-uri cu add_action(), le puteți elimina din child theme:

function flavor_child_remove_parent_functions() {
    remove_action('wp_footer', 'flavor_credits');
}
add_action('after_setup_theme', 'flavor_child_remove_parent_functions');

Aceasta funcționează doar dacă funcția din tema părinte nu este definită într-o clasă sau într-o funcție anonimă.

Personalizarea CSS în child theme

Adăugați regulile CSS personalizate în style.css al child theme-ului, după headerul obligatoriu. Stilurile din child theme se încarcă după cele din tema părinte, deci le suprascriu automat.

/* Personalizare culori */
.site-header {
    background-color: #1b2028;
}

.site-title a {
    color: #ccac65;
    text-decoration: none;
}

/* Ajustare fonturi */
body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

Crearea child theme-ului cu WP-CLI

Dacă aveți acces SSH la server, puteți crea un child theme rapid cu WP-CLI:

wp scaffold child-theme flavor-child --parent_theme=flavor --theme_name="Flavor Child" --activate

Această comandă creează automat directorul, style.css și functions.php cu toate setările corecte.

Bune practici pentru child theme-uri

  • Păstrați child theme-ul cât mai simplu, suprascriind doar ce este necesar
  • Comentați fiecare modificare pentru referință viitoare
  • Testați child theme-ul după fiecare actualizare a temei părinte
  • Folosiți un sistem de versionare (Git) pentru a urmări modificările
  • Nu duplicați cod din tema părinte dacă nu îl modificați
  • Prefixați funcțiile cu numele child theme-ului pentru a evita conflictele

Depanarea problemelor comune

Site-ul apare fără stiluri

Verificați funcția de enqueue din functions.php. Asigurați-vă că handle-ul CSS al temei părinte este corect. Inspectați codul sursă al paginii pentru a verifica dacă fișierul CSS se încarcă.

Template-ul suprascris nu funcționează

Verificați că numele fișierului și calea sunt identice cu cele din tema părinte. WordPress este sensibil la majuscule în numele fișierelor pe serverele Linux.

Concluzii

Crearea unui child theme este un proces simplu care vă protejează modificările pe termen lung. Urmați pașii din acest ghid și veți avea o bază solidă pentru personalizarea oricărei teme WordPress.

Dacă aveți nevoie de asistență cu personalizarea temei WordPress sau cu optimizarea WordPress, echipa SEODNS vă stă la dispoziție. Vizitați pagina de servicii sau contactați-ne direct.