Cum se adaugă Testele de Tooltip în teme WordPress

În trecut, v-am arătat cum să adăugați mărturii rotative în WordPress. În timp ce creăm noua pagină de destinație pentru Videoclipurile WPBeginner WordPress, ne-am inspirat din ceva pe care l-am văzut de ceva timp StudioPress. Aceasta este afișarea mărturiilor într-un simbol atunci când utilizatorul își aduce mouse-ul pe o fotografie. Această tehnică devine un standard industrial deoarece am văzut și alți oameni care o foloseau. În acest articol, vă vom arăta cum să adăugați popup-uri de mărci de instrucțiuni în WordPress.

Rezultat final

Acesta este rezultatul produsului final. Dacă vă aduceți mouse-ul peste fotografia unei persoane, acesta va afișa o dovadă a instrumentului. Puteți vedea demo-ul live aici. Cu toate acestea, acest articol va supraviețui probabil demo-ului live, atașând astfel o captură de ecran de mai jos:

Fundal:

Din ceea ce am auzit de la experții din industrie, aratăți chipuri umane proeminente tinde să adăugați un sentiment personal la pagină. Acesta este motivul pentru care am vrut să mergem pe acest traseu. Am făcut o căutare simplă pe Google pentru a vedea articolul lui Loren Nason. În care a subliniat esențial codul folosit de StudioPress. Cea mai bună parte despre StudioPress este suportul lor. Așa cum a descris Loren, când la întrebat pe Brian Gardner despre cum a creat mărturiile pe site-ul său, Brian a trimis pur și simplu un fișier exemplu.

Cea mai mare problemă a fost că aceștia au codificat greu această caracteristică în șablonul lor. În timp ce acest lucru ar funcționa bine pentru dezvoltatorii noștri, nu este o soluție ideală dacă predați site-ul unui client? Am vrut să avem o soluție în care să oferim clientului posibilitatea de a adăuga / elimina mărturiile la alegere. De aceea, am decis să folosim tipurile personalizate de posturi și câmpurile meta pentru a realiza acest lucru împreună cu jQuery.

Tipuri personalizate de posturi și metale

Avem nevoie ca clientul să aibă capacitatea de a face următoarele:

• Adăugați o fotografie a utilizatorului (miniaturi)
• Adăugați numele utilizatorului (titlul postării)
• Adăugați un text de testare (post)
• Poziția clientului în companie (câmp personalizat sau Meta Box)

Primul lucru pe care l-am făcut a fost să adăugăm un tip de post personalizat, numit Testimonials, care ne-a oferit totul, cu excepția unui singur domeniu (poziția / compania clientului). Depinde de dvs. dacă doriți să adăugați o casetă de metadate personalizată sau să folosiți câmpurile personalizate ale clientului dvs. Spunem ca nu trebuie sa fim lenesi si sa oferim clientilor nostri o experienta de backend mare chiar daca necesita adaugarea a cateva linii suplimentare de cod.

Tot ce trebuie să faceți este să luați codul de mai jos și să îl salvați într-un fișier php gol denumit tooltip-testimonials.php sau orice alt nume pentru acel motiv.

  _x ('Testimonials', 'testimonial'), 'singular_name' => _x ('testimonial', 'testimonial'), 'add_new' => _x ("Adăugați o nouă recenzie", "testimonial"), "edit_item" => _x ("editați mărturie", "mărturie"), "new_item" => > '_x' ('Nu există mărturii găsite', 'testimonial'), 'not_found_in_trash', 'not_found' => '=> _x ("Nu s-au găsit mărturii în coșul de gunoi", "mărturie"), "parent_item_colon" => _x (" ),); $ args = array ('labels' => etichete $, 'hierarchical' => false, 'supports' => , "public" => true, "show_in_menu" => true, 'show_in_nav_menus' => true, 'publicly_queryable' 'has_archive' => true, 'query_var' => adevărat, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('mărturie', $ args);  // Custom Meta Box $ key = "mărturie"; $ meta_boxes = array ("position" => array ("name" => "position", "title" => "Position and Company", "description" => " funcția create_meta_box () cheie globală $; dacă function_exists ('add_meta_box')) add_meta_box ('new-meta-boxes', ucfirst (cheia $));  funcția display_meta_box () global $ post, $ meta_boxes, $ key; ?> ID, cheia $, adevărat); ?>         
Acest lucru ne va aduce configurația de bază WordPress de care trebuie să începem. Acum, trebuie să începeți adăugarea unor mărturii, astfel încât să le puteți afișa. Să recapitulăm unde merge fiecare element.
 
 
Adăugați o fotografie a utilizatorului (miniaturi / imagine recomandată). Am setat-o ​​să-l redimensioneze cu 96 x 96 px. Este întotdeauna mai bine să urmăriți acest raport.
 
