Icône du titre de la page Le Meilleur Thème WordPress 2020 : GeneratePress

GeneratePress (GP) est sans aucun doute le meilleur thème-framework WordPress multi-usage pour les non-développeurs qui existe à l’heure actuelle.

ECOMTURBO construit tous ses sites et boutiques en ligne exclusivement sur GP pour plusieurs raisons:

  • Sa légèreté sans dépendance jQuery mais avec des fonctionnalités essentielles intégrées d’où son appellation de « Framework ».
  • Construit sur la puissante Flexbox Grid. Il s’adapte et reste esthétique sur tous les écrans.
  • Il a le Schéma intégré, pour de meilleurs résultats SEO.
  • Intégration impressionnante avec l’outil de personnalisation WordPress.
  • Compatibilité avec toutes nos extensions préférées, WooCommerce, Easy Digital Downloads, TheSEOFramework, MemberPress, BuddyPress, bbPress.
  • Il est prêt à la Traduction.
  • Sa fonction éléments, lui permet d’ajouter des éléments où vous le souhaitez sur votre site.
  • Sa facilité d’utilisation et de personnalisation pour les non-codeurs.
  • Des tonnes de crochets et de filtres disponibles qui le rendent idéal pour les développeurs.
  • Aucun constructeur de pages n’est nécessaire car GP fonctionne à merveille avec son extension Gutenberg : GenerateBlocks.
  • La documentation et l’excellence du support par son développeur. Il y a en moyenne 1 mise à jour par mois.
  • Peut sans complexe être comparé au Framework Genesis qui fut jusqu’à présent la Rolls-Royce des développeurs WordPress.

Bref, GP est le framework WordPress idéal pour créer n’importe quelle boutique en ligne, blog, site sans avoir besoin de coder. Parce qu’aucun marketeur n’a le temps pour ça.

Je vous propose d’aller plus en détails sur les raisons et fonctionnalités qui font le succès de GP et notre choix comme Framework ECOMTURBO de prédilection.

Cet article a été mis à jour sur la base des versions GeneratePress 3.0.2 et GP Premium 1.12.2

L’importance du choix d’un thème

De nos jours, la vitesse de votre site Web est cruciale. Les moteurs de recherche comme Google vous classent mieux si votre site est rapide et accessible.

Dès lors, il est évident que vous devez choisir un thème WordPress pour votre site qui respecte ces principes – rapidité et accessibilité.

Qu’est qu’un thème WordPress

Un thème WordPress est une combinaison de HTML, CSS, Javascript et PHP.

Le code HTML doit être bien propre et minimal. Il n’est pas nécessaire de le compliquer, en particulier pour un thème. Si votre thème le complique trop, cela aura un impact négatif sur les performances.

Le code CSS lui est très difficile à garder propre et minimal. C’est là que beaucoup de thèmes sont surchargés, car le code CSS n’est pas écrit à la perfection, ou il y a trop de fonctionnalités qui nécessitent chacune leur propre CSS.

Javascript quant à lui peut être très mauvais pour les performances s’il n’est pas écrit correctement. 

De nombreux thèmes utilisent jQuery, ce qui signifie que vous chargez leur javascript avec toute la bibliothèque jQuery. 

Un thème WordPress rapide utilise du javascript vanille, et le javascript lui-même doit rester très léger.

Enfin, PHP est l’aspect dynamique de votre site Web qui communique avec WordPress et est responsable de l’interrogation de votre contenu et de l’apparence de votre site Web réel. 

Plus il y a de PHP à charger sur chaque page et plus votre site Web sera lent (surtout s’il est mal codé). 

C’est là que les thèmes simples qui essaient de ne pas en faire trop surpasseront toujours les thèmes surchargés avec trop d’options.

Un thème WordPress rapide et léger doit se concentrer sur tous ces domaines. 

GeneratePress compose brillamment avec toutes ces exigences, raison pour laquelle ECOMTURBO recommande vivement à tous ses clients de l’utiliser.

Les requêtes HTTP

Une requête HTTP est ce qui se produit lorsque votre navigateur demande et télécharge un fichier depuis votre serveur. Cela inclut les fichiers CSS, les fichiers javascript, les images, etc.

Il est important de minimiser ces demandes. Chaque requête rend votre site Web un peu plus lent à charger.

La taille de chaque requête est encore plus importante. C’est pourquoi vous ne devez pas utiliser d’images lourdes sur votre site Web, par exemple, car elles augmentent considérablement le temps de chargement de vos pages pour que le navigateur les télécharge.

La même chose s’applique au CSS et javascript de votre thème.

C’est là que GeneratePress brille. Nous vous l’expliquons plus bas dans cet article (cf. Performance et vitesse de chargement)

Le marché des thèmes premium WordPress

