Le contexte

Sur mon site actuel (celui sur lequel vous vous trouvez), j’ai installé Elementor Pro et WPML. Je parle trois langues, l’anglais, le néerlandais et le français. J’ai créé un modèle dans Elementor Pro pour la page Blog post mais mes autres langues n’utilisaient pas le modèle pour une raison quelconque! ! Ils utilisaient le modèle par défaut de WordPress. Seule la langue principale (l’anglais) utilisait le modèle. Que se passe-t-il ? 

Les articles en anglais utilisaient le modèle Elementor (sous « conditions » dans le constructeur de modèles, j’ai correctement assigné les modèles à l’affichage pour tous les messages). Cependant, les versions traduites de ces pages n’utilisaient pas le modèle, J’ai donc supposé (à juste titre) qu’il s’agissait d’un problème avec WPML (oui, il est connu pour ses problèmes). 

Après des heures de recherche et d’essais, j’ai trouvé la solution. Voici donc la solution qui, je l’espère, vous permettra de gagner du temps et de vous épargner des maux de tête :

1. Aller sur WPML -> Gestion de la traduction.
2. Sous « 1. Sélectionner les éléments à traduire », utilisez le filtre, et filtrez pour « Modèles ».
3. Trouvez le modèle que vous avez créé dans Elementor dans la liste.
4. Cliquez sur « Voir » sous le modèle.
5. Cliquez sur « Modifier le modèle ».
6.  Changez la langue à partir du menu déroulant du sélecteur de langue WPML
7. Vous serez peut-être confronté à un avertissement de WPML, mais choisissez « Modifier quand même ».
8. Vous remarquerez que le modèle est en cours de rédaction. Cliquez donc sur Publier. 
9. Répétez l’opération pour les autres langues si nécessaire. 

Et voilà, c’est fait ! Problème résolu ! 

Bon sang de bonsoir WPML, je vous déteste tellement !

The post Le modèle Elementor Pro ne fonctionne pas avec WMPL appeared first on Aidan McNally.

Comment faire avec les conteneurs en 2024

Je vous montrerai d’abord comment le faire avec des conteneurs (ce qui est maintenant le cas par défaut dans 2024), mais je vous montrerai aussi comment y parvenir en utilisant des sections, ce que de nombreux sites construits avant la dernière mise à jour auront.

L’étape 1 consiste à créer un nouveau conteneur et à lui ajouter une image de fond. Aller à Style -> Superposition d’arrière-plan et ajoutez votre image. Ne vous contentez pas d’ajouter une image d’arrière-plan au conteneur, assurez-vous que vous ajoutez l’image à l’aide de la fonction « Background overlay », sinon cela ne fonctionnera pas.

Cliquez ensuite sur « Avancé » et ajoutez une classe à ce conteneur. Aller à Avancé -> Classes CSS et insérer un nom de classe. Il peut s’agir de n’importe quoi, mais pour les besoins de ce tutoriel, je l’appellerai« my-fade-container » (voir l’image ci-dessous).

Lorsque vous utilisez le « background overlay » dans Elementor, il ajoute l’image en utilisant la pseudo-classe CSS ‘::before‘. C’est ce que nous allons manipuler lorsque l’utilisateur survole le conteneur.

				
					.my-fade-container::before{
    opacity:0;
    transition:opacity 0.7s;  
}
				
			

Dans le code ci-dessus, nous ciblons l’élément ::before qu’Elementor ajoute lorsqu’un arrière-plan est ajouté à un conteneur. L’opacité est de 0, de sorte qu’il est initialement caché. Nous ajoutons une durée de transition de 0,7 seconde, afin que le fondu ne soit pas instantané (vous pouvez modifier cette durée à votre guise).

				
					.my-fade-container:hover::before{
    opacity:0.5;
}
				
			

Le prochain élément de code CSS que nous ajoutons est illustré ci-dessus. Cela permet d’afficher l’arrière-plan lorsque l’utilisateur survole notre conteneur en modifiant l’opacité à un niveau supérieur à 0 (dans ce cas, j’ai choisi 0,5 – donc à moitié transparent).

