Sélectionner une page
Utiliser sa boîte gmail avec des mails d’un hébergement OVH

Utiliser sa boîte gmail avec des mails d’un hébergement OVH

Dans ce premier article de la série , nous allons voir comment utiliser une boîte gmail pour lire et envoyer des mails créés dans un hébergement OVH.

Cet article date de 2016 et a été mis à jour en avril 2020 puis en décembre 2024.

Le contexte

Nous avons un compte gmail classique (pas d’utilisation de gmail pour entreprises), par exemple à l’adresse exemple@gmail.com . Dans d’autres articles de cette série, nous verrons des cas d’utilisation de gmail pour entreprises.

Sur OVH, dans l’espace client, nous avons créé une adresse mail se terminant par notre nom de domaine, par exemple exe@parcours-performance.com , avec le mot de passe mot1de1PASSE.

Maintenant, nous voulons pouvoir utiliser notre compte gmail exemple@gmail.com pour lire les mails reçus par exe@parcours-performance.com et en envoyer à ce nom. On peut ainsi gérer autant de boîtes mail que l’on veut à partir d’un seul compte gmail.
Got Mail????

Les conseils d’OVH pour régler gmail

OVH a réalisé un guide « Configuration d’un e-mail sur l’interface de Gmail » mais ce guide indique qu’il faut utiliser la fonction « “Ajouter un compte de messagerie POP3 que vous possédez”. Le gros inconvénient de cette solution est que gmail va alors chercher de temps les mails. L’intervalle de temps est 20 minutes. On est donc toujours en décalage avec la messagerie. Je préfère nettement la méthode suivante, qui synchronise les comptes en temps réel.

Réglage de la messagerie sur OVH

Il faut dire au gestionnaire de messagerie qu’on souhaite qu’il transfère les mails à une autre adresse. On va donc procéder à une redirection. Dans le compte ovh, on crée les adresses mails puis on appuie sur le bouton « gestion des redirections » à droite du tableau des adresses mails.

on redirige ensuite, par exemple exe@parcours-performance.com vers exemple@gmail.com . On choisit si on veut qu’OVH garde aussi une copie des mails (elle ne sera pas synchronisée) ou non. Moi je préfère qu’OVH ne conserve pas de copie.

A partir de maintenant, tout mail adressé à exe@parcours-performance.com me parviendra dans ma boîte gmail. Si je veux pouvoir répondre en tant que exe@parcours-performance.com à partir de ma boîte gmail, il faut que je paramètre gmail comme suit.

Paramétrage de gmail

Dans gmail, cliquer sur « paramètres » (la roue dentée en haut à droite). Aller dans l’onglet  » comptes » puis en face de « Envoyer des e-mails en tant que », cliquer sur le lien « ajouter une autre adresse email ». Une fenêtre du navigateur s’ouvre :

Ajouter une adresse mail dans gmail - 1

Dans Nom, on met ce que je veux. C’est ce qui apparaîtra comme nom d’expéditeur dans les mails envoyés. L’usage est d’écrire « Prénom NOM » dans cette case. Ici j’ai mis « monNom ».

L’adresse mail est exe@parcours-performance.com.

MAJ du 22/10/2016 :

Il faut cocher la case « traiter comme un alias » si l’on souhaite pouvoir envoyer un mail à l’adresse exe@parcours-performance.com à partir d’elle même ou d’une autre gérée par notre boîte gmail.

En effet, comme indiqué dans ce document Google, lorsque la case est cochée, « Les messages que vous envoyez à une adresse Envoyer des e-mails en tant que apparaissent comme non lus dans votre boîte de réception. ». C’est utile pour s’envoyer des mémos à soi même et aussi pour vérifier que les réglages faits fonctionnent correctement. 

On clique sur le bouton « étape suivante » et on accède  une nouvelle fenêtre :

Serveur smtp adresse OVH dans Gmail

ici, il faut mettre comme serveur SMTP celui qui est indiqué par OVH  : ssl0.ovh.net.

En 2024 c‘est la connexion TLS qui est recommandée, avec port 597.

Le mot de passe est celui que l’on a défini lorsqu’on a créé l’adresse mail dans OVH. Pour moi ici, « mot1de1PASSE ».

Le nom d’utilisateur est l’ensemble de l’adresse mail (ici exe@parcours-performance.com).

