Page de liste d'articles Pagination
1. Chargez la bibliothèque jQuery
Puisqu'il s'agit d'un AJAX axé sur JQuery, le chargement de la bibliothèque jQuery est un must.
2. Format de liste d'articles
Sur la page de votre liste d'articles (Home Page Index.php, archive.php), vous devez vous assurer qu'il existe une structure similaire à celle qui suit
<! - conteneur contenant tous les articles -> <div id = "contenu"> <! - Conteneur pour chaque article -> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
3. Ajouter à la navigation par défaut
Parce que Ajax Paging obtient à chaque fois le contenu de la page suivante, vous n'avez qu'à appeler la navigation par défaut de WordPress. Ajoutez le code suivant à votre index.php (ou autre page de liste d'articles) pour générer la navigation WordPress par défaut.
<div id = "pagination"> <? php next_posts_link (__ ('charger davantage')); ?> </div>4.Ajax Obtenez la page suivante
Ajoutez le code suivant à votre fichier de sujet JS
// Utiliser Live () pour rendre JS toujours valide pour le nouveau contenu obtenu via ajax $ ("# pagination a"). Live ("cliquez", fonction () {$ (this) .addclass ("chargement"). Text ("Chargement ..."); $ .ajax ({type: "post", url: $ (this) .Attr (href ") +" #Content ", Fonction: #Conte $ (data) .Find (# Content .Post "); Undefined) {$ ("# pagination a").5. Page de déclencheurs de défilement tour
Si vous souhaitez tourner automatiquement la page lorsque la souris défile en bas de la page, vous pouvez modifier le code par le style suivant
// Binding Scroll Event $ (Window) .Bind ("Scroll", function () {// Déterminez si la barre de défilement de la fenêtre est proche du bas de la page if ($ (document) .scrollTop () + $ (Window) .Height ()> $ (document) .height () - 10) {$ (this) .addclass ('chargement'). "Post", URL: $ (this) .attr ("href") + "#Content", Success: Function (data) {result = $ (data) .find ("# contenu .post"); $ ("# pagination a"). reposovelass ("chargement"). });}});6. Ajouter la navigation CSS
Ajoutez une section CSS à la navigation pour l'embellir. Vous pouvez également préparer un diagramme GIF pour indiquer qu'il se charge. Ce qui suit est le style de mélodie:
#Pagination {padding: 20px 0 0 30px; } #pagination .NextPostsLink {width: 600px; Couleur: # 333; Décoration du texte: aucune; Affichage: bloc; rembourrage: 9px 0; Texte-aligne: Centre; taille de police: 14px; } #pagination .NextPostsLink: hover {background-Color: #cccccc; Décoration du texte: aucune; Border-Radius: 5px; -Moz-Border-Radius: 5px; -Webkit-Border-Radius: 5px; } #pagination .loading {background: url ("images / charging.gif") 240px 9px no-repeat; Couleur: # 555; } #pagination .loading: hover {background-Color: transparent; curseur: par défaut; }Commentaire de la pagination
1. Préparer
Chargement de la bibliothèque jQuery, cela n'est pas expliqué.
2. Pagination de commentaires WordPress ouverts
Open WordPress Backend - Paramètres - Discussion, consultez la page pour afficher les commentaires dans "d'autres paramètres de commentaires", définissez le nombre de commentaires. Le nombre de commentaires ici n'est calculé que pour les principaux commentaires, et la réponse aux commentaires ne sera pas calculée. Ici, j'ai rempli un nombre plus important (15), car la pagination de commentaires est trop détaillée et rendra les utilisateurs qui lisent les commentaires précédents.
Après avoir ouvert la pagination de commentaires en arrière-plan, ajoutez le code suivant à l'endroit où vous devez ajouter une navigation de pagination dans commentaires.php (s'il y a du code similaire dans le sujet, vous n'avez pas besoin de l'ajouter à nouveau.
<nav id = "commentaires-navi"> <? php paginate_comments_links ('prev_text =? & next_text =?');?> </ nav>3. SEO de la pagination de commentaires
Du point de vue du référencement, la pagination de commentaires provoquera du contenu en double (le contenu de la pagination est le même, et les mots clés et la description sont les mêmes), il est donc facile pour les blogs avec de nombreux commentaires de rétrograder leurs droits car ils sont trop de contenu en double. Par conséquent, certains traitements sont nécessaires dans le référencement. Le moyen le plus pratique et le plus efficace consiste à utiliser des balises Meta. Ajoutez le code suivant sous la balise META d'origine de votre en-tête.php, afin que les pages qui paginaient ne soient interdites d'être incluses par les moteurs de recherche et empêcher le contenu d'être dupliqué.
<? 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 (! vide ($ cPage) ||! vide ($ commentpage)) {echo '<meta name = "robots" contenu = "noindex, nofollow" />'; écho "/ n"; }}?>4.Ajax Commentaires
Selon ce qui précède, il y a des commentaires dans le sujet. Pour réaliser des commentaires à Ajax, vous n'avez besoin que de JavaScript pour coopérer. Cependant, avant cela, vous devez d'abord ajouter un élément avant la liste de commentaires pour indiquer que la liste se charge lors de l'affichage d'une nouvelle liste de commentaires de page. Supposons que la structure du module de commentaire du modèle de sujet commentaires.php est la suivante:
<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 = "commentaires-navi"> <a href = "#"> 1 </a> ... </ nav> </div>
Ajoutez le code JS suivant à votre fichier JS pour implémenter la pagination des commentaires
// commentaire paginant $ body = (window.opera)? (Document.compatmode == "css1compat"? $ ('Html'): $ ('body')): $ ('html, body'); // déclenche la pagination lorsque vous cliquez sur le lien de navigation de la pagination $ ('# commentaire-navi a'). Live ('click', fonction (e) {E.PreventDefrd;); $ .ajax ({type: "get", url: $ (this) .attr ('href'), beforesend: function () {$ ('# commentaires-navi'). retire (); $ ('. comment_list'). retire (); $ ('# charging-comements'). $ ('# commentaires-list-title'). offset (). Top - 65}, 800); $ ('# Chargeing-Comements'). After (result.fadein (500)); $ ('. comment_list'). After (nextLink);}});});CSS pour la barre de chargement (pour référence uniquement)
La copie de code est la suivante:
# Charging-Comements {affichage: aucun; Largeur: 100%; hauteur: 45px; Contexte: # A0D536; Texte-aligne: Centre; Couleur: #FFF; taille de police: 22px; hauteur de ligne: 45px; }