Vous remarquerez peut-être qu’il y a encore un peu d’espace entre le contenu interne de votre conteneur et l’image d’arrière-plan. C’est parce qu’Elementor ajoute un autre élément avec une classe « e-conn-inner ». Dans le prochain morceau de code, nous ciblerons cet élément, en faisant en sorte que l’espacement et la marge soient de 0.

				
					.my-fade-container .e-con-inner{
    padding:0;
    margin:0;
}
				
			

Et c’est à peu près tout ! Pour faire disparaître une image au lieu de la faire apparaître en fondu, il suffit de commencer avec une opacité supérieure à 0, et de la ramener à 0 au survol de l’image. 

Dans l’exemple ci-dessus, j’ai également ajouté une bordure et un peu de rembourrage au conteneur, ainsi que la règle « cursor:pointer » pour le survol du conteneur, mais pour l’essentiel, vous n’avez besoin que des règles CSS ci-dessus pour que l’effet fonctionne. 

Comment cela se passe-t-il avec les sections ?

Si vous avez créé votre site avant la dernière mise à jour d’Elementor, il se peut que votre site utilise des sections au lieu de conteneurs, le code ci-dessus ne fonctionnera donc pas. Mais n’ayez crainte, le code pour les sections est tout aussi simple.

L’étape 1 consiste à créer une nouvelle section et à lui ajouter une image de fond. Aller à Style -> Superposition d’arrière-plan et ajoutez votre image. Ne vous contentez pas d’ajouter une image d’arrière-plan à la section, assurez-vous que vous ajoutez l’image à l’aide de l’option « Incrustation d’arrière-plan », sinon cela ne fonctionnera pas.

Cliquez ensuite sur « Avancé » et ajoutez une classe à cette section. Aller à Avancé -> Classes CSS et insérer un nom de classe. Il peut s’agir de n’importe quoi, mais pour les besoins de ce tutoriel, je l’appellerai« ma section de fondu » (voir l’image ci-dessous).

Lorsque vous utilisez le« background overlay » pour les sections Elementor, il ajoute une nouvelle div avec la classe« elementor-background-overlay » dans la section, puis tous les conteneurs que vous avez dans la section sont ajoutés comme des divs séparées au même niveau que la div background-overlay (c’est-à-dire pas des enfants, mais des frères et sœurs). C’est ce que nous allons manipuler lorsque l’utilisateur survole le conteneur.

				
					section.my-fade-section .elementor-background-overlay{
    opacity:0 !important;
    transition:opacity 0.7s;  
}
				
			

Dans le code ci-dessus, nous ciblons l’élément .my-fade-section qu’Elementor ajoute lorsqu’un arrière-plan est ajouté à une section. L’opacité est de 0, de sorte qu’il est initialement caché. Nous ajoutons une durée de transition de 0,7 seconde, afin que le fondu ne soit pas instantané (vous pouvez modifier cette durée à votre guise).

				
					section.my-fade-section:hover .elementor-background-overlay{  
	opacity:0.5 !important;
}
				
			

Le prochain élément de code CSS que nous ajoutons est illustré ci-dessus. Cela permettra d’afficher l’arrière-plan lorsque l’utilisateur survolera notre section en modifiant l’opacité de la div de recouvrement à un niveau supérieur à 0 (le paramètre d’opacité le plus élevé est 1). Dans ce cas, je le modifie pour qu’il soit de 0,5, c’est-à-dire « à moitié » transparent. 

Et c’est à peu près tout ! Pour faire disparaître une image au lieu de la faire apparaître en fondu, il suffit de commencer avec une opacité supérieure à 0, et de la ramener à 0 au survol de l’image. 

Dans l’exemple ci-dessus, j’ai ajouté une bordure pour le rendre plus visible, un peu de rembourrage au conteneur ainsi que la règle « cursor:pointer » pour le survol du conteneur, mais pour l’essentiel, vous n’avez besoin que des règles CSS ci-dessus pour que l’effet fonctionne. 

Dites-moi si cela a fonctionné pour vous dans les commentaires ci-dessous. 

The post Tutoriel : Fondu de l’image d’arrière-plan d’Elementor avec 3 lignes de CSS appeared first on Aidan McNally.

L’ajout de reCAPTCHA à Contact Form 7 se fait en deux étapes :

1. Enregistrez votre site web pour reCAPTCHA (Gratuit) et obtenez vos clés
2. Ajoutez vos clés reCAPTCHA à Contact Form 7

