jQuery lädt WordPress-Seiten über Ajax

Lesezeit: 7 Minuten

Ich versuche, ein WordPress-Design einzurichten, das Seiten (keine Beiträge) mit AJAX lädt. Ich folgte diese Anleitung aber es ist mir nicht gelungen, die richtigen Seiten zu laden.

Die Links zu den Posts werden mit dem Post-Slug generiert

http://local.example.com/slug/

Also habe ich mich angepasst

 jQuery(document).ready(function($){
        $.ajaxSetup({cache:false});
        $("a.bar").click(function(e){
            $('page-loader').show();
            var that = $(this).parent();

            $('.column').not($(this).parent()).animate({width: 'toggle',opacity:'0.75'}, 700, function() {

            });

            var post_id = $(this).attr("href");
            $("#page-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>" + post_id,{id:post_id});

            return false;
        });
    });

Die URL ist korrekt, aber es wird nichts geladen.


<?php
/*
Template Name: Triqui Ajax Post
*/
?>
<?php
$post = get_post($_POST['id']);
?>
<?php if ($post) : ?>
    <?php setup_postdata($post); ?>
    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

        <div class="entry">
            <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div>

    </div>
<?php endif; ?>

  • Dies ist nicht wirklich angemessen für AJAX in WordPress. Hier ist eine interessante Codex-Seite zum Thema – codex.wordpress.org/AJAX_in_Plugins

    – Nathan Dawson

    15. November 2014 um 1:08 Uhr

Ich konnte das also tatsächlich zum Laufen bringen, indem ich dem zuvor erwähnten Tutorial folgte. Ich denke, das Tutorial ist vielleicht etwas undeutlich geschrieben worden..

Schritt 1

Erstellen Sie eine benutzerdefinierte Seitenvorlage, indem Sie im Stammverzeichnis eine PHP-Datei mit einem Kommentarkopf ähnlich dem folgenden erstellen:

<?php
/*
Template Name: Ajax
*/
?>

Ich habe es aus semantischen Gründen Ajax genannt, aber im Tutorial hat der ursprüngliche Autor es ‘Triqui Ajax’ genannt. Notieren Sie sich den Namen der von Ihnen erstellten PHP-Datei, da Sie ihn später in Schritt 4 erneut verwenden werden.

Schritt 2

Sobald dies erledigt ist, können Sie mit der Codierung Ihrer benutzerdefinierten Seitenvorlage fortfahren, mit Ausnahme des Hinzufügens der kommentierten Zeilen unten (Zeilen 2 bis 5).

<?php
    $post = get_post($_POST['id']); // this line is used to define the {id:post_id} which you will see in another snippet further down

    if ($post) { // this is necessary and is a replacement of the typical `if (have_posts())`
        setup_postdata($post); // needed to format custom query results for template tags ?>
        <!-- everything below this line is your typical page template coding -->
        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

            <h2><?php the_title(); ?></h2>
            <small><?php the_time('F jS, Y') ?></small>
            <span><?php the_author() ?></span>

            <div class="entry">
                <?php the_content(); ?>
            </div>

        </div>

<?php }

Schritt 3

Sobald Sie Ihre benutzerdefinierte Seitenvorlage erstellt haben, sollten Sie sich jetzt beim wp-admin anmelden und zuerst zu gehen Settings -> Permalinks und stelle es ein Day and Name oder Custom Structure. Der Aufbau sollte so aussehen:

/%year%/%monthnum%/%day%/%postname%/

Ob du das manuell reinschreibst Custom Structure oder auswählen Day Name es sollte wie das obige Snippet aussehen.

Schritt 4

Gehen Sie jetzt, um eine neue Seite zu erstellen. Pages ->Neu hinzufügen’ und eine neue Seite erstellen. Benennen Sie es nach Belieben, aber am besten benennen Sie es genauso wie die Seitenvorlage, die Sie in Schritt 1 erstellt haben.

Speichern Sie es als leere Seite. JETZT IST DIES DER WICHTIGE TEIL Sie müssen sicherstellen, dass der Permalink der Seite genau denselben Namen hat wie die Datei, die Sie in Schritt 1 erstellt haben. Der einzige Unterschied besteht darin, dass er nur in Kleinbuchstaben geschrieben sein sollte.

Schritt 5

Stellen Sie vor dem Speichern der Seite auch sicher, dass Sie die Seitenvorlage aus dem Auswahlmenü ausgewählt haben. Wenn Sie dieses Menü nicht sehen, haben Sie wahrscheinlich die Vorlagendatei nicht richtig erstellt, oder Sie haben sie nicht im Stammverzeichnis erstellt, oder Sie haben die Kommentarkopfzeile nicht richtig erstellt. Grundsätzlich wird das Menü nicht angezeigt, wenn Sie keine benutzerdefinierten Seitenvorlagen erstellt haben, es zeigt nur an, ob es sich um eine ordnungsgemäße benutzerdefinierte Seitenvorlage handelt, die im Stammverzeichnis Ihres Designs gespeichert ist.

Geben Sie hier die Bildbeschreibung ein

Beurteilung

