PluxThèmes

Nous avons à ce stade de cette série d'articles,du code dans nos fichiers et un thème en partie fonctionnel qui n'affiche pas encore les contenus.

Dans cet article, nous allons remplir la page d'accueil home.php(ou la page blog si votre PluXml a une page statique en accueil) et afficher les contenus des articles article.php.

rappel

la structure actuelle choisie pour construire nos fichier est:

	<header></header>
	<main> <!-- c'est ici que le code de nos deux fichiers vont s'afficher --> </main>
	<footer></footer>

Nos gabarits de contenus sont actuellement construit comme ceci:

<?php if(!defined('PLX_ROOT')) exit; ?>
	<?php include __DIR__.'/header.php'; ?>
	<!-- ici viendront le HTML et les fonctions d'affichage de Pluxml / cette parie est contenu dans la balise main -->
<?php include __DIR__.'/footer.php'; ?>

Fonctions communes :

La majorité des fonctions que nous utiliseront pour ces deux pages seront les même pour extraire les données relatives aux articles.

La page home.php aura par exemple une fonction de pagination lorsque le nombre d'article est supérieur au nombre d'article à afficher par page.

La page article.php quand à elle aura une fonction pour afficher les commentaires, ce code sera inclus dans un gabarit annexe: commentaires.php.

break

Pourquoi faut-il casser et distribuer le code des pages dans plusieurs fichiers ?

Toute les parties commune à chaque page du site sont effectivement à mettre dans des fichiers séparés pour ne pas avoir le même code dans plusieurs fichiers.

Lorsqu'une correction ou modification est à effectuer, il suffit d'éditer un seul fichier pour que cela soit automatiquement répercuté sur l'ensemble du site.

D'autres, comme la partie gérant les commentaires, valent d'être extraites dans un fichier à part.

Ce fichier pour les commentaires sera chargé alors uniquement pour les articles où les commentaires sont autorisé. C'est une économie de ressource et d'energie, si minime soit-elle, elle se cumule au fil du temps.

L'edition et la modification d'un gabarit est aussi facilité en ne contenant que ce à quoi il est destiné à afficher.

La différence principale

Ces deux pages afficheront des données en provenance des articles, l'une affichera un résumé de plusieurs articles et l'autre un seul article à la fois.

Les fonctions pour extraire les données relatives à un article sont les mêmes et seront choisies en fonction du type de page.

Listing des fonctions relatives aux articles

L'identifiant de l'article

Accessoirement il servira à créer une id unique dans le HTML de la page. <?php $plxShow->artId() ?>

PluXml à besoin d'identifier l'article pour gerer son affichage, son édition et son lien.

Titre

Le titre en mode texte : <?php $plxShow->artTitle() ?> Pour la page article

Le titre avec son lien vers l'article : <?php $plxShow->artTitle('link') ?> pour la page home

Le contenu

Le contenu complet de l'article sera afficher avec <?php $plxShow->artContent(true) ?> Plutôt pour la page article

L'introduction

L'introduction de l'article, si toutefois vous avez créer votre article de cette façon, sera afficher avec <?php $plxShow->artChapo() ?> Pour la page home

L'image d'accroche

L'image d'accroche de l'article, si toutefois vous en avez selectionné une, sera afficher avec <?php $plxShow->artThumbnail() ?>

L'auteur

Le nom de l'auteur sera afficher avec <?php $plxShow->artAuthor() ?>

Les infos de l'auteur

Les infos de l'auteur seront afficher avec <?php $plxShow->artAuthorInfos() ?>

La ou les catégories de l'article

L'affichage de(s) catégorie(s) se fait avec: <?php $plxShow->artCat() ?>

Les mots clés de l'article

L'affichage des mots clés se fait avec: <?php $plxShow->artTags() ?>

La date de publication de l'article

La date de publication de l'article se fait avec: <?php $plxShow->artDate('$format') ?>
Cette fonction permet de modifier le format de l'affichage de la date, consulter le lien vers le wiki.

Une boite HTML pour l'affichage