1) Enregistrez votre site web pour reCAPTCHA et obtenez vos clés

Connectez-vous à votre compte Google (par exemple en vous connectant à Gmail), puis accédez à la console d’administration de console d’administration ReCAPTCHA. Vous verrez l’écran ci-dessous. Vous pouvez également vous rendre sur https://www.google.com/recaptcha et cliquer sur le lien« V3 Admin Console« .

Capture d’écran de la console d’administration de reCAPTCHA

Par défaut, vous créerez une« clé reCAPTCHA d’entreprise« , qui est gratuite jusqu’à 1 million d’évaluations par mois, mais qui vous coûtera ensuite de l’argent. Pour les petits sites, cela convient généralement car vous ne dépasserez jamais cette limite, mais je préfère toujours utiliser la version gratuite de reCAPTCHA au cas où les conditions de la version Entreprise changeraient. Si vous souhaitez également utiliser la version gratuite, il vous suffit de cliquer sur le lien« Passer à la création d’une clé classique« , comme indiqué dans la capture d’écran ci-dessous.

Capture d’écran du lien permettant de créer une clé reCAPTCHA classique

Vous devez maintenant faire trois choses pour enregistrer votre reCAPTCHA :

i) Ajouter une étiquette

L’étiquette est simplement un moyen de reconnaître votre reCAPTCHA dans votre console reCAPTCHA la prochaine fois que vous vous connecterez. Il peut s’agir de n’importe quoi, mais la plupart des gens utilisent simplement le domaine pour lequel le code reCAPTCHA est utilisé – par exemple, exemple.com.

ii) Choisissez votre type de reCAPTCHA

Il existe actuellement deux types de reCAPTCHA. La version 2 (V2) est l’ancienne version de reCAPTCHA et exige de l’utilisateur qu’il coche la case« Je ne suis pas un robot » ou qu’il passe un test visible, comme celui illustré ci-dessous.

ReCAPTCHA Version 3 (V3) est la version la plus récente, dans laquelle l’évaluation de l’humanité du visiteur s’effectue automatiquement en arrière-plan, ce qui signifie que l’utilisateur n’a pas à cliquer sur une case à cocher ou à passer un test.

Dans cet exemple, j’utiliserai la V3 car c’est la version la plus utilisée et la version compatible avec les dernières versions du plugin Contact Form 7.

Note : Vous ne pouvez utiliser ReCAPTCHA V3 qu’avec Contact Form 7 version 5.1 et supérieure. Vous pouvez utiliser V2 avec les anciennes versions de Contact Form 7. Par conséquent, vous ne pouvez pas utiliser les clés V2 sur Contact Form 7 5.1 ou supérieur, et V3 sur Contact Form 7 5.0 ou inférieur.

Capture d’écran d’un test reCAPTCHA V2

iii) Ajouter le domaine de votre site web

Sous« Domaines« , ajoutez simplement le domaine pour lequel le reCAPTCHA est utilisé – par exemple, exemple.com. Une fois que vous aurez cliqué sur « soumettre », vous serez dirigé vers une nouvelle page contenant votre« clé de site » et votre« clé secrète » reCAPTCHA, comme indiqué ci-dessous.

Note : Vous pouvez choisir d’utiliser le même reCAPTCHA pour plusieurs domaines, et c’est pourquoi vous avez la possibilité d’ajouter plus d’un domaine. Cependant, la plupart des gens n’ajouteront qu’un seul domaine ici.

Capture d’écran de reCAPTCHA Keys

2) Ajoutez vos clés reCAPTCHA à Contact Form 7

Pour ajouter le reCAPTCHA à tous vos formulaires Contact Form 7, allez dans votre backend WordPress (page d’administration) et cliquez sur Contact > Integration comme indiqué dans la capture d’écran ci-dessous.

Descendez jusqu’à la case« reCAPTCHA » et cliquez sur Configurer l’intégration.

Capture d’écran de la page d’intégration de Contact form 7

L’étape suivante consiste à prendre la« clé du site » et la« clé secrète » du reCAPTCHA que vous venez de créer, à les ajouter aux champs de saisie et à cliquer sur « Enregistrer », comme le montre la capture d’écran ci-dessous.

