AJAX in WordPress: So lädst du Inhalte ohne Refresh

Mit AJAX kannst du Inhalte dynamisch nachladen ohne die Seite neu zu laden. Hier zeige ich dir, wie es in WordPress funktioniert.

1. JavaScript vorbereiten

// In deiner JS-Datei:
jQuery(document).ready(function($) {
    $('#load-more').on('click', function() {
        var button = $(this);
        var page = button.data('page');
        
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'load_more_posts',
                page: page,
                nonce: ajax_object.nonce
            },
            beforeSend: function() {
                button.text('Lädt...');
            },
            success: function(response) {
                if (response.success) {
                    $('#posts-container').append(response.data.html);
                    button.data('page', page + 1);
                    button.text('Mehr laden');
                }
            }
        });
    });
});

2. Script einbinden mit Localize

// In functions.php:
add_action('wp_enqueue_scripts', 'enqueue_ajax_scripts');
function enqueue_ajax_scripts() {
    wp_enqueue_script('my-ajax', get_stylesheet_directory_uri() . '/js/ajax.js', 
        array('jquery'), '1.0', true);
    
    wp_localize_script('my-ajax', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('ajax_nonce')
    ));
}

3. AJAX Handler in PHP

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

function load_more_posts() {
    // Nonce prüfen!
    if (!wp_verify_nonce($_POST['nonce'], 'ajax_nonce')) {
        wp_send_json_error('Ungültige Anfrage');
    }
    
    $page = intval($_POST['page']);
    
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 6,
        'paged' => $page
    );
    
    $query = new WP_Query($args);
    
    ob_start();
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            get_template_part('template-parts/post-card');
        }
    }
    $html = ob_get_clean();
    
    wp_send_json_success(array('html' => $html));
}

Wichtige Sicherheitshinweise

• Immer Nonce verwenden!
• Input validieren und sanitizen
• Capabilities prüfen bei Admin-Aktionen

AJAX macht deine Website interaktiver – aber vergiss nie die Sicherheit!