HTML propose toute une série de balises sémantique qui vont nous permettre de construire notre boite article et d'afficher ces données dans les balises appropriées

Voici une structure possible et trés similaire pour les deux pages que l'on va utiliser pour les données d'un article:

<article id="identifiant">
	<header>
		<h2>Titre</h2>
		<img alt>
		<p>Auteur : <time>date</time> | nb commentaires</p>
		<p>Catégories - Mots clés </p>
	</header>
	<div>
		<p>intro</p><!-- ou Contenus en mode article -->
		<p>lire la suite (s'affiche au besoin) </p>
	</div>
	<!-- ce qui suit en mode article -->
	<aside>
		<!-- infos auteur en mode article -->
		<!-- inclusion des commentaires en mode article -->
	</aside>
</article>

Pour afficher les données il reste à y insérer les différentes fonctions d'extractions pour l'affichage, ce qui donne en théorie:

<article id="art-<?php $plxShow->artId() ?>">
	<header>
		<h2><?php $plxShow->artTitle('link') ?></h2><!-- ! retirer la variable 'link' en mode article -->
		<?php $plxShow->artThumbnail() ?>
		<p>Auteur : <?php $plxShow->artAuthor() ?> - <time  datetime="<?php $plxShow->artDate(); ?>"><?php $plxShow->artDate() ?></time> | <?php $plxShow->artNbCom('#nb commentaire','#nb commentaire','#nb commentaires') ?></p>
		<p>Catégories: <?php $plxShow->artCat() ?> - Mots clés: <?php $plxShow->artTags() ?> </p>
	</header>
	<div>
		<?php $plxShow->artChapo() ?><!-- ou <?php # $plxShow->artContent() ?>s en mode article -->
	</div>
	<!-- ce qui suit en mode article 
	<aside>-->
		<!-- <?php # $plxShow->artAuthorInfos() ?> -->
		<!-- inclusion des commentaires en mode article via include
	</aside>  -->
</article>

Les infos en mode article sont commentés, nous allons utiliser cette première structure pour afficher les articles de votre PluXml sur sa page d'accueil.

note

La balise article reçoit en id l'identifiant avec un préfixe en lettre art- pour deux raisons:

1. Les pages statiques ont aussi un identifiant en chiffre, le préfixe permet de les différencier dans les liens internes, dans les feuilles de styles et dans vos scripts.
2. Une class ou une id doivent obligatoirement avoir une lettre en première position dans leur nom pour être valide. Sans respecté cette règle, vos sélecteur en CSS ou en JavaScript peuvent être inopérant et difficile à déboguer

test d'integration

Nous pouvons modifier et intégrer dans les fichiers home.php et article.php nos codes HTML et fonctions de PluXml:

<?php if(!defined('PLX_ROOT')) exit; ?>
	<?php include __DIR__.'/header.php'; ?>
	
	<article id="art-<?php $plxShow->artId() ?>">
	<header>
		<h2><?php $plxShow->artTitle('link') ?></h2><!-- ! retirer la variable 'link' en mode article -->
		<?php $plxShow->artThumbnail() ?>
		<p>Auteur : <?php $plxShow->artAuthor() ?> - <time  datetime="<?php $plxShow->artDate(); ?>"><?php $plxShow->artDate() ?></time> | <?php $plxShow->artNbCom('#nb commentaire','#nb commentaire','#nb commentaires') ?></p>
		<p>Catégories: <?php $plxShow->artCat() ?> - Mots clés: <?php $plxShow->artTags() ?> </p>
	</header>
	<div>
		<?php $plxShow->artChapo() ?><!-- ou <?php # $plxShow->artContent() ?> en mode article -->
	</div>
	<!-- ce qui suit en mode article 
	<aside>-->
		<!-- <?php # $plxShow->artAuthorInfos() ?> -->
		<!-- inclusion des commentaires en mode article via include
	</aside>  -->
</article>

<?php include __DIR__.'/footer.php'; ?>

Nos deux fichiers sont à l'identique pour le moment:

1. Le gabarit home.php n'affichera pour le moment que le dernier article
2. Le gabarit article.php laisse la possibilité d'afficher n'importe quel article, quelques modifications vont permettre d'afficher tout le contenu de l'article, retirer le lien de son titre, afficher les infos sur l'auteur (si configuré dans le profil de l'auteur)