Certains critiquent GP et le comparent à des thèmes tels qu’Astra, Avada, OceanWP, X theme, Divi, Mythemeshop et bien d’autres.

Force est de constater leur ignorance car GP est bien plus puissant!

La tendance marketing actuelle des thèmes Premium WordPress est de vanter leur légèreté des codes CSS et JS, de mettre en avant leurs options uniques de mise de cache et d’autres fonctionnalités propres pour vendre.

Pourtant la vérité est simple : moins le thème possède de fonctionnalités et mieux c’est pour développer.

En tout état de cause, si le thème possède des fonctionnalités et c’est le cas de GP, celles-ci doivent être optionnelles.

Il doit être possible de les activer ou non selon ses besoins sans que ces fonctionnalités se chargent en arrière-plan.

Alors quels sont les thèmes qui restent dans la course? Selon nous aucuns en dehors de Genesis et GeneratePress.

Les autres thèmes sont:

  • Léger, mais sans aucunes fonctionnalités – donc c’est seulement rapide jusqu’à ce que vous installiez inévitablement toutes les extensions tierces pour terminer votre site (conception / fonction).
  • Complet et modulaire – mais très lents.
  • Complet, modulaire et avec des options de performance – mais toujours aussi lent. Les thèmes surchargés avec des options dites de « performance de vitesse » sont comme de la malbouffe avec des « saveurs naturelles ».
  • Léger et raisonnablement fonctionnels – mais uniquement personnalisable par les développeurs. Nous ne parlerons pas de ces thèmes car nos clients ne codent pas ou très peu.

Introduction à GeneratePress

GeneratePress (GP) est un thème WordPress gratuit créé par Tom Usborne , talentueux développeur WordPress Canadien.

A date, ce thème est utilisé par plus de 300,000 site Web, compte plus de 2.8 millions de téléchargements et a reçu cinq étoiles par plus de 1,000 utilisateurs.

De toute évidence, Tom a fait quelque chose de solide.

GeneratePress (GP) est un thème WordPress gratuit créé par Tom Usborne.

Seulement 15 minutes après avoir installé la version gratuite nous nous sommes jeté sur la version premium tant nous étions convaincu de la qualité du produit. Le développeur a pensé à tout, comme nous imaginions que le thème de nos rêves devait fonctionner.

J’y reviendrai plus en détail ci-dessous, mais examinons d’abord certaines des fonctionnalités.

La plupart de ce que je vais couvrir se trouve dans la version premium du thème qui vaut chaque centime investis, $49.95 pour être très précis.

Prix de la version premium

La License premium de GP coûte $49.95 et comporte 14 modules additionnels.

Elle vous permet d’utiliser GP sur autant de sites que vous souhaitez avec un an de support technique et de mises a jour. Ça vaut vraiment le coup!

Qui plus est, tout renouvellement de la licence bénéficie d’une réduction de 40%!

Voici la liste des modules et fonctions incluses :

  • Choix des couleurs : coloriez facilement tout élément auquel vous pouvez penser via l’option de personnalisation.
  • Typographie :  choisissez les tailles de police, les familles de polices (y compris les polices Google) et le poids des polices. Vous pouvez également utiliser des polices système dites « Sytem Stack Fonts » pour ne pas avoir à charger de fichiers de polices!
  • WooCommerce :  prenez le contrôle de votre boutique WooCommerce avec de nouvelles options de typographie, de couleur et de mise en page.
  • Éléments :  bannières de page dynamiques, système de hook avancé et dispositions de thème personnalisées. Cela vous permet d’ajouter votre propre contenu personnalisé dans différentes zones du thème.
  • Sections :  créez facilement des sections transparentes à l’intérieur de vos pages pour créer des designs uniques.
  • Menu Plus :  ajoutez un menu permanent (fondu, diapositive ou aucune transition), un logo de menu, un en-tête mobile, une navigation hors canevas et un menu coulissant.
  • Blog :  affichez vos articles dans des colonnes (type magasine) ou en mode maçonnerie. Modifiez la taille et l’alignement de l’image de l’article, et bien plus encore.
  • Arrière-plans : téléchargez des images d’arrière-plan dans diverses zones de votre site.
  • Espacement:  contrôlez l’espacement des éléments (remplissage et marge), y compris votre en-tête, contenu, widgets, éléments de menu et largeur de la barre latérale.
  • Navigation secondaire :  ajoutez un deuxième élément de navigation avec les mêmes options que votre navigation principale.
  • Copyright :  ajoutez votre propre message de copyright personnalisé au bas de votre site.
  • Désactiver les éléments :  désactivez des éléments spécifiques sur certaines pages et publications, tels que l’en-tête, la navigation, le titre du contenu ou le pied de page. Nous sommes fans de cette fonctionnalité.
  • Import-Export : Exportez et importez facilement vos paramètres depuis le module de personnalisation!

