HARDCODAGE de votre en-tête et pied de page (pagebuilder)

Oops...
Slider with alias none not found.

Quelques conseils de pro pour coder manuellement vos en-têtes et pieds de page personnalisés et gonflés.

Ce billet a été inspiré par le travail que j’ai effectué hier soir pour le site d’un client. Il en avait marre de son pagebuilder qui ralentissait la vitesse de son site et voulait l’abandonner.

La toute première étape évidente pour moi était de me débarrasser de la fonction themebuilder personnalisée d’Elementor utilisée pour remplacer l’en-tête et le pied de page de son thème. Une fois cette fonction supprimée, le constructeur de pages et le thème sont vraiment découplés et vous êtes libre de changer le thème en premier ou le constructeur de pages en premier (à vous de choisir).

Pour ceux qui ne le savent pas, les constructeurs de pages causent généralement 4 problèmes principaux :

  • Un gaspillage de code HTML – littéralement 10 à 30 fois plus de code que nécéssaire. (Souvent référencé dans les scores des pages comme “éléments DOM excessifs”).
  • Un gaspillage de code CSS – non seulement beaucoup plus de CSS, mais aussi beaucoup de styles qui se superposent partout.
  • Traitement dynamique PHP plus lent – bien sûr !
  • Une utilisation accrue de la mémoire – ce qui ralentit votre serveur.

Passons brièvement en revue ce que j’ai fait et espérons que cela inspirera d’autres personnes à s’atteler à la tâche.

ÉTAPE 1 – Créer un site de test et un nouveau thème.

Parce que c’est évident. Vous devez travailler à partir d’un autre site afin de pouvoir comparer les visuels et les styles côte à côte.

  • Sauvegardez une sauvegarde du thème avant d’y toucher.
  • Renommez la version sur laquelle vous travaillez sous un nouveau nom. (Cela se fait en renommant le répertoire du thème, et en changeant également le “Nom du thème” dans style.css).

ÉTAPE n° 2 – recoder le fichier de modèle

Je suggère de faire le pied de page car c’est généralement plus facile.

Les éléments sont disposés selon un espacement uniforme, il n’y a pas d’animations JS de type dropdowns ou de menu mobile off-canvas, et le code est plus facile à lire.

  • En général, le fichier de modèle de pied de page est quelque chose comme footer.php dans le répertoire de votre thème.
  • Différents thèmes peuvent avoir un nom de fichier différent ou le placer dans un répertoire différent.
  • Les thèmes pour développeurs (comme Genesis) personnalisent en utilisant des crochets et des filtres dans functions.php. Ce qui est plus facile dans la quantité de travail impliquée mais plus difficile pour les non-codeurs de comprendre visuellement les choses.

Ajoutez les divs, puis à l’intérieur vous placez le html brut ou enregistrez les zones de widgets.

  • Pour la plupart des choses, vous n’avez besoin que de trois niveaux de divs imbriqués. Une pour la section (class=”footer”) pour définir l’arrière-plan. Une autre pour le wrapper (class=”footer-wrapper”) pour contrôler la largeur du contenu. Et une dernière pour le style du contenu du pied de page (class=”footer-widgets”).
  • Après avoir placé les divs et avec des classes de divs judicieuses, placez votre contenu dans le HTML dur ou faites l’appel de la fonction widget.

ÉTAPE n° 3 – Enregistrement de nouvelles zones de widgets (si nécessaire)

Il existe deux façons d’enregistrer de nouvelles zones de widgets à partir du fichier functions.php, en fonction de votre thème.

  • Introduisez l’extrait de code correspondant, qui peut varier selon que vous avez déjà enregistré d’autres zones de widgets. Lisez ce guide ou ce guide. (Je peux faire le mien si vous ne comprenez pas).
  • Ou installez des hooks et des filtres si vous utilisez des thèmes plus conviviaux pour les développeurs comme Genesis.
  • S’il vous plaît… n’installez pas ces plugins pour ajouter des zones de widgets. Vous n’en avez pas besoin !

ÉTAPE n° 4 – ajouter du contenu (si nécessaire)

  • Ajoutez du contenu à ces zones de widgets.
  • Ceux qui ont codé le contenu en dur peuvent sauter cette étape.

ÉTAPE n° 5 – Donnez du style à votre zone de template

Ajoutez des styles CSS au fichier style.css de votre thème.

Vous avez donc ajouté le code du modèle et ajouté du contenu. Vous en êtes maintenant à la dernière étape, celle du style. Ceux qui maîtrisent les CSS n’ont pas besoin de beaucoup d’explications ici.

Pour tous les autres, ouvrez votre site réel et votre site de test côte à côte et commencez à ajouter du CSS.

  • Travaillez en commençant par l’ordinateur ou le mobile, puis modifiez les requêtes média.
  • La mentalité “desktop first” sera probablement plus facile pour les débutants, alors que l’inverse est plus vrai pour les concepteurs expérimentés.
  • Je recommande vivement d’écrire votre CSS à partir de zéro plutôt que de copier les affreux calculs mathématiques de votre constructeur de pages.

Copiez le nouveau thème sur le site en ligne.

  • Copiez le répertoire du nouveau thème sur le site en ligne.
  • N’oubliez pas de copier les CSS supplémentaires que vous aviez dans le Customizer.
  • Activez le nouveau thème sur le site réel.

C’EST FAIT !

Profitez de votre travail. Le codage en dur du thème et du pied de page permet littéralement de réduire de 10 fois la sortie HTML, de 10 fois le style CSS et d’alléger considérablement le traitement dynamique PHP. Il est probable qu’il supprime également toutes les requêtes inutiles de la bibliothèque JS/CSS. A partir de là, vous êtes plus près de réduire votre dépendance au pagebuilder et vous pouvez lentement convertir vos pages une par une vers un Gutenberg beaucoup plus rapide.

Je ne sais pas combien de mes lecteurs peuvent suivre ce guide, mais je pense que même si vous ne pouvez faire que 1 ou 2 des étapes et engager un développeur pour le reste, l’effort en vaut la peine ! Au moins, des étapes granulaires comme celle-ci vous pousseront à grandir en tant que professionnel.

Photo de Pixabay sur Pexels 

Similar Posts