percorso del tema nel file javascript

Ecco i due modi seguenti per aggiungere il percorso del tema in un file javascript.

1) Puoi usare wp_localize_script() suggerito da WordPress nel tuo file functions.php. Questo creerà un oggetto Javascript nell'header, che sarà disponibile per i tuoi script durante l'esecuzione.

Esempio:

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 );

e puoi usarlo nel tuo file js come segue:

alert(directory_uri.stylesheet_directory_uri); 

2) Puoi creare uno snippet Javascript che salva l'uri della directory del template in una variabile, e usarlo successivamente come segue: Aggiungi questo codice nel file header.php prima del file js in cui vuoi usare questo percorso. Esempio:

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

e puoi usarlo nel tuo file js come segue:

alert(stylesheet_directory_uri);

Puoi localizzare i tuoi file JavaScript, il che ti offre l'opportunità di generare un array JavaScript riempito con valori definiti in PHP (come la localizzazione o le directory).

Se carichi il tuo file JavaScript tramite wp_enqueue_script o wp_register_script, è facile configurarlo come segue:

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() );

E nei tuoi file JavaScript, puoi chiamare queste variabili con:

my_unique_name.stylesheet_directory

Ho iniziato a utilizzare questo comodo metodo per ottenere la directory del tema WordPress e memorizzarla come variabile globale JavaScript (tutto all'interno di un file 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();

Questo funzionerà solo se vengono soddisfatte le seguenti condizioni:

    1. Questo snippet viene eseguito tramite un file JavaScript esterno - in questo modo:

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

    2. Il file js risiede all'interno della directory del tuo tema (o in una sottodirectory).

Ecco come l'ho fatto.

Posiziona il file javascript e le immagini nella cartella theme-folder/assets

E modifica i seguenti file.

In functions.php

/* per javascript (solo quando si utilizza un child theme) */
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() 
));

Nel tuo file javascript

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

Se il file javascript viene caricato dalla dashboard di amministrazione, puoi utilizzare questa funzione javascript per ottenere la radice della tua installazione WordPress.

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

Quindi basta concatenare il percorso al tuo tema come mostrato di seguito.

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