Skip to content

Table des matières avec classe active des titres au scroll

Pour des longs articles ou pages de contenus, c’est toujours plus sympa d’avoir une table des matières qui reste à l’écran et qui montre où l’on se situe dans le contenu.

Étape 1 : installation du plugin

J’ai choisi dans ce cas un incontournable des tables des matières surtout que ce plugin permet de créer des widgets dans vos sidebars, shortcodes où voulez,,…

Étape 2 : Configuration et mise en place sidebar sticky

Une fois le plugin installé, vous le configurez via les réglages et vous l’affichez soit avec un widget dans votre sidebar qui pour que ce tutoriel vous soit utile se devra de rester apparente à l’écran.

Ce n’est pas le but de ce tutoriel donc si ce n’est pas le cas de votre thème, il va falloir vous y collez et faire un peu de CSS et d’HTML.

Voici un début de piste pour créer une sidebar sticky, terme consacré à cette fonctionnalité de rester à l’écran.

Create a sticky sidebar

Pour avoir un peu galéré la première fois, je vous conseille cet article qui vous permettra de résoudre les écueils éventuels liés à une sidebar sticky. Dans mon cas, l’overflow était réglé à « hidden » sur un élément parent du DOM ce qui rendait le position: sticky inopérant… C’est râlant de perdre du temps sur ce genre de petites choses qui paraissent insignifiantes 😉

Étape 3 : Comprendre comment interagir avec la table des matières

Maintenant que votre table des matières fonctionne et reste à l’écran. Vous allez devoir intéragir avec Javascript pour ajouter une classe CSS sur vos niveaux de titres lorsque vous scrollez dans votre page.

Un script vaut mieux que de longues explications donc acte :

Jump menu with active class and smooth scroll

Ce sont les lignes 18 à 35 de la partie Javascript qui nous intéressent et qu’il vous faudra insérer dans votre code et l’adapter selon votre cas.

Ayant mis cela dans une sidebar que j’ai clairement identifiée avec le plugin sélectionné, voici ce que ça donne :

//jQuery init
jQuery(function($) {

     $(window).scroll(function() {
		var scrollDistance = $(window).scrollTop() + 50; // add distance to be sync between highlight and displaying headings text
	
		// Assign active class to sidebar links while scolling
		$('.contenu h2, .contenu h3').each(function(i) {
               if ($(this).position().top <= scrollDistance) {
                    $('.sidebar .toc_widget a.active').removeClass('active');
                    $('.sidebar .toc_widget a').eq(i).addClass('active');
               }
		});
     }).scroll();

}); // end function init jquery

Vous avez donc la class « .contenu » qui concerne la zone de votre texte entier. Essayez de cibler le plus précisément possible cette zone histoire que le script ne doive pas analyser le DOM de toute votre page ce qui sera inutile. La classe « .sidebar » cible la table des matières. Je cible ici uniquement les titres de niveau 2 et 3 car je n’utilise pas les niveaux inférieurs. Et si c’est votre cas, demandez-vous si c’est bien opportun 😉

Vous voyez aussi que j’ai ajouté un « +50 » à la distance de scroll. Selon le design de votre thème, il est possible que le matching entre l’ajout de la classe active et le scroll avec le niveau de titre dans votre texte se fasse un peu trop tôt ou un peu trop tard. Vous pourrez donc jouer avec ce réglage pour que ça fonctionne comme vous le désirez.

Étape 4 : Vos utilisateurs vous remercient

Et voilà, on y est. Vos utilisateurs peuvent maintenant profiter d’une lisibilité accrue de vos articles et peuvent naviguer d’un titre à l’autre très facilement et de manière plus ergonomique.

Published inContenuDéveloppementFrontendPlugins

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Personnalisation de vos blocs Gutenberg : trucs et astuces

Un article qui sera en constante évolution. Dernière mise à jour : 1/04/22.

Je travaille essentiellement à créer mes propres blocs principalement avec ACF Pro Blocks. Afin que cela fonctionnement parfaitement, j’ai également besoin de modifier l’environnement Gutenberg général, des blocs existants,…

Comment modifier proprement les css de vos blocs Gutenberg

Il y a différents cas et moyens de modifier proprement les css de blocks Gutenberg existants, vos propres blocks,… Voici comment faire.

Vous pouvez limiter les blocs présents par type de contenu

Tutoriel : Implémentation géniale si vous voulez empêcher l’ajout de blocks et imposer des blocs prédéfinis à vos utilisateurs. Source.

Published inDéveloppement

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

ACF Pro blocs (Gutenberg) : trucs et astuces

Un article qui sera en constante évolution. Dernière mise à jour : 1/04/22.

Je me régale avec ACF PRO et la possibilité de gérer des créer des blocs Gutenberg comme je l’entends. Je trouve au fur et à mesure des astuces pour bien les gérer et je souhaitais vous en faire part.

Ajouter les styles CSS ajoutés par des plugins,…

Vous devez dans le code php de votre bloc ACF ajouter la variable :

$block['className']

Ce qui donne en situation réelle :

<div class="<?php echo $block['className']; ?> vos-css ... "> votre bloc ACF</div>

