Come aggiungere Testimonianze di Tooltip nei temi di WordPress

In passato, ti abbiamo mostrato come aggiungere testimonianze rotanti in WordPress. Durante la creazione della nuova pagina di destinazione per i video WordPress WPBeginner, ci siamo ispirati a qualcosa che abbiamo visto StudioPress da tempo. Questo è mostrare testimonianze in un suggerimento quando l'utente porta il mouse su una foto. Questa tecnica sta diventando uno standard del settore perché abbiamo visto anche altre persone che lo utilizzano. In questo articolo, ti mostreremo come aggiungere popup di testimonianze di tooltip in WordPress.

Risultato finale

Questo è come sarà il prodotto finale. Se porti il ​​mouse sulla foto di una persona, mostrerà una testimonianza del tooltip. Puoi vedere la demo dal vivo qui. Tuttavia, questo articolo probabilmente sopravviverà alla demo live, quindi allegando uno screenshot qui sotto:

Sfondo:

Da quello che abbiamo sentito da esperti del settore, mostrare volti umani prominenti tende ad aggiungere un sentimento personale alla pagina. Questo è il motivo per cui abbiamo voluto seguire questa strada. Abbiamo fatto una semplice ricerca su google per trovare l'articolo di Loren Nason. In cui ha essenzialmente evidenziato il codice utilizzato da StudioPress. La parte migliore di StudioPress è il loro supporto. Come ha descritto Loren, quando ha chiesto a Brian Gardner come ha creato le testimonianze sul suo sito, Brian ha semplicemente inviato un file di esempio.

Il problema più grosso è che hanno semplicemente codificato la funzione nel proprio modello. Mentre questo potrebbe funzionare bene per noi sviluppatori, non è una soluzione ideale se si sta consegnando il sito Web a un cliente? Volevamo avere una soluzione in cui diamo al cliente la possibilità di aggiungere / rimuovere testimonianze a volontà. Per questo motivo, abbiamo deciso di utilizzare i tipi di post personalizzati e i metadati per realizzare questo insieme al jQuery.

Tipi di post personalizzati e caselle Meta

Abbiamo bisogno che il cliente abbia la capacità di fare quanto segue:

• Aggiungi foto dell'utente (miniature)
• Aggiungi nome utente (Titolo post)
• Aggiungi testo testimonial (corpo postale)
• Posizione del cliente in azienda (campo personalizzato o casella metrica)

La prima cosa che abbiamo fatto è stata aggiungere un post personalizzato chiamato Testimonials che ci ha ottenuto tutto tranne che per un campo (posizione / azienda del cliente). Spetta a te se desideri aggiungere una metabox personalizzata o far utilizzare al tuo cliente campi personalizzati. Diciamo che non dobbiamo essere pigri e dare ai nostri clienti una grande esperienza di back-end anche se richiede l'aggiunta di alcune righe di codice aggiuntive.

