Comment ajouter des témoignages d'info-bulles dans les thèmes WordPress

Dans le passé, nous vous avons montré comment ajouter des témoignages rotatifs dans WordPress. Lors de la création de la nouvelle page de destination pour WPBeginner WordPress Videos, nous nous sommes inspirés de quelque chose que nous voyons faire depuis plusieurs années avec StudioPress. Cela consiste à afficher des témoignages dans une info-bulle lorsque l'utilisateur déplace sa souris sur une photo. Cette technique est en train de devenir un standard de l'industrie parce que nous avons également vu d'autres personnes l'utiliser. Dans cet article, nous allons vous montrer comment ajouter des info-bulles de témoignages popup dans WordPress.

Résultat final

Voici à quoi ressemblera le produit final. Si vous amenez votre souris sur la photo d'une personne, une infobulle vous en témoignera. Vous pouvez voir la démo en direct ici. Cependant, cet article survivra probablement à la démonstration en direct, attachez donc une capture d'écran ci-dessous:

Contexte:

D'après ce que nous avons entendu d'experts de l'industrie, montrer des visages humains de premier plan tend à ajouter un sentiment personnel à la page. C'est la raison pour laquelle nous avons choisi cette voie. Nous avons effectué 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 leur soutien. 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 envoyé un fichier exemple..

Le problème le plus important était qu’ils avaient simplement codé l’entité dans leur modèle. Bien que cela fonctionne très bien pour nous, développeurs, ce n’est pas une solution idéale si vous confiez le site Web à un client? Nous voulions une solution permettant au client d’ajouter ou de supprimer des témoignages à sa guise. C’est pourquoi, nous avons décidé d’utiliser des types de messages personnalisés et des champs de méta pour y parvenir, ainsi que jQuery..

Types de messages personnalisés et méta-boîtes

Le client doit pouvoir effectuer les tâches suivantes:

• Ajouter la photo de l'utilisateur (miniatures)
• Ajouter le nom de l'utilisateur (Titre du message)
• Ajouter un texte de témoignage (corps du message)
• Position du client dans l'entreprise (champ personnalisé ou méta-boîte)

La première chose que nous avons faite a été d’ajouter un type de message personnalisé appelé Témoignages qui nous a tout fourni sauf un champ (poste client / société). 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 qu'il ne faut pas être paresseux et donner à nos clients une excellente expérience de back-end, même si cela nécessite l'ajout de quelques lignes de code.

