Dayo

Dans cette article nous verrons comment ajouter une option dans les réglages de WordPress, puis comment la récupérer avec une route REST personnalisé.

La première étape est donc d’ajouter une nouvelle option dans l’onglet Général:

add_action( 'admin_init',
	function () {
		add_settings_field(
			'dayo_map_key',
			'Google Map Static API Key',
			function () {
				echo '<input name="dayo_map_key" id="dayo_map_key" type="text" value="' . get_option( 'dayo_map_key' ) . '" class="code" />';
			},
			'general'
		);

		register_setting( 'general', 'dayo_map_key' );
	} );

Ce qui donnera :

L’étape suivante est d’ajouter une route personnalisé a l’API REST de WordPress:

add_action( 'rest_api_init',
	function () {
		register_rest_route( 'dayo/v1',
			'/map/key',
			array(
				'methods'  => 'GET',
				'callback' => function () {
					get_option( 'dayo_map_key' );
				},
			) );
	} );

La route sera donc « dayo/v1/map/key » et renverra la valeur de l’option « dayo_map_key ».

La dernière partie de code PHP est celle qui fournira au JavaScript les informations pour la requête :

add_action( 'enqueue_block_editor_assets',
	function () {
		wp_localize_script( 'dayo_gutenberg_map',
			'DAYO',
			array(
				'api' => array(
					'url'   => esc_url_raw( rest_url( 'dayo/v1/map/key' ) ),
					'nonce' => wp_create_nonce( 'wp_rest' ),
				),
			) );
	} );

Dans le code JavaScript, nous utilisons la variable DAYO que nous avons fournit en PHP afin d’effectuer une requête

jQuery(function ($) {

  $.ajax({
    method: 'GET',
    url: DAYO.api.url,
    beforeSend: function (xhr) {
      xhr.setRequestHeader('X-WP-Nonce', DAYO.api.nonce);
    }
  }).then(function (r) {
    console.log(r)
  })

});

Et voila comment ajouter une option dans les réglages de WordPress et la récupérer avec l’API REST.