Wie aktualisiere ich WordPress-Inhalte asynchron mit AJAX?

Wie aktualisiere ich Inhalte mithilfe von AJAX in WordPress?

WordPress bietet verschiedene Möglichkeiten, mit einer Seite zu interagieren, ohne die gesamte Seite neu laden zu müssen. Eine davon ist die Verwendung von AJAX (Asynchronous JavaScript and XML). Es ermöglicht den asynchronen Datenaustausch zwischen einer Webseite und dem Server. Dies kann nützlich sein, um den Inhalt einer Seite zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.

In diesem Zusammenhang zeigen wir, wie Sie Inhalte mithilfe von AJAX innerhalb eines WordPress-Shortcodes aktualisieren. Dieser Ansatz umfasst das Erstellen einer PHP-Funktion für den Shortcode, einer AJAX-Anfrage in JavaScript und einer Funktion zur Verarbeitung der Anfrage auf der Serverseite.

Schritte:

1. PHP-Funktion für Shortcode: Erstellen Sie eine PHP-Funktion für den Shortcode, stellen Sie die erforderlichen Skripte in die Warteschlange und lokalisieren Sie sie Daten.
2. AJAX-Anfrage in JavaScript: Verwenden Sie jQuery, um eine AJAX-Anfrage zum Abrufen von Inhalten zu senden.
3. Verarbeitung von AJAX-Anfragen auf Serverseite: Verarbeiten Sie die Anfrage, rufen Sie den Inhalt ab und senden Sie ihn zurück an das Frontend.

Code Beispiel:

PHP-Funktion für Shortcode (z. B. 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' );

AJAX-Anfrage in JavaScript (z. B. 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.
      }
    });
  });
});

Verarbeitung von AJAX-Anfragen auf der Serverseite (z. B. in 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();
}

Durch die Integration dieser Komponenten können Sie jetzt Inhalte auf einer WordPress-Seite mit AJAX innerhalb eines Shortcodes aktualisieren.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich WordPress-Inhalte asynchron mit AJAX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!