Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Créer une pagination pour les commentaires

Rédigé par jack le Aucun commentairee


Je vous propose de mettre en place un système de pagination pour les commentaires à base de jQuery.
Pour ce tutoriel je me base sur: Mode d'emploi...

Installation

Commencez par télécharger cette archive et décompressez le fichier .zip dans le dossier de votre thème. Pour la démo j'utilise le thème par défaut de PluXml stocké dans le dossier themes/defaut. Ce fichier .zip contient les scripts javascript pour faire fonctionner le système de pagination des commentaires.

Editez le fichier header.php de votre thème.
Avant la ligne </head>, ajoutez le code suivant:


<?php if($plxShow->mode()=='article') : ?>
<!-- <comments pagination> -->
<script src="<?php $plxShow->template(); ?>/paginate/jquery-1.10.2.min.js"></script>
<script src="<?php $plxShow->template(); ?>/paginate/paginate.min.js"></script>
<script>
$(document).ready(function(){
	$('#paginate_container').pajinate({
		item_container_id:'.paginate_content',
		nav_panel_id:'.paginate_navigation',		
		items_per_page:5,
		nav_label_first:'«', // premier
		nav_label_prev:'‹', // précédent 
		nav_label_next:'›', // suivant
		nav_label_last:'»', // dernier
		abort_on_small_lists:true
	});  
	
	$('.page_navigation a').click(function(){
		var new_position = $('#comments').offset();
		window.scrollTo(new_position.left,new_position.top);
		return false;
	});

});
</script>
<style>
#paginate_container li{
	list-style: none;	
	padding:0;
	margin:0;
}
.paginate_navigation {
	margin: 0 0 15px 60px;
}
.paginate_navigation a, .alt_paginate_navigation a{
	margin:0 7px 0 0;
	text-decoration:none;
	font-family: Tahoma;
	font-size: 12px;
	color:#666;
}
.active_page{
	color:#ff0000 !important;
}
</style>
<!-- </comments pagination> -->
<?php endif; ?>

Editez le fichier commentaires.php de votre thème.
Supprimer les lignes suivantes,

	<div id="comments">

	<h2>
		<?php echo $plxShow->artNbCom() ?>
	</h2>

		<?php while($plxShow->plxMotor->plxRecord_coms->loop()): # On boucle sur les commentaires ?>

		<div id="<?php $plxShow->comId(); ?>" class="comment">
			<blockquote>
				<p class="info_comment"><a class="num-com" href="https://pluxopolis.net/<?php $plxShow->ComUrl() ?>" title="#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?>">#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?></a> <?php $plxShow->comDate('#day #num_day #month #num_year(4) @ #hour:#minute'); ?> <?php $plxShow->comAuthor('link'); ?> <?php $plxShow->lang('SAID') ?> : </p>
				<p class="content_com type-<?php $plxShow->comType(); ?>"><?php $plxShow->comContent() ?></p>
			</blockquote>
		</div>

		<?php endwhile; # Fin de la boucle sur les commentaires ?>

		<div class="rss">
			<?php $plxShow->comFeed('rss',$plxShow->artId()); ?>
		</div>

	</div>

et remplacez les par le code suivant: 

	<div id="comments">

	<h2>
		<?php echo $plxShow->artNbCom() ?>
	</h2>

	<div id="paginate_container">
		<ul class="paginate_content">
		<?php while($plxShow->plxMotor->plxRecord_coms->loop()): # On boucle sur les commentaires ?>
		<li>
		<div id="<?php $plxShow->comId(); ?>" class="comment">
			<p class="info_comment"><a class="num-com" href="https://pluxopolis.net/<?php $plxShow->ComUrl() ?>" title="#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?>">#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?></a> <?php $plxShow->comDate('#day #num_day #month #num_year(4) @ #hour:#minute'); ?> <?php $plxShow->comAuthor('link'); ?> <?php $plxShow->lang('SAID') ?> : </p>
			<p class="content_com type-<?php $plxShow->comType(); ?>"><?php $plxShow->comContent() ?></p>
		</div>
		</li>
		<?php endwhile; # Fin de la boucle sur les commentaires ?>
		</ul>
		<div class="paginate_navigation"></div>		
	</div>
	
	<div class="rss">
		<?php $plxShow->comFeed('rss',$plxShow->artId()); ?>
	</div>

	</div>

Sauvegardez les fichiers. Voilà le système de pagination est en place.

Explications

Paginate est un script javascript qui utilise jQuery pour créer un système de pagination à partir d'une liste html.
Pour fonctionner il faut:
  1. un bloc containeur appelé paginate_container
  2. une liste d'éléments appelée paginate_content
  3. un bloc paginate_navigation qui recevra le sytème de pagination