Mise à jour de article.php

La mise à jour de ce fichier est relativement simple. L'inclusion des commentaires sera évoqué dans un deuxieme temps.

<?php if(!defined('PLX_ROOT')) exit; ?>

	<?php include __DIR__.'/header.php'; ?>	
	<article id="art-<?php $plxShow->artId() ?>">
	<header>
		<h2><?php $plxShow->artTitle() ?></h2>
		<?php $plxShow->artThumbnail() ?>
		<p>Auteur : <?php $plxShow->artAuthor() ?> - <time  datetime="<?php $plxShow->artDate(); ?>"><?php $plxShow->artDate() ?></time> | <?php $plxShow->artNbCom('#nb commentaire','#nb commentaire','#nb commentaires') ?></p>
		<p>Catégories: <?php $plxShow->artCat() ?> - Mots clés: <?php $plxShow->artTags() ?> </p>
	</header>
	<div>
		<?php  $plxShow->artContent() ?>
	</div>
	<aside>
		<?php $plxShow->artAuthorInfos() ?>
		<!-- inclusion des commentaires en mode article via include -->
	</aside> 
</article>

<?php include __DIR__.'/footer.php'; ?>

Inclusions des commentaires

Dans le thème par défaut, l'affichage des commentaires, du formuaire et de son capcha sont gérés à partir du fichier commentaires.php. Nous garderons cette structure relativement simple et neutre. Regardons à quels conditions sont affichés les commentaires et le formulaire:

1. La zone commentaires s'affiche uniquement si il y a au moins 1 commentaires. Votre article a , au moins durant un temps, autorisé les commentaires. Cette zone peut donc s'afficher même si vous avez entretemps retiré cette autorisation.
2. La partie suivante concerne le formulaire qui s'affichera en fonction de la configuration de PluXml ou spécifique à un article.
3. Le capcha s'affiche dans le formulaire selon la configuration générale de PluXml.

Nous avons deux zones qui s'affiche indépendement et que nous pouvons séparés en deux fichiers, gardons le fichier commentaires.php uniquement pour l'affichage des commentaires et créons un second fichier pour le formulaire: commentForm.php pour y stocké la gestion du formulaire.

Le fichier du theme par défaut affiche ces deux zone l'une aprés l'autre, en testant la présence de commentaires puis en tester si les commentaires sont autorisés. Ces deux test vont être inclus dans le fichier article.php et il chargerons ces deux autre fichiers en fonctions des test.

article.php devient:

<?php if(!defined('PLX_ROOT')) exit; ?>

	<?php include __DIR__.'/header.php'; ?>	
	<article id="art-<?php $plxShow->artId() ?>">
	<header>
		<h2><?php $plxShow->artTitle() ?></h2>
		<?php $plxShow->artThumbnail() ?>
		<p>Auteur : <?php $plxShow->artAuthor() ?> - <time  datetime="<?php $plxShow->artDate(); ?>"><?php $plxShow->artDate() ?></time> | <?php $plxShow->artNbCom('#nb commentaire','#nb commentaire','#nb commentaires') ?></p>
		<p>Catégories: <?php $plxShow->artCat() ?> - Mots clés: <?php $plxShow->artTags() ?> </p>
	</header>
	<div>
		<?php  $plxShow->artContent() ?>
	</div>
	<aside>
		<?php $plxShow->artAuthorInfos() ?>
		<!-- inclusion des commentaires si il yen a -->
			<?php if($plxShow->plxMotor->plxRecord_coms): ?>
<?php include __DIR__.'/commentaires.php'; ?>			 
			<?php endif; ?>
		<!-- inclusion du formulaire si autorisé -->
			<?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
