wpDiscuz pour améliorer les commentaires

wpDiscuz pour améliorer les commentaires

wpDiscuz est un système de gestion des commentaires WordPress qui facilite la vie des internautes et permet d’informer les auteurs d’un commentaire qu’ils ont reçu une réponse.  Cécile, du site Zéro Déchet, l’a installé et en a décrit le fonctionnement et le réglage.

L’objectif en installant wpDiscuz était de combler une lacune de WordPress par défaut : les auteurs d’un commentaire ne sont pas notifiés de l’approbation de leur commentaire ou du dépôt d’une réponse par un autre internaute. Le résultat est excellent, wpDiscuz répond parfaitement à cette demande et va même au delà en rendant les commentaires plus simples à utiliser.

Nous allons voir d’abord ce qu’apporte wpDiscuz puis définir comment l’installer et le régler.

Fonctionnement général

Voici un aperçu global ce qu’on obtient après paramétrages :

Le formulaire de commentaire lorsque wpDiscuz est installé

Grâce à l’extension, un visiteur peut :

  • ne pas laisser de commentaire et s’abonner aux commentaires de l’article ;
  • laisser un commentaire de manière anonyme (sans laisser d’adresse e-mail) ;
  • laisser un commentaire et s’abonner aux réponses reçues à celui-ci. Le commentateur recevra alors une notification par mail des réponses uniquement au commentaire qu’il aura laissé .
  • Selon les paramétrages, il pourra également recevoir une notification d’approbation de son commentaire (éventuellement avec double opt-in de confirmation par mail).

Dès qu’une adresse mail est inscrite dans la fenêtre correspondante un icône apparaît sur la droite du formulaire avec une cloche barrée apparaît. Il s’agit de l’option de notification des réponses au commentaire que peut souscrire explicitement le commentateur en cliquant dessus.

Dès qu’une adresse mail est inscrite dans la fenêtre correspondante un icône apparaît sur la droite du formulaire avec une cloche barrée apparaît. Il s’agit de l’option de notification des réponses au commentaire que peut souscrire explicitement le commentateur en cliquant dessus.

Options de notification pour l’auteur d’un commentaire

Le visiteur peut aussi s’abonner aux commentaires (ce qui comprend aussi les réponses aux commentaires, dont éventuellement le sien s’il en laisse un).
Dans ce cas, le consentement est explicitement demandé pour être notifié de tous les commentaires à l’article (avec option de double opt-in de confirmation par mail) :

wpDiscuz est compatible avec les exigences du GRPD

installation de wpDiscuz

Télécharger et activer l’extension wpDiscuz.

Paramétrage de wpDiscuz

le menu « réglages »

Dans l’onglet a. « formulaire de commentaire », Cécile a volontairement masqué 2 sections qui lui semblaient à faible valeur ajoutée pour le commentateur :

Réglages des composants du formulaire de commentaires

Dans l’onglet « liste de commentaire », Cécile a activé l’affichage uniquement des commentaires « parents » (gain en vitesse de chargement) :

Réglage de l’affichage des commentaires « parents » et leurs réponses

Il est possible de paramétrer les affichages, ce que j’ai fait avec les votes
(pour se rapprocher des usages de Youtube)

on peut même voter pour des commentaires !

Dans l’onglet « abonnement », Pour des questions de prudence liée au RGPD, Cécile a désactivé la désactivation par défaut de confirmations d’abonnement (lignes 2 et 3) :

Désactivation des confirmations d’abonnement par défaut

Idem sur l’abonnement (ci-dessous) / suivi utilisateur (pas d’écran) :

Pas de suivi sans confirmation par l’utilisateur !

Attention surtout ne pas activer l’option de cocher par défaut (obligation
RGPD)

Les cases ne sont pas cochées par défaut !

Cécile a coché une seule possibilité d’abonnement pour plus de simplification pour le visiteur

Simplifier l’expérience du commentateur

Avec les réglages ci-dessus, un utilisateur peut se retrouver dans les situations suivantes :

  • Il s’abonne « A tous les commentaires de cet article » : la personne est notifiée de tous les commentaires publiés sous l’article ;correspondant, réponses comprises à ses commentaires (ce qui est redondant avec l’option de notification possible pour un commentateur) ;
  • Il s’abonne « A toutes les réponses à mes commentaires » : la personne n’a plus besoin de s’abonner pour ses prochains commentaires ? (demanderait confirmation) . Cécile pense que c’est plus simple pour le commentateur mais comme c’est assurément RGPD de demander qu’un commentateur s’abonne à chacun de ses abonnements, elle a choisi la « sécurité » ;
  • A noter : un commentateur qui ne s’abonnerait pas aux réponses de son commentaire mais en revanche à « tous les commentaires » aura de toute façon une notification pour les réponses à son commentaire.
  • En revanche, un commentateur qui ne s’abonne qu’aux réponses à son commentaire ne recevra pas de notification pour les autres commentaires.

Enfin (pour les réglages de l’onglet « abonnement » !) , j’ai souhaité que le commentateur soit notifié de l’approbation de son commentaire.

Le commentateur peut être informé de l’approbation de son commentaire

