Hur man lägger till informativa vittnesmål om verktyg i ett WordPress-tema

Tidigare visade vi dig hur du lägger till pivotsatser till WordPress. Genom att skapa en ny WordPress-videosajt av WPBeginner blev vi inspirerade av något vi sett StudioPress göra ett tag. Den visar vittnesmål i ett verktygstips när användaren svävar över ett foto. Denna teknik håller på att bli en industristandard eftersom vi har sett andra använda den också. I den här artikeln kommer vi att visa dig hur du lägger till popup-fönster i WordPress.

slutresultat

Så här ser slutprodukten ut. Om du håller muspekaren över en persons foto visas ett verktygstips. Du kan se demonstrationerna live här. Men det här inlägget kommer förmodligen att överleva livedemonstrationen, så jag har bifogat en skärmdump nedan:

Bakgrund:

Baserat på vad vi har hört från branschexperter, sticker mänskliga ansikten ut för att visa personliga känslor på sidan. Det är därför vi vill gå den här vägen. Vi gjorde en enkel Google-sökning för att hitta Loren Nasons artikel. I den lyfte han främst fram koden som StudioPress använde. Det bästa med StudioPress är dess stöd. Som Loren beskrev, när han frågade Brian Gardner hur han skapar vittnesmål på sin webbplats, skickade Brian helt enkelt en exempelfil.

Det största problemet är att de helt enkelt hårdkodat funktionen i sin mall. Även om detta kommer att fungera bra för våra utvecklare, är det inte en idealisk lösning om du lämnar över sajten till en kund? Vi ville ha en lösning där vi låter klienten lägga till/ta bort vittnesmål när som helst. Därför bestämde vi oss för att använda anpassade inläggstyper och metafält för att uppnå detta tillsammans med jQuery.

Anpassade inläggstyper och metatabeller

Vi behöver kunder för att kunna:

Lägg till användarfoto (miniatyrbild)
Lägg till användarnamn (inläggets titel)
Lägg till kommandotext (meddelandetext)
Kundens plats i företaget (anpassat fält eller målruta)

Det första vi gjorde var att lägga till en anpassad inläggstyp som heter Testimonials som gav oss allt utom ett fält (kund/företagsplats). Det är upp till dig om du vill lägga till en anpassad metabox eller låta dina kunder använda anpassade fält. Vi säger att vi inte ska vara lata och ge våra kunder en fantastisk back-end-upplevelse, även om det kräver att du lägger till några extra rader kod.

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

Det är här WordPress-konfigurationsverktyget kommer in i spelet med den nya serien. Ahora, samt en samling vittnesmål för de flesta senap. Recapitulemos och donde och cada Elemento.

Lägg till användarfoto (miniatyr/utvald bild). Vi har konfigurationen för att ändra storlek på den till 96 x 96 px. Det är alltid bättre att följa den relationen.
Lägg till användarnamn (inläggets titel)
Lägg till kommandotext (meddelandetext)
Kundens position inom företaget (i en metaförklaring av rekommendationer)

Se i tråden

Testverktygen för verktygstips är främst för anpassade teman, så det kommer att kräva att du blir smutsig med några tematweaks. Eftersom varje tema har olika storlekar, färgscheman och stilar, bestämde vi oss för att starta det här inlägget som en guide snarare än ett plugin. Så här visar du verktygstips i ditt WordPress-tema:

Lägg till anpassad jQuery-kod till temat.
Skapa en anpassad loop som visar vittnesmålet om strukturen vi vill ha.
Lägg till lite 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 (dokumentation). yet(function() {

jQuery (“# ​​​​imgHur rekommendationer för att lägga till verktygstips i WordPress-teman”). verktygstips ({

// justera position
kompensera: [0, 0],

// använd “slide”-effekten
effekt: ‘slide’

// lägg till dynamiskt plugin med valfri nedre kantkonfiguration
}). Dynamic({bottom: {direction: ‘down’, bounce: true}});

});

När du har gjort det bör vi ladda upp den här filen i ditt temas rubrik. Du kan välja att göra detta manuellt genom att redigera filen header.php och klistra in skriptkoden i ditt rubrikområde, eller följa WP bästa praxis och använda funktionen wp_enqueue_script. Fortsätt och ladda vår tooltip-testimonials.js-fil i ditt temas skriptmapp. Om det inte finns, skapa bara en katalog som heter skript.

Lägg till följande kod till ditt temas .php-fil:

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″,” Skämtar “,”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 när vi har det, låt oss skapa en anpassad loop som gör att vi kan se dessa verktygstipssatser med användarbilder i ett rutnätsbaserat format. Öppna filen där du vill att dessa vittnesmål ska visas. Oavsett om det är din sidofält, din webbplats eller var du vill att den ska vara. Klistra sedan in följande slinga:

Slingkoden ovan visar 6 element på sidan. Du kan designa dem hur du vill. Du kan till och med lägga till en beställning med =rand om du har plus eller minus 20 omdömen. Det kan bli 6 slumpmässiga visningar.

Låt oss nu lägga till lite CSS-styling för att få det att se bra ut. Här är ett exempel på den CSS vi använder. Du kan behöva justera det baserat på temastil, färgschema, etc.

#testimonials .testimonials {width: 116px; flyta till vänster; marginal: 35px 30px 0 0;}

#testimonials .center {text-align: center; marginal: 0px 0 15px ;; stoppning: 0px;}

#testimonials .center img {box-shadow: 0px 2px 2px # d2d2d2; -moz-box-shadow: 0px 2px 2px # d2d2d2; -webkit-box-shadow: 0px 2px 2px # d2d2d2; kantlinje: 3px fast #fff;}

#testimonials .testimonials-title {font-size: 14px; teckensnittsvikt: 700; text-align: center; marginal: 3px 0 0; stoppning: 0px;}

#testimonials .company {font-size: 12px; typsnitt: kursiv; text-align: center; marginal: 0px; stoppning: 0px;}

#testimonials .tooltip {bakgrund: #111; färg: #fff; bredd: 200px; stoppning: 20px; marginal: 0 5px 20px;}

Slutlig:

Vi hoppas att den här artikeln hjälpte dig att lägga till vittnesmål om dina WordPress-teman. Detta är ett mycket grundläggande exempel. Som nämnts tidigare kan du alltid justera wp_query-argumenten så att de får en slumpmässig president. Du kan också använda insticksprogrammet för beställning av bokstavstyp för att låta dina kunder definiera beställningar med ett enkelt dra och släpp-gränssnitt.

Om du har några frågor eller förslag, vänligen lämna en kommentar nedan.