J'aimerais utiliser la variable $ atts de la fonction lax_google_map_maker () dans lax_google_map_init (). Comment y accéder? J'ai essayé de la "mondialiser", mais pour une raison quelconque, cela n'a pas fonctionné.
function lax_google_map_init() {
wp_enqueue_script('google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false');
wp_enqueue_script('lax_google_map_script', plugins_url('js/lax_google_map_script.js', __FILE__), array('google-maps','jquery'));
$params = array (
'latitude'=> '39.01',
'longitude'=> '-76.02'
);
wp_localize_script('lax_google_map_script', 'lax_map_params', $params);
}
add_action('init', 'lax_google_map_init');
function lax_google_map_maker($atts,$content=null) {
$atts = shortcode_atts( array(
'latitude'=>'38.9205',
'longitude'=>'-77.04505920410156'),
$atts);
$output .= '<div id="map_canvas" style="width: 500px; height: 500px; border:1px solid black;"></div>';
return $output;
}
add_shortcode('lax-google-map', 'lax_google_map_maker');
Mon objectif est de définir la variable $ params à l'aide de $ atts du shortcode. Si je comprends bien, je dois conserver la variable $ params dans la même fonction que la ligne wp_enqueue_script et la ligne wp_localize_script. Sinon, je le diviserais en une nouvelle fonction et transmettrais le paramètre $ atts.
S'il y avait un moyen de passer $ atts à la fonction lax_google_map_init, je serais en or.
J'ai essayé tout ce que je peux penser. Au plaisir d'entendre vos bonnes idées.
Bonne journée mon pote ;)
Je l'ai fait en affichant les variables dans une balise de script directement dans le corps. J'ai joué avec votre code et proposé cette solution:
function lax_google_map_init() {
// Don't bother loading the scripts if we're in the admin area
if ( is_admin() ) {
return;
}
wp_enqueue_script( 'google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false' );
wp_enqueue_script( 'lax_google_map_script', plugins_url( 'js/lax_google_map_script.js', __FILE__ ), array ( 'google-maps','jquery' ) );
}
add_action( 'wp_print_scripts', 'lax_google_map_init' );
function lax_google_map_maker( $atts, $content = null ) {
// Default params.
$atts = shortcode_atts( array (
'latitude'=>'-25.068302',
'longitude'=>'-130.095581',
'zoom' => 18,
'id' => 'map_canvas',
'width' => '500px',
'height' => '500px'
), $atts );
$output .= '<div id="' . esc_attr( $atts['id'] ) . '" style="width:' . esc_attr( $atts['width'] ) . '; height: '. esc_attr( $atts['height'] ) .'; border:1px solid black;"></div>';
$output .=
"<script>" . "\n" .
"var lax_map_params_" . $atts['id'] . " = " . json_encode( $atts ) . "; lax_google_map_maker_js( lax_map_params_" . $atts['id'] . " );" . "\n" .
"</script>" . "\n";
return $output;
}
add_shortcode( 'lax-google-map', 'lax_google_map_maker' );
// [lax-google-map latitude='-66.552635' longitude='84.137421' zoom='12'] // no id, usees default
// [lax-google-map latitude='65.032366' longitude='-376.747681' zoom='12' id="map_1"] // id specified. Will be used in js variable name, so no hyphens or other chars that will break js variable names allowed.
// [lax-google-map latitude='-25.068302' longitude='-130.095581' zoom='12' id="map_2" width="200px" height="200px"] // custom dimensions
// [lax-google-map latitude='-34.397' longitude='150.644' zoom='12' id="map_3"]
Voici le fichier lax_google_map_script.js:
jQuery(document).ready(function($) {
// alert ('hi');
});
function lax_google_map_maker_js( args ) {
// Default js args. Args passed to function will override these.
var default_args = {
latitude : -34.397,
longitude : 150.644,
id : 'map_canvas',
zoom : 8
}; // @link http://www.openjs.com/articles/optional_function_arguments.php
for ( var index in default_args ) {
if ( typeof args[index] == "undefined" ) {
args[index] = default_args[index];
}
}
var latlng = new google.maps.LatLng(args['latitude'], args['longitude']);
var myOptions = {
zoom: parseInt( args['zoom'] ),
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// alert ('hi'); // just showing that you can use jQuery with the dollar method in here.
var map = new google.maps.Map(document.getElementById( args['id'] ), myOptions);
}
Notes: localize_script ne peut faire que des tableaux js de niveau 1, donc, personnellement, je ne suis pas allé dans cette voie (source - voir les commentaires) .
J'ai appris le truc en ligne variable js d'un super réponse WPSE de Bainternet.
Je pense que la meilleure façon de le faire est de tout mettre dans une classe et de sortir le js concaténé d'une propriété encapsulée dans des balises js correctement formatées déclenchées par l'action wp_footer déclenchée par une méthode qui vérifie si le shortcode a été utilisé. C'est quelque chose à considérer pour les révisions futures. Optimal Script Loading
Dans ma réponse initiale, j'ai supprimé les bits jQuery car jQuery n'était pas utilisé dans le script. jQuery.noConflict (); n'est pas nécessaire lors de l'utilisation de la version incluse de WP de jQuery. Dans ma réponse révisée, j'ai laissé le contenu jQuery en haut, mais j'ai déplacé la fonction lax_google_map_maker_js () de ce bloc, car sinon une erreur se produirait.