Portfolio Arrami.me

Les meilleures personnalisations du Thème Twenty Twenty-Five

Écrit par

yufitran

dans

Le thème Twenty Twenty-Five est un excellent point de départ pour un site moderne et performant. Grâce à des personnalisations intelligentes, vous pouvez transformer ce thème en un outil puissant qui reflète votre vision et séduit votre audience. Prenez le temps d’expérimenter et d’ajuster pour obtenir un résultat unique et impactant.

1. Accédez aux styles généraux

Les styles généraux sont accessibles directement dans l’éditeur de blocs :

  1. Ouvrez une page ou un article dans l’éditeur Gutenberg.
  2. Cliquez sur l’icône en haut à droite (en forme de demi-cercle ou “Style”).
  3. Parcourez les options pour les couleurs, typographies et dispositions globales.

2. Configurez une palette de couleurs cohérente

La palette de couleurs est essentielle pour l’identité visuelle de votre site :

  • Couleurs primaires : Utilisez-les pour les titres, les boutons et les éléments interactifs.
  • Couleurs secondaires : Réservez-les pour les arrière-plans et les sections secondaires.
  • Couleurs neutres : Idéales pour le texte et les bordures.

Astuce : Respectez la règle des 60-30-10 :

  • 60% pour la couleur principale (fond),
  • 30% pour la secondaire,
  • 10% pour les accents.

3. Personnalisez le menu hamburger

Le menu hamburger, essentiel pour la navigation mobile, est souvent négligé. Pourtant, sa configuration peut faire une grande différence en termes d’esthétique et d’accessibilité :

  • Couleur de fond : Adaptez-la à votre palette générale pour une harmonie visuelle.
  • Couleur des liens : Assurez-vous d’un bon contraste pour faciliter la lisibilité.
  • Transitions animées : Ajoutez une légère animation lors de l’ouverture/fermeture pour un effet professionnel.

Astuce : Rendez ce menu encore plus engageant en incorporant des icônes ou des séparateurs visuels.

Couleur de fond : Harmonisez-la avec votre palette globale.

Couleur des icônes et du texte : Assurez un contraste suffisant pour une navigation intuitive.

4. Travaillez l’arrière-plan et les sections

Avec les styles généraux, vous pouvez personnaliser l’apparence globale de votre site :

  • Couleur de fond générale : Optez pour une teinte apaisante qui ne fatigue pas les yeux.
  • Arrière-plan des blocs spécifiques : Donnez de la profondeur à vos sections clés, comme les appels à l’action.

5. Personnalisez les liens et boutons

Les liens et boutons sont des éléments interactifs majeurs :

  • Couleur normale : Choisissez une couleur visible mais sobre.
  • Couleur au survol (hover) : Privilégiez un effet de contraste ou de luminosité.

