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

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.
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.
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>
- le troisième paramètre permet de filtrer les catégories à afficher
- 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.
- La structure HTML à afficher
- Le nombre maximum de mots clés à afficher.
- 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.
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
Le second paramètre définie le nombre de commentaires à afficher, 5 par défaut
Le troisième sélectionne un ou plusieurs articles d'où extraire commentaires.
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>
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
- Le second paramêtre definie le nombre maximal à afficher, parr défaut c'est 5
- Limite le tri depuis une seule catégorie.
- Ajoute une chaine aux contenu tronqués.
- 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 !!!

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. |