Note : Ne pas utiliser les touches ci-dessous. Ces informations sont données à titre d’exemple uniquement. Utilisez vos propres clés reCAPTCHA qui ont été générées dans les étapes précédentes.

Capture d’écran de la page d’intégration de Contact form 7 reCAPTCHA

Une fois que vous aurez enregistré vos clés, tous les formulaires Contact Form 7 de votre site utiliseront automatiquement reCAPTCHA V3. Désormais, vos formulaires de contact utilisent le score de reCAPTCHA pour vérifier si la soumission du formulaire provient d’un humain ou d’un robot spammeur.

Si vous utilisiez reCAPTCHA V2, vous devriez ajouter [recaptcha] form-tags à chaque formulaire sur lequel vous voulez qu’un reCAPTCHA V2 apparaisse. C’est ainsi que la case à cocher« Je ne suis pas un robot » apparaît.

Si vous passez de la V2 à la V3, vous n’avez pas besoin de revenir en arrière et de supprimer les balises [recaptcha] de vos formulaires. Si elles se trouvent dans un modèle de formulaire, Contact Form 7 5.1 ou plus les ignore et les remplace par une chaîne vide.

Une fois que vous avez cliqué sur enregistrer, vous verrez une boîte comme celle ci-dessous, vous indiquant que reCAPTCHA est maintenant actif sur tous vos formulaires Contact Form 7.

Capture d’écran de l’intégration réussie de Contact form 7 reCAPTCHA

Qu’en pensez-vous ? Ce tutoriel a-t-il été facile à suivre ? Cela vous a-t-il aidé ? Faites-le moi savoir dans les commentaires ci-dessous !

The post Tutoriel : Ajouter ReCAPTCHA à Contact form 7 dans WordPress (2024) appeared first on Aidan McNally.

Mon client fabrique sa propre marque de bière, et les bières sont stockées dans différents bars de la ville de New York. Il voulait une carte simple indiquant les différents endroits où l’on peut acheter la bière. Heureusement, Google Maps vous permet de créer des cartes personnalisées, avec des épingles de localisation, dans le but que vous souhaitez.

Pour les besoins de ce guide, j’ai changé le nom de la bière et créé ma propre bière fictive appelée GoldenBeer. C’est une bière délicieuse, et il est tout à fait impossible d’avoir la gueule de bois avec.

Ce guide est divisé en plusieurs étapes :

1. Création d’une carte Google
2. Ajout manuel de lieux
3. Importation de plusieurs lieux à la fois
4. Mise en place de votre carte
5. Utilisation de différentes couches
6. Modification du fond de carte
7. Intégrer votre carte sur votre site web

1) Créer une carte Google

La première étape consiste à aller sur Mes cartes dans Google Maps – https://www.google.com/maps/about/mymaps/ ou https://www.google.com/maps/d/ et à cliquer sur « Démarrer » (voir la capture d’écran ci-dessous).

Cliquez sur le bouton « Créer une nouvelle carte ». Vous obtiendrez une carte portant le nom de « Carte sans titre » et vous créerez une couche appelée« Couche sans titre« .

Comme vous l’avez peut-être deviné, vous pouvez utiliser des couches pour organiser vos informations. Dans mon cas, par exemple, j’aurai une couche pour les bars qui vendent de la GoldenBeer, et une couche pour les magasins de spiritueux (ou « off-licenses » en anglais britannique) qui vendent de la GoldenBeer.

Les couches sont pratiques car les utilisateurs peuvent les sélectionner et les désélectionner, ce qui leur permet de trouver plus facilement les emplacements. Vous pouvez également donner un style à tous les emplacements d’une couche en même temps, ce qui donne un indice visuel aux différents emplacements.

Vous n’êtes pas obligé de le faire tout de suite, mais vous pouvez renommer votre carte en cliquant sur le nom actuel (Carte sans titre). Ce nom apparaît lorsque les gens consultent votre carte. Vous pouvez donc la renommer en lui donnant un nom comme« Emplacements des bars GoldenBeer« .

Ajout manuel de lieux

À partir de là, vous pouvez rechercher manuellement un lieu (par exemple, un point de repère ou une entreprise). Dans mon cas, je cherche« Meghan’s bar and Kitchen« , un bar situé sur la 45e rue ouest, à New York, et l’un des meilleurs endroits où se réfugier pour déguster une bière GoldenBeer lors d’un après-midi new-yorkais chargé. Saisissez le lieu dans la barre de recherche et cliquez sur le bouton de recherche.