Cela permet notamment si vous utilisez des plugins qui rajoutent des css comme ce plugin d’animations de bien les ajouter quand vos blocs ACF sont chargés dans l’éditeur.

Source.

Ajouter un aperçu avec une image personnalisée lors de l’ajout du bloc

C’est tojours sympa d’avoir une image d’aperçu (preview) quand on clique sur le ‘+’ plus en haut à gauche plutôt que rien du tout. -> Source avec explications.

Published inDéveloppement

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Quel plugin choisir pour créer ses blocs personnalisés avec Gutenberg

Si vous souhaitez créer vos blocs Gutenberg vous-même vous avez plusieurs solutions.

  • à la main : la solution idéale si vous connaissez React, la logique WordPress pour créer vos blocs,… Mais pas simple du tout.
  • à l’aide d’un plugin : si vous n’êtes pas à l’aise pour comprendre tout l’écosystème nécessaire autour de la création d’un blocs Gutenberg, vous avez des plugins qui vont le faire pour vous.

C’est cette 2ème solution que j’aborde ici. L’idée c’est que vous ajoutez un block que vous avez créé dans Gutenberg et l’utilisateur doit remplir une série de champs de formulaire que vous fixez. Dans votre thème vous allez gérer l’html / php / css comme vous l’aurez fait pour votre thème WordPress.

Je ne vous cache pas que malgré cette facilitation qui vous évite la compréhension de React n’est pas simple et qu’il vous faudra malgré tout un certain niveau de connaissance en html/php/css pour y arriver.

Genesis : la solution gratuite et intuitive pour créer vos blocs Gutenberg

J’ai retenu 2 solutions qui ont chacune leur version gratuite et payante : Advanced Custom Fields et Genesis.

En gratuit, il n’y a que Genesis qui peut vous proposer une solution. Et franchement ça fait largement le travail si vous n’avez pas de grosses demandes.

Elle permet déjà de faire pas mal blocks à la main en « simple » php/css soit depuis l’administration WordPress soit via des fichiers dans votre thème avec Genesis qui vous explique où vous devez créer les fichiers et quels noms ils doivent avoir. Vraiment bien fichu je vous dit.

Je suis tombé sur cette vidéo en anglais qui vous explique pas à pas comment procéder.

La version payante ajoute un concept que les utilisateurs d’ACF connaissent bien, le « repeater field ». Une option pratique pour un block qui nécessite une répétition d’informations comme des colonnes avec titre, contenu et bouton d’action par exemple en vous évitant de devoir créer titre colonne gauche, titre colonne centre et titre colonne droite.

Le souci est que la version payante vient avec la solution complète générale à 360 $ / année. Il faut donc que ça soit intéressant pour vous de basculer dans un environnement Genesis complet. Franchement ça a l’air pas mal et si ça devient votre outil pro, c’est largement rentabilisé après quelques projets.

Advanced Custom Fields, pour ceux qui en veulent plus

Créer votre block GUtenberg avec ACF Pro

Bon malgré tout ce n’est pas suffisant pour vous, ACF version payante (à partir de 49$ / an) devrait avoir les options nécessaires pour vous convaincre.

Elle inclut la possibilité pour le cas qui nous occupe de créer des blocs Gutenberg. Et à l’intérieur de vos block, vous pourrez notamment utiliser le « repeater field » comme chez Genesis Pro (qui est l’invention historique d’ACF au passage) mais aussi des système d’onglets, des boutons on/off,… qui n’existent pas dans Genesis Custom blocks free ou pro.

Il existe avec ACF également de nombreuses possibilités via la communauté avec des sites tels que Awesome ACF. J’apprécie notamment beaucoup de l’utiliser en combinaison avec ACF Extended (gratuit ou pro).

Et vous, vous utilisez quoi pour vos blocs Gutenberg ?

De votre côté, vous utilisez un autre plugin que ceux proposés, vous le faites vous-même à la main ? Dites-moi tout, je suis toujours intéressé de voir les solutions existantes sur le marché et de savoir comment vous utilisez votre solution !

Published inDéveloppementFrontendPluginsWordpress

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

WPML : l’éditeur n’a pas l’autorisation de traduire

Petit « bug » du jour, un client qui ne peut pas traduire les pages autre que sa langue principale. Il faut en fait ajouter / autoriser son utilisateur dans le « gestionnaire de traduction » (sous-onglet dans l’admin du menu « WPML »). Et tout rentrera dans l’ordre. Étrange car c’est apparu par « magie »… Si quelque a une explication logique, welcome 🙂

Published inDéveloppement

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Remplacer le préfixe de vos tables MySQL dans WordPress

Étape 1 : renommer les tables

RENAME table `wp_commentmeta` TO `cbti__trzqdqsmo_commentmeta`;
RENAME table `wp_comments` TO `NEWPREFIX_comments`;
RENAME table `wp_links` TO `NEWPREFIX_links`;
RENAME table `wp_options` TO `NEWPREFIX_options`;
RENAME table `wp_postmeta` TO `NEWPREFIX_postmeta`;
RENAME table `wp_posts` TO `NEWPREFIX_posts`;
RENAME table `wp_terms` TO `NEWPREFIX_terms`;
RENAME table `wp_termmeta` TO `NEWPREFIX_termmeta`;
RENAME table `wp_term_relationships` TO `NEWPREFIX_term_relationships`;
RENAME table `wp_term_taxonomy` TO `NEWPREFIX_term_taxonomy`;
RENAME table `wp_usermeta` TO `NEWPREFIX_usermeta`;
RENAME table `wp_users` TO `NEWPREFIX_users`;

