Hoe getuigschriften van Tooltip in WordPress-thema's toe te voegen

In het verleden hebben we u laten zien hoe u roterende getuigschriften kunt toevoegen in WordPress. Bij het maken van de nieuwe bestemmingspagina voor WordPress-video's van WPBeginner hebben we inspiratie gehaald uit iets dat we al een tijdje met StudioPress hebben gezien. Dat is het weergeven van testimonials in een tooltip wanneer de gebruiker zijn muis op een foto plaatst. Deze techniek is een industriestandaard aan het worden, omdat we ook andere mensen het hebben zien gebruiken. In dit artikel laten we u zien hoe u tooltip-testimonials kunt toevoegen in WordPress.

Eindresultaat

Dit is hoe het eindproduct eruit zal zien. Als u uw muis op de foto van een persoon plaatst, wordt er een tooltip-testimonial weergegeven. Je kunt de live demo hier bekijken. Dit artikel zal waarschijnlijk de live demo overleven, dus een schermafbeelding hieronder toevoegen:

Achtergrond:

Van wat we hebben gehoord van experts uit de industrie, toont het laten zien van prominente menselijke gezichten een persoonlijk gevoel toe te voegen aan de pagina. Dit is de reden waarom we deze route wilden gaan. We hebben een eenvoudige Google-zoekopdracht uitgevoerd om het artikel van Loren Nason tegen te komen. Waarin hij in wezen de code markeerde die StudioPress gebruikte. Het beste deel over StudioPress is hun ondersteuning. Zoals Loren beschreef, stuurde Brian, toen hij Brian Gardner vroeg hoe hij de getuigenissen op zijn site had gemaakt, eenvoudig een voorbeeldbestand.

Het grootste probleem was dat ze de functie eenvoudig in hun sjabloon codeerden. Hoewel dit goed zou werken voor ons ontwikkelaars, is het geen ideale oplossing als u de website aan een klant overdraagt? We wilden een oplossing waarbij we de klant de mogelijkheid geven om naar eigen goeddunken testimonials toe te voegen / te verwijderen. Daarom hebben we besloten om Aangepaste berichttypen en metavelden te gebruiken om dit samen met de jQuery te voltooien.

Aangepaste berichttypes en metaboxen

We hebben de client nodig om het volgende te kunnen doen:

• Gebruikersfoto toevoegen (miniaturen)
• Voeg gebruikersnaam toe (bericht titel)
• Testimonial-tekst toevoegen (berichtendocument)
• Positie van klant in bedrijf (aangepast veld of metabox)

Allereerst hebben we een aangepast berichttype toegevoegd met de naam Testimonials, waarmee we alles hebben gekregen, behalve één veld (klantpositie / bedrijf). Het is aan u of u een aangepaste metabox wilt toevoegen of uw klant aangepaste velden wilt laten maken. We zeggen dat we niet lui mogen zijn en onze klanten een geweldige back-endervaring kunnen bieden, zelfs als het een paar extra regels code vereist.

