web-dev-qa-db-de.com

Beiträge dynamisch laden

Ich suche nach einer Lösung/Anleitung, wie ich Links von Beiträgen hierarchisch in der linken Spalte einer Vorlage auflisten lassen kann und wenn ein Link ausgewählt wird, wird ein Beitrag in der rechten Spalte geladen, aber die gesamte Seite wird nicht aktualisiert.

Danke, Deon

Update für Marfarmas Hilfe unten

Danke für die Antwort. Nachdem ich viele Seiten und Beiträge gelesen hatte, konnte ich es zum Laufen bringen. Meine einzige Einschränkung ist jetzt, dass Links in der rechten Spalte einen href-Wert von # haben. Ich habe die Homepage eingerichtet, damit ein Benutzer einen Trainingspfad auswählen kann, der ihn zu der oben beschriebenen Seite führt. Ich habe aber auch die einzelnen Links auf der Homepage, falls ein Benutzer zu einem bestimmten Thema springen möchte. Mein Problem ist nun, dass ich sie einzeln codieren und auf die einzelne Beitragsvorlage zugreifen kann. Ich möchte jedoch, dass ein Benutzer die oben beschriebene Seite mit dem richtigen Link-Thema aus der Liste aufruft. Wissen Sie, wie dies erreicht werden könnte? Ich gehe irgendwie davon aus, dass der erste Schritt, anstatt das # als href zu haben, der richtige ID-/Post-Slug als href ist. Dann kann ich irgendwie darauf verlinken, was alles mit Javascript gemacht wurde? Danke für jede Hilfe. Der verwendete Code ist unten.

<?php
wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri( __FILE__ ) . '/js/ajax.js' );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
?>

    <?php
    global $wpdb;
    global $post;
    $querystr = "
    SELECT * FROM $wpdb->posts
    LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
    LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
    LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
    LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
    WHERE $wpdb->terms.name = 'pathologist'
    AND $wpdb->term_taxonomy.taxonomy = 'category'
    AND $wpdb->posts.post_status = 'publish'
    AND $wpdb->posts.post_type = 'post'
    AND $wpdb->postmeta.meta_key = 'order'
    ORDER BY $wpdb->postmeta.meta_value ASC
    ";
    $pageposts = $wpdb->get_results($querystr, OBJECT);
    ?>


     <?php if ($pageposts): ?>
     <?php global $post; ?>
<div class="textwidget">
<ul id="nav">
<li class="list-title">Navigating your Workspace</li> 
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>   
<li class="post" id="<?php the_ID(); ?>">
  <a href="#" class="ajax-click" rel="bookmark" title="<?php the_title(); ?>">
  <?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>

Und die Ajax.js für oben.

 jQuery(document).ready(function() {

     jQuery(".ajax-click").click(function() {
        jQuery("#loading-animation").show();
        var post_id = $(this).parent("li").attr("id");
        var ajaxURL = MyAjax.ajaxurl;

        jQuery.ajax({
        type: 'POST',
        url: ajaxURL,
        data: {"action": "load-content", post_id: post_id },
        success: function(response) {
             jQuery("#container-help-page").html(response);
             jQuery("#loading-animation").hide();
        return false;
    }
});
});
});
3
Deon

So würde ich es angehen. Lassen Sie mich in den Kommentaren wissen, wenn Sie mehr Details benötigen.

1) Erstellen Sie eine Vorlage, die Ihren ursprünglichen Seiteninhalt wiederherstellt - den Standardinhalt für das rechte Bedienfeld und die Liste der Links für das linke Bedienfeld. Stellen Sie sicher, dass für die Links post_id als Wert des id-Attributs festgelegt ist.

2) Schreiben Sie eine JavaScript-Anforderungsfunktion, um den Inhalt für das rechte Bedienfeld basierend auf dem im linken Bedienfeld angeklickten Link mithilfe eines Ajax-Aufrufs anzufordern. Übergeben Sie den Wert des ID-Attributs und der Rückruffunktion (ab Schritt 3). Schreiben Sie eine Init-Funktion, um sie dem Ereignis onclick für jeden Link auf der linken Seite hinzuzufügen. Fügen Sie dem Seitenladeereignis die Init-Funktion hinzu.

3) Schreiben Sie eine JavaScript-Rückruffunktion, um den Inhalt des linken Panels durch die Ergebnisse Ihrer Anfrage zu ersetzen.

4) Fügen Sie einen Ajax-Aktionsfilter hinzu, damit WordPress weiß, wie Ihre Anfrage zu behandeln ist. Sie benötigen auch eine PHP-Funktion, die die Beitrags-ID übernimmt und den an die Seite zurückgesendeten Inhalt zurückgibt. Hier ist die Codex-Seite zur Verwendung von Ajax in WordPress. Hier ist ein wichtiges Detail zur Verwendung von Ajax-Filteraktionen beim Aufruf von Ajax vom Front-End: https://wordpress.stackexchange.com/a/53729/4645 Geben Sie den PHP-Code in Ihre functions.php-Datei ein oder Fügen Sie es Ihrem standortspezifischen Plugin hinzu.

5) Fügen Sie das gesamte Javascript in eine Datei ein. Stellen Sie es in Ihrer functions.php-Datei oder in Ihrem Site-spezifischen Plugin in eine Warteschlange. (Hier ist ein Tutorial, wie nur der Code für eine bestimmte Vorlage geladen wird.)

Hier ist ein Tutorial zum Laden von Posts über Ajax, das Ihnen einige Code geben wird, um Ihnen den Einstieg zu erleichtern.

3
marfarma