WordPress temų kūrimas

Kas iš tikrųjų slepiasi po WordPress tema

Daugelis žmonių galvoja, kad WordPress tema – tai tiesiog keli CSS failai ir šiek tiek PHP. Iš dalies tiesa, bet tik iš dalies. Kai pradedi gilintis, supranti, kad tema yra pilnavertė programinė sistema, kuri kontroliuoja viską – nuo to, kaip atrodo antraštė, iki to, kaip WordPress žino, kurį šabloną rodyti konkrečiam puslapiui.

Minimaliai veikianti WordPress tema reikalauja tik dviejų failų: style.css ir index.php. Tai faktas. Bet jei nori sukurti kažką, kas realiai veiktų gamybinėje aplinkoje ir nebūtų košmaras palaikyti – reikia žymiai daugiau. Reikia suprasti šablonų hierarchiją, hook’ų sistemą, functions.php logiką ir dar daugybę dalykų, kurie iš pirmo žvilgsnio neatrodo svarbūs.

Šiame straipsnyje eisime nuo pagrindų iki realių sprendimų. Ne teoriškai, o praktiškai – su konkrečiais kodo pavyzdžiais ir patarimais, kuriuos galima iš karto panaudoti.

Aplinkos paruošimas ir projekto struktūra

Prieš rašant pirmą kodo eilutę, reikia turėti tinkamą darbo aplinką. Čia daugelis pradedančiųjų daro klaidą – dirba tiesiai su gyvuoju serveriu. To nereikėtų daryti niekada. Lokaliai paleista WordPress instaliacija sutaupo laiko ir nervų.

Geriausi įrankiai lokaliai aplinkai:

• LocalWP – paprasčiausias variantas, veikia be jokių konfigūracijų, tinka pradedantiesiems
• DDEV – lankstesnis, tinkamas tiems, kurie jau moka Docker
• Valet (macOS) – greitas ir lengvas, bet reikia šiek tiek rankinio darbo
• XAMPP / MAMP – klasika, veikia, bet jau šiek tiek pasenę

Kai aplinka paruošta, temos failų struktūra turėtų atrodyti maždaug taip:

/wp-content/themes/mano-tema/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── 404.php
├── search.php
├── /assets/
│   ├── /css/
│   ├── /js/
│   └── /images/
├── /template-parts/
│   ├── content.php
│   ├── content-single.php
│   └── content-none.php
└── /inc/
    ├── customizer.php
    ├── template-functions.php
    └── enqueue.php

Ši struktūra nėra privaloma, bet ji atspindi gerą praktiką. /inc/ katalogas leidžia išskaidyti functions.php į smulkesnius, labiau valdomus failus. /template-parts/ – tai pakartotinai naudojami šablono fragmentai, kuriuos kviečiame per get_template_part().

Svarbus dalykas apie style.css – jo viršuje būtina turėti komentarų bloką, kuris identifikuoja temą:

/*
Theme Name: Mano Tema
Theme URI: https://example.com
Author: Jonas Jonaitis
Author URI: https://jonaitis.lt
Description: Mano pirmoji tema
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: mano-tema
*/

Be šio bloko WordPress tiesiog neatpažins temos.

Šablonų hierarchija – WordPress logika, kurią būtina suprasti

Šablonų hierarchija yra vienas svarbiausių konceptų WordPress temų kūrime. Kai vartotojas atidaro kokį nors puslapį, WordPress eina per tam tikrą failų sąrašą ir ieško, kurį šabloną naudoti. Jei neranda konkretesnio – naudoja bendresnį. Jei neranda nieko – naudoja index.php.

Pavyzdžiui, kai atidaro įrašą (post), WordPress ieško tokia tvarka:

1. single-{post-type}-{slug}.php – pvz., single-post-hello-world.php
2. single-{post-type}.php – pvz., single-post.php
3. single.php
4. singular.php
5. index.php

Ši logika leidžia sukurti labai granuliarią kontrolę. Jei turi custom post type „produktai” ir nori, kad vienas konkretus produktas atrodytų kitaip – tiesiog sukuri failą su tinkamu pavadinimu.

Kategorijų puslapiams hierarchija atrodo taip:

1. category-{slug}.php
2. category-{id}.php
3. category.php
4. archive.php
5. index.php