Tout ce que vous avez à faire est de prendre le code ci-dessous et de l'enregistrer dans un fichier php vierge appelé tooltip-testimonials.php ou tout autre nom correspondant à cet intérêt..

  _x ('Témoignages', 'témoignage'), 'singular_name' => _x ('témoignage', 'témoignage'), 'add_new' => _x ('Ajouter nouveau', 'témoignage'), 'add_new_item' => _x ('Ajouter un nouveau témoignage', 'témoignage'), 'edit_item' => _x ('Modifier le témoignage', 'testimonial'), 'new_item' => _x ('Nouveau témoignage', 'testimonial'), 'view_item' = > _x ('Voir le témoignage', 'testimonial'), 'search_items' => _x ('Rechercher les témoignages', 'testimonial'), 'not_found' => _x ('Aucun témoignage trouvé', 'testimonial'), 'not_found_in_trash '=> _x (' Aucun témoignage trouvé dans la corbeille ',' testimonial '),' parent_item_colon '=> _x (' Témoignage du parent: ',' testimonial '),' menu_name '=> _x (' Témoignages ',' testimonial ' ), $ args = array ('labels' => $ labels, 'hierarchical' => false, 'supporte' => array ('title', 'editor', 'extrait', 'author', 'thumbnail', 'custom- champs ',' révisions '),' public '=> true,' show_ui '=> true,' show_in_menu '=> true,' show_in_nav_menus '=> true,' public_queryable '=> true,' exclude_from_search '=> false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capacite_type' => 'post'); register_post_type ('testimonial', $ args);  // Custom Meta Box $ key = "testimonial"; $ meta_boxes = array ("position" => array ("name" => "position", "title" => "Position and Company", "description" => "Entrez leur position et leur raison sociale.")); function create_meta_box () clé globale $; if (function_exists ('add_meta_box')) add_meta_box ('new-meta-box', ucfirst ($ key). 'Information', 'display_meta_box', 'testimonial', 'normal', 'high');  function display_meta_box () global $ post, $ meta_boxes, $ key; ?> ID, $ key, true); ?>         
Cela nous donnera la configuration de base de WordPress par laquelle nous devons commencer. Maintenant, vous devez commencer à ajouter des témoignages pour pouvoir les afficher. Récapitulons où chaque élément va.
 
 
Ajouter la photo de l'utilisateur (Vignettes / Image sélectionnée). Nous l’avons réglé pour le redimensionner de 96 x 96px. Il est toujours préférable de suivre ce ratio.
 
Ajouter le nom de l'utilisateur (Titre du message)
 
Ajouter un texte de témoignage (corps du message)
 
Position du client dans l'entreprise (dans une boîte méta de témoignage)
 
 
Affichage dans le thème
 
Les témoignages Tooltip sont principalement destinés à des thèmes personnalisés. Par conséquent, vous devrez vous salir les mains avec une édition de thème. Comme chaque thème a des dimensions, des schémas de couleurs et des styles différents, nous avons décidé de le publier sous forme de didacticiel plutôt que de plug-in. Voici ce que nous allons faire pour afficher des témoignages d'infobulle dans votre thème WordPress:
 
 
Ajouter un code jQuery personnalisé dans le thème.
 
Créez une boucle personnalisée qui affichera les témoignages dans la structure souhaitée.
 
Ajoutez quelques 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é tooltip-testimonials.js:
 
 jQuery (document) .ready (function () jQuery ("# ​​testimonials img [title]"). tooltip (// ajuster le décalage de la position: [0, 0], // utiliser l'effet "slide": ' slide '// ajoute un plugin dynamique avec une configuration optionnelle pour le bord inférieur). 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 de tête, ou de suivre les pratiques recommandées par WP et d'utiliser la fonction wp_enqueue_script. Continuons et mettons en ligne 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 ('info-bulle');  
 
Maintenant que nous avons cela en place, créons une boucle personnalisée qui nous permettra d'afficher ces témoignages dans les info-bulles avec les images de l'utilisateur dans un format basé sur une grille. Ouvrez le fichier où vous voulez que ces témoignages apparaissent. Que ce soit votre sidebar, votre page d’accueil ou où que vous soyez. Puis collez la boucle suivante:
 
    'testimonial', 'posts_per_page' => 6); $ loop = new WP_Query ($ args); if ($ loop-> have_posts ()): while ($ loop-> have_posts ()): $ loop-> the_post (); $ data = get_post_meta ($ loop-> post-> ID, 'testimonial', true); $ user_image_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ loop-> post-> ID), 'testimonial-thumb'); ?>  
       
 
Le code de boucle ci-dessus affichera 6 éléments sur la page. Vous pouvez les styler comme bon vous semble. Vous pouvez même ajouter orderby = rand si vous avez environ 20 témoignages. Vous pouvez en afficher 6 au hasard.
 
Ajoutons maintenant quelques styles CSS pour le rendre joli. Ci-dessous quelques exemples de CSS que nous avons utilisés. Vous aurez probablement besoin de l’ajuster en fonction de vos styles de thème, de vos combinaisons de couleurs, etc..
 
 #testimonials .testimonials width: 116px; float: gauche; margin: 35px 30px 0 0; #testimonials .center text-align: center; marge: 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 taille de la police: 14px; poids de police: 700; text-align: center; marge: 3px 0 0; padding: 0px; #testimonials .company taille de la police: 12px; style de police: italique; text-align: center; marge: 0px; padding: 0px; #testimonials .tooltip background: # 111; couleur: #fff; largeur: 200px; rembourrage: 20px; marge: 0 5 px 20 px; 
 
Emballer:
 
Nous espérons que cet article vous aidera à ajouter des témoignages d’info-bulles dans vos thèmes WordPress. Ceci est un exemple très basique. Comme nous l'avons mentionné ci-dessus, vous pouvez toujours ajuster les arguments de wp_query pour avoir l'ordre des témoignages aléatoires. Vous pouvez également utiliser le plug-in Post Types Order pour permettre à vos clients de déterminer l'ordre avec une interface glisser-déposer facile..
 
Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire ci-dessous.