Så här lägger du till Tooltip-testimonials i WordPress-teman

Tidigare har vi visat dig hur du lägger till roterande testimonials i WordPress. Samtidigt som vi skapade den nya målsidan för WPBeginner WordPress Videos, tog vi inspiration från något som vi har sett StudioPress att göra under en tid. Det visar testimonials i ett verktygstips när användaren överför musen till ett foto. Denna teknik blir en industristandard eftersom vi har sett andra som använder det också. I den här artikeln kommer vi att visa dig hur du lägger till verktygstipsuttalanden popup i WordPress.

Slutresultat

Så här ser slutprodukten ut. Om du tar med musen över på en persons foto, kommer den att visa ett verktygstipsutlåtande. Du kan se live demo här. Men den här artikeln kommer sannolikt att överleva den levande demoen, så bifoga en skärmdump nedan:

Bakgrund:

Från vad vi har hört från branschexperter tenderar att visa framstående mänskliga ansikten att lägga till en personlig känsla för sidan. Det är därför vi ville gå denna väg. Vi gjorde en enkel Google-sökning för att komma över Loren Nasons artikel. I vilket han huvudsakligen markerade koden som StudioPress använde. Det bästa med StudioPress är deras stöd. Som Loren beskrev, när han frågade Brian Gardner om hur han skapade vittnesmålen på hans webbplats skickade Brian helt enkelt över en exempelfil.

Den största frågan var att de helt enkelt kodade funktionen i sin mall. Även om detta skulle fungera bra för våra utvecklare, är det inte en idealisk lösning om du delar webbplatsen till en kund? Vi ville ha en lösning där vi ger klienten möjlighet att lägga till / ta bort vittnesmål efter vilja. Det är därför vi bestämde oss för att använda anpassade inläggstyper och metafält för att uppnå detta tillsammans med jQuery.

Anpassade inläggstyper och metakartor

Vi behöver kunden att ha förmåga att göra följande:

• Lägg till användarens foto (miniatyrbilder)
• Lägg till användarens namn (Posttitel)
• Lägg till testtext (Post Body)
• Klientens position i företag (anpassat fält eller metakassa)

Första sak vi gjorde var att lägga till en anpassad posttyp kallad Testimonials som fick oss allt utom ett fält (kundposition / företag). Det är upp till dig om du vill lägga till en anpassad meta-låda eller göra din klient med egna fält. Vi säger att vi inte kan vara lat och ge våra kunder en bra backend-upplevelse, även om det krävs att du lägger till några extra koder.

Allt du behöver göra är att ta koden nedan och spara den i en tom php-fil som heter tooltip-testimonials.php eller något annat namn för den skullen.

  _x ('Testimonials', 'testimonial'), 'singular_name' => _x ('testimonial', 'testimonial'), 'add_new' => _x ('Add New', 'testimonial'), 'add_new_item' => _x ('Lägg till nytt testamente', 'testimonial'), 'edit_item' => _x ('Redigera vittnesmål', 'testimonial'), 'new_item' => _x ('Ny testamente', 'testimonial'), 'view_item' = ' > _x ('Visa testimonials', 'testimonial'), 'search_items' => _x ('Sök testimonials', 'testimonial'), 'not_found' => _x ('Inga testresultat hittades', 'testimonial'), 'not_found_in_trash '=> _x (' Inga vittnesmål finns i papperskorgen ',' testimonial '),' parent_item_colon '=> _x (' Föräldrapresentation: ',' testimonial '),' menu_name '=> _x (' Testimonials ' ),); $ args = array ('labels' => $ etiketter, 'hierarchical' => false, 'supports' => array ('titel', 'redaktör', 'utdrag', 'författare', 'miniatyrbild' fält "," revisioner ")," public "=> true," show_ui '=> true,' show_in_menu '=> true,' show_in_nav_menus '=> true,' publicly_queryable '=> true,' exclude_from_search '=> 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'inlägg'); register_post_type ("testimonial", $ args);  // Custom Meta Box $ key = "testimonial"; $ meta_boxes = array ("position" => array ("namn" => "position", "title" => "Position and Company", "description" => "Ange deras position och deras företagsnamn.")); funktion create_meta_box () global $ key; om function_exists ('add_meta_box')) add_meta_box ('new-meta-boxes', ucfirst ($ key). 'Information', 'display_meta_box', 'testimonial', 'normal', 'high');  funktion display_meta_box () global $ post, $ meta_boxes, $ key; ?> ID, $ key, true); ?>         
Detta kommer att få oss den grundläggande WordPress-inställningen som vi behöver börja med. Nu måste du börja lägga till några vittnesmål, så att du kan visa den. Låt oss sammanfatta var varje element går.
 
 
Lägg till användarens foto (Thumbnails / Featured image). Vi har det inställt att ändra storlek på 96 x 96px. Det är alltid bäst att följa det förhållandet.
 