<?php include __DIR__.'/commentForm.php'; ?>
			<?php else: ?>
		<p>
			<?php $plxShow->lang('COMMENTS_CLOSED') ?>.
		</p>		 
			<?php endif; ?>
	</aside> 
</article>

<?php include __DIR__.'/footer.php'; ?>

Le fichier commentaires.php reçoit le code suivant pour afficher les commentaires:

<h3 id="comments">
	<?php echo $plxShow->artNbCom(); ?>
</h3>

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

<div id="<?php $plxShow->comId(); ?>" class="comment <?php $plxShow->comLevel(); ?>">
	<div id="com-<?php $plxShow->comIndex(); ?>">
		<small>
			<a class="nbcom" href="https://pluxthemes.com/<?php $plxShow->ComUrl(); ?>" title="#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?>">#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?></a> 
			<time datetime="<?php $plxShow->comDate('#num_year(4)-#num_month-#num_day #hour:#minute'); ?>"><?php $plxShow->comDate('#day #num_day #month #num_year(4) - #hour:#minute'); ?></time> -
			<?php $plxShow->comAuthor('link'); ?>
			<?php $plxShow->lang('SAID'); ?> :
		</small>
		<blockquote>
			<p class="content_com type-<?php $plxShow->comType(); ?>"><?php $plxShow->comContent(); ?></p>
		</blockquote>
	</div>
	<?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
	<a rel="nofollow" href="https://pluxthemes.com/<?php $plxShow->artUrl(); ?>#form" onclick="replyCom('<?php $plxShow->comIndex() ?>')"><?php $plxShow->lang('REPLY'); ?></a>
	<?php endif; ?>
</div>

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

Le nouveau fichier commentForm.php reçoit le code suivant pour afficher le formulaire:

	<h3>
		<?php $plxShow->lang('WRITE_A_COMMENT') ?>
	</h3>

	<form id="form" action="<?php $plxShow->artUrl(); ?>#form" method="post">

		<fieldset>

			<div class="grid">
				<div class="col sml-12">
					<label for="id_name"><?php $plxShow->lang('NAME') ?>* :</label>
					<input id="id_name" name="name" type="text" size="20" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" required="required" />
				</div>
			</div>
			<div class="grid">
				<div class="col sml-12 lrg-6">
					<label for="id_mail"><?php $plxShow->lang('EMAIL') ?> :</label>
					<input id="id_mail" name="mail" type="text" size="20" value="<?php $plxShow->comGet('mail',''); ?>" />
				</div>
				<div class="col sml-12 lrg-6">
					<label for="id_site"><?php $plxShow->lang('WEBSITE') ?> :</label>
					<input id="id_site" name="site" type="text" size="20" value="<?php $plxShow->comGet('site',''); ?>" />
				</div>
			</div>
			<div class="grid">
				<div class="col sml-12">
					<div id="id_answer"></div>
					<label for="id_content" class="lab_com"><?php $plxShow->lang('COMMENT') ?>* :</label>
					<textarea id="id_content" name="content" cols="35" rows="6" required="required"><?php $plxShow->comGet('content',''); ?></textarea>
				</div>
			</div>

			<?php $plxShow->comMessage('<p id="com_message" class="#com_class"><strong>#com_message</strong></p>'); ?>

			<?php if($plxShow->plxMotor->aConf['capcha']): ?>

			<div class="grid">
				<div class="col sml-12">
					<label for="id_rep"><strong><?php echo $plxShow->lang('ANTISPAM_WARNING') ?></strong>*</label>
					<?php $plxShow->capchaQ(); ?>
					<input id="id_rep" name="rep" type="text" size="2" maxlength="1" style="width: auto; display: inline;" required="required" />
				</div>
			</div>

			<?php endif; ?>

			<div class="grid">
				<div class="col sml-12">
					<input type="hidden" id="id_parent" name="parent" value="<?php $plxShow->comGet('parent',''); ?>" />
					<input class="blue" type="submit" value="<?php $plxShow->lang('SEND') ?>" />
				</div>
			</div>

		</fieldset>

	</form>

