Calea temei în fișierul javascript

Următoarele sunt cele două metode pentru a adăuga calea temei într-un fișier JavaScript.

1) Puteți utiliza funcția wp_localize_script() recomandată de WordPress în fișierul functions.php. Aceasta va crea un Obiect JavaScript în antet, care va fi disponibil scripturilor dumneavoastră în timpul execuției.

Exemplu:

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

și puteți utiliza în fișierul js astfel:

alert(directory_uri.stylesheet_directory_uri); 

2) Puteți crea un fragment de cod JavaScript care salvează URI-ul directorului șablon într-o variabilă și o folosește ulterior astfel: Adăugați acest cod în fișierul header.php înaintea fișierului js în care doriți să utilizați această cale. Exemplu:

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

și puteți utiliza în fișierul js astfel:

alert(stylesheet_directory_uri);

Puteți localiza fișierele JavaScript, ceea ce vă oferă posibilitatea de a genera un array JavaScript umplut cu valori definite în PHP (cum ar fi localizări sau directoare).

Dacă încărcați fișierul JavaScript prin wp_enqueue_script sau wp_register_script, este ușor să setați așa cum urmează:

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri()
    );
}

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) );
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() );

Și în fișierele dumneavoastră JavaScript, puteți apela aceste variabile astfel:

my_unique_name.stylesheet_directory

Am început să folosesc această metodă practică pentru a obține directorul temei WordPress și a-l stoca ca variabilă globală în JavaScript (totul dintr-un fișier javascript):

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

Această metodă va funcționa doar dacă sunt îndeplinite următoarele condiții:

    1. Acest fragment de cod este executat printr-un fișier JavaScript extern - astfel:

<script src="/wp-content/themes/numeletemei/assets/app.js"></script>

    2. Fișierul js se află în directorul temei site-ului (sau într-un subdirector al acestuia).

Așa am făcut eu.

Puneți fișierul JavaScript și imaginile în tema-folder/assets

Și editați următoarele fișiere.

În functions.php

/* pentru JavaScript (doar când folosiți o temă copil) */
wp_enqueue_script('my-script', get_template_directory_uri() . '-child/assets/test.js');
wp_localize_script('my-script', 'myScript', array(
    'theme_directory' => get_template_directory_uri() 
));

În fișierul JavaScript

var url = myScript.theme_directory + '-child/assets/';

Dacă fișierul JavaScript este încărcat din panoul de administrare WordPress, poți folosi această funcție JavaScript pentru a obține rădăcina instalării tale WordPress.

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

Apoi poți concatena calea către tema ta, ca în exemplul de mai jos.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';