PluxThèmes

Zone de ressources - thèmes et tutoriaux - PluXml

créer un thème - étape fichiers 06

Rédigé par GC-nomade Aucun commentaire
Classé dans : Les thèmes, fichier, tutos et astuces Mots clés : fichiers du thème, création de thème, Thème, tutos

Les gabarits static.php et erreur.php reprennent la base des autres gabarits de mode de PluXml avec un minimum de code pour afficher un titre et le contenu.

Pour avoir une compatibilité avec les gabarits alternatif de PluXml, nous allons aussi recréer ces fichier a partir desquelles, le fichier d'origine sera inclus.

Le fichier sidebar.php sera repris à l'identique du thème par défaut avec quelques explications. Il sera inclus à partir des gabarits mode de PluXml. Certains de ces fichiers peuvent être déclinés en versions alternatives. Nous aurons à partir des alternatifs donc le choix de l'inclure , d'inclure une version modifiée ou ne pas l'inclure.

Les pages statiques

La mise à jour du gabarit static.php consistera à récupère l'identifiant, le titre et le contenu de cette page, ce qui donne:

<?php if(!defined('PLX_ROOT')) exit; ?>
	<?php include __DIR__.'/header.php'; ?>
	<article id="stat-<?php echo $plxShow->staticId(); ?>">	
	<header>
	<h2>
	<?php $plxShow->staticTitle(); ?>
	</h2>
	</header>	
	<?php $plxShow->staticContent(); ?>	
	</article>
<?php include __DIR__.'/footer.php'; ?>

Nous en profitons pour créer le fichier alternatif du thème par défaut :static-full-width.php où nous nous contenterons d'inclure le fichier original du thème.

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

Gabarits alternatifs

Les autres gabarits alternatif du thème par défaut seront à recréer de la même façon.

Le gabarit article-full-width.php:

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

Le gabarit categorie-full-width.php:

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

La page d'erreur

PluXml peut afficher une page d'erreur lorsqu'une page demandée n'existe pas ou plus. Pour cela le gabarit erreur.php est affiché.

La base de ce gabarit, identique aux autres, demande à ce que l'on y ajoute un titre signifiant qu'il s'agit d'une page d'erreur et le message d'erreur.

Notre fichier de base peut ressembler à ceci:

<?php if(!defined('PLX_ROOT')) exit; ?>
	<?php include __DIR__.'/header.php'; ?>
	<article id="erreur">	
	<header>
	<h2>
	<?php $plxShow->lang('ERROR'); ?>
	</h2>
	</header>	
	<p>
	<?php $plxShow->erreurMessage(); ?>
	</p>	
	</article>
<?php include __DIR__.'/footer.php'; ?>

Vous pouvez aussi créer ou utiliser une page d'erreur personnalisée.

Le fichier sidebar.php

Ce fichier est initialement conçu pour s'afficher en barre latérale dans le thème par défaut.

Il embarque plusieurs listes de liens interne pour promouvoir vos derniers articles et faciliter la navigation sur votre site.

La balise HTML <aside> est adaptée pour l'affichage de ces liens en annexes sans les relier directement aux contenus de la page, nous garderons cette balise.

Configuration des listes de liens internes

Chacune de ses listes sont précédées d'un titre et sont configurables depuis leurs fonctions d'affichage à l'aide de variables.

Ces variables concernent principalement le format d'affichage et le nombre maximum de lien à extraire.

La fonction affichant les derniers articles permet même d'afficher la totalité des données d'un article à l’exception des métadonnées. et de les triés par catégories.

Lister les catégories

L'affichage classique se fait avec un titre puis une liste, nous mettons ces deux là dans un conteneur commun.

Ce qui donne en reprenant le code du thème par défaut:

<div>
	<h3><?php $plxShow->lang('CATEGORIES'); ?></h3>	
	<ul class="cat-list unstyled-list">
	<?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
	</ul>
</div>

La fonction $plxShow->catList('','','','') prend plusieurs paramètres , le second est celui qui va générer les liens vers vos catégories, les autres sont optionnels.

