Personnaliser la présentation de son blog avec le thème GeneratePress

Voici un guide clair et pragmatique pour personnaliser la présentation de votre blog avec le thème GeneratePress (avec ou sans GP Premium). Je pars du principe que vous utilisez WordPress 6.x.

1) Installer et préparer l’environnement

  • Installez le thème gratuit: Apparence > Thèmes > Ajouter > “GeneratePress”.
  • (Optionnel mais recommandé) Installez le plugin payant “GP Premium”, puis activez uniquement les modules dont vous avez besoin: Colors, Typography, Spacing, Blog, Elements, Secondary Nav, Copyright, WooCommerce (si e‑commerce), etc.
  • Activez un thème enfant si vous comptez modifier des fichiers de template classiques. Avec GP Premium, vous pouvez souvent éviter le child theme grâce aux “Elements” et aux hooks.

Astuce: Faites vos tests sur un site de staging ou activez un plugin de “maintenance/coming soon” le temps des réglages.


2) Comprendre les zones clés à personnaliser

  • Apparence > Personnaliser (Customizer): couleurs, typographies, espacements, mises en page globales, en-tête, navigation, blog/archives, widgets, pied de page.
  • Apparence > Elements (GP Premium): créer des en-têtes héros, injecter des blocs/hook, conditions d’affichage, mises en page contextuelles.
  • Éditeur de blocs: écrivez vos articles/pages en utilisant des blocs et, si possible, le plugin GenerateBlocks pour des mises en page propres et légères.

3) Réglages essentiels dans le Customizer

Identité du site et mise en page globale

  • Logo, favicon, titre/slogan.
  • Layout: largeur du conteneur (ex. 1200 px), plein écran ou encadré, style de séparateurs.
  • Sidebars: activer/désactiver et position (droite/gauche), largeur de la barre latérale.

Couleurs (module Colors)

  • Palette principale (fond, texte, liens, hover).
  • Couleurs spécifiques pour: en-tête, navigation, contenu, widgets, pied de page, boutons.
  • Conseil: définissez 1 couleur primaire, 1 secondaire et 1 couleur d’accent, puis déclinez (contrastes AA/AAA si possible).

Typographies (module Typography)

  • Police globale (ex. Inter, System UI, or Georgia pour un blog éditorial).
  • Hiérarchie:
    • Corps: 16–18 px (ou 1–1.125 rem), hauteur de ligne ~1.6–1.75.
    • Titres: H1 ~ 2–2.5 rem, H2 ~ 1.5–2 rem. Ajustez par appareil (mobile/desktop).
  • Activez “System Stack” ou hébergez localement Google Fonts pour performance/GPDR.

Espacements (module Spacing)

  • Marge interne des conteneurs, espacements entre blocs/cartes d’articles.
  • Ajustez le “Content Separator” pour une mise en page aérée mais cohérente.

4) Blog et archives: mise en page et métadonnées

Apparence > Personnaliser > Layout > Blog (nécessite module Blog de GP Premium):

  • Liste ou grille:
    • Grille 2–3 colonnes sur desktop, 1 colonne sur mobile.
    • Rapport d’image cohérent (ex. 16:9) pour éviter les sauts de mise en page.
  • Éléments affichés: image à la une, titre, extrait (ex. 20–35 mots), lien “Lire la suite”.
  • Métadonnées: auteur, date, catégories, temps de lecture (via plugin ou hook), nombre de commentaires.
  • Pagination: numérotée ou “Articles plus anciens / plus récents”.
  • Style carte: activez bordure légère et ombre douce pour distinguer les articles.

Pour les articles simples (Single):

  • Position de l’image à la une (au-dessus du titre ou sous l’en‑tête).
  • Afficher/masquer: catégories, tags, bio auteur, navigation article précédent/suivant.
  • Largeur de contenu: envisagez “Content no sidebar” pour maximiser la lisibilité.

5) En-tête, navigation et pied de page

En-tête (Header)

  • Logo + texte; jouez sur la hauteur du header pour compacité.
  • Sticky navigation (Navigation collante) si besoin, avec réduction de la hauteur au scroll.
  • Menu secondaire (module Secondary Nav) pour liens utilitaires (À propos, Contact, Newsletter).

