Share
Nous allons créer un thème personnalisé pour le CMS open source "up and coming", Anchor. Anchor est un système de gestion de contenu extrêmement simple, léger et rapide. Vous pouvez vous procurer un exemplaire d'Anchor sur le site Web d'Anchor CMS et commander certains des thèmes disponibles pour Anchor sur des thèmes d'ancrage..
Vous êtes peut-être un concepteur de sites Web ou un développeur front-end et vous cherchez un moyen de faire avancer les choses? Vous avez peut-être un prototype HTML statique de site Web, vous voulez pouvoir créer des pages et des articles rapidement, mais vous ne voulez pas avoir à écrire du code à chaque fois. Anchor CMS vous donnera ce contrôle sans vous donner mal à la tête du développement.
Cet article suppose au moins une connaissance de base des concepts de conception et de développement Web, tels que l'hébergement d'un site Web et le codage HTML. Vous aurez besoin d’une installation fonctionnelle d’Anchor CMS, qui peut être locale ou installée à distance. Pour installer Anchor (localement ou à distance), il suffit de télécharger une copie et de suivre les instructions d'installation..
Avec votre installation, vous aurez besoin d'un prototype de votre thème. Le prototype doit être un visuel HTML clairement balisé, avec une feuille de style et tous les éléments que vous avez utilisés, tels que des images et du JavaScript. Pour illustrer tout ce processus, je vais aussi créer un thème. Vous pouvez voir mon thème ci-dessous, et vous pouvez télécharger le prototype HTML à partir du lien en haut de la page:
J'aime penser que la thématique pour Anchor est comme préparer un sandwich et je sais que beaucoup de gens sont enclins à un bon sandwich. J'espère donc que mes références vous aideront à comprendre les étapes que je franchis. De plus, je préfère énumérer ce que certaines fonctions d’Anchor font réellement, car cela semble être une façon plus simple de les expliquer..
Faim? Mangeons alors…
Comme beaucoup d'autres systèmes de gestion de contenu, Anchor a un répertoire pour seulement des thèmes. Si vous allez à la racine de votre installation, il y aura un dossier appelé "thèmes". Créez un nouveau dossier ici et nommez-le quel que soit le nom de votre thème. Dans mon cas, je vais appeler mon thème «Cleat»:
Vous devrez également créer un fichier "about.txt". Ceci est juste un fichier texte de base qui explique comment le thème est appelé, par qui il est et toute information de référence. Le fichier "lisez-moi" essentiellement. Jetez un oeil à mon exemple ci-dessous:
Nom du thème: Cleat Description: Un thème léger et pur, simple d’esprit. Nom de l'auteur: David Darnes Site de l'auteur: http://david.darn.es Licence: http://licence.visualidiot.com
Avec votre fichier about.txt, placez également vos fichiers de prototype dans le dossier. Il est préférable de conserver vos ressources, telles que les images, dans un sous-dossier séparé. Pour construire le thème, nous allons prendre des morceaux de votre code HTML et les placer dans des fichiers php conviviaux pour Anchor.
La plupart des sites Web sont structurés avec un en-tête, un pied de page et un peu au milieu. Anchor CMS tire parti de cette communauté en vous permettant de diviser votre thème en plusieurs parties. Cela aide à l'organisation et surtout à la cohérence.
Créez un nouveau fichier dans votre dossier de thème appelé "header.php". Ouvrez ce fichier et votre fichier HTML pour le prototype. Copiez le code HTML du haut vers le bas, juste avant le début de la partie principale de votre contenu. Dans mon cas, c'est juste après le menu. J'ai décidé cela parce que, dans ma conception, tout, à partir du menu, est identique sur chaque page, je souhaite donc que cela reste cohérent dans tout mon thème..
Ce que nous allons maintenant faire, c'est remplacer les informations statiques par des aides php fournies dans Anchor. Vous trouverez ci-dessous le code que j'ai copié du haut de mon prototype HTML, mais avec quelques modifications:
<?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?> "title ="">
Notez que le code HTML est toujours en place, mais j'ai remplacé tout contenu ou toute information pertinente par rapport à un site par des extraits de code PHP. Ces morceaux de code PHP sont appelés les fonctions, ils agissent comme des espaces réservés pour le contenu. Lorsque le thème est utilisé, ces fonctions seront remplacées par le contenu extrait du site Web. Voici une liste des fonctions que j'ai utilisées pour remplacer le contenu:
Accentsconagua
Si jamais vous êtes coincé avec ce que font ces fonctions, ou si vous avez besoin de quelque chose de différent de ce que j'ai montré ci-dessus, consultez la documentation d'Anchor CMS..
Créer un menu dans votre thème est assez simple une fois que vous avez compris son fonctionnement. Ancre génère le menu à partir de toutes les pages publiées que vous avez créées. Toute page configurée pour être brouillon ou archivée n'apparaîtra pas dans le menu..
Pour utiliser ces pages publiées, nous avons besoin d’un moyen de les sélectionner et de les parcourir. Jetez un oeil à mon exemple ci-dessous:
En utilisant cela, nous pouvons permettre au thème de créer un menu pour le site Web. La ligne 1 est l'endroit où nous vérifions "s'il y a des éléments de menu", à la ligne 3, nous demandons "pendant que vous les avez, faites-le avec chaque élément de menu". Sur la ligne 5, nous arrêtons de travailler avec cet élément de menu, ce qui signifie que le même processus démarrera avec l'élément suivant. Une fois qu’il n’ya plus d’éléments de menu, il passe de la ligne 5 à la ligne 7, où il met fin au processus de création du menu..
Chaque fois qu'un élément de menu est itéré, un ensemble de fonctions est également traité:
Comparez-les à votre menu et remplacez le contenu et les informations de votre menu par les fonctions ci-dessus. Notez le fonctionnement du code de menu, car connaître ce processus deviendra utile pour les publications ultérieures du didacticiel..
Tout comme votre fichier header.php, vous voudrez prendre la section de pied de page de votre balise et la coller dans un nouveau fichier appelé "footer.php". Dans mon thème, j'ai une ligne de clé et une ligne de crédit. Celles-ci apparaissent sur chaque page. Je vais donc placer le code HTML de cette partie dans mon fichier footer.php..
Cleat for Anchor CMS, créé par David Darnes
Votre pied de page n’a peut-être pas la même complexité que l’en-tête, mais c’est un endroit idéal pour créditer des éléments tels que vous-même pour la création du thème..
Maintenant que vous avez beurré votre pain, nous pouvons passer à la partie savoureuse, les garnitures.
Afin de prendre en charge tous les types de contenu traités par votre thème, nous devons créer trois fichiers différents. Ces fichiers sont placés entre votre en-tête et votre pied de page et affichent vos messages, vos articles individuels et vos pages..
Comme nous l'avons fait pour notre en-tête et notre pied de page, copiez la zone principale de votre balisage dans un nouveau fichier appelé "posts.php". Le balisage doit continuer à partir de l'endroit où votre header.php s'est arrêté et de votre fichier footer.php à partir de là. Votre fichier posts.php est utilisé pour afficher tous les articles publiés d'un site Web. En d'autres termes, votre page de blog.
Si vous avez créé un prototype HTML pour votre page de blog comme moi, c'est encore mieux. Maintenant que nous les avons divisés en fichiers séparés, nous devons les relier. C'est ici que la fonction "theme_include" entre en jeu. Tout en haut de votre fichier posts.php, ajoutez ce qui suit:
Cette fonction extrait le fichier header.php dans la page et l'ajoute tout en haut, là où il sera placé. Il en va de même pour le pied de page, ajoutez ce qui suit au bas de posts.php:
L'utilisation de cette méthode signifie que votre en-tête et votre pied de page restent cohérents tout au long du thème et facilitent la gestion du code..
Vous souvenez-vous de ce que j'ai dit à propos de garder la méthode du menu à l'esprit? Jetez un coup d'oeil à ceci et voyez si vous pouvez repérer des similitudes:
"title ="">
Il y a pas mal de similitudes, pas avec les noms des fonctions, mais dans la façon dont elles fonctionnent. Sur la ligne 2, nous indiquons «si nous avons des messages et tant que nous avons ces messages», parcourons chacun des messages. Une fois les messages épuisés, le processus s'achève à la ligne 12. Et tout comme le menu, les messages passent également par un ensemble de fonctions. Voici les fonctions plus en détail:
Comme vous l'avez fait avec votre menu, comparez ces fonctions avec votre balisage et remplacez le contenu et les informations par les fonctions qui correspondent..
C'est bien; nous avons notre en-tête, pied de page et les messages sont tous tirés.
C'est probablement la première fois que vous pouvez vérifier votre thème pour voir s'il fonctionne. Connectez-vous à Anchor et sélectionnez votre thème dans la liste déroulante de Étendre> Métadonnées du site..
Si vous avez bien suivi ces instructions, vous devriez pouvoir voir la page de vos messages..
S'il y a des erreurs, ne vous inquiétez pas, c'est probablement juste quelque chose d'un peu déplacé. Utilisez cela comme une occasion de relire et de vérifier si vous avez tout pris.
Certains d’entre vous diront peut-être "Et si j’ai trop de publications?". Eh bien, ne vous inquiétez pas, je vais couvrir cela maintenant très facilement. Découvrez cet extrait de code:
Vous remarquerez que la pagination est créée de manière similaire, mais plus simple, à la création du menu. Sur la ligne 1, nous demandons si le montant dépasse la limite, puis nous créons les boutons suivant et précédent. À la ligne 6, nous terminons le processus.
Remarque: Le nombre de publications par page peut être sélectionné sous Étendre> Métadonnées du site..
Ce code devra être inséré dans votre fichier posts.php, mais pas à l'intérieur d'une autre boucle. Dans ma conception, il apparaît juste avant mon pied de page. Je l'ai donc ajouté tout en bas de mon fichier posts.php..
Par rapport à la page des articles, les articles sont délicieusement simples. Encore une fois, vous aurez besoin d'une copie de la section principale de votre balise prototype ou d'une copie du code HTML que vous souhaitez utiliser pour les articles. Tout comme votre posts.php, cela devrait correspondre à votre code d'en-tête et de pied de page. Dans mon exemple, l'article a un titre, une date et le contenu.
Créez un nouveau fichier appelé "article.php" dans votre dossier de thèmes et collez le balisage à l'intérieur. Vous aurez également besoin d'ajouter vos fonctions d'inclusion d'en-tête et de pied de page, comme vous l'avez fait pour le fichier posts.php. Pour mon thème, le code pour les articles est minime:
Encore une fois, mis à part les fonctions d'inclusion, tout ce que j'ai fait est remplacé les informations et le contenu statiques par certaines fonctions fournies par Anchor. En voici un aperçu:
Comme auparavant, parcourez votre code et remplacez le contenu statique et les informations par les fonctions appropriées. Une fois que vous avez terminé le fichier article.php, vous pouvez afficher un article en action. Cela vous donne une chance de vérifier si tout est en ordre de marche.
Vous ne le croirez peut-être pas, mais les pages sont encore plus simples que les articles. Copiez à nouveau votre balisage, mais cette fois-ci, collez-le dans un nouveau fichier appelé "page.php" et ajoutez vos fonctions d'inclusion en haut et en bas du fichier. Les pages de sites Web contiennent normalement du contenu statique et des informations qui ne changent pas très souvent. Pour cette raison, les pages n'ont pas besoin de date. Regardez le code ci-dessous:
Ceci est très similaire à article.php, mais nous n'utilisons que deux fonctions différentes:
Une fois que vous avez terminé de vous placer dans les fonctions, essayez d’afficher une page normale. Le contenu de l'échantillon fourni avec Anchor (actuellement) ne vous donne pas une page normale. Vous devrez donc en créer une et en ajouter du contenu..
Si vous avez bien suivi le didacticiel, vous devriez vous retrouver avec un thème simple mais solide pour Anchor CMS. Si vous rencontrez des problèmes, n'oubliez pas de vérifier attentivement votre code. Il est facile de rater un personnage ou de placer les choses dans le mauvais ordre..
Si les choses ne se passent pas comme prévu, il existe une communauté florissante d'utilisateurs d'Anchor CMS qui peuvent vous aider dans votre thème. Rendez-vous simplement sur le forum Anchor CMS et cherchez quelqu'un avec un problème similaire ou démarrez une nouvelle discussion..
Je gère également Anchor Themes, où vous pouvez télécharger des thèmes, consulter les sites Web créés avec Anchor et soumettre votre propre travail. J'espère que ce tutoriel vous a aidé à créer un thème pour Anchor CMS et je suis vraiment intéressé de voir ce que vous venez avec! Prendre plaisir.