Praktinis patarimas: oficiali WordPress dokumentacija turi interaktyvią diagramą, kuri vizualiai parodo visą hierarchiją. Ją verta atsidaryti atskirame lange kūrimo metu.

Viena dažna klaida – bandyti viską sutalpinti į index.php naudojant daugybę if/else sąlygų. Taip galima, bet tai tampa košmaru. Geriau naudoti hierarchiją taip, kaip ji skirta naudoti.

functions.php – temos smegenys

Jei tema turi vieną failą, kuris daro daugiausia darbo, tai yra functions.php. Čia registruojami meniu, widget’ai, palaikomos funkcijos, čia prijungiami stiliai ir skriptai, čia modifikuojamas WordPress elgesys per hook’us.

Pradėkime nuo to, kaip teisingai prijungti stilius ir skriptus. Daugelis pradedančiųjų tiesiog įdeda <link> tiesiai į header.php. Tai veikia, bet yra blogai – taip prarandama WordPress enqueue sistema, kuri sprendžia priklausomybes ir vengia dubliavimosi.

function mano_tema_enqueue_scripts() {
    // Pagrindinis stilius
    wp_enqueue_style(
        'mano-tema-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );

    // Papildomas CSS failas
    wp_enqueue_style(
        'mano-tema-main',
        get_template_directory_uri() . '/assets/css/main.css',
        array('mano-tema-style'),
        '1.0.0'
    );

    // JavaScript
    wp_enqueue_script(
        'mano-tema-scripts',
        get_template_directory_uri() . '/assets/js/main.js',
        array('jquery'),
        '1.0.0',
        true // true = įkelti prieš 
    );
}
add_action('wp_enqueue_scripts', 'mano_tema_enqueue_scripts');

Temos palaikomų funkcijų registracija – kitas svarbus žingsnis. WordPress turi daug funkcijų, kurios nėra įjungtos pagal nutylėjimą ir turi būti deklaruotos:

function mano_tema_setup() {
    // Automatiniai feed'ai
    add_theme_support('automatic-feed-links');

    // Dokumento pavadinimas per WordPress
    add_theme_support('title-tag');

    // Paveikslėliai įrašuose
    add_theme_support('post-thumbnails');

    // HTML5 žymėjimas
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
        'style',
        'script'
    ));

    // Meniu registracija
    register_nav_menus(array(
        'primary' => __('Pagrindinis meniu', 'mano-tema'),
        'footer'  => __('Apatinis meniu', 'mano-tema'),
    ));

    // Vertimų palaikymas
    load_theme_textdomain('mano-tema', get_template_directory() . '/languages');
}
add_action('after_setup_theme', 'mano_tema_setup');

Svarbu naudoti after_setup_theme hook’ą, o ne init – taip užtikrinama, kad child tema galės perrašyti šiuos nustatymus.

Dar vienas dalykas, kurį verta žinoti apie functions.php – jis gali greitai tapti dideliu ir netvarkingu. Geriau jį išskaidyti:

// functions.php
require get_template_directory() . '/inc/enqueue.php';
require get_template_directory() . '/inc/customizer.php';
require get_template_directory() . '/inc/template-functions.php';
require get_template_directory() . '/inc/widgets.php';

Hook’ai ir filtrai – WordPress galios šaltinis

Hook’ai yra tai, kas daro WordPress tokį lankstų. Yra du tipai: actions (veiksmai) ir filters (filtrai). Skirtumas paprastas: action hook’ai leidžia įterpti kodą tam tikru momentu, filter hook’ai leidžia modifikuoti duomenis prieš juos naudojant.

Pavyzdys su action:

// Pridėti kažką po įrašo turinio
function mano_tema_after_post_content() {
    if (is_single()) {
        echo '<div class="share-buttons">';
        echo '<p>Pasidalink šiuo įrašu!</p>';
        echo '</div>';
    }
}
add_action('the_content', 'mano_tema_after_post_content');

Pavyzdys su filter:

// Modifikuoti įrašo turinį
function mano_tema_content_filter($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        $content = '<div class="post-content-wrapper">' . $content . '</div>';
    }
    return $content;
}
add_filter('the_content', 'mano_tema_content_filter');

Labai svarbu su filtrais visada grąžinti $content – jei pamiršti return, turinys tiesiog išnyksta.

