Artikelliste Pagination
1. Laden Sie die JQuery -Bibliothek
Da es sich um einen von JQuery gesteuerten Ajax handelt, ist das Laden der JQuery-Bibliothek ein Muss.
2. Artikellistenformat
Auf Ihrer Artikellistenseite (Homepage Index.php, archive.php) müssen Sie sicherstellen, dass eine ähnliche Struktur wie folgt vorliegt
<!-Container, der alle Artikel enthält-> <div id = "content"> <!-Container für jeden Artikel-> </div> <div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
3.. Hinzufügen zur Standardnavigation
Da Ajax Paging jedes Mal den Inhalt der nächsten Seite erhält, müssen Sie nur die Standardnavigation von WordPress aufrufen. Fügen Sie Ihrem index.php (oder einer anderen Artikelliste) den folgenden Code hinzu, um die Standard -WordPress -Navigation zu generieren.
<div id = "pagination"> <? php next_posts_link (__ ('laden more')); ?> </div>4.Ajax die nächste Seite erhalten
Fügen Sie Ihrem Thema JS -Datei den folgenden Code hinzu
// Verwenden Sie Live (), um Js immer noch für neue Inhalte gültig zu machen, die über Ajax $ ("#Pagination a"). Live ("Click", Funktion () {$ (this) .AddClass ("Laden"). Text ("Laden ..."); $ (Daten) .Find ("#content .post"); Undefiniert) {$ ("#Pagination a"). Attr ("href", NextHref);5. Scroll -Trigger -Seitenwende
Wenn Sie die Seite automatisch drehen möchten, wenn die Maus am Ende der Seite scrollt, können Sie den Code in den folgenden Stil ändern
// Bildlaufereignis $ (Fenster) .bind ("Scroll", function () {// Bestimmen Sie, ob die Scrollbar des Fensters nahe am unteren Teil der Seite liegt ($ ($ (document) .ScrollTop () + $ (Fenster) .Height ()> $ (Dokument) .Height () - 10) {$) .addClass ('Lade ('). "Post", URL: $ (this) .Attr ("href") + "#Content", Erfolg (Daten) {result = $ (Daten) .Find ("#content .post"); $ ("#Pagination a"). });}});6. Navigation CSS hinzufügen
Fügen Sie der Navigation einen CSS -Abschnitt hinzu, um ihn zu verschönern. Sie können auch ein GIF -Diagramm vorbereiten, um anzuzeigen, dass es geladen wird. Das Folgende ist der Stil der Melodie:
#Pagination {Padding: 20px 0 0 30px; } #Pagination .NextPostSlink {width: 600px; Farbe: #333; Textdekoration: Keine; Anzeige: Block; Polsterung: 9px 0; Text-Align: Mitte; Schriftgröße: 14px; } #Pagination .NextPostSlink: Hover {Background-Color: #ccccc; Textdekoration: Keine; Border-Radius: 5px; -moz-border-radius: 5px; -Webkit-Border-Radius: 5px; } #pagination .loading {Hintergrund: URL ("Bilder/laden.gif") 240px 9px no-repeat; Farbe: #555; } #Pagination .Lading: Hover {Hintergrundfarbe: transparent; Cursor: Standard; }Kommentarpaginierung
1. Bereiten Sie sich vor
Wenn Sie die JQuery -Bibliothek laden, wird dies nicht erklärt.
2. Öffnen Sie die WordPress -Kommentar -Pagination
Öffnen Sie WordPress Backend - Einstellungen - Diskussion, überprüfen Sie die Seite, um Kommentare in "Anderen Kommentareneinstellungen" anzuzeigen, und legen Sie die Anzahl der Kommentare fest. Die Anzahl der Kommentare hier wird nur für die Hauptkommentare berechnet, und die Antwort auf Kommentare wird nicht berechnet. Hier habe ich eine größere Zahl (15) ausgefüllt, da der Kommentarpaging zu detailliert ist und es für Benutzer unpraktisch macht, frühere Kommentare zu lesen.
Fügen Sie nach dem Öffnen von Kommentaren im Hintergrund den folgenden Code hinzu, wo Sie in comments.php Paging -Navigation hinzufügen müssen (wenn im Thema einen ähnlichen Code vorhanden ist, müssen Sie ihn nicht erneut hinzufügen. Zusätzlich wird das NAV -Tag im Code HTML5 -Tag ist. Wenn das Thema HTML5 nicht verwendet, wird Div stattdessen verwendet.))
<nav id = "comments-navi"> <? php paginate_comportments_links ('prev_text =? & Next_text =?');?> </nav>3. SEO des Kommentars Paging
Aus Sicht der SEO führt das Kommentar -Paging zu doppelten Inhalten (der Inhalt des Pagings ist gleich, und Schlüsselwörter und Beschreibung sind gleich), sodass Blogs mit vielen Kommentaren einfach sind, um ihre Rechte herabzustufen, da sie zu viel doppelte Inhalte sind. Daher sind in SEO einige Behandlungen erforderlich. Der bequemste und effektivste Weg ist die Verwendung von Meta -Tags. Fügen Sie den folgenden Code unter das ursprüngliche Meta -Tag Ihres Header.php hinzu, damit die Seiten, die Paging sind, von Suchmaschinen einbezogen werden und verhindern, dass Inhalte dupliziert werden.
<? php if (is_single () || is_page ()) {if (function_exists ('get_query_var')) {$ cpage = intval (get_query_var ('cPage')); $ commentpage = intval (get_query_var ('comment Page')); } if (! echo "/n"; }}?>4.Ajax Kommentare
Nach den oben genannten Angaben gibt es Kommentare im Thema. Um ein Kommentarpaging in Ajax zu erzielen, benötigen Sie nur JavaScript, um zusammenzuarbeiten. Vorher müssen Sie jedoch zuerst ein Element vor der Kommentarliste hinzufügen, um anzuzeigen, dass die Liste beim Anzeigen einer neuen Seiten -Kommentarliste geladen wird. Angenommen, die Struktur der Kommentarmodulstruktur der Themenvorlagekommentare.php lautet wie folgt:
<div> <h3 id="comments-list-title">Comments</h3> <!-- Show new comments loading--> <div id="loading-comments"><span>Loading...</span></div> <!-- Comments List--> <ol> <li>...</li> <li>...</li> <li>...</li> </ol> <!-- Comments Pagination Navigation--> <nav id = "comments-navi"> <a href = "#"> 1 </a> ... </nav> </div>
Fügen Sie Ihrer JS -Datei den folgenden JS -Code hinzu, um eine Kommentarpaginierung zu implementieren
// Kommentar paging $ body = (window.opera)? (Document.compatmode == "css1compat"? $ .ajax ({type: "get", url: $ (this) .attr ('href'), beforesend: function () {$ ('#comments-navi'). REMET (); $ ('. comment_list'). REMET (); $ ('#Kommentare-Listen-Titel'). Offset (). Top-65}, 800); $ ('#ladenkompetenz'). Nach (Ergebnis.Fadein (500));CSS für die Ladeleiste (nur als Referenz)
Die Codekopie lautet wie folgt:
#Ladekomente {Anzeige: Keine; Breite: 100%; Höhe: 45px; Hintergrund: #A0D536; Text-Align: Mitte; Farbe: #fff; Schriftgröße: 22px; Zeilenhöhe: 45px; }