Adăugați numele utilizatorului (titlul postării)
 
Adăugați un text de testare (post)
 
Poziția clientului în companie (într-o martor informativ)
 
 
Afișarea în Temă
 
Punctul de vedere al martorilor este destinat în principal temelor personalizate, așa că da, va fi nevoie de obținerea mâinilor murdare cu unele editare temă. Deoarece fiecare temă are dimensiuni diferite, scheme de culori și stiluri, am decis să lansăm acest lucru ca un tutorial mai degrabă decât un plugin. Iată ce vom face pentru a afișa mărturiile tooltip în tema WordPress:
 
 
Adăugați un cod jQuery personalizat în temă.
 
Creați o buclă personalizată care va afișa mărturiile într-o structură pe care o dorim.
 
Adăugați unele CSS de bază pentru a face să arate destul
 
 
Primul lucru pe care trebuie să-l faceți este să copiați și să lipiți următorul cod jQuery și să îl salvați într-un fișier gol numit tooltip-testimonials.js:
 
 jQuery (document) .ready (funcția () jQuery ("# ​​testimonials img [title]") tooltip tweak offset de poziție: [0, 0] slide // adăugați pluginul dinamic cu configurație opțională pentru marginea de jos) dinamic (jos: direcție: "în jos", bounce: true);); 
 
Odată ce ați făcut acest lucru, trebuie să încărcați acest fișier în antetul temei. Puteți alege fie să faceți acest lucru manual, editând fișierul header.php și inserând un cod de script în zona capului, fie urmând cele mai bune practici ale WP și utilizând funcția wp_enqueue_script. Să mergem mai departe și să încărcăm fișierul tooltip-testimonials.js în dosarul de scripturi al temei noastre. Dacă nu există, atunci creați doar un folder denumit script-uri.
 
Adăugați următorul cod în fișierul functions.php al temei:
 
 add_action ('wp_enqueue_scripts', 'tooltip_enqueue_scripts'); funcția 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", adevărat); wp_enqueue_script ( 'jquery_tools'); wp_register_script ('tooltip', get_stylesheet_directory_uri ()) ./scripts/tooltip-testimonials.js ',' jquery ',' 1 ', true); wp_enqueue_script ( 'tooltip');  
 
Acum, avem acest lucru, vă permite să creați o buclă personalizată care să ne permită să afișăm aceste mărturii ale instrumentului cu imaginile utilizatorului într-un format bazat pe grilă. Deschideți fișierul în care doriți ca aceste mărturii să apară. Indiferent dacă este bara laterală, pagina de pornire sau oriunde doriți. Apoi lipiți următoarea buclă:
 
    'testimonial', 'posts_per_page' => 6); $ loop = noua valoare WP_Query ($ args); dacă ($ loop-> have_posts ()): în timp ce ($ 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'); ?>  
       
 
Codul bucla de mai sus va afișa 6 elemente pe pagină. Puteți să-i stilizați oricum alegeți. Puteți adăuga chiar și orderby = rand dacă aveți aproximativ 20 de mărturii. Puteți afișa 6 aleatoriu.
 
Acum, să adăugăm câteva stiluri CSS pentru a arăta frumos. Mai jos este un exemplu de CSS pe care l-am folosit. Probabil că va trebui să o ajustați pe baza stilurilor tematice, a schemelor de culori etc..
 
 #testimonials .testimonials width: 116px; plutește la stânga; 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; frontieră: 3px solid #fff; #testimonials .testimonials-title font-size: 14px; greutatea fontului: 700; text-align: centru; margine: 3px 0 0; padding: 0px; #testimonialscompany font-size: 12px; font-style: italic; text-align: centru; margine: 0px; umplutură: 0px; #testimonials .tooltip background: # 111; culoare: #fff; lățime: 200px; padding: 20px; margine: 0 5px 20px; 
 
Înfășurarea în sus:
 
Sperăm că acest articol vă ajută să adăugați mărturii în tooltip-urile WordPress. Acesta este un exemplu foarte simplu. După cum am menționat mai sus, puteți întotdeauna să ajustați argumentele wp_query pentru a avea o comandă aleatorie a mărturiilor. De asemenea, puteți utiliza pluginul Post Types Order pentru a permite clienților dvs. să determine ordinea cu o interfață drag-drop ușor.
 
Dacă aveți întrebări sau sugestii, vă rugăm să lăsați un comentariu mai jos.