Voici \u00e0 quoi ressemblera le produit final. Si vous passez la souris sur la photo d’une personne, un t\u00e9moignage d’info-bulle s’affiche. Vous pouvez voir la d\u00e9mo en direct ici. Cependant, cet article survivra probablement \u00e0 la d\u00e9mo en direct, j’ai donc joint une capture d’\u00e9cran ci-dessous:<\/p>\n
![\"T\u00e9moignages](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/tooltiptestimonialss.jpg\" "\\"T\u00e9moignages")
<\/p>\n
<\/span>Ant\u00e9c\u00e9dents:<\/span><\/h4>\nSur la base de ce que nous avons entendu des experts de l’industrie, l’affichage de visages humains pro\u00e9minents a tendance \u00e0 ajouter un sentiment personnel \u00e0 la page. C’est la raison pour laquelle nous avons voulu emprunter cette voie. Nous avons fait une simple recherche sur Google pour trouver l’article de Loren Nason. Dans lequel il a essentiellement mis en \u00e9vidence le code utilis\u00e9 par StudioPress. La meilleure partie de StudioPress est son support. Comme Loren l’a d\u00e9crit, lorsqu’il a demand\u00e9 \u00e0 Brian Gardner comment il avait cr\u00e9\u00e9 les t\u00e9moignages sur son site, Brian a simplement soumis un exemple de fichier. <\/p>\n
Le plus gros probl\u00e8me \u00e9tait qu’ils codaient simplement la fonction dans leur mod\u00e8le. Bien que cela fonctionnerait bien pour nous, d\u00e9veloppeurs, n’est-ce pas une solution id\u00e9ale si vous remettez le site Web \u00e0 un client? Nous voulions avoir une solution dans laquelle nous donnons au client la possibilit\u00e9 d’ajouter \/ supprimer des t\u00e9moignages \u00e0 volont\u00e9. C’est pourquoi nous avons d\u00e9cid\u00e9 d’utiliser des types de publication personnalis\u00e9s et des m\u00e9ta-champs pour y parvenir en conjonction avec jQuery.<\/p>\n
<\/span>Types de publications personnalis\u00e9es et de m\u00e9ta-graphiques<\/span><\/h4>\nNous avons besoin que le client ait la capacit\u00e9 de faire ce qui suit:<\/p>\n
\n- Ajouter une photo d’utilisateur (vignettes)<\/li>\n
- Ajouter un nom d’utilisateur (titre du message)<\/li>\n
- Ajouter un texte de t\u00e9moignage (corps du message)<\/li>\n
- Position du client dans l’entreprise (champ personnalis\u00e9 ou bo\u00eete d’objectif)<\/li>\n<\/ul>\n
La premi\u00e8re chose que nous avons faite a \u00e9t\u00e9 d’ajouter un type de message personnalis\u00e9 appel\u00e9 T\u00e9moignages qui nous a tout obtenu, sauf un champ (position client \/ entreprise). C’est \u00e0 vous de d\u00e9cider si vous souhaitez ajouter une m\u00e9ta-bo\u00eete personnalis\u00e9e ou que votre client utilise des champs personnalis\u00e9s. Nous disons ne soyons pas paresseux et offrons \u00e0 nos clients une excellente exp\u00e9rience back-end, m\u00eame si cela n\u00e9cessite l’ajout de lignes de code suppl\u00e9mentaires.<\/p>\n
Tout ce que vous avez \u00e0 faire est de prendre le code suivant et de l’enregistrer dans un fichier php vierge appel\u00e9 tooltip-testimonials.php ou tout autre nom pour cette raison.<\/p>\n
\nEsto nos dar\u00e1 la configuraci\u00f3n b\u00e1sica de WordPress con la que necesitamos comenzar. Ahora, debe comenzar a agregar algunos testimonios para poder mostrarlos. Recapitulemos a d\u00f3nde va cada elemento.<\/p>\n<\/pre>\n
\n- Ajouter une photo d’utilisateur (vignettes \/ image s\u00e9lectionn\u00e9e). Nous l’avons configur\u00e9 pour le redimensionner en 96 x 96px. Il vaut toujours mieux suivre ce ratio.<\/li>\n
- Ajouter un nom d’utilisateur (titre du message)<\/li>\n
- Ajouter un texte de t\u00e9moignage (corps du message)<\/li>\n
- Position du client dans l’entreprise (dans une m\u00e9ta boite de t\u00e9moignage)<\/li>\n<\/ul>\n
<\/span>Afficher dans le sujet<\/span><\/h4>\nLes t\u00e9moignages d’infobulles sont principalement destin\u00e9s aux th\u00e8mes personnalis\u00e9s, donc oui, il faudra vous salir les mains avec un peu d’\u00e9dition de th\u00e8me. \u00c9tant donn\u00e9 que chaque th\u00e8me a des dimensions, des sch\u00e9mas de couleurs et des styles diff\u00e9rents, nous avons d\u00e9cid\u00e9 de le lancer sous forme de didacticiel plut\u00f4t que de plugin. Voici ce que nous ferons pour pr\u00e9senter des t\u00e9moignages d’infobulles dans votre th\u00e8me WordPress:<\/p>\n
\n- Ajoutez du code jQuery personnalis\u00e9 dans le th\u00e8me.<\/li>\n
- Cr\u00e9ez une boucle personnalis\u00e9e qui montre les t\u00e9moignages dans une structure que nous voulons.<\/li>\n
- Ajoutez du CSS de base pour le rendre joli<\/li>\n<\/ul>\n
La premi\u00e8re chose \u00e0 faire est de copier et coller le code jQuery suivant et de l’enregistrer dans un fichier vierge appel\u00e9:<\/p>\n
jQuery(document).ready(function(){\r\n \r\n jQuery(\"#testimonials imgHow to Add Tooltip Testimonials in WordPress Themes\").tooltip({\r\n \r\n \/\/ tweak the position\r\n offset: [0, 0],\r\n \r\n \/\/ use the \"slide\" effect\r\n effect: 'slide'\r\n \r\n \/\/ add dynamic plugin with optional configuration for bottom edge\r\n }).dynamic({ bottom: { direction: 'down', bounce: true } });\r\n \r\n});\r\n<\/pre>\nUne fois que vous avez fait cela, nous devons charger ce fichier dans l’en-t\u00eate de votre th\u00e8me. Vous pouvez choisir de le faire manuellement en modifiant votre fichier header.php et en collant un code de script dans votre zone d’en-t\u00eate, ou suivez les meilleures pratiques WP et utilisez la fonction wp_enqueue_script. Allons de l’avant et chargeons notre fichier tooltip-testimonials.js dans le dossier de scripts de notre th\u00e8me. S’il n’existe pas, cr\u00e9ez simplement un dossier appel\u00e9 scripts.<\/p>\n
Ajoutez le code suivant au fichier functions.php de votre th\u00e8me:<\/p>\n
add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');\r\nfunction tooltip_enqueue_scripts() {\r\nif (!is_admin()) {\r\n wp_register_script('jquery_tools', 'http:\/\/cdn.jquerytools.org\/1.2.6\/full\/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);\r\n wp_enqueue_script('jquery_tools');\r\n \r\n wp_register_script('tooltip', get_stylesheet_directory_uri() . '\/scripts\/tooltip-testimonials.js', 'jquery', '1', true);\r\n wp_enqueue_script('tooltip');\r\n}\r\n}\r\n<\/pre>\nMaintenant que nous avons cela en place, cr\u00e9ons une boucle personnalis\u00e9e qui nous permettra d’afficher ces t\u00e9moignages d’infobulles avec des images utilisateur dans un format bas\u00e9 sur une grille. Ouvrez le fichier dans lequel vous souhaitez que ces t\u00e9moignages apparaissent. Que ce soit votre barre lat\u00e9rale, votre page d’accueil ou o\u00f9 vous le souhaitez. Collez ensuite la boucle suivante:<\/p>\n
\r\n\r\n\n\n\n\n\n\r\n\r\n<\/pre>\nLe code de boucle ci-dessus affichera 6 \u00e9l\u00e9ments sur la page. Vous pouvez les concevoir \u00e0 votre guise. Vous pouvez m\u00eame ajouter orderby = rand si vous avez plus ou moins 20 t\u00e9moignages. Vous pouvez avoir 6 affich\u00e9s au hasard.<\/p>\n
Ajoutons maintenant quelques styles CSS pour le rendre joli. Voici un exemple de CSS que nous utilisons. Vous devrez probablement l’ajuster en fonction de vos styles de th\u00e8me, de vos sch\u00e9mas de couleurs, etc.<\/p>\n
#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}\r\n\r\n#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}\r\n\r\n#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}\r\n\r\n#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}\r\n\r\n#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}\r\n\r\n#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}\r\n<\/pre>\n<\/span>Fin:<\/span><\/h4>\nNous esp\u00e9rons que cet article vous aidera \u00e0 ajouter des t\u00e9moignages d’infobulles \u00e0 vos th\u00e8mes WordPress. Ceci est un exemple tr\u00e8s basique. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, vous pouvez toujours ajuster les arguments wp_query pour avoir un ordre de t\u00e9moignage al\u00e9atoire. Vous pouvez \u00e9galement utiliser le plug-in Post Type Order pour permettre \u00e0 vos clients de d\u00e9terminer la commande avec une interface simple de glisser-d\u00e9poser.<\/p>\n
Si vous avez des questions ou des suggestions, n’h\u00e9sitez pas \u00e0 laisser un commentaire ci-dessous.<\/p>\n
Nous avons besoin que le client ait la capacit\u00e9 de faire ce qui suit:<\/p>\n
- \n
- Ajouter une photo d’utilisateur (vignettes)<\/li>\n
- Ajouter un nom d’utilisateur (titre du message)<\/li>\n
- Ajouter un texte de t\u00e9moignage (corps du message)<\/li>\n
- Position du client dans l’entreprise (champ personnalis\u00e9 ou bo\u00eete d’objectif)<\/li>\n<\/ul>\n
La premi\u00e8re chose que nous avons faite a \u00e9t\u00e9 d’ajouter un type de message personnalis\u00e9 appel\u00e9 T\u00e9moignages qui nous a tout obtenu, sauf un champ (position client \/ entreprise). C’est \u00e0 vous de d\u00e9cider si vous souhaitez ajouter une m\u00e9ta-bo\u00eete personnalis\u00e9e ou que votre client utilise des champs personnalis\u00e9s. Nous disons ne soyons pas paresseux et offrons \u00e0 nos clients une excellente exp\u00e9rience back-end, m\u00eame si cela n\u00e9cessite l’ajout de lignes de code suppl\u00e9mentaires.<\/p>\n
Tout ce que vous avez \u00e0 faire est de prendre le code suivant et de l’enregistrer dans un fichier php vierge appel\u00e9 tooltip-testimonials.php ou tout autre nom pour cette raison.<\/p>\n
\n
Esto nos dar\u00e1 la configuraci\u00f3n b\u00e1sica de WordPress con la que necesitamos comenzar. Ahora, debe comenzar a agregar algunos testimonios para poder mostrarlos. Recapitulemos a d\u00f3nde va cada elemento.<\/p>\n<\/pre>\n
- \n
- Ajouter une photo d’utilisateur (vignettes \/ image s\u00e9lectionn\u00e9e). Nous l’avons configur\u00e9 pour le redimensionner en 96 x 96px. Il vaut toujours mieux suivre ce ratio.<\/li>\n
- Ajouter un nom d’utilisateur (titre du message)<\/li>\n
- Ajouter un texte de t\u00e9moignage (corps du message)<\/li>\n
- Position du client dans l’entreprise (dans une m\u00e9ta boite de t\u00e9moignage)<\/li>\n<\/ul>\n
<\/span>Afficher dans le sujet<\/span><\/h4>\n
Les t\u00e9moignages d’infobulles sont principalement destin\u00e9s aux th\u00e8mes personnalis\u00e9s, donc oui, il faudra vous salir les mains avec un peu d’\u00e9dition de th\u00e8me. \u00c9tant donn\u00e9 que chaque th\u00e8me a des dimensions, des sch\u00e9mas de couleurs et des styles diff\u00e9rents, nous avons d\u00e9cid\u00e9 de le lancer sous forme de didacticiel plut\u00f4t que de plugin. Voici ce que nous ferons pour pr\u00e9senter des t\u00e9moignages d’infobulles dans votre th\u00e8me WordPress:<\/p>\n
- \n
- Ajoutez du code jQuery personnalis\u00e9 dans le th\u00e8me.<\/li>\n
- Cr\u00e9ez une boucle personnalis\u00e9e qui montre les t\u00e9moignages dans une structure que nous voulons.<\/li>\n
- Ajoutez du CSS de base pour le rendre joli<\/li>\n<\/ul>\n
La premi\u00e8re chose \u00e0 faire est de copier et coller le code jQuery suivant et de l’enregistrer dans un fichier vierge appel\u00e9:<\/p>\n
jQuery(document).ready(function(){\r\n \r\n jQuery(\"#testimonials imgHow to Add Tooltip Testimonials in WordPress Themes\").tooltip({\r\n \r\n \/\/ tweak the position\r\n offset: [0, 0],\r\n \r\n \/\/ use the \"slide\" effect\r\n effect: 'slide'\r\n \r\n \/\/ add dynamic plugin with optional configuration for bottom edge\r\n }).dynamic({ bottom: { direction: 'down', bounce: true } });\r\n \r\n});\r\n<\/pre>\nUne fois que vous avez fait cela, nous devons charger ce fichier dans l’en-t\u00eate de votre th\u00e8me. Vous pouvez choisir de le faire manuellement en modifiant votre fichier header.php et en collant un code de script dans votre zone d’en-t\u00eate, ou suivez les meilleures pratiques WP et utilisez la fonction wp_enqueue_script. Allons de l’avant et chargeons notre fichier tooltip-testimonials.js dans le dossier de scripts de notre th\u00e8me. S’il n’existe pas, cr\u00e9ez simplement un dossier appel\u00e9 scripts.<\/p>\n
Ajoutez le code suivant au fichier functions.php de votre th\u00e8me:<\/p>\n
add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');\r\nfunction tooltip_enqueue_scripts() {\r\nif (!is_admin()) {\r\n wp_register_script('jquery_tools', 'http:\/\/cdn.jquerytools.org\/1.2.6\/full\/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);\r\n wp_enqueue_script('jquery_tools');\r\n \r\n wp_register_script('tooltip', get_stylesheet_directory_uri() . '\/scripts\/tooltip-testimonials.js', 'jquery', '1', true);\r\n wp_enqueue_script('tooltip');\r\n}\r\n}\r\n<\/pre>\nMaintenant que nous avons cela en place, cr\u00e9ons une boucle personnalis\u00e9e qui nous permettra d’afficher ces t\u00e9moignages d’infobulles avec des images utilisateur dans un format bas\u00e9 sur une grille. Ouvrez le fichier dans lequel vous souhaitez que ces t\u00e9moignages apparaissent. Que ce soit votre barre lat\u00e9rale, votre page d’accueil ou o\u00f9 vous le souhaitez. Collez ensuite la boucle suivante:<\/p>\n
\r\n\r\n\n\n\n\n\n\r\n\r\n<\/pre>\n
Le code de boucle ci-dessus affichera 6 \u00e9l\u00e9ments sur la page. Vous pouvez les concevoir \u00e0 votre guise. Vous pouvez m\u00eame ajouter orderby = rand si vous avez plus ou moins 20 t\u00e9moignages. Vous pouvez avoir 6 affich\u00e9s au hasard.<\/p>\n
Ajoutons maintenant quelques styles CSS pour le rendre joli. Voici un exemple de CSS que nous utilisons. Vous devrez probablement l’ajuster en fonction de vos styles de th\u00e8me, de vos sch\u00e9mas de couleurs, etc.<\/p>\n
#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}\r\n\r\n#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}\r\n\r\n#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}\r\n\r\n#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}\r\n\r\n#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}\r\n\r\n#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}\r\n<\/pre>\n<\/span>Fin:<\/span><\/h4>\n
Nous esp\u00e9rons que cet article vous aidera \u00e0 ajouter des t\u00e9moignages d’infobulles \u00e0 vos th\u00e8mes WordPress. Ceci est un exemple tr\u00e8s basique. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, vous pouvez toujours ajuster les arguments wp_query pour avoir un ordre de t\u00e9moignage al\u00e9atoire. Vous pouvez \u00e9galement utiliser le plug-in Post Type Order pour permettre \u00e0 vos clients de d\u00e9terminer la commande avec une interface simple de glisser-d\u00e9poser.<\/p>\n
Si vous avez des questions ou des suggestions, n’h\u00e9sitez pas \u00e0 laisser un commentaire ci-dessous.<\/p>\n