Share
Dans ce tutoriel pour débutant, vous apprendrez à créer vos propres thèmes ProcessWire CMS. Nous allons créer un site très simple, comprenant des modèles, des champs, une structure de thèmes et des variables PHP.
N'oubliez pas de vous familiariser avec le premier de nos tutoriels. Comment installer et configurer le CMS ProcessWire.
Contrairement à d'autres CMS comme WordPress, ProcessWire n'a pas de processus de sélection de thème dans le cadre de son administrateur, où vous pouvez changer de thème sur simple pression d'un bouton bien étiqueté. Cependant, ce n'est pas nécessairement une mauvaise chose. ProcessWire a son propre système: le dossier “site / templates” qui contient tous les fichiers associés à votre thème..
Le meilleur moyen de créer un thème vierge est de sélectionner le site vierge profil lors de l’installation de ProcessWire (PW). Site-blank contient la structure de site la plus élémentaire de votre dossier «site / modèles», y compris les dossiers et les fichiers.
Vous pouvez créer un nouveau dossier "site / modèles" avec vos propres fichiers après l'installation si vous le souhaitez, au lieu de commencer par le profil de site vierge, mais assurez-vous au moins que les fichiers énumérés ci-dessus.
Apprendre comment PW parcourt ses pages nous aidera à construire nos modèles personnalisés plus tard.
Lorsqu'une page PW est demandée (par exemple, www.benbyford.com/about), PW consulte la page dans le système de gestion de contenu et vérifie le modèle attribué. dans ce cas, j'ai assigné le modèle “basic-page”; le fichier "basic-page.php" dans "site / templates /" est rendu et le code HTML demandé est envoyé à l'utilisateur (PW permet également l'utilisation facile d'autres formats tels que JSON ou XML).
Pointe: par défaut, les modèles référencés dans PW utilisent le même nom que leur fichier de modèle PHP. Toutefois, vous pouvez modifier le nom du modèle et le fichier associé à tout moment après leur création dans l'administrateur PW..
Pour un exemple, ajoutons du code HTML et PHP à notre fichier «home.php»:
<?php echo $page->Titre; ?> Titre; ?>
Maintenant, allez à l'URL de votre site dans le navigateur et notez le Titre et h1 devrait maintenant être rempli avec le titre de votre page d’accueil (par défaut: Accueil).
Créer de nombreux fichiers de modèles avec un code HTML très similaire n'est pas très efficace, nous allons donc créer quelques fichiers PHP .inc pouvant être inclus dans chaque modèle. Un modèle de structure commun à l’intérieur du thème consiste à créer des fichiers «head.inc» et «foot.inc» qui sont utilisés pour construire du code HTML commun, comme notre , navigation, logo, pied de page et scripts.
Modifions à nouveau notre fichier «home.php» pour implémenter ce qui précède:
Titre; ?>
Ajoutez notre head.inc:
<?php echo $page->Titre; ?>
Et foot.inc:
Pourquoi utilisez-vous le type de fichier .inc que je vous ai entendu demander? Eh bien, lors de l'ajout d'un nouveau modèle dans l'administrateur de PW, le système examine le dossier site / templates / de tous les nouveaux fichiers .php qui n'ont pas encore été utilisés par un modèle. En utilisant le type de fichier .inc au lieu de .php, vous ne serez pas confus entre les fichiers de modèle et les fichiers que vous souhaitez utiliser. comprendre dans votre template.
Vous pouvez créer autant de modèles que vous le souhaitez pour les pages de votre site PW., devenir fou! Par exemple, créons un nouveau modèle pour une nouvelle page appelée «Contact». Je commence par:
Le CMS connaît maintenant votre nouveau fichier de modèle et il apparaîtra désormais comme une option de modèle lors de la création d'une nouvelle page. Essayez de créer une nouvelle page sous votre maisonpage, nommez-le «Contact» et sélectionnez notre nouveau modèle de page de contact. Vous avez maintenant au moins deux modèles actifs sur votre site: "home" et “page de contact ”.
Incroyable! Nous savons maintenant comment créer des fichiers de modèles, les ajouter à PW et créer des pages avec nos nouveaux modèles..
Enfin, nous voulons savoir comment rendre le contenu ajouté à l’administrateur PW dans nos modèles, et même utiliser PHP vanille sur notre site. Une des choses que je préfère à propos de PW est que cela donne au programmeur de thèmes un accès instantané au contenu via des variables et une suite de fonctions utiles pour les fonctionnalités les plus simples. Tout ce qu’il n’a pas, vous pouvez écrire vous-même en PHP sans vous soucier de ce que le système pourrait faire de votre code. Vous ne devez pas non plus suivre des structures de classe strictes ou des crochets (je vous regarde Drupal). En d'autres termes: cela vous donne un ensemble d'outils, puis vous échappe.
Pour obtenir une liste résumée de toutes les variables et fonctions de PW, consultez la feuille de mise à jour de l'API Processwire, et pour plus d'explications, reportez-vous à la documentation relative aux variables PW..
Voyons rapidement quelques unes des principales variables pour rendre nos modèles plus fonctionnels.
En modifiant à nouveau notre home.php, ajoutons le titre, le corps et le contenu de la barre latérale de la page à l’aide de la touche $ page variable. $ pagevous donne accès à tout le contenu téléchargé sur cette page dans l'administrateur PW.
". $ page-> titre.""; // copie du corps en sortie echo $ page-> body;?>barre latérale; ?>
Ajoutons également une navigation simple à notre head.inc en utilisant le $ pages variable. $ pages vous donne accès à d'autres pages de votre site, sur lesquelles vous pouvez ensuite rechercher du contenu..
<?php echo $page->Titre; ?>
Maintenant que vous connaissez certaines des bases de la thématisation dans PW, je vous invite à consulter certains des autres profils de site contenus dans le téléchargement de PW pour savoir comment ils sont structurés. À mon avis, expérimenter et obtenir les commentaires de la communauté peut aussi être extrêmement bénéfique..
Pointe: vous trouverez de nombreux modules qui peuvent vous aider à construire votre site sur la page des modules. Si vous êtes amateur de LESS et de la minification de scripts, je vous recommande le module AIOM..
Et, bien sûr, recherchez les prochains tutoriels ici chez Envato Tuts+.
Accentsconagua