<script>
function replyCom(idCom) {
	document.getElementById('id_answer').innerHTML='<?php $plxShow->lang('REPLY_TO'); ?> :';
	document.getElementById('id_answer').innerHTML+=document.getElementById('com-'+idCom).innerHTML;
	document.getElementById('id_answer').innerHTML+='<a rel="nofollow" href="https://pluxthemes.com/<?php $plxShow->artUrl(); ?>#form" onclick="cancelCom()"><?php $plxShow->lang('CANCEL'); ?></a>';
	document.getElementById('id_answer').style.display='inline-block';
	document.getElementById('id_parent').value=idCom;
	document.getElementById('id_content').focus();
}
function cancelCom() {
	document.getElementById('id_answer').style.display='none';
	document.getElementById('id_parent').value='';
	document.getElementById('com_message').innerHTML='';
}
var parent = document.getElementById('id_parent').value;
if(parent!='') { replyCom(parent) }
</script>

	<?php $plxShow->comFeed('rss',$plxShow->artId(), '<p><a href="#feedUrl" title="#feedTitle">#feedName</a></p>'); ?>

	<?php else: ?>

	<p>
		<?php $plxShow->lang('COMMENTS_CLOSED') ?>.
	</p>

Notre fichier article.php est maintenant fonctionnel et utilise les fonctions de blogging fournies par PluXml. Nous ne reviendrons dessus que pour parler de mise en page ou de la gestion des plugins.

Finalisons le fichier home.php

Pour l'instant, il n'affiche qu'un seul article mais ce fichier est en principe dédié à l'affichage de tous les articles publiés , avec une pagination.

Parcourir tous les articles publiés dans une boucle.

En incluant l'affichage de l'article dans le block suivant:

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
<!-- Ici affiche des données d'un article -->
<?php endwhile; ?>

Chaque article pourra être affiché avec son introduction

Le nombre d'article par page est limité et configurable, il faut ajouter la fonction permettant de naviguer d'une page à une autre.Cette fonction est incluse dans une balise nav

<nav class="pagination">
	<?php $plxShow->pagination(); ?>
</nav>

Notre gabarit home.php finalisé devient:

<?php if(!defined('PLX_ROOT')) exit; ?>
	<?php include __DIR__.'/header.php'; ?>

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>	
	<article id="art-<?php $plxShow->artId() ?>">
	<header>
		<h2><?php $plxShow->artTitle('link') ?></h2>
		<?php $plxShow->artThumbnail() ?>
		<p>Auteur : <?php $plxShow->artAuthor() ?> - <time  datetime="<?php $plxShow->artDate(); ?>"><?php $plxShow->artDate() ?></time> | <?php $plxShow->artNbCom('#nb commentaire','#nb commentaire','#nb commentaires') ?></p>
		<p>Catégories: <?php $plxShow->artCat() ?> - Mots clés: <?php $plxShow->artTags() ?> </p>
	</header>
	<div>
		<?php $plxShow->artChapo() ?>
	</div>
</article>
<?php endwhile; ?>

<nav class="pagination">
	<?php $plxShow->pagination(); ?>
</nav>

<?php include __DIR__.'/footer.php'; ?>

Interlude

Maintenant nous avons presque un blog fonctionnel, nous avons une page d'accueil qui affiche et pagine tous les articles disponible et chaque article peut-etre affiché dans sa page et recevoir des commentaires de vos visiteurs.

La prochaine étape va être de rendre fonctionnel les pages pour les autres modes de PluXml, elles auront presque toutes en commun cette capacité de trier et d'afficher vos articles comme en page d'accueil et d'afficher une pagination si necessaire. On peut déjà estimer que ces fonctionnalités peuvent être externalisé dans un fichier unique.

Puis nous nous interesseront aux fonctions que regroupées dans le fichier sidebar.php du thème par défaut, ce sont les listes de liens vers les derniers articles, les categories, commentaires, mots clés et artcle classé par dates d'archives. Ces listes sont classiquement affichées dans une barre latérale ou en bas de page.

Vue d'ensemble