wp_localize_script no funciona

3 minutos de lectura

avatar de usuario
Sebastián Corneliu Vîrlan

Tengo el siguiente código en mi tema. functions.php pero cuando llamo console.log(pw_script_vars); la variable es undefined. ¿Qué me perdí?

function mytheme_enqueue_scripts(){
    wp_enqueue_script( 'jquery' );

}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts');

function pw_load_scripts() {

    wp_enqueue_script('pw-script');
    wp_localize_script('pw-script', 'pw_script_vars', array(
            'alert' => __('Hey! You have clicked the button!', 'pippin'),
            'message' => __('You have clicked the other button. Good job!', 'pippin')
        )
    );


}
add_action('wp_enqueue_scripts', 'pw_load_scripts');

No incluyeste ningún archivo javascript con tu wp_enqueue_script.

function pw_load_scripts() {

    wp_enqueue_script('pw-script', get_template_directory_uri() . '/test.js');
     wp_localize_script('pw-script', 'pw_script_vars', array(
            'alert' => __('Hey! You have clicked the button!', 'pippin'),
            'message' => __('You have clicked the other button. Good job!', 'pippin')
        )
    );


}
add_action('wp_enqueue_scripts', 'pw_load_scripts');

Crea un archivo vacío llamado test.js en su directorio de temas y funcionará.

Si luego miras tu código fuente, verás:

<script type="text/javascript">
/* <![CDATA[ */
var pw_script_vars = {"alert":"Hey! You have clicked the button!","message":"You have clicked the other button. Good job!"};
/* ]]> */
</script>

A continuación, puede escribir pw_script_vars.alert en su consola para obtener el "Hey! You have clicked the button!" mensaje.

  • Gracias por su respuesta, pero mi intención era pasar algunas matrices php en jquery donde puedo apelar en cada página de mi plantilla…

    – Sebastián Corneliu Vîrlan

    15 de abril de 2013 a las 12:11

  • Eso es exactamente lo que hizo el código anterior. ¿Tuviste algún problema?

    – Rikesh

    15/04/2013 a las 12:30

  • Conseguí el guión de: papermashup.com/jquery-iphone-style-ajax-switch e hice: wp_enqueue_script(‘ajax-switch’, get_bloginfo(‘template_url’).’/includes/ajaxswitch/jquery.iphone-switch.js’, false, false); global $usuario_actual; wp_localize_script(‘ajax-switch’, ‘ajax_switch’, array( ‘post_status’ => get_user_meta($current_user->ID, ‘_fbpost_status’, true), ‘templateUrl’ => get_template_directory_uri().’/includes/ajaxswitch/’ ) ); Y worken muchas gracias, lo segundo es que en esos archivos php necesito incluir las variables de wordpress y la biblioteca php. ¿Cómo?

    – Sebastián Corneliu Vîrlan

    15 de abril de 2013 a las 17:04

  • la respuesta fue #specify host or domain (needed for wp-includes/ms-settings.php:100) $_SERVER[ 'HTTP_HOST' ] = 'localhost'; #location of wp-load.php so we have access to database and $wpdb object $wp_load_loc = "../../../../../wp-load.php"; require_once($wp_load_loc);

    – Sebastián Corneliu Vîrlan

    15 de abril de 2013 a las 18:08

También puede intentar localizar jQuery sin necesidad de crear archivos JS vacíos adicionales.

    wp_localize_script('jquery', 'pw_script_vars', array(
        'alert' => __('Hey! You have clicked the button!', 'pippin'),
        'message' => __('You have clicked the other button. Good job!', 'pippin')
    )
);

Funciona como un encanto para mí. Espero eso ayude.

Place the code block below the wp_enqueue_script    
Then Add it as a variable on your custom script. Here is called "custom-js"

    var dir_url = adact_img.dir_url;
       $('hello') .owlCarousel({
                items: 1,
                loop: true,
                margin: 0,
                dots: false,
                nav: true,
                navText: ["<img src=""+ dir_url +" /assets/images/icons/angle-right.png" />", "<img src=""+ dir_url +" /assets/images/icons/angle-left.png" />"],
            });


        

Place the code block below the wp_enqueue_script    



     $dir_url = array( 'dir_url' => get_stylesheet_directory_uri() );
        wp_localize_script( 'custom-js', 'adact_img', $dir_url );



Then Add it as a variable on your custom script. Here is called "custom-js"

    var dir_url = adact_img.dir_url;
       $('hello') .owlCarousel({
                items: 1,
                loop: true,
                margin: 0,
                dots: false,
                nav: true,
                navText: ["<img src=""+ dir_url +" /assets/images/icons/angle-right.png" />", "<img src=""+ dir_url +" /assets/images/icons/angle-left.png" />"],
            });


        

¿Ha sido útil esta solución?