Sie sollten jetzt eine PHP-Datei haben. Und eine Seite im WP-Admin. Die Seite sollte eine Permalink-URL haben, die mit dem Dateinamen der PHP-Datei übereinstimmt (alles in Kleinbuchstaben), und der Seite sollte die Seitenvorlage dieser Datei zugewiesen werden.

Diese Seite sollte leer bleiben und niemals verwendet werden.

Schritt 6

Im header.php unmittelbar nach dem Code <?php wp_head() ?> füge das folgende Skript hinzu:

<script>

    jQuery(document).ready(function($){
        $.ajaxSetup({cache:false});
        $("THELINK").click(function(e){ // line 5
            pageurl = $(this).attr('href');
            if(pageurl!=window.location) {
                window.history.pushState({path: pageurl}, '', pageurl);
            }

            var post_id = $(this).attr("rel")
            $("#TARGET").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax/",{id:post_id}); // line 12
            return false;
        });
    });
</script>

Ersetzen Sie THELINK durch das Element, an dem Sie das platziert haben <?php the_permalink ?> Code.

Die einzigen Zeilen, die Sie ändern müssen, sind die Zeilen 5 und 12. Achten Sie auf Zeile 12, wo es steht ajax Dies ist der Name der PHP-Datei, die ich in Schritt 1 erstellt habe, und der Name des Permalinks der Seite, die ich in Schritt 5 erstellt habe.

Auch in Zeile 12 am Anfang dieser Zeile sollten Sie wechseln TARGET zu dem Element, in das der Inhalt geladen werden soll.

Stellen Sie sicher, dass Sie jQuery vor diesem Skript richtig geladen haben.

Schritt 7

Weiter zu Ihrem index.php Datei oder in welcher Datei auch immer sich Ihre Schleife befindet. Suchen Sie dort, wo Sie den Code haben the_permalink die auf einem Anker-Tag sein wird. Sie müssen ein rel-Attribut mit hinzufügen the_ID() die verwendet wird von {id:post_id} in Zeile 12 in Schritt 6:

<a href="https://stackoverflow.com/questions/26941256/<?php%20the_permalink();%20?>" class="bar" rel="<?php the_ID(); ?>" title="<?php the_title(); ?>">

Getan

Das ist es. Es sollte jetzt funktionieren. Die Seiten sollten mit AJAX geladen werden, auch die URL des Browsers ändert sich entsprechend.

Sie können jetzt so viele Seiten erstellen, wie Ihr Herz begehrt, andere benutzerdefinierte Seitenvorlagen erstellen und sie zuweisen, was immer Sie möchten. Lassen Sie einfach die Datei, die Sie in Schritt 5 erstellt haben, für immer dort leben, wo sie ist, als leere Seite.

Wenn es immer noch nicht funktioniert, sind Sie wahrscheinlich hoffnungslos verloren und haben keine Ahnung, was Sie tun. Sie haben höchstwahrscheinlich eine Art jQuery-Konflikt erzeugt oder jQuery nicht richtig geladen.

  • +1 Ich habe drei Tage damit verbracht, mir den Kopf darüber zu zerbrechen, und Ihre Erklärung hat dies schließlich klar gemacht, vielen Dank.

    – Esd

    15. Dezember 2016 um 14:33 Uhr

  • Gibt es eine SEO-Auswirkung für Websites, die mit diesem Ansatz erstellt wurden?

    – Zugoase

    22. März 2018 um 9:02 Uhr


  • Das funktioniert, aber ich sehe nicht, wie Seitenvorlagen und dergleichen geladen werden sollen? Können Sie das erweitern? Ich kann Beitragsdaten wie Titel, Auszug usw. zurückgeben und diese per Ajax zurückgeben lassen, um sie in den Dom einzufügen … aber nicht meinen bereits erstellten Inhalt der Seitenvorlage

    – Guten Tag

    27. Mai 2018 um 1:10 Uhr

1646638748 480 jQuery ladt Wordpress Seiten uber
Sree

Bitte überprüfen Sie diesen Link Laden Sie Beiträge mit Ajax und jQuery in div oder Sie können dieses Plugin verwenden Erweiterter AJAX-Seitenlader.

  • Beachten Sie, dass sich die Frage des OP auf Seiten bezieht und der erste Link, den Sie gepostet haben, ein Tutorial für AJAX zu Posts ist.

    – DᴀʀᴛʜVᴀᴅᴇʀ

    2. Oktober 2015 um 15:06 Uhr


  • Ich ziehe es auch vor, mich nicht blind auf den Plugin-Code anderer Entwickler zu verlassen, mit denen ich nicht vertraut bin.

    – davidcondrey

    23. Oktober 2016 um 6:20 Uhr

jQuery ladt Wordpress Seiten uber
Kidkie

Ich habe eine Fehlermeldung erhalten

Hinweis: Verwendung der undefinierten Konstante HTTP_HOST – angenommen ‘HTTP_HOST’ in
/var/www/***/public_html/wp-content/themes/*****/header.php auf Linie XX.

Behoben durch Hinzufügen von einfachen Anführungszeichen HTTP_HOST in:

$("#TARGET").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax/",{id:post_id});

964050cookie-checkjQuery lädt WordPress-Seiten über Ajax

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

Privacy policy