Lägg till användarens namn (Posttitel)
 
Lägg till testtext (Post Body)
 
Klientens Placering i Företaget (i en Meta Box)
 
 
Visar i teman
 
Tooltip-testimonials är mestadels avsedda för anpassade teman, så ja det kommer att kräva att dina händer smutsas med viss temanedigering. Eftersom varje tema har olika dimensioner, färgscheman och stilar bestämde vi oss för att släppa det här som en handledning snarare än ett plugin. Här är vad vi ska göra för att visa verktygstipsutlåtanden i ditt WordPress-tema:
 
 
Lägg till en anpassad jQuery-kod i temat.
 
Skapa en anpassad slinga som visar testen i en struktur vi vill ha.
 
Lägg till några grundläggande CSS för att få det att se bra ut
 
 
Det första du behöver göra är att kopiera och klistra in följande jQuery-kod och spara den i en tom fil som heter Tooltip-testimonials.js:
 
 jQuery (dokument) .ready (function ) jQuery ("# ​​testimonials img [title]"). verktygstips (// tweak position offset: [0, 0], // använd "slide" effect effect: glida '// lägg till dynamiskt plugin med valfri konfiguration för nedersta kanten). dynamisk (botten: riktning:' ner ', studs: true);); 
 
När du har gjort det måste vi ladda den här filen till ditt temas rubrik. Du kan antingen välja att göra det manuellt genom att redigera din header.php-fil och klistra in en skriptkod i ditt huvudområde, eller följ WPs bästa praxis och använd wp_enqueue_script-funktionen. Låt oss fortsätta och ladda upp vår tooltip-testimonials.js-fil i vårt temas skriptmapp. Om det inte existerar, skapa bara en mapp som heter skript.
 
Lägg till följande kod i ditt temas funktioner.php-fil:
 
 add_action ('wp_enqueue_scripts', 'tooltip_enqueue_scripts'); funktion 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", sant); wp_enqueue_script ( 'jquery_tools'); wp_register_script ('tooltip', get_stylesheet_directory_uri (). '/scripts/tooltip-testimonials.js', 'jquery', '1', true); wp_enqueue_script ( 'verktygstips');  
 
Nu har vi det på plats, låt oss skapa en anpassad slinga som låter oss visa dessa verktygstipsutlåtanden med användarens bilder i ett nätbaserat format. Öppna filen där du vill att dessa testimonialer ska dyka upp. Oavsett om det är ditt sidofält, hemsida eller var du än vill. Klistra sedan in följande slinga:
 
    "testimonial", "posts_per_page '=> 6); $ loop = ny WP_Query ($ args); om ($ loop-> har_posts ()): medan ($ loop-> has_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'); ?>  
       
 
Slingkoden ovan kommer att visa 6 föremål på sidan. Du kan stile dem men du väljer. Du kan till och med lägga till orderby = rand om du har liknande 20 eller så vittnesmål. Du kan få 6 slumpmässigt att visas.
 
Låt oss nu lägga till några CSS-stilar så att den ser snygg ut. Nedan är några exempel CSS som vi använde. Du skulle förmodligen behöva justera det baserat på dina tematyper, färgscheman mm.
 
 #testimonials .testimonials width: 116px; flyta till vänster; marginal: 35px 30px 0 0; #testimonials .center text-align: center; marginal: 0px 0 15px ;; vaddering: 0px; #testimonials .center img box-shadow: 0px 2px 2px # d2d2d2; -moz-box-skugga: 0px 2px 2px # d2d2d2; -webkit-box-skugga: 0px 2px 2px # d2d2d2; border: 3px solid #fff; #testimonials .testimonials-title font-size: 14px; font-vikt: 700; text-align: center; marginal: 3px 0 0; vaddering: 0px; #testimonials .company font-size: 12px; typsnittstyp: kursiv; text-align: center; marginal: 0px; vaddering: 0px; #testimonials .tooltip background: # 111; färg: #fff; bredd: 200px; vaddering: 20px; marginal: 0 5px 20px; 
 
Avslutar:
 
Vi hoppas att den här artikeln hjälper dig att lägga till testtips i WordPress-teman. Detta är ett mycket grundläggande exempel. Som vi nämnde ovan kan du alltid justera wp_query-argument för att få slumpmässiga testimonials order. Du kan också använda plugin-posttypbeställningen så att dina kunder kan bestämma ordern med ett enkelt drag-drop-gränssnitt.
 
Om du har några frågor eller förslag, var god att lämna en kommentar nedan.