Exemple:

<div id="paginate_container">
	<ul class="paginate_content">
		<li>
			<p>One</p>
		</li>
		<li>
			<p>Two</p>
		</li>
		<li>
			<p>Three</p>
		</li>
		<li>
			<p>Four</p>
		</li>
		<li>
			<p>Five</p>
		</li>
		<li>
			<p>Six</p>
		</li>
		<li>
			<p>Seven</p>
		</li>
		<li>
			<p>Eight</p>
		</li>
	</ul>
	<div class="paginate_navigation"></div>
</div>
Les paramètres du système de pagination sont les suivants: 

	item_container_id:'.paginate_content',
	nav_panel_id:'.paginate_navigation',		
	items_per_page:5,
	nav_label_first:'«', // premier
	nav_label_prev:'‹', // précédent 
	nav_label_next:'›', // suivant
	nav_label_last:'»', // dernier
	abort_on_small_lists:true
  • item_container_id: nom du container principal
  • nav_panel_id: nom de bloc de pagination
  • items_per_page: nombre de commentaires par page
  • nav_label_first: libellé du lien permettant d'aller à la première page
  • nav_label_prev: libellé du lien permettant d'aller à la page précédente
  • nav_label_next: libellé du lien permettant d'aller à la page suivante
  • nav_label_last: libellé du lien permettant d'aller à la dernière page
  • abort_on_small_lists: si true pas d'affichage du système de commentaires quand peu de commentaires (autre valeur possible: false)
D'autres paramètres sont disponibles sur cette page.

Un problème du script paginate que j'ai trouvé est que lorsque l'on clique sur un numéro de page, l'affichage reste en bas de page, ce qui nous oblige à scroller vers le haut pour lire le premier commentaire de la liste affichée. J'ai donc écrit ce petit "hack" avec quelques lignes de jquery pour faire un scroll automatique de la page vers le haut dès que l'on clique sur un lien <a> dans la barre de navigation identifiée par la <div class="page_navigation"> 

	$('.page_navigation a').click(function(){
		var new_position = $('#comments').offset();
		window.scrollTo(new_position.left,new_position.top);
		return false;
	});
Celui-ci ne fonctionnera que si dans la page commentaires.php la ligne suivante est présente. 

<div id="comments">
Si besoin, changez dans le code #comments par l'id de la balise où il faut remonter.

Petite remarque: afin de ne prendre en compte le système de pagination que lors de la visualisation d'un article, je fais un test sur le mode d'affichage en cours pour ne charger les scripts et le code nécessaire qu'en mode article 

<?php if($plxShow->mode()=='article') : ?>
...
<?php endif; ?>
Pour personnaliser l'affichage de la barre de navigation, c'est au niveau du code css ajouté dans la balise <style> dans le fichier header.php 

<style>
#paginate_container li{
	list-style: none;	
	padding:0;
	margin:0;
}
.paginate_navigation {
	margin: 0 0 15px 60px;
}
.paginate_navigation a, .alt_paginate_navigation a{
	margin:0 7px 0 0;
	text-decoration:none;
	font-family: Tahoma;
	font-size: 12px;
	color:#666;
}
.active_page{
	color:#ff0000 !important;
}
</style>
En jouant sur les différents propriétés css vous pourrez par exemple modifier la couleur des textes des pages et la couleur de fond.

En cas de problèmes

Quelques pistes à vérifier si le système de pagination des commentaires ne fonctionne pas:
  • Est-ce que le dossier paginate est bien présent dans votre thème de manière à avoir le répertoire themes/defaut/paginate ?
  • Est-ce que jquery est utilisé plusieurs fois sur votre site, où plusieurs versions différentes viendraient en conflit ?
  • Utilisez-vous le plugin jquery qui viendrait en conflit avec jQquery 1.10.2 chargé au début de la page header.php
  • Avez-vous bien respecter la procédure d'installation et le copier-coller
  • Si la barre de navigation s'affiche mal, les propriétés css rentrent peut-être en conflit avec celles de votre feuille de style (fichier style.css)
N'hésitez pas à tester le système de pagination des commentaires avec le thème par défaut de PluXml pour vous assurez qu'il est opérationnel et comprendre son fonctionnement. Cela vous sera plus facile pour l'adapter et l'intégrer à votre site. Les problèmes sont souvent liés à l'organisation de votre thème.

DClassé dans : PluXml ,Mots clés : PluXml, jQuery, Programmation, Tuto, Commentaires, Navigation

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

Les commentaires sont fermés.

Top