Keli praktiškai naudingi hook’ai, kuriuos verta žinoti:

• wp_head – prieš </head>, naudojamas meta tagams, inline stiliams
• wp_footer – prieš </body>, naudojamas skriptams, tracking kodams
• the_content – turinio modifikavimui
• wp_nav_menu_items – meniu elementų modifikavimui
• body_class – papildomų klasių pridėjimui prie body elemento
• excerpt_length – ištraukos ilgio keitimui

Viena dažna klaida – naudoti per aukštą prioritetą (trečias add_action parametras) be reikalo. Nutylėjimas yra 10, ir daugeliu atvejų jo pakanka. Keisti reikia tik tada, kai tikrai reikia, kad kodas veiktų prieš arba po kito hook’o.

Customizer API – nustatymų skydelis be papildinių

WordPress Customizer leidžia sukurti nustatymų sąsają, kurią naudotojas mato realiu laiku. Tai puikus būdas leisti keisti spalvas, šriftus, tekstus ir kitus parametrus be kodo redagavimo.

Customizer API veikia per keturis pagrindinius komponentus: Panels (skydai), Sections (sekcijos), Settings (nustatymai) ir Controls (valdikliai).

function mano_tema_customize_register($wp_customize) {

    // Nauja sekcija
    $wp_customize->add_section('mano_tema_colors', array(
        'title'    => __('Spalvos', 'mano-tema'),
        'priority' => 30,
    ));

    // Nustatymas
    $wp_customize->add_setting('primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // realaus laiko peržiūra
    ));

    // Valdiklis
    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'primary_color',
            array(
                'label'   => __('Pagrindinė spalva', 'mano-tema'),
                'section' => 'mano_tema_colors',
            )
        )
    );
}
add_action('customize_register', 'mano_tema_customize_register');

Kad spalva realiai veiktų, reikia ją pritaikyti per inline CSS:

function mano_tema_customizer_css() {
    $primary_color = get_theme_mod('primary_color', '#0073aa');
    ?>
    <style type="text/css">
        :root {
            --primary-color: <?php echo esc_attr($primary_color); ?>;
        }
        a { color: var(--primary-color); }
        .btn-primary { background-color: var(--primary-color); }
    </style>
    <?php
}
add_action('wp_head', 'mano_tema_customizer_css');

CSS kintamųjų naudojimas čia yra labai gera praktika – vieną kartą nustatai kintamąjį, o jis veikia visur, kur naudojamas.

Dėl transport => 'postMessage' – tai leidžia realiu laiku matyti pakeitimus be puslapio perkrovimo. Bet tada reikia papildomai parašyti JavaScript, kuris atnaujina stilius Customizer peržiūroje. Jei nenori to komplikuoti, naudok 'refresh' – bus lėčiau, bet veiks be papildomo JS.

Child temos ir kada jas naudoti

Child tema – tai tema, kuri paveldi visą tėvinės temos funkcionalumą, bet leidžia saugiai modifikuoti ar papildyti bet kurį failą. Tai svarbu, kai naudoji trečios šalies temą ir nori ją pritaikyti – be child temos visi pakeitimai bus prarasti atnaujinus tėvinę temą.

Sukurti child temą labai paprasta. Reikia naujo katalogo ir minimalaus style.css:

/*
Theme Name: Mano Tema Child
Template: tevine-tema
Version: 1.0.0
Text Domain: mano-tema-child
*/

Template: eilutė turi tiksliai atitikti tėvinės temos katalogo pavadinimą.

Tada functions.php reikia įkelti tėvinės temos stilių:

function mano_child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array('parent-style')
    );
}
add_action('wp_enqueue_scripts', 'mano_child_enqueue_styles');

Kai nori perrašyti konkretų tėvinės temos failą – tiesiog sukuri tą patį failą child temos kataloge. WordPress automatiškai naudos child temos versiją. Tai galioja visiems šablono failams, bet ne functions.php – jis neperrašo, o prideda prie tėvinės temos funkcijų.

Praktinis patarimas: net jei kuri temą nuo nulio sau, vis tiek verta galvoti apie child temų palaikymą. Naudok get_template_directory() failų keliams ir get_stylesheet_directory() ten, kur child tema turėtų galėti perrašyti.