Exemple : Si votre couleur principale est le bleu (#0073e6), optez pour une version plus claire ou plus sombre au survol.

6. Testez vos choix

Avant de finaliser votre palette :

  • Utilisez des outils comme Contrast Checker pour vérifier l’accessibilité.

7. Améliorez la navigation de votre site et son SEO avec la configuration des fils d’ariane

Avec SlimSEO, un plugin léger, suffisant et efficace pour un Portfolio, la mise en place des fils d’Ariane est rapide et intuitive.

Étape 1 : Installer et Activer SlimSEO

  1. Rendez-vous dans le tableau de bord WordPress.
  2. Allez dans Extensions > Ajouter.
  3. Recherchez SlimSEO dans la barre de recherche.
  4. Installez et activez le plugin.

Étape 2 : Activer les Fils d’Ariane

SlimSEO propose une fonctionnalité native pour ajouter des fils d’Ariane :

  1. Une fois le plugin activé, accédez à SlimSEO > Paramètres.
  2. Cliquez sur l’onglet Fils d’Ariane.
  3. Activez l’option des breadcrumbs si ce n’est pas déjà fait.

Étape 3 : Par défaut la page d’accueil est appelée Home

Traduisez cette chaîne de caractères soit en insérant ce code (snippet PHP) avec le plugin WP Code (extraits de code)

add_filter('slim_seo_breadcrumbs_args', function ($args) {
    $args['label_home'] = 'Accueil'; // Remplace "Home" par "Accueil"
    return $args;
});

Ou bien ajoutez ce hook (option avancée) directement dans le fichier functions.php ou un plugin spécifique.

Étape 4 : Ajouter les fils d’ariane aux modèles

SlimSEO propose un bloc Gutenberg que vous pouvez facilement insérer à l’emplacement souhaité dans vos modèles de pages.

7. Optimisez vos images avec CompressX.io

Téléchargez et installez le plugin CompressX.io.

Pour optimiser automatiquement vos nouvelles images :

  1. Connectez-vous à votre tableau de bord CompressX.io.
  2. Allez dans Paramètres généraux.
  3. Activez la compression automatique : Cochez la case pour compresser et convertir les nouvelles images dès leur téléchargement.

CompressX.io utilise des bibliothèques pour traiter les images. Assurez-vous que votre serveur répond aux exigences suivantes :

  • Bibliothèques prises en charge :
    • GD : Fournit des fonctionnalités de base pour traiter les images.
    • Imagick : Recommandé pour une meilleure qualité et compatibilité.

Configurez le format de sortie

CompressX.io supporte deux formats modernes pour les images compressées :

  • WebP : Un format rapide et largement pris en charge.
  • AVIF : Format plus récent, offrant une compression encore meilleure.

Vérifiez les cases suivantes :

  • Activer la conversion vers WebP.
  • Activer la conversion vers AVIF.

Ajustez le niveau de compression

CompressX.io permet de choisir entre différents niveaux de compression :

  • Sans perte (Lossless) : Conserve la qualité originale, mais réduit moins la taille.
  • Avec perte (Lossy) : Compresse davantage les images, mais peut affecter légèrement la qualité.
  • Personnalisé (Custom) : Réglez manuellement le niveau de compression.

Recommandation :

  • Pour un site rapide et visuellement acceptable, utilisez Lossy.
  • Pour des images critiques comme des logos, privilégiez Lossless

Forcez la recompression

Si vous avez besoin de re-traiter toutes les images déjà téléchargées :

  1. Activez l’option Forcer toutes les images à être re-traitées.
  2. Lancez le processus pour générer des versions WebP et AVIF des anciennes images.

Compatibilité et balises

CompressX.io offre deux options pour garantir une compatibilité maximale :

  • Règles de réécriture (Rewrite Rule) : Permet de servir les formats optimisés selon le navigateur de l’utilisateur.
  • Balises <picture> : Utilise des balises HTML modernes pour fournir plusieurs formats en fonction des capacités du navigateur.

8. Dupliquer les modèles dans l’éditeur

Pour conserver une trace de vos modèles et travailler sur de nouvelles versions, il est recommandé de dupliquer vos modèles directement dans l’éditeur FSE (Full Site Editing). Voici comment procéder :

  1. Accédez à l’éditeur FSE :
    • Rendez-vous dans Apparence > Éditeur (FSE) depuis le tableau de bord WordPress.
  2. Choisissez le modèle à dupliquer :
    • Dans le menu des modèles, sélectionnez celui que vous souhaitez conserver comme référence.
  3. Dupliquez le modèle :
    • Cliquez sur le modèle pour l’éditer.
    • Utilisez l’option “Dupliquer” (si disponible) ou copiez le contenu existant en utilisant la fonction d’exportation (si le thème ou les outils tiers le permettent).
  4. Renommez et modifiez la copie :
    • Donnez un nom unique à votre modèle dupliqué pour éviter toute confusion.
    • Apportez vos modifications dans la version dupliquée tout en conservant l’original intact.

Astuce : Avant d’apporter des changements importants, envisagez de sauvegarder vos modèles existants via un plugin ou en exportant les fichiers associés. Cela vous permettra de restaurer facilement votre travail en cas de besoin.

Cette méthode est idéale pour tester de nouvelles idées tout en préservant l’intégrité des modèles originaux.

9. Thème enfant ou pas avec le FSE ?

  • Oui au thème enfant : Si vous prévoyez des modifications significatives ou souhaitez un contrôle total sur la personnalisation.
  • Non au thème enfant : Si vos besoins se limitent aux options du thème parent ou à des ajustements légers via CSS ou l’éditeur FSE.

L’essentiel est de choisir la méthode qui correspond à la complexité de vos personnalisations, au temps consacré au projet et à vos compétences techniques.

Lire l’article pourquoi un thème enfant n’est plus nécessaire avec le FSE ?

10. Définissez la mise en page globale : dimensions et espacements

La configuration de la mise en page globale est essentielle pour garantir une structure claire, cohérente et responsive sur votre site. Voici les principaux éléments à définir, avec des recommandations pour chaque paramètre.

1. Largeur de la Zone de Contenu Principale

La largeur de la zone de contenu principale détermine l’espace disponible pour les textes, images, et autres éléments.

  • Largeur du contenu standard :
    • Recommandé : 1280px
    • Cette largeur est idéale pour la lecture sur des écrans de taille moyenne à grande, offrant un bon équilibre entre lisibilité et espace.
  • Grande largeur (full-width) :
    • Recommandé : 1600px
    • Utilisez cette configuration pour des sections spécifiques comme des bannières, images pleine largeur, ou arrière-plans visuels.

2. Marges Internes (padding)

Les marges internes définissent l’espace entre le contenu et les bordures de sa zone.

  • Marges internes standards :
    • Recommandé : 16px à 32px (1rem à 2rem) pour garantir un espacement suffisant et un design épuré.
    • Exemple : Pour une zone avec beaucoup de texte, privilégiez un padding de 24px (1.5rem).
  • Zéro marge interne :
    • Utilisé pour les blocs spécifiques nécessitant un alignement bord-à-bord, comme des carrousels ou des galeries.

3. Espacement des Blocs

L’espacement des blocs (gaps) améliore la lisibilité et organise visuellement les sections.

  • Haut espacement des blocs :
    • Recommandé : 1,2rem (19px) à 2rem (32px) selon le design global.
    • Cela garantit un espace suffisant entre les blocs pour une structure aérée.
  • Bas espacement des blocs :
    • Souvent similaire au haut espacement, mais ajustable selon les besoins de votre mise en page.
Tags :

Plus d’articles