web-dev-qa-db-fra.com

Utiliser get_option () en JavaScript

Auparavant, j'utilisais la fonction get_option() pour obtenir une option en PHP, comme ceci:

$width = get_option('my_width');

Ceci est à l'intérieur d'une fonction de shortcode.

Maintenant, je veux avoir une option en JavaScript. Est-ce possible?

Le JS est ajouté avec wp_enqueue_script, à partir d'une fonction de shortcode.

shortcodejavascriptwp-enqueue-scriptget-option
6
Keelan

Définissez un tableau de paramètres à injecter dans le script:

$script_params = array(
    'myWidth' => get_option('my_width')
);

Localisez le script via wp_localize_script :

wp_localize_script( 'your-script-handle', 'scriptParams', $script_params );

scriptParams est maintenant un objet js auquel vous pouvez accéder depuis le script:

alert( scriptParams.myWidth ); // the value from the PHP get_option call in the js
9
Johannes Pille

Construire sur la réponse acceptée et compléter quelques détails ...

Vous devez appeler wp_localize script juste après wp_enqueue_script. Donc, quelque chose comme ça:

function my_enqueue_scripts() {
    wp_enqueue_script(
        'myjs',
        plugins_url( 'js/my.js', __FILE__)
    );

    $options = get_option( 'my_settings' );

    $scriptData = array(
        'width' => $options['my_width'],
    );

    wp_localize_script('myjs', 'my_options', $scriptData);

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

Ensuite, comme le montre la réponse acceptée, my_options est maintenant un objet JavaScript.

alert( my_options.width );

La façon dont cela fonctionne est que wp_localise_script incorpore du code JavaScript dans le code HTML de la page, juste avant d'inclure votre script:

<script type='text/javascript'>
/* <![CDATA[ */
var my_options = {"width":"42"};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/my_plugin/js/myjs.js?ver=1.0'></script>

Voilà comment envoyer des données de PHP sur un serveur vers JavaScript dans un navigateur via HTML à l'aide de WordPress. Intelligent, hé?

(A part: j'ai eu un problème où $ options n'était pas défini. Je pensais que c'était parce que la file d'attente se produisait avant que $ options ne soit défini comme le WP docs mentionne . J'ai donc eu mon script chargement dans le pied de page à l'aide de l'argument in_footer de wp_enqueue_script (ce qui signifie que les données de localisation figureraient également dans cette zone). ).

Si cela ressemble à un bidouillage d'utiliser quelque chose appelé wp_localize_script, notez que la docs WordPress dit que ce que nous faisons est tout à fait acceptable:

Bien que la localisation soit la principale utilisation, elle peut être utilisée pour rendre disponibles à votre script toutes les données que vous ne pouvez normalement obtenir que du côté serveur de WordPress.

3
Greg Bell