Dans le passé, nous vous avons montré comment ajouter des témoignages rotatifs dans WordPress. En créant la nouvelle page d’accueil des vidéos WordPress de WPBeginner, nous nous sommes inspirés de quelque chose que nous avons vu faire avec StudioPress depuis un certain temps. Cela montre des témoignages dans une info-bulle lorsque l’utilisateur survole une photo. Cette technique est en train de devenir un standard de l’industrie car nous avons également vu d’autres personnes l’utiliser. Dans cet article, nous vous montrerons comment ajouter des pop-ups d’info-bulles dans WordPress.
Résultat final
Voici à quoi ressemblera le produit final. Si vous passez la souris sur la photo d’une personne, un témoignage d’info-bulle s’affiche. Vous pouvez voir la démo en direct ici. Cependant, cet article survivra probablement à la démo en direct, j’ai donc joint une capture d’écran ci-dessous:
Antécédents:
Sur la base de ce que nous avons entendu des experts de l’industrie, l’affichage de visages humains proéminents a tendance à ajouter un sentiment personnel à 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 évidence le code utilisé par StudioPress. La meilleure partie de StudioPress est son support. Comme Loren l’a décrit, lorsqu’il a demandé à Brian Gardner comment il avait créé les témoignages sur son site, Brian a simplement soumis un exemple de fichier.
Le plus gros problème était qu’ils codaient simplement la fonction dans leur modèle. Bien que cela fonctionnerait bien pour nous, développeurs, n’est-ce pas une solution idéale si vous remettez le site Web à un client? Nous voulions avoir une solution dans laquelle nous donnons au client la possibilité d’ajouter / supprimer des témoignages à volonté. C’est pourquoi nous avons décidé d’utiliser des types de publication personnalisés et des méta-champs pour y parvenir en conjonction avec jQuery.
Types de publications personnalisées et de méta-graphiques
Nous avons besoin que le client ait la capacité de faire ce qui suit:
- Ajouter une photo d’utilisateur (vignettes)
- Ajouter un nom d’utilisateur (titre du message)
- Ajouter un texte de témoignage (corps du message)
- Position du client dans l’entreprise (champ personnalisé ou boîte d’objectif)
La première chose que nous avons faite a été d’ajouter un type de message personnalisé appelé Témoignages qui nous a tout obtenu, sauf un champ (position client / entreprise). C’est à vous de décider si vous souhaitez ajouter une méta-boîte personnalisée ou que votre client utilise des champs personnalisés. Nous disons ne soyons pas paresseux et offrons à nos clients une excellente expérience back-end, même si cela nécessite l’ajout de lignes de code supplémentaires.
Tout ce que vous avez à faire est de prendre le code suivant et de l’enregistrer dans un fichier php vierge appelé tooltip-testimonials.php ou tout autre nom pour cette raison.
Esto nos dará la configuración básica de WordPress con la que necesitamos comenzar. Ahora, debe comenzar a agregar algunos testimonios para poder mostrarlos. Recapitulemos a dónde va cada elemento.
- Ajouter une photo d’utilisateur (vignettes / image sélectionnée). Nous l’avons configuré pour le redimensionner en 96 x 96px. Il vaut toujours mieux suivre ce ratio.
- Ajouter un nom d’utilisateur (titre du message)
- Ajouter un texte de témoignage (corps du message)
- Position du client dans l’entreprise (dans une méta boite de témoignage)
Afficher dans le sujet
Les témoignages d’infobulles sont principalement destinés aux thèmes personnalisés, donc oui, il faudra vous salir les mains avec un peu d’édition de thème. Étant donné que chaque thème a des dimensions, des schémas de couleurs et des styles différents, nous avons décidé de le lancer sous forme de didacticiel plutôt que de plugin. Voici ce que nous ferons pour présenter des témoignages d’infobulles dans votre thème WordPress:
- Ajoutez du code jQuery personnalisé dans le thème.
- Créez une boucle personnalisée qui montre les témoignages dans une structure que nous voulons.
- Ajoutez du CSS de base pour le rendre joli
La première chose à faire est de copier et coller le code jQuery suivant et de l’enregistrer dans un fichier vierge appelé:
jQuery(document).ready(function(){
jQuery("#testimonials imgHow to Add Tooltip Testimonials in WordPress Themes").tooltip({
// tweak the position
offset: [0, 0],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
Une fois que vous avez fait cela, nous devons charger ce fichier dans l’en-tête de votre thème. 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ête, 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ème. S’il n’existe pas, créez simplement un dossier appelé scripts.
Ajoutez le code suivant au fichier functions.php de votre thème:
add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
if (!is_admin()) {
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);
wp_enqueue_script('jquery_tools');
wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true);
wp_enqueue_script('tooltip');
}
}
Maintenant que nous avons cela en place, créons une boucle personnalisée qui nous permettra d’afficher ces témoignages d’infobulles avec des images utilisateur dans un format basé sur une grille. Ouvrez le fichier dans lequel vous souhaitez que ces témoignages apparaissent. Que ce soit votre barre latérale, votre page d’accueil ou où vous le souhaitez. Collez ensuite la boucle suivante:
Le code de boucle ci-dessus affichera 6 éléments sur la page. Vous pouvez les concevoir à votre guise. Vous pouvez même ajouter orderby = rand si vous avez plus ou moins 20 témoignages. Vous pouvez avoir 6 affichés au hasard.
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ème, de vos schémas de couleurs, etc.
#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}
#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}
#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;}
#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}
#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}
#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}
Fin:
Nous espérons que cet article vous aidera à ajouter des témoignages d’infobulles à vos thèmes WordPress. Ceci est un exemple très basique. Comme mentionné précédemment, vous pouvez toujours ajuster les arguments wp_query pour avoir un ordre de témoignage aléatoire. Vous pouvez également utiliser le plug-in Post Type Order pour permettre à vos clients de déterminer la commande avec une interface simple de glisser-déposer.
Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire ci-dessous.
