ruta del tema en un archivo javascript

10

Necesito incluir la ruta a mi archivo de tema dentro de un archivo javascript. ¿Cómo voy a hacer esto? Ya lo he intentado:

var templateUrl = "<?php get_stylesheet_directory_uri(); ?>";

function LightboxOptions() {
  this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'";
  this.fileCloseImage = "'"+templateUrl+"/img/close.png'";
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";
}

Esto no me da la ruta, solo inserta <?php get_stylesheet_directory_uri(); ?> en lugar de la ruta real. ¿Algunas ideas? Gracias de antemano!

    
pregunta charlenemasters 07.03.2013 - 11:48

6 respuestas

25

Lo que estás buscando es wp_localize_script function .

Lo usas así cuando encierras el script

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

En tu style.js, habrá:

var templateUrl = object_name.templateUrl;
...
    
respondido por el david.binda 07.03.2013 - 11:59
5

Estas son las siguientes dos formas de agregar una ruta de tema en el archivo javascript.

1) Puedes usar wp_localize_script () sugerido por wordpress en tus funciones.php expediente. Esto creará un objeto Javascript en el encabezado, que estará disponible para sus scripts en tiempo de ejecución.

Ejemplo:

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

y puede usar en su archivo js como sigue:

alert(directory_uri.stylesheet_directory_uri); 

2) Puede crear un fragmento de código Javascript que guarde el directorio de plantillas uri en una variable, y usarlo más adelante de la siguiente manera: Agregue este código en el archivo header.php antes del archivo js en el que desea usar esta ruta. Ejemplo:

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

y puede usar en su archivo js como sigue:

alert(stylesheet_directory_uri);
    
respondido por el Vinod Dalvi 07.03.2013 - 11:53
1

Puede localizar sus archivos javascript, lo que le brinda la oportunidad de generar una matriz de javascript llena de valores definidos por PHP (como localización o directorios).

Si carga su archivo javascript a través de wp_enqueue_script o wp_register_script es fácil de configurar de la siguiente manera:

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

Y en sus archivos javascript, puede llamar a estas variables por:

my_unique_name.stylesheet_directory
    
respondido por el Mike Madern 07.03.2013 - 11:59
1

Así es como lo hice.

Coloque el archivo javascript y las imágenes en la carpeta de temas / recursos

Y edita los siguientes archivos.

En functions.php

/* for javascript (only when using 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() 
));

En tu archivo javascript

var url = myScript.theme_directory + '-child/assets/';
    
respondido por el Takao Shibamoto 01.01.2017 - 09:46
0

Si el archivo javascript se carga desde el panel de administración, puede usar esta función javascript para obtener la raíz de su instalación de WordPress.

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

Luego, contacta la ruta de tu tema como se muestra a continuación.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';
    
respondido por el Jam Risser 14.06.2016 - 07:59
0

Comencé a usar este pequeño y conveniente método para obtener el directorio de temas de WordPress y almacenarlo como una variable global de JavaScript (todo dentro de un archivo 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();

Esto solo funcionará si se cumplen las condiciones siguientes :

1. Este fragmento de código se ejecuta a través de un archivo JavaScript externo, como este:

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

2. El archivo js reside en el directorio (o subdirectorio) del tema de su sitio.

    
respondido por el blizzrdof77 12.08.2016 - 20:39

Lea otras preguntas en las etiquetas