Performance et vitesse de chargement

Nous testons toujours un nouveau thème à vide en l’installant sans personnalisation pour voir à quelle vitesse celui-ci va charger.

C’est un test classique qui donne une idée des performances avant ajout des extensions, scripts et codes.

Test des performances

Les tests lighthouse ont été exécutés sur un hébergement ECOMTURBO, serveur LiteSpeed avec PHP 7.4.

Résultats du tests lighthouse de GeneratePress.

Une chose dont vous n’avez jamais à vous soucier avec GeneratePress est la performance. 

GP a été construit avec une conception modulaire, et son développeur a veillé à ce que chaque fichier qui se charge soit aussi petit que possible. Avec HTTP / 3 (QUIC), le nombre de fichiers n’est pas aussi important. Mais la taille le reste.

Jetez un œil aux fichiers GeneratePress de base ci-dessous:

  • /generatepress/assets/css/main.min.css 5.0 Ko
  • /generatepress/assets/js/main.min.js 2.1 Ko
GeneratePress n’a besoin que de 2 requêtes HTTP d’une taille totale de 7.1 Ko.

L’ensemble de la feuille de style principale du thème ne pèse que 5 Ko.

La deuxième requête HTML faite par GeneratePress est le fichier javascript principal. Ce fichier pèse que 2.1 Ko!

Ainsi, la base de votre site Web (le thème) est ajoute seulement deux requêtes HTTP d’une taille totale de 7.1 Ko.

Les tailles de fichier ci-dessus sont compressées par le serveur (la plupart le font par défaut).

Dans la capture d’écran ci-dessus, vous constatez que WordPress charge lui-même certains scripts et styles CSS:

  • style.min.css : correspond aux styles par défaut pour certains des blocs de l’éditeur de bloc principal.
  • wp-embed.min.js : ce fichier gère les intégrations automatiques à partir des réseaux sociaux et d’autres sites WP.
  • wp-emoji-release.min.js : ce fichier convertit vos caractères en emojis le cas échéant.

Si nous les supprimons du site, nous pouvons obtenir une image claire des requêtes HTML de GeneratePress et la taille de la page par défaut.

Voici les seules requêtes HTML de GeneratePress.

Testez vous même GeneratePress, inspectez le nombre de requêtes HTML et le poids des fichier en vous rendant sur https://speedtest.generatepress.com/

Les fonctionnalités de performance de GeneratePress

GP dispose de 3 fonctionnalités pour optimiser la vitesse de chargement de vos pages:

  • Méthode d’impression CSS dynamique : La génération de votre CSS dynamique est stocké dans un fichier externe qui offre des avantages de performances significatifs.
  • Cache CSS dynamique : mise en cache CSS dynamique pour accroître les performances.
  • Structure boites flexibles ou flottantes : préférez les boites flexibles introduites dans GP 3.0.
  • La conception modulaire :  activer / désactiver tout ce que vous n’utilisez pas pour limiter le chargement de scripts sur vos pages.
  • La prise en charge des icônes SVG : vous pouvez choisir entre SVG et polices. Choisissez toujours SVG pour la performance.
  • Le chargement de polices System Stack
Les fonctionnalités de performance de GeneratePress.

La conception modulaire est fantastique. En tant qu’hébergeur WooCommerce , je suis obnubilé par l’optimisation de la vitesse et me sens donc comme chez moi avec ces options.

A titre d’exemple, voici les modules GeneratePress que j’ai activé sur ce site:

Les modules GeneratePress activé sur ECOMTURBO.

Les autres fonctionnalités de performance incluent les icônes SVG et les polices système, que nous aborderons plus loin dans cet article.

Les options de personnalisation de GeneratePress

L’un des points forts de GP est qu’il s’intègre parfaitement avec l’outil WordPress de personnalisation de thème.

Ainsi, vous n’avez pas a apprendre a utiliser une nouvelle interface utilisateur comme c’est le cas de beaucoup d’autres thèmes premium.

A chaque activation de module, vous verrez apparaître dans l’outils de personnalisation de nouvelles options. En voici quelques non exhaustives et à titre d’exemple:

Les options de personnalisation de GeneratePress.

L’identité du site

Sous le menu « identité du site », vous trouverez des éléments tels que le titre de votre site, le slogan et l’endroit où télécharger votre logo. 

Vous pouvez aussi facilement utiliser un logo SVG grâce à l’extension safe SVG de Daryll Doyle. Si par default WordPress ne permet pas l’utilisation des images SVG pour des raisons de sécurité, l’utilisation de ce plugin optimise le code et sécurise le fichier.

Vous n’avez pas non plus à vous soucier de l’image favicon. Depuis WordPress 4.3, vous pouvez télécharger votre icône et WordPress la recadrera automatiquement et générera toutes les différentes tailles d’icônes de votre site: favicon, applications mobiles, etc.