Lorsque votre emplacement est trouvé sur la carte, une boîte s’affiche avec l’emplacement et ses détails. Il suffit de cliquer sur le texte « + Ajouter à la carte » au bas de cette boîte (surligné en jaune dans la capture d’écran ci-dessous). Répétez ce processus pour autant d’emplacements que vous le souhaitez.

Importation de plusieurs lieux à la fois

Et si vous avez beaucoup de sites et que vous ne voulez pas les ajouter manuellement, un par un ? GoldenBeer est disponible dans des centaines de bars et de magasins de spiritueux, et je n’ai pas voulu les saisir manuellement ; cela aurait pris des heures ! Google Maps vous permet d’importer facilement un certain nombre de types de données provenant de diverses sources. Par exemple, vous pouvez télécharger un fichier Excel CSV depuis votre ordinateur, ou importer un fichier GPX (GPS Exchange Format) depuis Google Drive.

Dans cet exemple, je vais utiliser un fichier Excel appelé « test-data.xlsx » contenant une liste des bars de New York qui vendent de la bière GoldenBeer. Le fichier Excel contient une colonne, appelée« Locations« , qui contient simplement une liste des noms et adresses des bars dans le même champ (voir la capture d’écran ci-dessous).

Pour télécharger le fichier, cliquez sur« Importer » dans la modale située à gauche de l’écran (en jaune dans la capture d’écran ci-dessous). Cela importera vos emplacements dans le calque actuellement sélectionné, dans ce cas « Calque sans titre » car je n’ai pas encore pris le temps de le renommer.

Il vous sera ensuite demandé de choisir la colonne de votre fichier Excel qui sera utilisée par Google Maps pour trouver vos emplacements. Dans mon cas, il n’y a qu’une seule colonne, je coche donc « Emplacements », puis je clique sur« Continuer« .

Il vous sera ensuite demandé de choisir une colonne à utiliser comme titre pour vos lieux. Ma colonne d’emplacement ne contient que le nom du bar, il s’agit donc également du titre de l’emplacement.

*Note importante*

Comme les bars sont déjà dans Google maps en tant que commerces, Google maps utilisera le nom correct. Toutefois, si vous créez une carte contenant des lieux qui ne sont pas déjà des entreprises ou d’autres « lieux » dans Google Maps, vous devez prévoir plusieurs colonnes, telles qu’une colonne «  ».Adresse du baret la colonneNom du bar‘, alors bien sûr, vous utiliserez la colonne ‘Nom du barVotre carte personnalisée portera le nom de cet emplacement.

Cochez la colonne que vous souhaitez utiliser comme titre, puis cliquez sur« Terminer« .

Vous verrez maintenant une série d’épingles sur votre carte, basées sur les emplacements de votre fichier Excel (voir la capture d’écran ci-dessous). Remarquez que la modale de gauche indique le nom du fichier que j’ai téléchargé (test-data.xlsx) et, en dessous, le nombre d’éléments ajoutés – Tous les éléments (12).

Styliser votre carte

Désormais, si vous souhaitez utiliser autre chose que l’épingle bleue par défaut qui marque chacun de vos emplacements, vous pouvez facilement la personnaliser. Si je passe la souris sur le texte « Tous les articles (12) », une icône en forme de seau à peinture apparaît (voir la capture d’écran ci-dessous).

Le texte au-dessus de mes emplacements dans la modale de gauche, qui indique« Style uniforme« , fait référence à la façon dont toutes mes épingles d’emplacement sont stylisées. Cela signifie que je peux mettre à jour le style de toutes les épingles en même temps. Vous pouvez cliquer sur la flèche située à côté de ce texte pour modifier les paramètres du style.

Lorsque le style est réglé sur « Style uniforme », un clic sur le godet de peinture fait apparaître une palette de couleurs. De là, je peux styliser tous les articles en même temps. Je peux modifier la couleur de l’épingle de localisation, utiliser une icône fournie par Google Maps ou même télécharger une icône personnalisée via le bouton « Autres icônes » (voir la capture d’écran ci-dessous).