Navigation

  • Menu principal clair, max 5–7 items. Sous-menus pour le reste.
  • Sur mobile: icône hamburger; testez le déploiement et l’accessibilité (touche Tab/écran lecteur).

Pied de page

  • Widgets de 2–4 colonnes: liens de caté, derniers articles, newsletter, mentions légales.
  • Lignage et contraste pour lisibilité.
  • Module Copyright pour une ligne personnalisée (© Année – Nom du site – Liens légaux).

6) Personnalisations avancées avec Elements (GP Premium)

Les “Elements” évitent le child theme et donnent un contrôle fin:

  • Hook: injecter du contenu avant/après titre, après le contenu, dans la sidebar, etc.
  • Header: créer un header “hero” par catégorie, avec fond d’image, H1, breadcrumb.
  • Layout: forcer une mise en page (plein écran, no sidebar) pour un type de contenu.
  • Block Element: construire un bloc réutilisable (avec GenerateBlocks) et l’afficher conditionnellement.

Exemple: ajouter un temps de lecture sous le titre d’article via Hook

  1. Créez un Snippet (Code Snippets) ou un Hook Element (hook: generate_after_entry_title) :
add_action( 'generate_after_entry_title', function() {
  if ( is_single() && 'post' === get_post_type() ) {
    $content = get_post_field( 'post_content', get_the_ID() );
    $words = str_word_count( wp_strip_all_tags( $content ) );
    $minutes = max( 1, round( $words / 200 ) );
    echo '<p class="reading-time">⏱️ ' . $minutes . ' min de lecture</p>';
  }
} );
  1. Dans l’Element, réglez “Display Rules” sur “Posts > All Posts”.

7) Construire des mises en page avec GenerateBlocks (optionnel mais puissant)

  • Installez GenerateBlocks (gratuit) pour des conteneurs, grilles, boutons, en-têtes avancés.
  • Utilisez un “Container” parent (largeur, fond, padding), puis des “Grid” pour organiser les cartes d’articles, sections “À la Une”, CTA newsletter.
  • Stylez via le panneau bloc: rayons d’angle, ombres, gap, responsive (colonnes qui se replient sur mobile).
  • Sauvegardez des “Patterns” réutilisables.

8) CSS léger pour finitions

Exemples utiles:

  • Limiter la hauteur des images à la une dans les grilles:
.blog .post-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
  • Lien “Lire la suite” en bouton:
a.read-more { display:inline-block; padding:.5rem .9rem; background:#0055ff; color:#fff; border-radius:.4rem; }
a.read-more:hover { background:#003ecc; }
  • Espacement entre cartes d’articles:
.blog .inside-article { margin-bottom: 24px; border:1px solid #eee; border-radius:8px; }

Placez ce CSS dans Apparence > Personnaliser > CSS additionnel.


9) Performances et bonnes pratiques

  • Activez “Dynamic CSS/JS” de GP Premium si disponible.
  • Optimisez les images (WebP/AVIF), Lazy-load, tailles adaptées.
  • Mise en cache + minification (ex. WP Rocket, LiteSpeed Cache).
  • Désactivez les modules/plugins inutilisés.
  • Vérifiez Core Web Vitals (PageSpeed Insights) après chaque gros changement.
  • RGPD: bannière de consentement, hébergement local des polices si possible.

10) Bibliothèque de sites (Site Library)

Avec GP Premium: Apparence > GeneratePress > Site Library.

  • Importez une démo proche de votre style (blog minimal, magazine, portfolio), puis remplacez contenus/ couleurs/typos.
  • C’est un excellent raccourci pour partir d’une base propre et mobile-first.

11) Workflow conseillé (checklist)

  1. Définir palette et typos.
  2. Régler conteneur, sidebars, espacements.
  3. Configurer en-tête et navigation (desktop + mobile).
  4. Styliser blog/archives et single posts (grille, métadonnées, extrait).
  5. Créer 1–2 Elements (hero d’archive, hook “après titre”).
  6. Construire la page d’accueil avec GenerateBlocks (sections héros, derniers articles, catégories).
  7. Finaliser footer, mentions légales, formulaires.
  8. Passer les tests performance et accessibilité.