Articles sous forme de tutoriels concernant l’édition ou création d'un thème.
Les thèmes, scripts, fichier, CSS, intégration, tutos et astuces
Le début de l'intégration du thème Massively est fonctionnelle. Dans cet article nous ajouterons et corrigerons les manques et défauts pour le rendre entierement fonctionnel.
Ce sont des fonctionnalités comme les liens vers les catégorie ou les réseaux sociaux, le formulaire de contact, les traductions et l'application des styles.
Dans cet article nous allons regarder comment transformer un thème gratuit HTML pour le rendre utilisable dans PluXml.
Nous trouvons sur html5up.net le thème "MASSIVELY" qui peut convenir à PluXml.
A première vue, il y manquera au moins la liste vers les "catégories" et un fil d’Ariane .Il faudra aussi prévoir l'affichage des commentaires si l'on veut garder une certaine inter-action avec les visiteurs. Pour le reste nous nous conformerons au thème.
Ce thème est livré avec des images neutres colorées. Il faudra personnaliser l'image de fond principale.
Le thème est sous licence, licence que nous conserverons dans les fichiers et mention du thème ainsi que le lien vers son site d'origine.
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 |
|
|
|
|
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:
description, keywords, author,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.
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.
Au minimum, nous avons deux options.
class de ces bibliothèque et modifier les structures HTML au cas par cas.
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.
Pour rappel, une installation classique de PluXml sur son hébergeur se fait de la manière suivante:
Si vous voulez ensuite installer un thème ou un plugin, c'est reparti, téléchargement, dézipper l'archive,téléversement des fichiers et enfin activation et configuration
C'est ce que le script remote_install.php en version 2 fait pour vous , il va chercher les archives que vous choisissez d'un clique , les déploies et les installes en quelques secondes.
Le CMS PluXml convient à de nombreux types de sites, construits sur une seule page ou des centaines.
Avec le temps, votre site peut alors grossir au point où la quantité de pages rend leurs découvertes par vos visiteurs difficiles.
Plusieurs plugins peuvent alors aider le visiteur à trouver ou à découvrir d'autres pages intéressantes.
Si il y a le plugin plxMySearch (moteur de recherche) et d'autres proposant des suggestions de lectures comme:
Il y aussi des plugins pour créer des menus sur plusieurs niveaux. Cela aidera vos visiteurs à s'orienter vers les contenus qui ont, pour eux, de l’intérêt.
Si vous souhaitez mettre en places les balises "canonical" sur votre site PluXml, cela est possible à partir de votre fichier header.php de votre thème.
Un plugin est maintenant disponible pour effectuer l'ajout des url canoniques sans éditer vos fichiers de thèmes disponible sur github à : Plugin url canoniques.
Dans le cas de la mise en place de L’URL-rewriting, c'est L’URL réécrite qui est utilisée et indiquée comme canonique, si vous utilisez aussi le plugin plxMyBetterUrls, c'est cette url produite qui sera utilisée sans que vous n'ayez à vous en soucier.
Attention, avant de vous lancer dans l’édition de votre thème , il y a plusieurs chose à savoir pour ne pas éditer votre thème.
Le CMS PluXml est fourni avec un thème par défaut tout à fait honorable , bien pensé et bien codé et évidement responsive. Pluxthèmes vous en propose beaucoup d'autres, mais si il est facile de les tester ici en ligne et de les télécharger, comment installe t-on concrètement l'un de ses thèmes?
PluXml était à l'origine un tout petit script pour diffuser un blog dans ses fonctions élémentaires et nécessitant un minimum de ressources.
Cette article est aussi une suite à la serie Mettre à jour un vieux thème.
Dans le précédent article, nous avons vu qu'il semblais relativement facile de mettre un vieux thème à jour. En fait ce n'est qu'une première étape, celle ci vous permet de le tester et de visualiser la page d’accueil, les catégories et les articles. Si à ce stade cela vous convient,néanmoins il est temps d'entrer dans le code et les fonctions d'affichage de PluXml. Vous avez peut-être manqué quelque chose :)
et qui ressemble à ça 