Le nombre de catégories affichées n'est pas limité, mais les deux derniers paramètre permettent de régler trier l'affichage plus finement.

  1. Le premier paramètre, généralement vide, va afficher le lien vers la page d'accueil, c'est utiles si vous souhaitez vous en servir comme navigation principale.

  2. Le second détermine le format d'affichage qui correspond à la structure HTML dans laquelle plusieurs codes clés afficheront les données relative au lien, titre ou statut de la catégorie.

    Les liens ne sont pas générés par défaut, vous devez les écrire en y insérant les codes clés.
    Exemple minimale pour un lien:

    <a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a>
  3. le troisième paramètre permet de filtrer les catégories à afficher
  4. Le quatrième, celles à exclure.

Les options d'affichages permettent de réutiliser cette fonctions plusieurs fois dans la page de différentes manières à plusieurs endroits.

La liste des mots clés

la fonction $plxShow->tagList('','','') prend 3 paramètres.

  1. La structure HTML à afficher
  2. Le nombre maximum de mots clés à afficher.
  3. Le mode de tri de l'affichage

Notre exemple pour l'affichage:

<div>
		<h3><?php $plxShow->lang('TAGS'); ?></h3>
		<ul class="tag-list">
		<?php $plxShow->tagList('<li class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></li>', 20); ?>
		</ul>
	</div>

Si le nombre de mots clés est supérieur au nombre maximale à afficher, ils seront sélectionnés aléatoirement

Les archives

la fonction $plxShow->archList('') permet de lister vos articles par années et par mois pour les plus récents. Elle ne prend qu'un seul paramètre , celui du format d'affichage HTML

Notre exemple pour l'affichage:

<div>
		<h3><?php $plxShow->lang('ARCHIVES'); ?></h3>
		<ul class="arch-list">
		<?php $plxShow->archList('<li id="#archives_id"><a class="#archives_status" href="#archives_url" title="#archives_name">#archives_name</a> (#archives_nbart)</li>'); ?>
		</ul>
	</div>

Sur les blogs les plus anciens, cette liste peut-être longue et valoir d’être intégrer dans un élément <details>, ou un <input list > couplé à un élément <datalist> dans un formulaire ou piloter en JavaScript.

Lister les derniers commentaires

la fonction $plxShow->lastComList('$format',$max,$art_id,$cat_ids) prend quatre paramètres. dont 3 optionnels.

Le premier paramètre correspond au format d'affichage mais il contient aussi une subtilité permettant de limité le contenu d'un commentaire à un nombre de lettres.

  1. La structure HTML à afficher avec la possibilité d'afficher le commentaire dans son intégralité ou de définir un nombre de caractères maximum.

    Pour afficher l'intégralité du commentaire:
    #com_content
    Pour réduire à un nombre de lettre maximal
    #com_content(30) . le chiffre avec ses parenthèses affichera les 30 premières lettres
  2. Le second paramètre définie le nombre de commentaires à afficher, 5 par défaut

  3. Le troisième sélectionne un ou plusieurs articles d'où extraire commentaires.

  4. Le 4eme fait la sélection à partir d'une ou plusieurs catégories.

Notre exemple pour l'affichage:

<div>
	<h3><?php $plxShow->lang('LATEST_COMMENTS'); ?></h3>
	<ul class="lastcom-list">
	<?php $plxShow->lastComList('<li><a href="#com_url">#com_author '.$plxShow->getLang('SAID').' : #com_content(34)</a></li>'); ?>
	</ul>
</div>

Cette fonction qui permet de filtrer finement une liste de commentaire, peut-être elle aussi, utilisée à plusieurs reprises de manières différentes dans une page.

La liste des derniers articles

