Kako dodati lastno JavaScript datoteko v WordPress temo

Kako dodati lastno javascript datoteko v WordPress temo

1. Zakaj je pametno uporabljati Child Temo?

Uporaba child teme je najboljša praksa, ko želite prilagoditi temo, saj ohranja vaše prilagoditve varne pred morebitnimi posodobitvami glavne teme. Child tema podeduje vse funkcionalnosti in slogovne lastnosti glavne teme ter omogoča dodajanje lastnih sprememb brez spreminjanja izvorne kode glavne teme.

2. Ustvarjanje Child Teme

Če še nimate child teme, jo lahko ustvarite z naslednjimi koraki:

1. Ustvarite Mapo za Child Temo: Pojdite v wp-content/themes in ustvarite novo mapo. Imejte jasno ime, npr. moja-child-tema.
2. Ustvarite style.css: V novo mapo dodajte datoteko style.css z naslednjo vsebino:

/*
Theme Name: Moja Child Tema
Template:   ime-glavne-teme
*/

3. Ustvarite functions.php: V isti mapi ustvarite datoteko functions.php z naslednjo vsebino:

<?php
// Podeduje sloge glavne teme
function moja_child_tema_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'moja_child_tema_enqueue_styles' );
?>

3. Dodajanje Custom JavaScript Datoteke

Zdaj, ko imate child temo pripravljeno, lahko dodate svojo custom JavaScript datoteko.

1. Ustvarite JavaScript Datoteko: Ustvarite mapo js znotraj mape vaše child teme (/wp-content/themes/moja-child-tema/js/custom.js). V to datoteko lahko dodate svoj JavaScript kodo.
2. Vpišite JavaScript Kodo: V custom.js datoteko dodajte kodo. Na primer, naslednja koda spremeni barvo ozadja telesa strani, ko je dokument pripravljen:

jQuery(document).ready(function($) {
    $('body').css('background-color', '#f0f0f0');
});

3. Vključite JavaScript Datoteko v functions.php: Dodajte naslednjo kodo v functions.php datoteko vaše child teme, da vključite novo JavaScript datoteko:

<?php
// Podeduje sloge glavne teme
function moja_child_tema_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'moja_child_tema_enqueue_styles' );

// Dodajanje custom JavaScript datoteke
function moja_child_tema_enqueue_scripts() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'moja_child_tema_enqueue_scripts' );
?>

4. Zaključek

Z upoštevanjem teh korakov boste uspešno dodali lastno JavaScript datoteko v vašo WordPress temo, hkrati pa boste uporabili child temo, da ohranite vse spremembe varne pred posodobitvami glavne teme. To vam omogoča, da prilagodite svojo spletno stran po lastnih željah, brez tveganja izgube prilagoditev ob posodobitvah.