Tutto quello che devi fare è prendere il codice qui sotto e salvarlo in un file php vuoto chiamato tooltip-testimonials.php o qualsiasi altro nome per questo bene.

  _x ('Testimonials', 'testimonial'), 'singular_name' => _x ('testimonial', 'testimonial'), 'add_new' => _x ('Aggiungi nuovo', 'testimonial'), 'add_new_item' => _x ('Aggiungi nuovo testimonial', 'testimonial'), 'edit_item' => _x ('Modifica testimonial', 'testimonial'), 'new_item' => _x ('Nuovo testimonial', 'testimonial'), 'view_item' = > _x ('Visualizza testimonial', 'testimonial'), 'search_items' => _x ('Cerca testimonianze', 'testimonial'), 'not_found' => _x ('Nessuna testimonianza trovata', 'testimonial'), 'not_found_in_trash '=> _x (' Nessuna testimonianza trovata nel Cestino ',' testimonial '),' parent_item_colon '=> _x (' Parent testimonial: ',' testimonial '),' menu_name '=> _x (' Testimonianze ',' 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,' public_queryable '=> true,' exclude_from_search '=> falso, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('testimonial', $ args);  // Metabox personalizzata $ key = "testimonial"; $ meta_boxes = array ("position" => array ("name" => "position", "title" => "Position and Company", "description" => "Inserire la loro posizione e il nome della propria azienda.")); function create_meta_box () global $ key; if (function_exists ('add_meta_box')) add_meta_box ('new-meta-boxes', ucfirst (chiave $). 'Informazioni', 'display_meta_box', 'testimonial', 'normal', 'high');  function display_meta_box () global $ post, $ meta_boxes, $ key; ?> ID, $ key, true); ?>         
Questo ci porterà la configurazione di base di WordPress di cui abbiamo bisogno per iniziare. Ora, è necessario iniziare ad aggiungere alcune testimonianze, in modo da poterlo visualizzare. Ricapitoliamo dove ogni elemento sta andando.
 
 
Aggiungi foto dell'utente (miniature / immagine in primo piano). Abbiamo impostato per ridimensionarlo di 96 x 96 px. È sempre meglio seguire quel rapporto.
 
Aggiungi nome utente (Titolo post)
 
Aggiungi testo testimonial (corpo postale)
 
Posizione del cliente in azienda (in una casella di informazioni sulle testimonianze)
 
 
Visualizzazione in tema
 
Le testimonianze di Tooltip sono principalmente pensate per temi personalizzati, quindi sì, sarà necessario sporcarsi le mani con alcune modifiche ai temi. Poiché ogni tema ha dimensioni, schemi di colori e stili diversi, abbiamo deciso di rilasciarlo come tutorial piuttosto che come plug-in. Ecco cosa faremo per visualizzare le testimonianze di tooltip nel tuo tema WordPress:
 
 
Aggiungi un codice jQuery personalizzato nel tema.
 
Crea un ciclo personalizzato che mostrerà le testimonianze in una struttura che vogliamo.
 
Aggiungi alcuni CSS di base per renderlo carino
 
 
La prima cosa che devi fare è copiare e incollare il seguente codice jQuery e salvarlo in un file vuoto chiamato tooltip-testimonials.js:
 
 jQuery (document) .ready (function () jQuery ("# ​​testimonials img [title]"). tooltip (// modifica l'offset di posizione: [0, 0], // usa l'effetto dell'effetto "slide": ' slide '// aggiungi plugin dinamico con configurazione opzionale per il bordo inferiore). dynamic (bottom: direction:' down ', bounce: true);); 
 
Una volta fatto, dobbiamo caricare questo file nell'intestazione del tema. Puoi scegliere di farlo manualmente modificando il file header.php e incollando un codice di script nell'area della testa, oppure segui la best practice del WP e usa la funzione wp_enqueue_script. Andiamo avanti e carica il nostro file tooltip-testimonials.js nella cartella degli script del nostro tema. Se non esiste, quindi basta creare una cartella chiamata script.
 
Aggiungi il seguente codice al file functions.php del tuo tema:
 
 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', vero); wp_enqueue_script ( 'jquery_tools'); wp_register_script ('tooltip', get_stylesheet_directory_uri (). '/scripts/tooltip-testimonials.js', 'jquery', '1', vero); wp_enqueue_script ( 'tooltip');  
 
Ora che abbiamo questo, creiamo un ciclo personalizzato che ci permetterà di mostrare queste testimonianze di tooltip con le immagini dell'utente in un formato basato sulla griglia. Apri il file dove vuoi che vengano visualizzate queste testimonianze. Che si tratti della tua barra laterale, della tua home page o ovunque tu voglia. Quindi incollare il seguente loop:
 
    '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', vero); $ user_image_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ loop-> post-> ID), 'testimonial-thumb'); ?>  
       
 
Il codice del loop sopra mostrerà 6 elementi sulla pagina. Puoi modellarli come preferisci. Puoi persino aggiungere orderby = rand se hai circa 20 testimonianze. È possibile visualizzare 6 a caso.
 
Ora aggiungiamo alcuni stili CSS per renderlo bello. Di seguito è riportato un esempio di CSS che abbiamo utilizzato. Probabilmente dovresti regolarlo in base agli stili del tuo tema, alle combinazioni di colori ecc.
 
 #testimonials .testimonials width: 116px; fluttuare: a sinistra; margine: 35px 30px 0 0; #testimonials .center text-align: center; margine: 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 font-size: 14px; font-weight: 700; allineamento del testo: centro; margine: 3px 0 0; padding: 0px; #testimonials .company font-size: 12px; stile di carattere: corsivo; allineamento del testo: centro; margine: 0px; padding: 0px; #testimonials .tooltip background: # 111; colore: #fff; larghezza: 200 px; imbottitura: 20px; margine: 0 5px 20px; 
 
Avvolgendo:
 
Speriamo che questo articolo ti aiuti ad aggiungere testimonianze di tooltip nei tuoi temi WordPress. Questo è un esempio molto semplice. Come accennato in precedenza, puoi sempre regolare gli argomenti di wp_query per avere un ordine di testimonianze casuali. Puoi anche utilizzare l'opzione Tipi di post del plugin per consentire ai tuoi clienti di determinare l'ordine con un'interfaccia drag-drop facile.
 
Se avete domande o suggerimenti, sentitevi liberi di lasciare un commento qui sotto.