Ei bine, cu toate că sunt mii de teme gratuite si alte mii premium, de multe ori dorim personalizarea acestora. E firesc să avem un site ce conține schema de culori a brand-ului nostru și care nu arată ca alte site-uri ce utilizează aceeași temă.

WordPress Child Theme sau tema copil WordPress este o temă ce permite modificarea, în siguranță, a codului temei pe care o utilizezi. Dacă modifici cod direct în tema părinte, la actualizare pierzi modificările făcute deoarece se înlocuiesc toate fișierele temei.

De aceea, WordPress Codex recomandă utilizarea unei teme copil care păstrează toate modificările făcute, fără ca acestea să fie suprascrise de actualizări.

Ce e nevoie să știi despre tema copil înainte de utilizare

• Tema copil WordPress nu funcționează fără tema părinte, moștenește stilul și funcționalitățile acesteia. O temă copil are nevoie de minim fișierul style.css sau poate fi complexă, având toate fișierele temei părinte modificate și fișiere nou create pentru funcționalități specifice.
• Tema părinte instalată rămâne inactivă.
• Tema copil este instalată și activată. Dacă dezactivezi tema copil, se va activa tema părinte și site-ul tău va avea design-ul inițial.
• Unele elemente de pe site s-ar putea să dispară în momentul activării temei copil. Nu intra în panică, ele există doar că nu mai sunt configurate. Cazurile des întâlnite de mine sunt: dispariția meniurilor și widgeturilor. La meniuri nu mai este găsită locația, iar widgeturile devin inactive datorită inexistenței zonei în care apare widget-ul.
• Tema copil este creată de persoane care știu ce fac 🙂 Trebuie să ai cunoștințe minime de HTML, CSS pentru modificare design și cunoștințe minime de PHP și funcții WordPress pentru modificare structură pagină si funcționalități. Există și conceptul „copy-paste fără să știu ce fac”, bun pentru a învăța din greșeli.
• Cu ajutorul temei copil mărești gradul de personalizare a unei teme, aproape 100%, în funcție de ce dorești să modifici.

De exemplu, dacă folosești framework-ul Genesis este obligatorie o temă copil. Temele copil se cumpără, deci nu e nevoie să le creezi tu. Tema WPTut.ro este o temă copil Genesis, personalizată.

Pași pentru crearea unei teme copil

Tema copil WordPress are nevoie de o temă părinte. Voi crea tema copil pentru tema părinte Twenty Sixteen.

Pas 1. Intră în structura de directoare WordPress, prin FTP sau în File Manager din cPanel și creează în /wp-content/themes/ folderul tema-copil.

Pas 2. Intră în directorul tema-copil și creeaza fișierul style.css. Acesta este singurul fișier obligatoriu al unei teme copil.

Pas 3. Tot in /wp-content/themes/tema-copil/ creează fișierul functions.php. Acest fișier are rolul inițial de a insera corect în temă fișierul style.css.

Pas 4. Fișierul style.css începe cu un comentariu care este foarte important pentru validarea temei copil.

/*
 Theme Name:   Tema copil Twenty Sixteen
 Theme URI:    http://wptut.ro
 Description:  Tema copil Twenty Sixteen
 Author:       Gina Crainic
 Author URI:   http://wptut.ro
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  tema-copil
*/

Cel mai important element din acest comentariu este Template: twentysixteen și corespunde denumirii directorului temei părinte: /wp-content/themes/twentysixteen/.

Pas 5. Fișierul functions.php trebuie să conțină o funcție ce include fișierul style.css:

<?php
//functia ce include fisierele style.css din tema parinte si tema copil

function stiluri_incluse_in_tema() {

    $parent_style = 'parent-style'; // stilul este 'twentysixteen-style' pentru tema Twenty Sixteen.

    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', 'stiluri_incluse_in_tema' );

Astfel, stilul temei copil se va încărca după cel al temei părinte, așa cum e firesc. Versiunea adăugată stilului CSS a temei copil, asigură încărcarea imediată a stilurilor, cache-ul fiind șters.

Pas 6. Activarea temei copil din Aspect -> Teme. Pentru ca tema copil să aibă imagine în Panoul de control, se mai adaugă în /wp-content/themes/tema-copil/ fișierul screenshot.png.

Pas 7. Reconfigurarea elementelor care au „dispărut”, respectiv meniuri, opțiuni ale temei sau widget-uri (piese).

Concluzie

Tema copil WordPress nu este greu de configurat inițial, dar necesită cunoștințe minime de programare sau cel puțin de cunoașterea limbajului de stil CSS. Aceasta este utilizată doar cu scopul de a modifica o temă părinte sau de a integra în design pluginuri (module).

Într-un articol viitor îți voi prezenta modificările făcute în tema Twenty Sixteen.