Comment mettre à jour le contenu WordPress de manière asynchrone à l'aide d'AJAX ?

Comment mettre à jour le contenu à l'aide d'AJAX dans WordPress ?

WordPress propose différentes manières d'interagir avec une page sans recharger la page entière. L'un d'eux utilise AJAX (JavaScript asynchrone et XML). Il permet un échange de données asynchrone entre une page Web et le serveur. Cela peut être utile pour mettre à jour le contenu d'une page sans recharger la page entière.

Dans ce contexte, nous montrerons comment mettre à jour le contenu en utilisant AJAX dans un shortcode WordPress. Cette approche implique la création d'une fonction PHP pour le shortcode, d'une requête AJAX en JavaScript et d'une fonction pour gérer la requête côté serveur.

Étapes :

1. Fonction PHP pour le shortcode : Créez une fonction PHP pour le shortcode, mettez en file d'attente les scripts nécessaires et localisez data.
2. Requête AJAX en JavaScript : Utilisez jQuery pour envoyer une requête AJAX afin de récupérer du contenu.
3. Gestion des requêtes AJAX côté serveur : Traitez la demande, récupérez le contenu et renvoyez-le au frontend.

Code Exemple :

Fonction PHP pour Shortcode (par exemple, update_content)

function update_content( $atts ) {
  wp_enqueue_script( 'ajax-update-content', get_template_directory_uri() . '/js/ajax-update-content.js', array( 'jquery' ), '1.0.0', true );
  $content = get_transient( 'content' ); // Simulated content, normally retrieved via AJAX.
  return $content;
}
add_shortcode( 'update_content', 'update_content' );

Requête AJAX en JavaScript (par exemple, ajax-update-content.js)

jQuery(document).ready(function($) {
  $('#update-content-button').click(function(e) {
    e.preventDefault();
    $.ajax({
      url: ajaxurl, // AJAX URL defined in WordPress
      type: 'POST',
      data: {
        action: 'update_content_action', // Defined in the server-side function.
        security: '<%= wpApiSettings.nonce %>' // This is provided by WordPress.
      },
      success: function(response) {
        $('#content-container').html(response); // Update the content.
      }
    });
  });
});

Gestion des requêtes AJAX côté serveur (par exemple, dans Functions.php)

add_action( 'wp_ajax_update_content_action', 'update_content_action' );
add_action( 'wp_ajax_nopriv_update_content_action', 'update_content_action' ); // Non-logged-in users.

function update_content_action() {
  check_ajax_referer( 'nonce-value', 'security' ); // Security check.
  $content = get_transient( 'content' ); // Simulated content.
  echo $content; // Send the content back to the frontend.
  wp_die();
}

En intégrant ces composants, vous pouvez désormais mettre à jour le contenu d'une page WordPress en utilisant AJAX dans un shortcode.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!