javascript - utilizar - wp_enqueue_style

Url de ruta de WordPress en el archivo de script js

Question

Agregué un script personalizado:

wp_enqueue_script(''functions'', get_bloginfo(''template_url'') . ''/js/functions.js'', ''search'', null, false);

Funciona muy bien, excepto en las functions.js que tengo:

Reset.style.background = "url(''../images/searchfield_clear.png'') no-repeat top left";

Esto solía funcionar antes, hasta que cambié a permalinks bonitos y .htaccess

La jerarquía de carpetas es como:

themename/js themename/images (las imágenes y la carpeta js están en la carpeta delmename)

Intenté ... / images - ./image - / images

Normalmente debería volver 1 nivel donde se encuentra el archivo js ....

No quiero usar la ruta completa.

¿Hay alguna otra manera que WordPress pueda reconocer en el archivo javascript para tener la ruta correcta?

Actualmente estoy confundido de lo que estoy haciendo mal.

Answer 1

De acuerdo con la documentación de Wordpress, debe usar wp_localize_script() en su archivo functions.php. Esto creará un objeto Javascript en el encabezado, que estará disponible para sus scripts en tiempo de ejecución.

Ver wp_localize_script()

Ejemplo:

<?php wp_localize_script(''mylib'', ''WPURLS'', array( ''siteurl'' => get_option(''siteurl'') )); ?>

Para acceder a esta variable dentro de Javascript, simplemente harías:

<script type="text/javascript">
var url = WPURLS.siteurl;
</script>

Answer 2

Para usuarios que trabajan con el framework Genesis.

Agregue lo siguiente a su hijo theme functions.php

add_action( ''genesis_before'', ''script_urls'' );
function script_urls() {
?>
<script type="text/javascript">
var stylesheetDir = ''<?= get_bloginfo("stylesheet_directory"); ?>'';
</script>
<?php
}

Y usa esa variable para establecer la url relativa en tu script. Por ejemplo:

Reset.style.background = " url(''"+stylesheetDir+"/images/searchfield_clear.png'') ";

Answer 3

Podría evitar codificar de forma rígida la ruta completa configurando una variable JS en el encabezado de su plantilla, antes de wp_head() y mantener la URL de la plantilla. Me gusta:

<script type="text/javascript">
var templateUrl = ''<?= get_bloginfo("template_url"); ?>'';
</script>

Y use esa variable para establecer el fondo (me doy cuenta de que sabe cómo hacerlo, solo incluyo estos detalles en caso de que ayuden a otros):

Reset.style.background = " url(''"+templateUrl+"/images/searchfield_clear.png'') ";

Answer 4

Si el archivo javascript se carga desde el panel de administración, esta función de JavaScript le dará la raíz de su instalación de WordPress. Utilizo esto mucho cuando estoy creando complementos que necesitan realizar solicitudes ajax desde el panel de administración.

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

Answer 5

 wp_register_script(''custom-js'',WP_PLUGIN_URL.''/PLUGIN_NAME/js/custom.js'',array(),NULL,true);
wp_enqueue_script(''custom-js'');
$wnm_custom = array( ''template_url'' => get_bloginfo(''template_url'') );
wp_localize_script( ''custom-js'', ''wnm_custom'', $wnm_custom );

y en custom.js

alert(wnm_custom.template_url);