Dans l’onglet « Connexion sociale et partage », Cécile a tout désactivé (elle ne vois pas l’intérêt de partager un commentaire sur les réseaux sociaux, je suis bien d’accord !).

ATTENTION : ne pas oublier d’enregistrer les modifications (en page d’écran) une fois les réglages effectués !

Le menu « formulaires / formulaire par défaut »

Cocher « oui » pour le consentement obligatoire (RGPD)

consentement obligatoire

Le texte est personnalisable. Cécile a mis « J’autorise l’utilisation de mon adresse e-mail pour me notifier les nouveaux commentaires et les réponses à cet article (je suis informé(e) de la possibilité de me désabonner à tout moment).

demander l’autorisation d’utiliser l’adresse email

Les champs de texte de commentaire sont personnalisables.

Personnaliser les champs de texte du formulaire de commentaire

Pour info, voici les textes de description que j’ai indiqués :

  • pour « ton prénom ou ton pseudo » : ton identité de commentateur s’affiche avec ton commentaire
  • pour « ton adresse mail » : obligatoire si tu veux être notifié(e) des réponses mais elle reste confidentielle (n’oublie pas de cliquer sur la cloche qui apparait sur la droite)
  • ATTENTION j’ai décoché la case par défaut « Ce champ est obligatoire » (RGPD oblige) !
  • pour « ton site ou ton blog (www.adresse.com) » = ton identité de
  • commentateur redirige vers ton site. Attention j’ai activé ce champ

Ne pas oublier de « Mettre à jour » une fois les réglages effectués !

ATTENTION : ne pas oublier d’enregistrer (ici en mettant à jour le formulaire)

Valider les réglages de wpDiscuz !

Copier les réglages d’un site à l’autre

Vous avez un peu mal à la tête arrivé(e) là ? Moi oui !

Et je me dis que je vais mettre un temps fou à régler wpDiscuz pour plusieurs sites. Mais heureusement on n’a pas besoin de refaire tout plusieurs fois puisqu’il est possible d’exporter les réglages d’un site puis de les restaurer dans un autre !

Ca se passe dans le menu Outils de wpDiscuz. Lorsque je télécharge j’obtiens un fichier texte. Voici le fichier avec les réglages décrits ci-dessus :

Je l’ai importé dans ce site. J’ai ensuite purgé le cache. Et tous les réglages se sont faits par miracle !

Supprimer le cache

Si on utilise une extension de cache, il faut impérativement supprimer le cache après avoir mis à jour les réglages de wpDiscuz.

Et maintenant ?

Si vous avez encore des questions, vous trouverez des réponses, en anglais, dans la documentation. Il y a également un espace dédié à wpDiscuz et le RGPD, en anglais également.

Style du widget de recherche WordPress

Style du widget de recherche WordPress

Le widget de recherche par défaut de WordPress est simple à placer dans la barre latérale mais il n’est pas très pratique lorsqu’on utilise un mot assez long pour dire « rechercher ». Les anglophones ont besoin de 6 caractères (search) tandis qu’en français nous avons besoin de 10 caractères.

Le résultat c’est qu’en français, le mot déborde du bouton, comme ci-dessous. C’est pourquoi je préfère mettre une icone à la place du texte, comme le premier champ de recherche ci-dessous.

Une icone à la place du texte du widget de recherche WordPress

Nous allons voir comment créer le widget du haut.

Etape 1 : créer un widget classique

Dans la barre latérale, placer le widget de recherche par défaut de WordPress.

Ouvrir une page contenant la barre latérale, puis avec « inspecter », copier le HTML qui génère ce bouton

<div id="search-2" class="et_pb_widget widget_search">
	<form role="search" method="get" id="searchform" class="searchform" action="https://cohesiondurable.com/" wtx-context="20CD0B4C-899C-4C10-8393-63D7EBB5F397">
		<div>
			<label class="screen-reader-text" for="s">Rechercher&nbsp;:</label>
			<input type="text" value="" name="s" id="s" wtx-context="77690F5F-6BB9-426B-8CB4-67A622CA1AFC">
			<input type="submit" id="searchsubmit" value="Rechercher" wtx-context="0F11C5AB-76D1-4764-95CD-5FCFDCCA1A41">
		</div>
	</form>
</div>

On veut utiliser exactement le même texte sauf qu’on va remplacer la ligne « <input.....> » par « <button>...</button>« . Le code exact de remplacement sera :

<button type="submit" id="searchsubmit" wtx-context="0F11C5AB-76D1-4764-95CD-5FCFDCCA1A41">
	<span class="dashicons dashicons-search"></span>
</button>

Je n’ai aucune idée du sens de wtx-context, je l’ai copié bêtement… Par contre, en indiquant class= »dashicons dashicons-search », je dis que le contenu doit être une icone de type dashicons, les icones par défaut de WordPress.

Etape 2 : créer un widget Html personnalisé

