Incepand cu versiunea 3.4, WordPress ofera posibilitatea de a personaliza o tema activa direct din panoul de control prin intermediul uni API, fara a fi nevoie de a scrie neaparat vreo linie de cod.
De altfel, personalizarea unei teme WordPress trebuie sa vina la pachet si cu implementarea unor optiuni prin intermediul carora utilizatori logati la site sa poata modifica cu usurinta tema fara a fi necesar ca acestia sa aibe cunostiinte de PHP, HTML, JAVASCRIPT, etc.
Daca sunteti un dezvoltator WordPress atunci cu siguranta veti intalni situatii in care clientii va vor solicita sa adaugati astfel de optiuni pentru tema custom creata. Totodata, aceaste optiuni vor trebui sa corespunda nevoilor clientilor oferindu-le acestora posibilitatea de a-si putea modifica singuri diverse sectiuni ale site-ului dupa caz.

In continuarea acestui articol va vom arata cum sa creati optiuni noi de setari pentru panoul de personalizare a temei.

Cum sunt structurate optiunile de personalizare a unei teme?

Toate elementele ce tin de aceasta pagina sunt create implicit prin intermediul obiectului $wp_cutomize. Panoul existent este implementat atribuind un hook de actiune obiectului $wp_cutomize, respectiv add_panel(‘hook-ul de care ne legam’, ‘optiunile necesare’).
In interiorul meniului creat implicit de WordPress prin functia add_panel, pot exista sau pot fi create urmatoarele elemente:

• sectiuni
• setari
• controale

Pentru a intelege cum functioneaza acestea, puteti vedea imaginea de mai jos:

Pentru a explica cat mai bine metodele prin care pot fi create aceste noi sectiuni, alaturi de setarile si controalele necesare, vom exemplifica in continuarea articolului prin intermediul catorva linii de cod.

Setari implicite

Pentru a accesa pagina de personalizare, va trebui sa selectam din meniul panoului de control optiunile Aspect>Personalizare. Chiar daca este vorba de o tema nou creata sau de o tema copil, WordPress va oferii implicit in aceasta pagina sectiuni legate de urmatoarele aspecte:

• title_tagline (ofera posibilitatea editarii titlului site-ului si favicon-ului)
• colors (personalizarea culorilor a anumitor elemente din sectiunea de antet si subsol)
• Background_image (schimbarea fundalului paginilor, prin intermediul tagului )
• nav (optiuni de baza pentru personalizarea meniului principal)
• header_image (posibilitatea atribuirii unui fundal de imaginie pentru sectiunea de antet)

Ce sunt sectiunile?

Sectiunile sunt niste sub file ale paginii de personalizare in cadrul caruia putem adauga diverse setari sau controale pentru personalizarea temei.

Crearea unor sectiuni

Inainte de a incepe, trebui stiut ca posibilitatea de manipularea a meniului de personalizare se realizeaza prin intermediul hook-ului ‘customize_register’, care, modifica obiectul $wp_customize. Codul necesar pentru implementarea acestor optiuni va putea fi scris intr-un fisier nou, intitulat customize.php. Pentru a putea ‘lega’ continutul acestei pagini de panoul WordPress, vom introduce in fisierul functions.php urmatorul cod:

include_once('customize.php');

Pentru a adauga o noua sectiune, vom crea in fisierul customize.php o functie in care vom incepe sa adaugam codul personalizat, atribuindu-i acestuia ca argument obiectul $wp_customize. Vom denumi aceasta functie ‘setari_customizare’, insa poate avea orice alta denumire. Inainte de a crea functia vom apela carligul ‘customize_register’ caruia ii vom atribui functia creata de noi.

add_action('customize_register', 'setari_customizare');
function setari_customizare ($wp_customize) {
		// aici va fi introdus codul
}

In interiorul functiei, sa presupunem ca dorim sa cream o sectiune in care sa putem opta pentru selectarea unor culori pentru fundalul anumitor parti ale site-ului. In exemplul dat, vom numi aceasta sectiune ‘Setari Tema’.

$wp_customize->add_section(
        'Culori_pentru_Website',
        array(
            'title' => 'Setari Tema', //titlu
            'priority' =>  30 //ordinea in meniul de personalizare
            )
        );

