Dynamisch wechselnde Navigationslinks (nächste und vorherige) in WordPress über AJAX

Lesezeit: 6 Minuten

Dynamisch wechselnde Navigationslinks nachste und vorherige in Wordpress uber AJAX
Adib Aroui

Innerhalb der Schleife von single.php habe ich ein select-Tag, in dem die Optionen die Beiträge der aktuellen Kategorie sind, die über eine benutzerdefinierte Abfrage zurückgegeben werden.

Beim Ändern der ausgewählten Option habe ich viele Javascript-Funktionen, die gut funktionieren, aber die letzte Funktion unter ihnen (function f_next-previous), scheint nicht zu funktionieren.

Ziel dieser Funktion ist es, die nächsten und vorherigen Links zu aktualisieren, ohne die Seite neu zu laden.

Hier ist der Code für die Navigationslinks (nächster und vorheriger) in der Vorlage:

<div id="nav-above" class="navigation">

<div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="'%20.%20get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>

<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="'%20.%20get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

</div><!-- #nav-above -->   

Der Javascript-Code dieser Funktion lautet:

function f_next-previous(id)
{
       $.ajax({  
       cache: true,  
       type: "GET",  
       timeout: 5000,   
       url: 'wp-content/themes/twentyten/pages/next-previous.php?p='+id,  
       success: function(msg)  
        {  

    $('#nav-above').html(msg);

        },  
        error: function(msg)  
        {  
           alert("Your browser broke!");
                return false;
        }  
});

}

Die Datei next-previous.php Inhalt ist:

<?php
$p=$_GET['p']; 
require( '../../../wp-load.php' );