Personnalisation de l’identité du site.

Les options de mise en page

Voici quelques-unes des nombreuses options de mise en page de l’outil de personnalisation. 

Vous pouvez facilement modifier la largeur du conteneur de la page, l’espacement, le remplissage, etc. pour chaque élément. 

Cela permet de rapidement modifier l’apparence générale de votre site en quelques clics.

Les options de mise en page de GeneratePress.

Vous disposez des même options pour personnaliser l’apparence de votre blog. 

Par exemple, vous pouvez changer votre archive de blog pour afficher des colonnes au lieu de la mise en page standard. 

Choisissez où vous voulez que vos images mise en avant apparaissent, ou si vous n’en voulez qu’une. Vous pouvez aussi utiliser des images plus petites en plaçant le texte à droite.

Les options de mise en page du Blog de GeneratePress.

La gestion de couleurs

Voici quelques-unes des nombreuses options de gestion des couleurs.

Vous pouvez modifier les couleurs du corps du texte, de l’en-tête, de la navigation principale, du panneau hors canevas, des boutons, du contenu, des widgets de la barre latérale, des formulaires et du pied de page.

La gestion de couleurs de GeneratePress.

La gestion de la typographie

Ecomturbo.net utilise les polices système.

Ainsi, nous ne chargeons aucun fichier de police tel que Google Fonts qui ralentit votre site Web. 

Ceci dit, vous pouvez bien sur choisir n’importe quelle police Google si vous souhaitez un rendu plus élégant. Il faudra simplement veiller à charger vos fonts localement sur votre serveur.

La personnalisation de polices de texte de GeneratePress.

Le module « éléments » de GeneratePress

L’une des meilleures fonctionnalités de GeneratePress réside dans le module « éléments ».

Celui-ci vous permet d’ajouter du code personnalisé / PHP et des crochets (hooks) n’importe où sur votre site WordPress ou votre boutique WooCommerce.

GP offre quatre types d’éléments différents:

  • Les blocs Gutenberg
  • Les en-têtes (header)
  • Les crochets (hooks)
  • Les mises en page
La fonction elements de GeneratePress.

Voici quelques exemple de l’utilisation de cette fonctionnalités sur ecomturbo.net

Exemple de bloc Gutenberg: le design du footer de nos pages

Exemple d’en-tête (header): bannière différente sur chaque article du blog avec titre et image de fond

Sur le site ecomturbo, vous avez peut-être remarqué que chaque page affiche une bannière différente avec en fond une image.

Si nous prenons l’exemple de la page de cet article voici l’emplacement de l’élément d’en-tête :

Fonction élément d’en-tête de GeneratePress
Configuration de l’élément d’en-tête ou page hero (bannière de page).

Dans la zone de texte nous avons inséré le code de la balise H1 pour titre de l’article et une icône de couleur jaune au format .SGV placée à gauche du titre de la page:

<h1>
<img src="https://cdn-5f736904c1ac190fbc56f1b6.closte.com/wp-content/uploads/2020/11/icone-jaune.svg" class="title-icon" alt="Icône du titre de la page"> {{post_title}}
</h1>

Puis nous avons utilisé le code {{post_title}} pour automatiquement afficher le titre de l’article. Ainsi le titre changera automatiquement pour chaque article du blog.

Concernant l’image nous avons sélectionné comme image de la section « image mise en avant » pour afficher l’image individuelle de chaque article.

Enfin sous l’onglet « Règles d’affichage » nous avons sélectionné tous les articles.

Règles d’affichage de l’élément d’en-tête sur toutes les pages d’articles.

Exemple de crochet (hook): installation du code de mailchimp sans extension en bas de page (footer)

Grâce à l’élément crochet de GP, nous avons installé le code Mailchimp en bas de chaque page du site sans avoir eu a installer un plugin ou manipule les code HTML.

Installation du code Mailchimp dans le Footer.

Ensuite sous l’onglet « Règles d’affichage » nous avons choisis l’emplacement du code sur toutes les page d’article du blog. Notez que la page d’accueil est exclue pour optimiser sa vitesse de chargement.

J’ai fondé ECOMTURBO en 2016 et aidé des centaines d’e-commerçants dans leurs aventures en ligne. Entrepreneur depuis 15 ans, je suis obnubilé par le marketing, la SEO et l’optimisation de la vitesse des sites Web.



2 réflexions au sujet de “Le Meilleur Thème WordPress 2020 : GeneratePress”

  1. Wow merci Adrien d’avoir partager ce thème.
    Je vais l’utiliser dans mon business.
    En plus, on peut sortir d’Elementor qui est vraiment une machine à gaz.

    Répondre

Laisser un commentaire