Dupa ce salvam fisierul putem vedea ca in meniul de personalizare va aparea sectiunea trecuta.

Crearea unor setari si controale

Odata creata sectiunea, in interiorul functiei ‘setari_customizare’ putem incepe adaugarea unor setari. Pentru prima setare, vom incerca sa modificam culoarea de fundal a meniului din sectiunea de antet. Vom denumi setarea ‘menu_background_color’, dupa cum urmeaza:

//schimbare fundal navbar
        $wp_customize->add_setting(
            'menu_background_color',
            array(
                'default'=>'#FFA500',
                'transport'=>'refresh' //update fara sa dai refresh la pagina
            )
            );

Elementul ‘transport’ va afisa modificarile facut in timp real in pagina atunci cand are valoarea ‘refresh’. Astfel, nu va fi nevoie de a reincarca pagina in browser dupa fiecare modificare facuta. De asemenea, ‘default’ ne ofera posibilitatea de a opta pentru o culoare implicita.

In continuare vom crea si un controler pentru aceasta setare:

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'menu_background_color', array(
            'label'        => 'Navbar background color',
            'section'    => 'Culori_pentru_Website',
            'settings'   => 'menu_background_color',
        ) ) );

Acum, ca am creat aceasta setare caruia i-am atribuit si un controler, va trebui sa o legam de clasa CSS a navbar-ului prin crearea unei noi functii:

add_action('wp_head', 'culori_customizare');
function culori_customizare() {
?>
<style>
    .ast-primary-header-bar {
        background-color: <?php echo get_theme_mod('menu_background_color', '#FFA500'); ?>;
</style>
<?php
    }
}

Prin acest cod, ne vom lega de fisierul header.php prin intermediul hook-ului ‘wp_head’ carui ii atribuim continutul funtiei culori_customizare(). In interiorul acestei functii, ii conectam clasa CSS a barei de navigatie cu setarea ‘menu_background_color’ pe care am creat-o mai devreme. Codul complet va arata asa:

add_action('customize_register', 'setari_customizare');
function setari_customizare ($wp_customize) {
		$wp_customize->add_section(
        'Culori_pentru_Website',
        array(
            'title' => 'Setari Tema', //titlu
            'priority' =>  30 //ordinea in meniul de personalizare
            )
        );


//schimbare fundal navbar
        $wp_customize->add_setting(
            'menu_background_color',
            array(
                'default'=>'#FFA500',
                'transport'=>'refresh' //update fara sa dai refresh la pagina
            )
            );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'menu_background_color', array(
            'label'        => 'Navbar background color',
            'section'    => 'Culori_pentru_Website',
            'settings'   => 'menu_background_color',
        ) ) );
}

add_action('wp_head', 'culori_customizare');
function culori_customizare() {
?>
<style>
    .ast-primary-header-bar {
        background-color: <?php echo get_theme_mod('menu_background_color', '#FFA500'); ?>;
</style>
<?php
    }
}

Pentru a edita anumite texte din site, utilizam in continuare in interiorul functiei ‘setari_customizare’ urmatorul cod:

//setari text 
            $wp_customize->add_setting(
                'descriere_text',
                array(
                    'default'   =>  'Lore ipsum ...',
                    'transport' =>  'refresh'
                )
            );


            //adaugare input text
            $wp_customize->add_control(
                'descriere_text', 
                 array(
                     'type'          => 'text',
                     'label'         => 'Descriere Site Footer',
                     'section'       => 'Culori_pentru_Website',
                     'settings'      => 'descriere_text',
                 ) 
         );

Prin intermediul acestui cod, cream o setare pe care o numim ‘descriere_text’. La fel ca si la setarea pentru culori creata anterior, avem optiunile ‘default’ si ‘transport’. Acum, pentru a putea realiza modificarile din acest panou, va trebui sa inlocuim in codul temei textul pe care dorim sa il inlocuim cu:

<?php echo <?php echo esc_url( get_theme_mod( 'descriere_text' ) ); ?>">

In continuare, putem adauga diverse setari, in functie de necesitatea proiectului!