$my_query = new WP_Query();
$my_query->query(array( 'post__in' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  ?>


<div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="'%20.%20get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="'%20.%20get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

<?php

endwhile;
endif;

?>

Während Sie diese PHP-Datei testen, indem Sie ihr einen Wert für den p-Parameter zuweisen, ergibt dies ein logisches Ergebnis im Browser. Jquery und Funktionsskripte sind gut enthalten und alles AJAX auf meiner Website ist in Ordnung. Was fehlt mir in dieser Arbeit????

AKTUALISIEREN:
Beachten Sie, dass der Teil meiner single.php-Datei, der für das Auslösen des AJAX-Aufrufs verantwortlich ist, folgender ist:

   <form method="post" action="">  

    <select class="select2"  name="" id="" >
    <option value="<?php the_ID();?>"><?php the_title();?></option>

    <?php 
global $post;
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$myposts = get_posts("paged=$paged&category=4");

foreach($myposts as $post) :?>

        <option value="<?php the_ID();?>"><?php the_title();?></option>

        <?php endforeach;
        wp_reset_postdata(); ?> 

        </select>
        </form>

  • Bitte protokollieren Sie PHP-Fehler in einer Datei und aktivieren Sie die höchste Ebene für die Protokollierung. Beseitigen Sie alle Fehler, bevor Sie sich fragen, warum es nicht funktioniert (ja, es hat Fehler, ja, PHP sagt Ihnen, wo).

    – hakre

    2. März 2013 um 14:12 Uhr

  • Danke Hakre für dein schnelles Feedback, aber ich verstehe dich nicht gut. Ich habe keine Fehler in meinem Browser! oder vielleicht weiß ich nicht, wie das geht und wie man die höchste Stufe für die Protokollierung aktiviert?

    – Adib Aroui

    2. März 2013 um 14:18 Uhr

  • ok ich denke dieser link w3schools.com/php/php_ref_error.asp werde mir diese Begriffe erklären, ich brauche etwas Zeit, um hierher zurückzukommen und das Endergebnis zu geben

    – Adib Aroui

    2. März 2013 um 14:21 Uhr

  • Siehe auch: Wie bekomme ich nützliche Fehlermeldungen in PHP?; Normalerweise schlage ich Folgendes vor: stackoverflow.com/a/14504459/367456

    – hakre

    3. März 2013 um 11:19 Uhr


  • Lieber Hakre, vielen Dank für Ihre Zeit, ich kann jetzt mein PHP-Fehlerprotokoll lesen und finde, dass es eine PHP-Warnung gibt: Header-Informationen können nicht geändert werden – Header wurden bereits gesendet. Diese Warnung wurde behoben, aber das Hauptproblem bleibt bestehen. Wie ich im Beitrag sagte, funktionieren alle anderen Ajax-Funktionen korrekt, nur diese bezieht sich auf die Navigation.

    – Adib Aroui

    7. März 2013 um 10:46 Uhr

Dynamisch wechselnde Navigationslinks nachste und vorherige in Wordpress uber AJAX
Adib Aroui

Zunächst möchte ich anmerken, dass der Ansatz, den ich in meiner Frage erwähnt habe, laut fast Tutorials, die über AJAX in WordPress sprechen, schlecht ist. Also beschloss ich, es basierend auf dem Rat von zu ändern hakre und sein Link: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.

Mit anderen Worten, der beste Weg für meine Situation ist die Verwendung des integrierten AJAX in WordPress mit der wp-admin/admin-ajax.php. AJAX-Anfragen sollten an diese Datei gerichtet werden. Ich weiß, dass der „admin“-Teil des Dateinamens etwas irreführend ist. aber alle Anfragen im Frontend (der Anzeigeseite) sowie im Admin-Panel können in admin-ajax.php verarbeitet werden, mit vielen Vorteilen, insbesondere für die Sicherheit.

Die Schritte sind:

1.Der JavaScript-Code, der die AJAX-Anfrage sendet, sollte etwa so aussehen:

    $(document).ready(function() {
        $('.select2').change(function(e) {
    e.preventDefault();

    var v = $('.select2 option:selected').val(); 


            $.ajax({
                type: "GET",
                url: "wp-admin/admin-ajax.php", // check the exact URL for your situation
                dataType: 'html',
                data: ({ action: 'nextPrevious', id: v}),
                success: function(data){

                $('#nav-above').html(data);

                },
                error: function(data)  
                {  
                alert("Your browser broke!");
                return false;
                }  

            }); 

    }); 
}); 

Beachten Sie, dass Sie die Anforderungen von WordPress beim Einfügen des JS-Skripts beachten sollten (im Allgemeinen in footer.php vor wp-footer() ).

2- Handhabung der Aktion:

in functions.php Ihres Themes (oder direkt in Ihrer Plugin-Datei), fügen Sie hinzu:

add_action('wp_ajax_nextPrevious', 'nextPrevious');
add_action('wp_ajax_nopriv_nextPrevious', 'nextPrevious');

und in derselben Datei definieren nextPrevious Callback-Funktion wie folgt:

function nextPrevious() {

$p= $_GET['id'];
$my_query = new WP_Query();

$my_query->query(array( 'post__in' => array($p)));

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>



 <div class="nav-previous"><?php previous_post_link( '%link', '<img height="34" src="'%20.%20get_bloginfo("template_directory") . '/images/previous.png" />' ); ?></div>

<div class="nav-next"><?php next_post_link( '%link', '<img height="34" src="'%20.%20get_bloginfo("template_directory") . '/images/next.png" />' ); ?></div>

<?php endwhile;
endif;                  

wp_reset_query();

die();

}

Vergessen Sie nicht die Würfelfunktion, sie ist obligatorisch.

Für weitere Details zu AJAX in WordPress sind die Tutorials auf der ersten Seite von Google gut geeignet.

  • Ist wp_reset_query(); hier notwendig? Sie führen es direkt vor die() aus. Also ist es nicht.

    – BasTaller

    27. März 2014 um 21:38 Uhr

963380cookie-checkDynamisch wechselnde Navigationslinks (nächste und vorherige) in WordPress über AJAX

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy