Slik legger du til Tooltip-testimonials i WordPress-temaer

Slik legger du til Tooltip-testimonials i WordPress-temaer / temaer

Tidligere har vi vist deg hvordan du legger til roterende testimonials i WordPress. Mens du opprettet den nye destinasjonssiden for WPBeginner WordPress Video, tok vi inspirasjon fra noe som vi har sett StudioPress å gjøre for en stund. Det viser vitnesbyrd i et verktøytips når brukeren bringer musen over på et bilde. Denne teknikken blir en industristandard fordi vi har sett andre folk som bruker det også. I denne artikkelen vil vi vise deg hvordan du legger til verktøytip-testimonials popup i WordPress.

Endelig resultat

Dette er hva sluttproduktet vil se ut. Hvis du tar musen over på en persons bilde, vil den vise en testtips for verktøytips. Du kan se live-demoen her. Denne artikkelen vil imidlertid trolig overleve live demoen, så legger du til et skjermbilde nedenfor:

Bakgrunn:

Fra det vi har hørt fra eksperter i bransjen, viser det seg å ha en personlig følelse på siden med å vise fremtredende menneskelige ansikter. Dette er grunnen til at vi ønsket å gå denne ruten. Vi gjorde et enkelt google-søk for å komme over Loren Nasons artikkel. I det han hovedsakelig markerte koden som StudioPress brukte. Den beste delen om StudioPress er deres støtte. Som Loren beskrev, da han spurte Brian Gardner om hvordan han skapte vitnemålene på hans nettsted, sendte Brian bare over et eksempelfil.

Det største problemet var at de ganske enkelt hardkodte funksjonen i sin mal. Selv om dette ville fungere bra for oss utviklere, er det ikke en ideell løsning hvis du leverer nettstedet til en klient? Vi ønsket å få en løsning der vi gir kunden muligheten til å legge til / fjerne testimonials etter ønske. Dette er grunnen til at vi bestemte oss for å bruke tilpassede posttyper og metafelt for å oppnå dette sammen med jQuery.

Egendefinerte innleggstyper og metakasser

Vi trenger klienten til å ha muligheten til å gjøre følgende:

  • Legg til brukerens bilde (miniatyrbilder)
  • Legg til brukerens navn (Posttittel)
  • Legg til tilbakemeldingstekst (Post Body)
  • Klientens posisjon i selskap (tilpasset felt eller meta boks)

Første ting vi gjorde var å legge til en egendefinert innleggstype kalt Testimonials som fikk oss alt unntatt ett felt (klient posisjon / selskap). Det er opp til deg hvis du vil legge til en egendefinert meta-boks, eller la kunden bruke egendefinerte felt. Vi sier at vi ikke kan være lat og gi våre kunder en flott backend-opplevelse, selv om det krever å legge til noen ekstra kodenes linjer.

Alt du trenger å gjøre er å ta koden under og lagre den i en tom php-fil som heter tooltip-testimonials.php eller noe annet navn for det skylden.

  _x ('Testimonials', 'testimonial'), 'singular_name' => _x ('testimonial', 'testimonial'), 'add_new' => _x ('Legg til nytt', 'testamente'), 'add_new_item' => _x ('Legg til ny testamente', 'testamente'), 'edit_item' => _x ('Rediger testamente', 'testamente'), 'new_item' => _x ('Ny testamente', 'testamente'), 'view_item' = ' > _x ('Vis testimonial', 'testimonial'), 'search_items' => _x ('Søk på testimonials', 'testimonial'), 'not_found' => _x ('Ingen testamente funnet', 'testamente'), 'not_found_in_trash '=> _x (' Ingen bekreftelser funnet i Papirkurv ',' testamente '),' parent_item_colon '=> _x (' Foreldreattest: ',' testamente '),' menynavn '=> _x (' Testimonials ',' testimonial ' ),); $ args = array ('labels' => $ etiketter, 'hierarkisk' => false, 'supports' => array ('tittel', 'editor', 'utdrag', 'forfatter', 'miniatyrbilde' felt ',' revisjoner '),' public '=> sant,' show_ui '=> sant,' show_in_menu '=> sant,' show_in_nav_menus '=> sant,' publicly_queryable '=> sant,' exclude_from_search '=> 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'innlegg'); register_post_type ('testimonial', $ args);  // Custom Meta Box $ key = "testimonial"; $ meta_boxes = array ("position" => array ("navn" => "posisjon", "title" => "posisjon og selskap", "beskrivelse" => "skriv inn sin posisjon og deres firmanavn.")); funksjon create_meta_box () global $ key; hvis (function_exists ('add_meta_box'))) add_meta_box ('new meta-boxes', ucfirst ($ key). 'Informasjon', 'display_meta_box', 'testimonial', 'normal', 'high');  funksjon display_meta_box () global $ post, $ meta_boxes, $ key; ?> ID, $ nøkkel, sant); ?>