La création d'un thème n'est pas aussi difficile qu'il n'y parait., il y a quelques règles à suivre et à connaître pour qu'il soit reconnu par PluXml et qu'il fonctionne dans tout les modes d'affichage de PluXml.
La premiere étape est de créer un nouveau dossier pour votre théme dans le dossier themes/ de PluXml.
Ces règles concernent principalement des noms de fichiers que PluXml va utiliser selon la page demandée, la première étape est donc de connaître et respecter ces règles en faisant l'inventaire ces fichiers requis dans un premier temps avant de les créer.
Un premier travail de préparation est nécessaire pour mettre en place votre projet de création de thème en créant simplement ces fichiers requis et en les laissant vide pour commencer. Ces fichiers sont à placer dans le dossier que vous avez créer pour votre thème.
Dans ce second volet nous ferons un inventaire des fichiers nécessaires et utiles.
Certains fichiers doivent être obligatoirement présent, c'est le cas par exemple de infos.xml pour qu'il soit disponible depuis l'administration.
Les fichier embarquent des parties de la page, il faut donc commencer par créer un squelette à découper et à redistribuer dans ces fichiers. La reconstruction est faites au moment d'afficher une page.
Trions nos fichier et dossiers pour y voir plus clair et passer aux étapes suivantes:
Dossier de votre thème
Mode d'affichage fichiers obligatoires
fichiers accessoires aux differents modes
Autres utiles, administration
Sous-Dossiers utiles et conseillés
home.php
article.php
categorie.php
static.php
tag.php
archive.php
erreur.php
header.php
sidebar.php
footer.php
...
commentaires.php
articles.php optionnel
infos.xml obligatoire
...
index.html utile
preview.png utile
preview.jpg utile
lang/ langues et aide
font/ conseillé pour y stocker vos polices
css/ conseillé pour y stocker vos feuilles de styles
Dans cet article nous allons éditer et compléter les deux fichiers header.php et footer.php afin d'afficher l'entête, la navigation principale et le pied de page de votre site.. Ce sont les parties de pages généralement identiques sur un site.
Les quelques différences que l'ont peut malgré tout trouver dans ces parties de code commune sont généralement:
le titre de la page affichée dans l'onglet du navigateur
Une class ou une id qui permet d'identifier le mode d'affichage, type de page
la navigation qui met le lien vers la page en cours en évidence,
les balises meta pour description, keywords, author,
Le titre de la page,
et autres données non visuelles.
Ces différences étant gérer par PluXml, il n'y a pas lieu de s'en inquiéter.
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'; ?>
Dans cet article nous allons finalisé nos gabarits pour les modes : catégorie, mots clés et archive. Leurs fonctionnement est très similaire au mode home/blog et ce qui diffère sera ce que l'on appelle le "fil d’Ariane" qui aide à se situer dans l'arborescence d'un site.
Nous commençons donc par éditer à nouveau le fichier home.php pour en extraire la partie affichant les article et la pagination dans un nouveau fichier de gabarit que nous nommerons articles.php.
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.
Une structure HTML et une extraction des données fonctionnelles n'est pas suffisante, il faut maintenant embellir tout ça pour que cela soit confortable à lire et que chaque zone de contenus se différencie les unes des autres.
Quelles options avons nous?
Au minimum, nous avons deux options.
Le thème dispose déjà d'un fichier de styles que l'ont peut compléter manuellement.Le tutoriel s'oriente vers ce choix
Nous pouvons aussi utiliser une bibliothèque comme Bootstrap ou Tailwind. en rééditant les fichiers du thème pour y placer les class de ces bibliothèque et modifier les structures HTML au cas par cas.
Nous avons compris comment créer et utiliser les fichiers template gabarit d'un thème. Nous nous servirons donc d'un thème en HTML existant pour le transformer en thème PluXml.
Dans le précédent article nous avons vu comment lié une feuille de style aux fichiers du thème.
Pour accéder à un fichier du thème la fonction <?php $plxShow->template() ?> donne le chemin vers le thème actif. Cette fonction vous sera utile pour intégrer à votre thème les ressources CSS, JavaScript, images, etc. qu'il contient.
Pour des mise en page simple et peu de fonctionnalités, l'usage d'une seule feuille de style peut sembler suffisant. Ce n'est plus le cas si vous souhaitez par exemples utiliser une famille d'icône, un framework CSS, un fichier reset , etc.
L'avantage d'utiliser des ressources gratuites (ou payantes) est que celles-ci seront généralement maintenues par leurs auteurs respectifs et que des tutoriels et exemples sont souvent fournis sur les sites officiels des ressources. Un autre aspect est que d'autres utilisateurs pourront aux travers de tutoriels et de forums vous aider à utiliser ces ressources ou à choisir entre des ressources similaires ou des version différentes.
Avant d'aller plus loin et rendre les choses moins fouillis, ranger les différents aspect de notre page dans des zones et fichiers distincts est une bonne idée.
Pour éviter de s'éparpiller commençons à identifier quelques zones du document HTML que reconstruit PluXml.