Dans la barre latérale, ajouter un widget « Html personnalisé ». Y placer le code suivant (c’est le code du widget d’origine avec simplement l’input modifié par le button

<div id="search-2" class="et_pb_widget widget_search">
	<form role="search" method="get" id="searchform" class="searchform" action="https://cohesiondurable.com/" wtx-context="20CD0B4C-899C-4C10-8393-63D7EBB5F397">
		<div>
			<label class="screen-reader-text" for="s">Rechercher&nbsp;:</label>
			<input type="text" value="" name="s" id="s" wtx-context="77690F5F-6BB9-426B-8CB4-67A622CA1AFC" placeholder="Rechercher">
			<button type="submit" id="searchsubmit" wtx-context="0F11C5AB-76D1-4764-95CD-5FCFDCCA1A41">
				<span class="dashicons dashicons-search"></span>
			</button>
		</div>
	</form>
</div>

On a maintenant un widget de recherche qui fonctionne, mais qui n’est pas très joli.

On va donc devoir ajouter un peu de CSS :

/*******************************
* recherche de barre latérale
*******************************/
span.dashicons.dashicons-search {
	height: 100%;
	padding-top: .35em;
	padding-bottom: .35em;
}

Je le met dans le CSS additionnel de la personnalisation de mon thème (Divi). Et voilà, j’obtiens la première ligne de la copie d’écran ci-dessous

Et maintenant, il ne me reste plus qu’à supprimer le widget de recherche par défaut de WordPress.

WinMerge pour voir les changements entre deux fichiers

WinMerge pour voir les changements entre deux fichiers

WinMerge est un logiciel, en anglais, open source, pour comparer des répertoires ou des fichiers sous windows.

Actuellement si j’ai deux fichiers différents, je dois les lire attentivement pour trouver les différences. Avec WinMerge, ça se fera beaucoup plus simplement.

Installation de WinMerge 2.16.4

Installation normale sans aucune modification

Ensuite, il ne reste plus qu’à ouvrir WinMerge, aller dans le menu Edition>>Préférences, onglet « intégration à l’explorateur » et cocher la case « activer le menu avancé », comme ici

Et maintenant si j’ouvre l’explorateur de fichier, je sélectionne deux fichiers et je clique à droite, j’ai l’option « comparer » !

Et maintenant si j’ouvre l’explorateur de fichier, je sélectionne deux fichiers et je clique à droite, j’ai l’option « comparer » !

Et voilà !

créer une icone linked in dans divi

créer une icone linked in dans divi

Le thème Divi permet d’insérer des liens vers les réseaux sociaux dans le pied de page et une barre tout en haut. Par défaut les réseaux paramétrables sont facebook, Twitter, Google + et RSS. Pour le site d’un consultant je souhaitais ajouter un lien, avec icone, vers une page LinkedIn. Et bien c’est possible !

Pour réaliser cette action, il faudra que vous ayez un accès FTP aux fichiers de votre site WordPress et avoir un éditeur pour modifier légèrement le code PHP d’un fichier du thème.

J’ai suivi les instructions d’un article plus complet, en anglais, rédigé par les créateurs du thème Divi : How to add more social media icons to divi

On peut utiliser le module réseaux sociaux » du divi builder pour les contenus construits à l’intérieur d’une page ou d’un article. Mais pour générer automatiquement le lien en haut du site ou dans le pied de page, il faut modifier un fichier du thème Divi selon le processus ci-dessous :

  1. Faire une copie du fichier social_icons.php (répertoire du thème : /wp-content/themes/Divi/includes).
  2. Editer le fichier d’origine en y ajoutant des lignes à la fin, comme indiqué ci-dessous.
<li class="et-social-icon et-social-linkedin">
<a href="https://www.linkedin.com/in/anne-laure-delpech/" class="icon">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>

Ces lignes sont inclues tout en bas du fichier, juste avant le </ul> final.

Code PHP pour créer une nouvelle icone de réseaux sociaux dans Divi

Sauvegarder le fichier, ça y est, l’icone LinkedIn s’affiche en haut du site et tout en bas !

Ajout d'un lien LinkedIn dans le haut de page d'un site utilisant le thème Divi

Et voilà ! Si vous voulez créer l’icone d’autres réseaux sociaux, je vous propose de vous référer à l’article en anglais qui m’a inspirée.

Des styles par défaut pour les modules  avec Divi

Des styles par défaut pour les modules avec Divi

Le thème Divi est très souvent mis à jour. Un article, en anglais, de Elegant Theme, l’agence qui conçoit et commercialise le thème vient d’annoncer une avancée importante. L’article « Divi’s Website-Wide Design Editor » ( que l’on pourrait traduire par « Un éditeur Divi de design pour l’ensemble d’un site ») annonce bien la couleur :

Gérez les styles par défaut de votre site plutôt qu’adapter les modules à chaque création de nouvelles pages !

Elegant Theme – « Divi’s Website-Wide Design Editor »

L’idée générale c’est que maintenant, on peut simplement modifier les caractéristiques par défaut de tous les modules identiques d’un même site. Il suffit de cliquer sur le petit onglet  » Edit Global Texte Defaults  » sur le côté en haut à droite de la fenêtre de réglage du module.

Style par défaut pour les modules, avec Divi

Si vous comprenez un peu l’anglais, je vous invite à aller lire l’article complet, qui contient une vidéo qui se comprend plutôt facilement.