WordPress #01
Niveau #01 : 100 % Gutenberg, 100% FSE, No Extensions & No CSS
La « Galerie d’Art Digitaux »
Site de démo pour la formation professionnelle sur WordPress du Hublot
Programme de formation
Thématique abordée pendant la formation niv. #01 WordPress
Objectif : reproduction du site de démo
Couleurs
Ressources en ligne : générateur de palette de couleurs, correspondance de couleurs, contraste de couleurs, etc…
- Ajout d’une palette de couleurs personnalisée
- Utilisation du Guide des Styles
Typographies
Ressources en ligne : repo de typo, combinaison de typos, typo variable, conversion de format, etc…
- Utilisation du Guide des Styles
- Import et installation de typo (no google fonts)
- Utilisation de typo variable avec Satoshi & Young Serif
- Pré-réglages des typographies fluide
- Format WOFF2
Images
Ressources en ligne: banque d’images libre de droit, traitement d’images de base, export et compression
- Texte alternatif (alt pour le SEO), légende & description
- Compression & format WEBP
- Nomenclature des nom de fichiers
Extension
- Zéro extension 😉
Thème FSE
- Twenty Twenty Five(TTF), utilisation des modèles, composants, compositions, guide de style, personnalisation des typos et palette de couleurs personnalisées.
Pages
- Utilisation des blocs Gutenberg pour la mise en page (bloc colonnes, rangées, empilement, grille)
- Utilisation de composants
Articles
- Création des articles pour les artistes ainsi que pour la partie collection
- Utilisation des images mise en avant
- Bloc de recherche pour les articles
Catégories
- Création des catégories pour l’organisation des articles (exposition, artistes, etc…)
- Ajout de la descriptions des catégories pour leur affichage dans le modèle
- Modification du slug pour ne plus avec dans l’url » categorie » mais plutôt « arts-digitaux » à la place
Modèles
- Modification du modèle des « pages«
- Utilisation du modèle des « Publications seules »
- Utilisation du modèle « Toutes les archives »
- Modification du modèle des « Résultats de recherche«
Header & Footer
- Modification de la mise en page du header
- Création / Modification du menu / sous-menu
- Modification du Footer
Limite de WP par défaut
NB : Utilisation de WP sans extensions & thème par défault TTF
Listes de quelques fonctionnalités qui n’ont pu ou pas complètement être intégrer dans le site de démo.
- Le bloc « Recherche »
Objectif : afficher uniquement les artistes suivant un mot clés de recherche
Résultat : le résultat de recherche, affiche également les pages dans lesquelles l’artiste apparait, ici la page d’accueil apparait en plus de l’artiste - Les blocs « Suivant » & « Précédent«
Objectif : passer d’un artiste à un autre
Résultat : il n’est pas de restreindre la navigation dans une catégorie. Tous les articles de toutes les catégories seront affichées. - Animations fadein, slide, etc…
- Etat hover & actif (current-menu-item pour le thème TTF)
- Les éléments ne peuvent être mis en position : fixed / sticky
- Justification de paragraphe impossible
- Attribuer une couleur uniquement pour les H1 ou H2 ou …
- Bloquer le nombre de colonne lorsque l’on utilise la largeur minimale des colonnes en rem avec le bloc Grille
- SVG non supporté
- Pas d’éditeur pour la description des catégories (gras, italique, lien…)
- Style des sous-menu + full screen mobile menu pas prévu
- Bloc « Galerie »
Objectif : pop up style light box + flèches permettant le page d’une image à l’autre
Résultat : possibilité d’afficher une image au clic avec un style lightbox mais pas le défilement entre les images - Responsive mobile / tablette
- Bloc d’icones simple
- Différences de styles en « étiquettes » et les « catégories » pas possible
- L’affichage de la liste d’artiste suivant un tag ne semble pas être fonctionnel…
Formation Professionnelle
WordPress niv #02
avec extensions, js, ou css !