On clique sur « ajouter un compte » et une autre fenêtre, la dernière, s’ouvre :

gmail valider l'adresse mail ajoutée

Pour récupérer le code, on ouvre le webmail d’OVH (https://mail.ovh.net/roundcube/). On indique l’adresse mail et le mot de passe (dans cet exemple exe@parcours-performance.com et mot1de1PASSE.

Dans la boîte de réception du webmail, on voit un mail de exemple@gmail.com , avec un titre contenant « …Confirmation – Envoyer des e-mails en tant que… ». A l’intérieur, il y a un code de confirmation, par exemple 893052657. On le copie puis on le colle dans la fenêtre gmail ci-dessus. On clique sur le bouton « Valider » et ça y est !

Dans notre boîte Gmail exemple@gmail.com, on peut envoyer des mails en tant que exe@parcours-performance.com.

On notera que certains clients web comme outlook montreront en clair l’adresse mail du compte gmail d’expédition, en plus de l’adresse mail de l’expéditeur.

Pour l’utilisateur, les mails sont maintenant gérés par gmail, avec son excellent gestionnaire de spam. C’est un énorme avantage.

Et maintenant ?

Si on utilise gmail dans le cadre de gmail for Work, on pourra aller voir les réglages dans un autre article de cette série .

Lien de téléchargement vers fichier google drive

Lien de téléchargement vers fichier google drive

Lorsqu’on met des fichiers sur Google Drive, on peut les partager. Mais tous les liens de partage emmènent vers l’interface Google Drive.

C’est très bien si on veut collaborer en ligne : commentaires ou modifications en ligne.

Ça n’est pas pratique du tout si on veut juste permettre le téléchargement du fichier. Mais heureusement il y a une solution, que je vous présente rapidement ici.

Gdoc advanced sharing

J’ai trouvé la solution ici, dans un forum d’aide Google. Le lien doit être sous la forme https://drive.google.com/uc?export=download&id=YourFile'sID

Ainsi supposons que j’ai un fichier google Drive dont le lien de partage (modifié) est https://drive.google.com/file/d/1IpBHoiuDLOtDgBkrcJ5uWTIa-4waoLd7/view?usp=sharing. Le lien de téléchargement sera https://drive.google.com/uc?export=download&id=1IpBHoiuDLOtDgBkrcJ5uutRz-4waoLd7.

Il existe même une solution en ligne, en anglais, pour générer le nouveau lien : formulaire gdoc2direct.

Attention sur le formulaire ci-dessus, il y a un message indiquant que le système ne fonctionne pas avec un fichier qui n’a pas été chargé sur Google Drive. Ainsi un fichier créé sur Drive doît être téléchargé sur mon ordinateur puis chargé sur google Drive…

Des modèles de mail dans gmail

Des modèles de mail dans gmail

J’ai découvert hier que des personnes ont pu paramétrer leur messagerie GMAIL pour définir des textes standards et les insérer facilement dans des mails types. Je trouve que c’est génial, alors je fais un article très rapide sur ce sujet, juste pour en conserver la trace et nous mettre sur le chemin si le sujet nous intéresse.

Créer un modèle de courriel

Comment créer un modèle de courriel : Gmail nouvelle version nous explique de manière synthétique et juste comment faire.

Le centre de formation GSuite de Google donne des informations complémentaires sur la création de modèles d’e-mail et propose aussi de créer des filtres avec ces réponses automatiques.

Exemple

Je viens d’activer les modèles dans les paramètres avancés de Gmail.

Des modèles pour conserver des textes types dans Gmail

Et je lui donne le nom test AL

Et maintenant je peux utiliser ce texte manuellement pour insérer le texte du modèle à la main. Je peux aussi utiliser ce modèle dans un filtre (voir l’aide GMAIL, Créer des règles pour filtrer vos emails. Par exemple ici je crée un filtre qui va utiliser le modèle test AL à chaque fois qu’un mail contient les mots test !

Filtrer les messages Gmail et utiliser un modèle de mail en retour.

Et maintenant ?

Qu’allez-vous faire de cette idée ? Est-ce que vous voyez un intérêt à utiliser des modèles dans votre messagerie GMail ?

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 :

&lt;button type="submit" id="searchsubmit" wtx-context="0F11C5AB-76D1-4764-95CD-5FCFDCCA1A41">
	&lt;span class="dashicons dashicons-search">&lt;/span>
&lt;/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.

Un formulaire de contact qui a de la gueule

Un formulaire de contact qui a de la gueule

Contact form 7 est une excellente extension pour les formulaires de contact. Et Divi est un excellent thème, auquel j’ai accès gratuitement via mon hébergerment web Infomaniak. Mais jusqu’à présent, je ne pouvais pas avoir un formulaire de contact qui sont fonctionnel ET beau.

Cet article a été mis à jour le 13/09/2019 suite à un gros dysfonctionnement de l’extension Contact Form Styler. On a maintenant deux solutions, l’une avec l’extension Contact Form Styler (qui a j’espère été réparée), et l’autre qui ne requière pas d’extension mais nécessite un peu de CSS.

Créer un formulaire de contact avec Contact Form 7

installer et activer contact form 7 de Takayuki Miyoshi puis créer un formulaire contact form 7 classique et noter le shortcode correspondant : [

Erreur : Formulaire de contact non trouvé !

].

En l’absence de feuille de style (css) dédiée, c’est assez moche… :

Option 1 sans ajout d’extension

L’amélioration passe par du CSS ajouté et par une toute petite modification du formulaire de contact

modification du formulaire de contact

Le formulaire de contact est exactement comme d’habitude sauf qu’une classe est ajoutée pour le bouton de soumission de la demande :

&lt;p>[text* your-name placeholder "Vos prénom NOM (requis)"] &lt;/p>

&lt;p>[email* your-email placeholder "Votre adresse mail (requis)"] &lt;/p>
&lt;p>[tel tel-405 placeholder "Votre n° de téléphone (recommandé)"]&lt;/p>
&lt;p>[textarea your-message 50x placeholder "Votre message"] &lt;/p>
&lt;p>!! ATTENTION : si l'autorisation ci-dessous n'est pas cochée, votre message ne pourra pas être envoyé !!
[acceptance acceptance-443 default: on] J’autorise l’utilisation de mes données personnelles pour m'envoyer une réponse par mail. [/acceptance]&lt;/p>

[submit class:submit class:et_pb_button "Envoyer"]

&lt;p>Pour plus d'informations, vous pouvez consulter la &lt;a href="https://cohesiondurable.com/page-de-politique-de-confidentialite/" target="_blank">politique de confidentialité de ce site&lt;/a>&lt;/p>

"class:submit class:et_pb_button" va indiquer que le bouton sera des deux classes submit et et_pb_button. Ainsi il va adopter le style défini pour les boutons dans la personnalisation du thème Divi.

Ajout de CSS

Dans la personnalisation du css (options du thème Divi, tout en bas de l’onglet général), on ajoute le code qui va permettre d’avoir un formulaire un peu plus attirant :

/*******************************
* Formulaire Contact Form 7
*******************************/
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
	width: 100%;
	padding: 16px;
	border: 0px solid #bec2d8;
	border-bottom-width: 3px ;
	border-radius: 4px ;
	color: #999;
	background-color: rgba(110,130,208,.04);
}

Notre formulaire est maintenant tout à fait présentable :

Un formulaire Contact Form 7 avec un peu de CSS et une classe pour le bouton Envoyer

Option 2 avec une extension (solution non recommandée)

J’ai trouvé cette solution, grâce à cet article, en anglais :  » How to Make Contact Form 7 Look Like Divi « . Elle m’a bien plu mais j’ai rencontré des problèmes lors d’une mise à jour de l’extension Contact Form Styler. Je laisse les instructions pour l’utiliser mais je ne recommande pas cette solution.

Dans la page, utiliser l’éditeur visuel

  1. installer et activer Contact Form 7 Styler for Divi de DiviPeople

Avec le constructeur Divi ou le Divi Builder, ajouter un nouveau module, et choisir « contact form 7 styler »

Choisir le formulaire à utiliser dans select form puis définir le style souhaité avec l’onglet style. je n’ai pas réglé grand-chose, simplement modifié les couleurs du « submit button », et la marge interne dans la partie dimensionnement. Et voici ce que cela donne :

c’est tout de même moins joli, non…

Et maintenant ?

Nous pouvons maintenant concilier la fonctionnalité de contact form 7 et l’esthétique de Divi. C’est chouette, non ?

Partager du code dans un site WordPress 5 ou plus

Partager du code dans un site WordPress 5 ou plus

Dans cet article, je note rapidement ce que j’ai choisi comme nouveau moyen de faire du « syntax highlighting » (mise en évidence de la syntaxe) du code que je partage dans ce site ou d’autres.

L’extension utilisée jusqu’à présent

J’utilisais Crayon Syntax Highlighter, mais malheureusement l’extension ne fonctionnait plus depuis le passage de WordPress en version 5.0, avec l’éditeur Gutenberg et les blocs.

Sur le site WordPress.org de l’extension, on voit que l’extension, malgré 50 000 installations actives, n’est plus mise à jour depuis 3 ans. Il faut donc que je cesse de l’utiliser.

Comment remplacer Crayon Syntax Highlighter ?

Ce qui a déclenché cette recherche, et cet article, c’est la lecture d’un très bon article du blog d’Elegant Themes, le créateur du thème Divi. L’article s’intitule « How to Share and Style Code Snippets in Divi (3 Methods)« . Il contient des informations concrètes sur :

  • créer des boîtes Divi pour code, avec ajout manuel de code ou utilisation d’une extension
  • encodage de code HTML pour l’afficher dans une page wordpress
  • utilisation de Gist
  • utilisation d’extensions dédiées à la mise en évidence de code

Pour ma part, j’ai décidé de remplacer Crayon Syntax Highlighter par l’extension proposée dans l’article d’Elegant Themes. Et pour écrire cet article j’ai utilisé l’encodage de code HTML qui est aussi présenté dans l’article des créateurs du thème Divi.

encodage de code HTML

WordPress transforme le code HTML saisi directement dans un bloc
paragraphe classique, et le sépare même en autant de blocs. Ci-dessous j’ai juste mis les trois premières lignes :

<!– Code collé dans un bloc paragraphe –>

<!DOCTYPE html>

<html>

Si je place le code dans un bloc « code » classique, toutes les lignes sont dans un même bloc.

<!-- Code collé dans un bloc paragraphe -->
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Et maintenant j’encode l’HTML avec Code Beautify, puis je le place dans un bloc « paragraphe » classique, le code se présente correctement :

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Mais tout ceci est compliqué. Et on n’a pas de mise en évidence de la syntaxe, et c’est difficile à analyser puis copier-coller pour l’internaute.

Utilisation de l’extension Code Prettify

Utilisation de l’extension Code Prettify. C’est une très bonne extension, très simple. Par exemple, elle fait du « syntax highlighting » automatiquement de ce code Processing (java) :

Code Prettify comme syntax highlighter

L’inconvénient est qu’il faut que j’aille modifier le style des blocs de code pour par exemple faire des retours à la ligne (word-wrap je crois).

L’extension SyntaxHighlighter Evolved

SyntaxHighlighter Evolved est également citée dans l’article de Elegant Themes, et c’est finalement le choix que j’ai fait. Je n’ai fait aucun réglage, j’ai simplement installé l’extension.

On peut utiliser des shortcodes mais je préfère choisir le bon bloc d’édition.

Maintenant dans l’éditeur, je peux trouver un bloc de mise en page, intitulé « SyntaxHighlighter Code » :

Bloc SyntaxHighlighter Code de l’extension SyntaxHighlighter Evolved

Si je place le code HTML vu précédemment dans deux blocs successifs, le premier sans spécifier que le langage est HTML, le deuxième en le spécifiant, voici ce que j’obtiens :

SyntaxHighlighter Evolved comme syntax highlighter
SyntaxHighlighter Evolved comme syntax highlighter

L’extension ne reconnait pas automatiquement le langage mais la mise en page est vraiment réussie.

Et l’ancien code ???

Est-ce qu’il faut que j’aille corriger tout le code partagé ces dernières années ?

Dans ce site, de nombreux articles contiennent du code partagé. Il faut continuer à le partager mais pas question d’aller corriger chaque article ! Par exemple, l’article https://knowledge.parcours-performance.com/processing-video-ou-gif-anime/ contient du code défini avec l’ancienne extension Crayon Syntax Highlighter. Le code se présentait ainsi :

Crayon Syntax Highlighter sur du code java
Crayon Syntax Highlighter sur du code java

Avec la nouvelle extension, il est toujours lisible, et copiable, mais plus rien ne met en évidence la syntaxe. Il faudra donc que je fasse des corrections si je met à jour des articles.

Dès maintenant je supprime Crayon Syntax Highlighter.