Het enige dat u hoeft te doen is de onderstaande code te gebruiken en deze op te slaan in een leeg php-bestand met de naam tooltip-testimonials.php of een andere naam voor dat doel.

  _x ('Testimonials', 'testimonial'), 'singular_name' => _x ('testimonial', 'testimonial'), 'add_new' => _x ('Voeg nieuw toe', 'testimonial'), 'add_new_item' => _x ('Voeg nieuwe testimonial toe', 'testimonial'), 'edit_item' => _x ('Edit testimonial', 'testimonial'), 'new_item' => _x ('Nieuw testimonial', 'testimonial'), 'view_item' = > _x ('Bekijk testimonial', 'testimonial'), 'search_items' => _x ('Getuigenissen zoeken', 'testimonial'), 'not_found' => _x ('Geen getuigschriften gevonden', 'testimonial'), 'not_found_in_trash '=> _x (' Geen getuigschriften gevonden in prullenbak ',' testimonial '),' parent_item_colon '=> _x (' Bovenliggende getuigschrift: ',' testimonial '),' menu_name '=> _x (' Testimonials ',' testimonial ' ),); $ args = array ('labels' => $ labels, 'hierarchical' => false, 'supports' => array ('title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom- fields ',' revisions '),' public '=> true,' show_ui '=> true,' show_in_menu '=> true,' show_in_nav_menus '=> true,' publicly_queryable '=> true,' exclude_from_search '=> false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('testimonial', $ args);  // Custom Meta Box $ key = "testimonial"; $ meta_boxes = array ("position" => array ("name" => "position", "title" => "Position and Company", "description" => "Geef hun positie en hun bedrijfsnaam op.")); function create_meta_box () global $ key; if (function_exists ('add_meta_box')) add_meta_box ('nieuwe-meta-boxes', ucfirst ($ key). 'Information', 'display_meta_box', 'testimonial', 'normal', 'high');  functie display_meta_box () global $ post, $ meta_boxes, $ key; ?> ID, $ -toets, waar); ?>         
Dit zal ons de basis WordPress-opstelling geven waarmee we moeten beginnen. Nu moet u enkele testimonials toevoegen, zodat u deze kunt weergeven. Laten we samenvatten waar elk element naartoe gaat.
 
 
Gebruikersfoto toevoegen (miniaturen / Uitgelichte afbeelding). We hebben het ingesteld om het formaat te wijzigen met 96 x 96 px. Het is altijd het beste om die verhouding te volgen.
 
Voeg gebruikersnaam toe (bericht titel)
 
Testimonial-tekst toevoegen (berichtendocument)
 
Positie van klant in bedrijf (in een meta-box met testimonial informatie)
 
 
Weergeven in thema
 
Tooltip-testimonials zijn meestal bedoeld voor aangepaste thema's, dus ja, je zult je handen vuil moeten maken met een aantal bewerkthema's. Omdat elk thema verschillende dimensies, kleurenschema's en stijlen heeft, hebben we besloten dit als een zelfstudie te publiceren in plaats van als een plug-in. Dit is wat we doen om tooltip-testimonials weer te geven in uw WordPress-thema:
 
 
Voeg een aangepaste jQuery-code toe aan het thema.
 
Maak een aangepaste lus die de testimonials weergeeft in een structuur die we willen.
 
Voeg wat standaard CSS toe om het er mooi uit te laten zien
 
 
Het eerste wat je hoeft te doen is de volgende jQuery-code kopiëren en plakken en opslaan in een leeg bestand met de naam tooltip-testimonials.js:
 
 jQuery (document) .ready (function () jQuery ("# ​​testimonials img [title]"). tooltip (// tweak the position offset: [0, 0], // gebruik het "slide" effect-effect: ' slide '// dynamische plug-in toevoegen met optionele configuratie voor onderrand). dynamic (bottom: direction:' down ', bounce: true);); 
 
Zodra je dat hebt gedaan, moeten we dit bestand in de header van je thema laden. U kunt ervoor kiezen om dit handmatig te doen door uw header.php-bestand te bewerken en een scriptcode in uw hoofdgebied te plakken, of de beste praktijken van WP te volgen en de functie wp_enqueue_script te gebruiken. Laten we doorgaan en ons tooltip-testimonials.js-bestand uploaden in de map met scripts van ons thema. Als het niet bestaat, maakt u gewoon een map met de naam scripts.
 
Voeg de volgende code toe aan het function.php-bestand van uw thema:
 
 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');  
 
Nu hebben we dat op zijn plek, laten we een aangepaste lus maken waarmee we deze tooltip-testimonials kunnen weergeven met afbeeldingen van gebruikers in een op rasters gebaseerde indeling. Open het bestand waar u deze testimonials wilt laten verschijnen. Of het nu uw zijbalk, startpagina of waar u maar wilt. Plak vervolgens de volgende lus:
 
    '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'); ?>  
       
 
De bovenstaande luscode toont 6 items op de pagina. Je kunt ze desgewenst stylen. Je kunt zelfs orderby = rand toevoegen als je zo'n 20 getuigenissen hebt. U kunt er 6 willekeurig laten weergeven.
 
Laten we nu een paar CSS-stijlen toevoegen om het er mooi uit te laten zien. Hieronder vindt u enkele voorbeelden van CSS die we hebben gebruikt. U zou het waarschijnlijk moeten aanpassen op basis van uw themastijlen, kleurenschema's enz.
 
 #testimonials .testimonials width: 116px; zweven: links; marge: 35px 30px 0 0; #testimonials .center text-align: center; marge: 0px 0 15px ;; opvulling: 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-gewicht: 700; text-align: center; marge: 3px 0 0; opvulling: 0px; #testimonials .company font-size: 12px; lettertype-stijl: cursief; text-align: center; marge: 0px; opvulling: 0px; #testimonials .tooltip background: # 111; kleur: #fff; breedte: 200 px; opvulling: 20px; marge: 0 5px 20px; 
 
Afsluiten:
 
We hopen dat dit artikel u helpt tooltip-testimonials toe te voegen aan uw WordPress-thema's. Dit is een heel eenvoudig voorbeeld. Zoals we hierboven vermeldden, kunt u altijd wp_query-argumenten aanpassen om willekeurige getuigevragen te bestellen. U kunt ook de invoegtoepassing Posttypebestelling gebruiken om uw klanten toe te staan ​​de bestelling te bepalen met een eenvoudige drag-drop interface.
 
Als u vragen of suggesties heeft, kunt u hieronder een reactie achterlaten.