En ce début d’automne, je vous propose un projet en phase avec l’été indien ! Voilà l’idée ; un horoscope amérindien qui vous dévoile votre totem. À l’aide d’un formulaire, vous envoyez votre date de naissance, et un filtre s’opère entre les 12 totems des Indiens d’Amérique pour révéler le vôtre. J’y ai mis pas mal de connaissances déjà décrites sur ce blog et j’en profite pour résumer la méthode utilisée pour la mise en place d’un nouveau site web.
Le projet : un horoscope Amérindien
Vous pouvez visiter ce projet en suivant le lien : https://horoscope-amerindiens.lintermediaire.be/
Le contenu
Pour moi, le contenu est l’un des 5 piliers qui compose un site web. Dans le meilleur des mondes, nous l’avons tout de suite ou nous pouvons le récupérer en ligne. Mais il arrive assez souvent que le commanditaire veut modifier les textes de son ancien site et modifiera même encore le nouveau en dernière minute,… Les images, elles aussi, doivent changer ou être réadaptées. En d’autres termes, s’il on veut commencer dans de bonnes conditions, nous pouvons faire appel à des outils qui génèrent un contenu de substitution. Après un bref croquis de la structure du projet (on dessine le menu, le contenu et le footer par exemple), je fait appel à l’API « unsplash » en attendant les images finales et j’y ai ajouté du « lorem ipsum » en attendant les textes. Vous verrez par la suite que le contenu a une incidence sur d’autres piliers, que sont le design, le code ou le SEO. C’est d’ailleurs le cas de chaque pilier à mon sens. En fait, ils s’accordent et se lient pour donner forme au projet final. Passons au deuxième pilier.
Le dev
J’ai attaqué le backend assez rapidement. Cela ne me dérangeait pas de commencer sans les bonnes couleurs ou sans les fontes finales. En général, on fait l’inverse ; on code le croquis du site que l’on a dessiné au préalable en respectant les alignements et les espacements, en codant exactement le design décidé en amont. Ici, j’ai attaqué le backend car je voulais que le site soit géré via un back-office. Et qui dit back-office avec moi, dit WordPress. J’ai utilisé « wp-cli » pour installer un wordpress vierge et avec un « thème vierge » pour commencer à coder le thème sur-mesure qui affichera le projet. Pour les champs personnalisés, j’ai utilisé ACF. Dans mon cas, j’utilise ACF pour ajouter la date de début et de fin auquel le totem se rapporte. Ensuite, j’ai codé la page d’accueil en respectant des balises html qui seront utilisées en SEO (balises des titres, titre sur les images et les liens etc.) ; soit en respectant une structure logique qui s’adaptera sur mobile et en utilisant les fonctions WordPress pour rendre le contenu dynamique. Le contenu dynamique s’affiche ! Terminons le design…
Design
Je me suis rendu sur « pixabay » pour trouver une image libre de droit. J’en sélectionne une qui sera l’image de fond du site. Ensuite, rendez-vous sur « kuler » où je peux importer cette image pour en extraire les couleurs. J’en sélectionne 3-4 pour en déterminer les couleurs des textes ou du fond des éléments que sont le footer ou le menu par exemple. Enfin, je trouve une fonte sympa sur Google fonte. Facile à insérer, une Google fonte peut suffire ici. La fonte en question se nomme « Holtwood One SC« . Pour terminer, et cela été le plus long, j’ai modifié des pictos d’animaux avec un style amérindien. Après coup, c’est ce qui donne le mieux pour moi, les couleurs du site sont peut-être un peu lourdes mais je ne me suis pas attardé sur le design plus que ça … J’ai trouvé les pictos sur flaticon.
Accessibilité & sécurité.
Toujours dans l’idée de diviser en piliers un projet web, l’accessibilité et la sécurité en serait les deux derniers en plus des trois précités ci-dessus. Au cours de ce projet, je ne m’attarderai pas sur ces points-là. En effet, il s’agit d’un projet perso et ces étapes finales importes peu. Côté accessibilité en tout cas – respectons tout de même la sécurité. Dans l’accessibilité d’abord, on pourrait distinguer la performance du SEO. Je compresse moi même les images avant des les uploader (pour ce faire, utilisez « tinypng« ). Et pour le référencement, on pourrait imaginer d’ajouter un « plugin seo » pour renforcer son référencement naturel. Côté sécurité, 3 plugins (dont j’ai déjà parlé ici) s’en occupent. J’ai également renforcé le fichier .htacces, que vous pouvez trouver ici.
Implémentation dans WordPress
Je ne reviendrai pas sur le choix du CMS déjà mainte fois expliqué sur lintermediaire.be. Mais sachez que le projet est entièrement personnalisable (excepté les nuages qui défilent). Le titre principal est le titre du projet. Le sous-titre et le texte d’intro sont éditable via la page d’accueil du dashboard WordPress. De plus, chaque totem est un article, que WordPress gère très bien. Par exemple, l’image du totem est l’image de mise en avant de cet article. Enfin, le footer aurait pu être un widget WordPress. La page d’accueil ordonne les articles par date de début de cycle. Je trouvais cela évident d’ordonner les totems par mois. C’est possible de le faire via ACF. Voilà l’argument de la requête en question :
$args = array(
‘post_type’ => ‘post’,
‘order’ => ‘ASC’,
‘orderby’ => ‘meta_value’,
‘meta_query’ => ‘date_de_debut’,
);
Mentionnons que date_de_debut est le slug du champ que vous pouvez construire à l’aide du plugin ACF.
Difficulté
La difficulté a été au niveau de la gestion des dates.
En effet, il a fallu jongler avec le format des dates pour que quand l’utilisateur entre son jour et son mois de naissance via un champ de formulaire de type « date« , que le filtre s’opère. J’avais surtout un souci avec le totem de l’oie qui se situait entre décembre et janvier. Le calcul de la date était alors erroné. J’ai dû faire une condition à l’aide de javascript pour pallier le problème. (Remarque ; aucune requête ajax est utilisé pour encoder votre date de naissance en base de données – mais cela aurait pu être possible). Même si dans ce cas-ci, l’année importe peu, je voulais tenter de jouer avec les dates, qui sont somme toute importantes dans un horoscope!
Pour conclure
Encore une fois, le projet à l’air simple à première vue ; une one-page et un filtre Javascript. Mais s’il est accompagné d’un CMS pouvant le rendre dynamique, il se complexifie mais à son avantage dans ce cas-ci ; imaginez maintenant que le commanditaire veuille ajouter plusieurs horoscopes différents (Zodiaque, Chinois) – imaginez ensuite qu’il veuille mettre en exergue les qualités et les défauts des signes dont il est question. Pour le premier exemple, il pourrait utiliser les catégories de WordPress. Pour le second, les slugs associés aux articles. Imaginez maintenant qu’il veuille ajouter les ascendants des signes déjà publiés. Le dev n’aura qu’à ajouter des options à ACF pour lier des articles entre eux.
Encore un mot sur WordPress
Nous venons de le voir, WordPress est intéressant pour améliorer le projet assez rapidement et de manière efficace. Mais son système de gestion de fichier rend le projet initial au delà d’un one page, comme décrit plus haut. En effet, avec les template-parts et avec des fonctions WordPress bien utilisées, on peut y ajouter une page 404, la page seule d’un article et différencier la page d’accueil des autres pages. (le thème n’a qu’une page !) Et pour rappel, nous pouvons customiser l’api WordPress pour générer un json qui peut être lu par un autre système. Vous la trouverez ici.
Articles connexes:
https://lintermediaire.be/lorem-ipsum
https://lintermediaire.be/decouverte-de-wp-cli
https://lintermediaire.be/virgin-un-theme-wordpress-de-base
https://lintermediaire.be/mes-5-extensions-wordpress-favorites
https://lintermediaire.be/wordpress-api-exemple-et-usage
https://lintermediaire.be/virgin-un-theme-wordpress-de-base