Comme indiqué plus haut, si je dois donner un style individuel aux icônes, je peux le faire aussi en cliquant sur la flèche située à côté du texte« Style uniforme« , ce qui fait apparaître tous les emplacements individuels (voir la capture d’écran ci-dessous).

Si je clique sur l’un des lieux, il apparaît sur la carte et, dans la fenêtre pop-up, je peux cliquer sur l’icône du godet de peinture pour donner un style à ce lieu individuellement (voir la capture d’écran ci-dessous).

Utilisation de différentes couches

Maintenant, que se passe-t-il si vous avez différents types de données, ou différents types d’endroits où votre produit est vendu ? Comme je l’ai mentionné précédemment, dans mon cas, je dois faire la différence entre les bars et les magasins d’alcool (hors licence) afin que les utilisateurs puissent facilement faire la différence et trouver plus rapidement ce qu’ils recherchent.

Pour ce faire, j’ai décidé de faire en sorte que tous les pins de localisation des bars soient d’une seule couleur (bleu) et que tous les pins de localisation des magasins d’alcool soient d’une autre couleur (rouge).

J’ai téléchargé les bars sur une couche, et j’ai créé une nouvelle couche pour les magasins d’alcool en cliquant sur« Ajouter une couche ». J’ai ensuite importé un fichier Excel des magasins d’alcool dans cette deuxième couche, et j’ai renommé la couche « Magasins d’alcool ».

Cela a eu un effet à deux facteurs. Cela m’a permis de styliser tous les emplacements de chaque couche en une seule fois, au lieu de le faire un par un. En outre, elle a amélioré l’expérience de l’utilisateur, car les couches peuvent être activées et désactivées. Les utilisateurs peuvent désactiver les magasins d’alcool, par exemple, s’ils ne veulent voir que les bars sur la carte (voir la capture d’écran ci-dessous).

Modification du fond de carte

Il peut arriver que vous souhaitiez modifier les couleurs ou la quantité de contenu visible sur votre carte (ou « fond de carte »). La carte par défaut contient par exemple beaucoup de points de repère, ce qui peut rendre plus difficile la visualisation de vos emplacements par les utilisateurs.

Une solution consiste à modifier la« carte de base« . Ce paramètre se trouve au bas de la modale de gauche, et il existe actuellement 9 options parmi lesquelles choisir. Il suffit de cliquer sur « fond de carte » et de choisir l’une des options pour voir à quoi ressemble votre carte avec le nouveau fond (voir la capture d’écran ci-dessous).

Intégrer votre carte sur votre site web

Vous avez maintenant créé votre carte. Comment pouvez-vous le montrer aux gens ? Ou même l’utiliser vous-même à une date ultérieure ?

Il suffit de se rendre dans le tableau de bord de vos cartes(https://www.google.com/maps/d/), de localiser la carte que vous avez créée et de cliquer sur l’icône de partage (voir la capture d’écran ci-dessous). À partir de là, choisissez la dernière option« Intégrer sur mon site« .

Une fenêtre popup apparaîtra contenant le HTML que vous devez intégrer à votre site (il s’agit d’une iFrame). Copiez le contenu et collez-le sur votre site web.

• Si vous utilisez l’éditeur de blocs de WordPress, utilisez le bloc« Code » pour ce contenu.
• Si vous utilisez le bon vieil éditeur WYSIWYG de WordPress, utilisez l’onglet« Texte » (à côté de l’onglet « Visuel » où vous saisissez le contenu).
• Si vous utilisez le constructeur de pages Elementor, utilisez l’élément« HTML » .
• D’autres constructeurs de pages disposent également d’un bloc/élément qui vous permet d’insérer du HTML.

Donc, vous l’avez. C’est ainsi que vous pouvez créer une carte avec plusieurs marqueurs. Dans ce cas, nous l’avons utilisée pour indiquer les lieux de vente d’un produit, mais il s’agit là d’une des nombreuses utilisations possibles d’une carte personnalisée. À quoi servira votre carte Google personnalisée ?

Faites-moi savoir dans les commentaires ci-dessous si cela vous a aidé, ou ce que vous prévoyez d’utiliser avec votre carte Google Map personnalisée.

The post Tutoriel : Créer une carte Google avec plusieurs emplacements (2024) appeared first on Aidan McNally.