Étape 2 : modifier à la main les valeurs dans la table « options »

SELECT * FROM NEWPREFIX_options WHERE option_name LIKE ‘%OLDPREFIX_%’

Étape 3: mettre à jour les privilèges des utilisateurs

update NEWPREFIX_usermeta set meta_key = ‘NEWPREFIX_capabilities’ where meta_key = ‘OLDPREFIX_capabilities’;
update NEWPREFIX_usermeta set meta_key = ‘NEWPREFIX_user_level’ where meta_key = ‘OLDPREFIX_user_level’;
update NEWPREFIX_usermeta set meta_key = ‘NEWPREFIX_autosave_draft_ids’ where meta_key = ‘OLDPREFIX_autosave_draft_ids’;
update NEWPREFIX_options set option_name = ‘NEWPREFIX_user_roles’ where option_name = ‘OLDPREFIX_user_roles’;

Sources

Published inBackendDéveloppementGestionWordpress

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Installation propre (clean install) de Mac OS Big Sur

Une opération que je ne fais pas souvent est de faire une « clean install », une installation propre du système qu’il est parfois nécessaire de faire pour repartir de zéro et éviter l’alourdissement de votre système dû à de nombreuses années d’utilisation et/ou un virus,…

Oui je sais qu’à l’heure de Monterey, ça peut paraitre étrange mais je n’installe jamais un OS aussi neuf et qui n’a pas encore fait ses maladies de jeunesse sur mes ordinateurs de production. En ce 14 novembre 2021, ce n’est pas encore le cas avec sa sortie depuis le 25 octobre. J’attendrai sans doute mi-2022 pour la faire.

Merci à François Rémi pour son super tutoriel très précis pour réaliser cette clean install.

J’ai ainsi pu créer une image bootale depuis un disque externe et démarrer dessus.

Mais une fois arrivé à l’écran de formatage du disque, j’ai eu un très gros doute n’étant pas habitué à toute cette philosophie des partitions logiques, de boot… Surtout que depuis Mac OS Catalina, pour des raisons de sécurité, Mac OS crée deux partitions (système SIP) : une pour le système et une pour vos données afin d’éviter de grosses gaffes de l’utilisateur(vous et moi quoi ;-)) afin de garder la partition système sécurisée.

Mais il me manquait une info, je sélectionne quel disque à formater moi ????

J’ai donc eu recours au tutoriel ci-dessous qui m’a permis de comprendre qu’il fallait changer le type de présentation des disques dans la barre latérale gauche afin de sélectionner la racine du disque et non une partition « interne ». Rendez-vous à 2min50sec.

J’ai alors pu formater ma partition principale en comprenant bien ce que je faisais et ainsi terminer le processus jusqu’à sa fin avec un une installation toute belle toute propre.

C’est beau l’Internet et ses nombreuses ressources !

Published inDéveloppement

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Augmenter limite de poids uploads + constantes utiles

Certaines limites de WordPress sont présentes pour limiter les failles et la saturation de votre hébergement à différents niveaux. Voici donc une série de variables qu’il est intéressant de mettre en place dans le fichier htaccess sur votre hébergement. Attention faites gaffe, ça peut faire planter le site donc vérifiez et sauvegardez vos données avant.

php_value max_input_vars 3000
php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value max_execution_time 300
php_value max_input_time 300

Attention que pour un multisite, il faut également modifier la limite imposée pour le réseau et mettre la valeur de votre choix. Il faut que la valeur indiquée dans l’htaccess soit égale ou supérieure à la valeur que vous aller indiquer.

Network admin > network settings > Max upload file size
Admin du réseau > réglages du réseau > Taille maximale des fichiers téléversés

Source 1 / Source 2

Published inDéveloppement

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Déliverabilité emails : SPF, DKIM et IPs bannies

Si l’un de vos clients vous dit, tiens mes e-mails arrivent dans les SPAMs de mes clients, pourquoi ? Il y a plusieurs choses auxquelles je pense en général à vérifier :

  1. S’assurer que le record SPF est correct et en place (autre source)
  2. S’assurer que le record DKIM est correct et en place
  3. Vérifier que l’ip du serveur où sont gérés les DNS ne sont pas bannies (et solution la situation si c’est le cas)
  4. Vérifier les destinataires chez qui ça arrive, est-ce des webmails connus (hotmail, gmail,…) ou des noms de domaines d’entreprise de TPE/PME

Pour préciser le point 3, voici quelques liens pour vérifier que votre IP (serveur VPS, mutualisé,…) n’est pas bannie :

Avec ça, vous devriez déjà dégager de sérieuses pistes pour résoudre le problème 🙂

Published inDéveloppement

Be First to Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.