Našumas, saugumas ir tai, ką daugelis pamiršta

Sukurti veikiančią temą – vienas dalykas. Sukurti greitą ir saugią temą – visai kitas. Čia yra keletas dalykų, kurie dažnai pamirštami.

Duomenų valymas (sanitization ir escaping) – tai ne pasirinktinis dalykas. Visada valyk duomenis prieš išsaugant į duomenų bazę ir visada escape’ink prieš rodant vartotojui:

// Blogai:
echo get_theme_mod('custom_text');

// Gerai:
echo esc_html(get_theme_mod('custom_text'));

// URL'ams:
echo esc_url(get_theme_mod('custom_url'));

// Atributams:
echo esc_attr(get_theme_mod('custom_class'));

// HTML turiniui (kai tikrai reikia leisti HTML):
echo wp_kses_post(get_theme_mod('custom_html'));

Paveikslėlių dydžiai – daugelis temų registruoja daugybę paveikslėlių dydžių, kurių niekada nenaudoja. Kiekvienas įkeltas paveikslėlis generuoja visus registruotus dydžius. Registruok tik tai, ko tikrai reikia:

add_image_size('hero-image', 1920, 600, true);
add_image_size('card-thumbnail', 400, 300, true);
// Ne 15 skirtingų dydžių, kurių pusė nenaudojama

Užklausų optimizavimas – vengti papildomų duomenų bazės užklausų šablonuose. Jei reikia gauti kažkokius duomenis, geriau naudoti WP_Query su tiksliais parametrais nei globalius kintamuosius ar keletą atskirų funkcijų:

// Vengti N+1 problemos - nekviesti funkcijų cikle
$args = array(
    'post_type'      => 'post',
    'posts_per_page' => 6,
    'no_found_rows'  => true, // greičiau, kai nereikia paginacijos
    'fields'         => 'ids', // jei reikia tik ID
);
$query = new WP_Query($args);

Prefetch ir lazy loading – šiuolaikinės temos turėtų naudoti lazy loading paveikslėliams. WordPress 5.5+ tai daro automatiškai per loading="lazy" atributą, bet verta patikrinti, ar tema nenukerta šio elgesio.

Dėl JavaScript – jei naudoji jQuery, pagalvok, ar tikrai reikia. Daugeliui dalykų, kuriems anksčiau buvo naudojamas jQuery, dabar pakanka vanilla JS. Mažiau JavaScript = greitesnis puslapis.

Nuo pirmų eilučių iki realaus projekto – kelias, kurį verta nueiti

WordPress temų kūrimas nėra raketų mokslas, bet tai nėra ir trivialus dalykas. Čia aprašyti konceptai – šablonų hierarchija, hook’ai, Customizer API, child temos – tai pagrindas, ant kurio statomi visi rimtesni projektai.

Vienas dalykas, kurį verta pabrėžti: nereikia viską išmokti iš karto. Geriau pradėti nuo paprastos temos, kuri daro vieną dalyką gerai, nei bandyti iš karto sukurti kažką su dešimtimis funkcijų. Kiekvienas projektas moko kažko naujo.

Keletas resursų, kurie tikrai padeda:

• WordPress Developer Handbook – oficiali dokumentacija, kuri yra žymiai geresnė nei daugelis galvoja
• Underscores (_s) – minimali starter tema iš Automattic, puiki pradžios vieta
• Query Monitor papildinys – neįkainojamas derinant temos problemas, rodo visas užklausas, hook’us, klaidas
• Theme Check papildinys – patikrina, ar tema atitinka WordPress standartus

Jei planuoji publikuoti temą WordPress.org kataloge, reikia atitikti griežtus reikalavimus – visi duomenys turi būti tinkamai escape’inti, tekstai internacionalizuoti, negalima naudoti užšifruoto kodo. Tai geras standartas, kurio verta laikytis net ir privačiuose projektuose.

Galiausiai – geriausia mokymosi priemonė yra išardyti gerai parašytą temą ir suprasti, kodėl kiekvienas sprendimas buvo priimtas. Twenty Twenty-Three ar Twenty Twenty-Four temos yra puikūs pavyzdžiai, nes jas rašo patys WordPress kūrėjai. Žiūrėk, kaip jie sprendžia problemas, ir taikyk tas pačias technikas savo projektuose.