Kā pievienot JavaScript kodu WordPress mājaslapai?

DG WEB FACTORY » Pamācības » Kā pievienot JavaScript kodu WordPress mājaslapai?

Tāpat kā gandrīz jebkurā mājaslapā, arī WordPress mājas lapā var pievienot JavaScript kodu vairākos veidos. To var izdarīt konkrētās iekšlapas vai ziņas izmantotajā templeitā vai templeita daļā, ievietojot <script> tagus vai ievietojot saiti uz atsevišķu javascript failu, šādā veidā to var izdarīt, bet tā nav tā labākā prakse, kā pievienot JavasSript kodu WordPresam. WordPress izstrādes rokasgrāmatā (WordPress Theme Handbook), ir norādīts veids un sniegtas rekomendācijas kā vislabāk ievietot JS WordPress  timekļa vietnē – izveidojot funkciju child tēmas functions.php failā, izmantojot wp_enqueue_script().

Ar wp_enqueue_script() palīdzību iespējams ielādēt custom Javascript kodu, kas saglabāts atseviškā failā. Šis veids sniedz vairākas priekšrocības:

• tas nodrošina korektu skripta ielādi, lai nerastos konfilkti ar citiem skriptiem, kas nāk no WP un spraudņiem, un “kešošanu”;
• custom JS tiks ielādēts, izmantojot standarta WordPress metodi;
• dod iespēju ielādēt Javascript kodu konkrētās lapās vai ziņās vai templeitos Jūsu WordPress mājaslapā.

WordPress pats pēc noklusējuma jau iekļauj vairākus skriptus, piemēram jQuery bibliotēku, kas tiek plaši izmantota WordPress izstrādē.

Ar šo metodi iespējams norādīt vairākus parametrus:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

• $handle- skripta nosaukums. Piemēram my-script,
• $src – skripta atrašanās vieta. Piemēram, ‘/js/my-script.js’, norāda, ka fails atrodas mapē ar nosaukumu js un faila noaukums ir my-script.js;
• $deps – masīvs, kas var izmantot jebkuru skriptu, no kā atkarīgs Jūsu JD kods.
• $ver – versija;
• $in_footer – boolean parametrs (true/false), kas ļauj ievietot skriptu fūterī.

Piemērs ar JS faila iekļaušanu visā WordPress lapā. JS fails, kurā ir jQuery kods. Fails novietots child tēmas mapē, kur izveidota mape “js”. Faila nosaukums my-script.js

if(!function_exists('load_my_script')){
function load_my_script() {
$deps = array('jquery');
$version= '1.0'; 
$in_footer = true;
wp_enqueue_script('my-script', get_stylesheet_directory_uri() . '/js/my-script.js', $deps, $version, $in_footer);
}
}
add_action('wp_enqueue_scripts', 'load_my_script');

get_stylesheet_directory_uri() – norāda uz child tēmas mapi. Jo šajā gadījumā mūsu JS fails ir novietots mapē (/js), kas atrodas child tēmas mapē.

Parametri augstāk minētajā piemērā ne vienmēr ir vajadzīgi, un, protams, failu var iekļaut arī bez tiem. Piemērs:

function load_my_script() {
    wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/js/my-script.js');
}
add_action('wp_enqueue_scripts', 'load_my_script');