la fonction $plxShow->lastArtList(('','','','','') prend 5 paramètres d'affichages, les quatres derniers sont optionnels.

Notre exemple pour l'affichage:

<div>
	<h3><?php $plxShow->lang('LATEST_ARTICLES'); ?></h3>
	<ul class="lastart-list">
	$plxShow->lastArtList('<li><a class="#art_status" href="#art_url" title="#art_title">#art_title</a></li>')
	</ul>
</div>
  1. La structure HTML à afficher avec la possibilité d'afficher l'intégratilité des données relatives à un article. la liste des mots clés #mot_clé pour extraire les données est plutôt exhaustive:

    • #art_id
    • #cat_list
    • #art_url
    • #art_status
    • #art_author
    • #art_title
    • #art_chapo
    • #art_chapo(X)(*)
    • #art_content
    • #art_content(X)(*)
    • #art_date
    • #art_hour
    • #art_time
    • #art_nbcoms
    • #art_thumbnail
    • #img_url
    • #img_title
    • #img_alt
  2. Le second paramêtre definie le nombre maximal à afficher, parr défaut c'est 5
  3. Limite le tri depuis une seule catégorie.
  4. Ajoute une chaine aux contenu tronqués.
  5. Sélectionne un ordre de tri d'affichage.

(*) où X determine la longueur maximale du texte à afficher

Toutes ces options d'affichage vous permettent un grand nombre de possibilités.

Intégration du fichier sidebar.php

Inserons dans ce fichier une balise <aside> pour y stocker nos listes.

Notre exemple pour l'affichage:

<?php if(!defined('PLX_ROOT')) exit; ?>
	<aside id="main-aside">
	<div>
	<h3><?php $plxShow->lang('CATEGORIES'); ?></h3>
	<ul class="cat-list">
	<?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
	</ul>
	</div>
	<div>
	<h3><?php $plxShow->lang('LATEST_ARTICLES'); ?></h3>
	<ul class="lastart-list">
	<?php $plxShow->lastArtList('<li><a class="#art_status" href="#art_url" title="#art_title">#art_title</a></li>'); ?>
	</ul>
	</div>
	<div>
	<h3><?php $plxShow->lang('TAGS'); ?></h3>
	<ul class="tag-list">
	<?php $plxShow->tagList('<li class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></li>', 20); ?>
	</ul>
	</div>
	<div>
	<h3><?php $plxShow->lang('LATEST_COMMENTS'); ?></h3>
	<ul class="lastcom-list">
	<?php $plxShow->lastComList('<li><a href="#com_url">#com_author '.$plxShow->getLang('SAID').' : #com_content(34)</a></li>'); ?>
	</ul>
	</div>
	<div>
	<h3><?php $plxShow->lang('ARCHIVES'); ?></h3>
	<ul class="arch-list">
	<?php $plxShow->archList('<li id="#archives_id"><a class="#archives_status" href="#archives_url" title="#archives_name">#archives_name</a> (#archives_nbart)</li>'); ?>
	</ul>
	</div>
</aside>

Le code <?php include __DIR__.'/sidebar.php'; ?> servira à inclure ce fichier au thème au théme .

Dans les fichiers :

  • archives.php
  • article.php
  • categorie.php
  • erreur.php
  • home.php
  • tags.php
  • static.php

Remplacer:

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

Par:

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

Interlude

Voilà qui est fait, la partie "structure des fichiers" d'un thème et comment fonctionne l'affichage des données ne sont plus un mystére.

Yes !!!

Je suis trop content!

Mais c'est pas trés beau, non ?

La suite sera de mettre un peu de style dans tout ça.

Vue d'ensemble

Articles de la série:
"créer un thème"
articles connexes Ressources externes
étape fichiers 01 MAJ d'un vieux thème
étape fichiers 02
étape fichiers 03 thème multilingue
étape fichiers 04 affichage des commentaires.
étape fichiers 05 le fil d'Ariane
étape fichiers 06
archive ZIP du thème construit dans ce tutoriel themedututo.zip.
étape CSS 01 meta "viewport"
étape CSS 02 la balise "link"
étape CSS 03 Outils de verification du W3C.
0 notes / moyenne 0

Hébergeur bénévole de ressources pour le CMS PluXml, un CMS en flat file propulsé à l'XML.

Mon site PluXml perso : re7net.com.

Écrire un commentaire

Quelle est le troisième caractère du mot i9d0u46 ?

Fil RSS des commentaires de cet article