L'intermédiaire

Takin est un plugin WordPress qui vous permet d’afficher les 24 dernier articles comme un calendrier de l’avent sur votre site WordPress. Je vous propose la présentation de ce petit plugin

Un calendrier de l’avent …

Oui, ce n’est pas la première fois que je m’exerce avec les dates sous WordPress et ses fonctions natives. Ni même avec les calendriers de l’avent… Mais voilà, la période avant Noël oblige,…
Ce projet fait suite à celui-ci : un-calendrier-de-lavent-avec-lapi-wordpress mais aussi ici ou encore ici…
Mais l’idée ici était de rester sur WordPress et de créer un template de page depuis un plugin. C’est ce que fait Takin.

Un template de page ?

Il m’a semblé plus judicieux que le plugin créé un Template de page afin que les personnes qui installeraient le thème puissent ensuite créer une page avec les slug (et donc l’url) qu’ils souhaiteraient partager à leur communauté. Je trouvais que c’était un bon compromis entre créer un thème complet ou un simple Shortcode. Mais dans les futures versions de l’outil, je compte sans doute permettre à l’utilisateur de paramétrer plus de propriétés, en passant par la neige qui tombe (ou non), à la sélection des articles filtrés par catégories par exemple, …

Le Template se nomme « Takin« , et une fois activé sur votre page, ce dernier affichera un beau décor de Noël, customisable via l’image de mise en avant de la page. Par dessus, les 24 derniers articles du blog. Attention, si le jour courant ne dépasse pas l’index de la boucle des articles ainsi créé, l’article ne sera pas accessible (exemple, si on est le 7 décembre, vous ne pourrez pas accéder aux 17 articles suivants !) – soit, un vrai calendrier de l’avent !

Bonus : de la neige qui tombe …

Je vous donne en bonus, le code CSS de mes petits flocons de neige qui tombent. Vous n’aurez pas de mal à en trouver sur le web, c’est également ce que j’ai recodé à ma sauce, histoire de l’avoir sous la main une bonne fois pour toute.

.neige {
z-index: 999999;
position: fixed;
top: 0;
left: 0;

width: 100vw;
height: calc(100vh + 200px);
pointer-events: none;
overflow: hidden;

}

.flocon {
position: absolute;
top: -200px;
background: rgba(255,255,255,0.9);
border-radius: 50%;
box-shadow: 0 0 10px white;

animation: snowfall var(--takin_duration) linear infinite;

}

@keyframes snowfall {
0% {
transform: translateX(var(–takin_xstart)) translateY(-200px);
}
100% {
transform: translateX(var(–takin_xend)) translateY(calc(100vh + 200px));
}
}

N’oubliez pas de créer les flocons avec les variables css qui conviennent.
Vous pouvez voir le résultat final ici : https://lintermediaire.be/calendrier-de-lavent/

A très vite sur le blog et déjà bonnes fêtes !

Sources

Résultat
https://lintermediaire.be/calendrier-de-lavent/

Sur Github
https://github.com/ProjetsMerlin/Takin/

Image libre de droit
https://pixabay.com/fr/photos/joyeux-no%c3%abl-no%c3%abl-d%c3%a9corations-de-no%c3%abl-5860209/