Cum de a adăuga jQuery Tooltips în formularul de comentarii WordPress

Comentariile permit utilizatorilor să se angajeze cu conținutul de pe site-ul dvs. Web. Din acest motiv, considerăm că este important să aliniați aspectul comentariilor și formularul de comentarii, astfel încât să fie ușor de utilizat și binefăcător. Recent, un utilizator ne-a întrebat cum pot adăuga tooltip-urile jQuery în formularul de comentarii WordPress. Am crezut că și alții ar putea găsi acest lucru util. În acest tutorial, vă vom arăta cum să adăugați sfaturi pentru jQuery în formularul de comentarii WordPress.

De ce adăugați jQuery Tooltips?

Indicațiile de apariție apar atunci când un utilizator ia mouse-ul la un element, de obicei oferindu-le o descriere despre acel element anume. În acest tutorial, vom adăuga jQuery tooltips pentru a afișa sfaturi cum ar fi: Vă rugăm să folosiți numele dvs. real în câmpurile formularului de comentariu.

Prin adăugarea de sfaturi pentru jQuery, puteți îmbunătăți experiența utilizatorului și va arăta mai bine.

Cum se adaugă jQuery Tooltips

Primul lucru pe care trebuie să-l faceți este să creați un dosar pe desktop și să-l numiți WPB-comment-ponturile. În interiorul acestui dosar, trebuie să creați aceste trei fișiere:

• WPB-comment-tooltips.php
• WPB-tooltip.css
• WPB-tooltip.js

Utilizați un editor de text simplu ca Notepad pentru a crea aceste fișiere. După ce ați creat fișierele, trebuie să deschideți WPB-comment-tooltip.php în editorul de text. Copiați și inserați acest cod în fișier:

 ". __ ("E-mail", "douăzeci și optsprezece"). ''. ($ req? '*': ")".
„; câmpuri $ '[' url '] ='
". __ ("Site-ul web", "douăzeci și patrusprezece"). ''. '
„; $ fields ['autor'] = '
". ''. __ ("Nume", "douăzeci și cincea"). ''. ($ req? '*': ")".
„; returnați câmpurile $;  add_filter ('comment_form_default_fields', 'alter_comment_form_fields'); ?> 

În codul de mai sus, am creat mai întâi un antet de plugin, având în vedere acest plugin un nume și o descriere. După aceea, încărcați fișierul JavaScript și CSS (consultați ghidul nostru despre cum să adăugați JavaScript și stiluri în WordPress).

De asemenea, ne asigurăm că aceste fișiere sunt încărcate numai când se afișează un formular de comentarii. După aceea, am modificat formularul de comentariu implicit și am adăugat atributul titlu în câmpurile de introducere. Acest atribut titlu conține mesajul pe care dorim să îl afișăm în tooltip. De exemplu, în câmpul autorului am folosit:

title = "Vă rugăm să utilizați numele dvs. real, fără cuvinte cheie."

Acum, că ați creat fișierul plugin, este timpul să adăugați un mic jQuery. Deschis WPB-tooltip.js fișier și adăugați acest cod în interiorul acestuia:

 (funcția ($) $ ("#commentform") .tooltip (position: my: "center bottom-10", la: "center top". css (poziție); $ ("") .addClass ("arrow") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (aceasta););) (jQuery); 

În acest cod, #commentform este selectorul în care jQuery va afișa sfaturi și .tooltip este partea de continut in care am definit pozitia pentru sfaturi.

Acum, ultimul pas este să adăugați un mic CSS WPB-tooltip.css fişier. Pur și simplu copiați și lipiți acest cod:

 .ui-tooltip, .arrow: după background: # 356aa0; margine: 2 pix solid alb;  .ui-tooltip padding: 10px 20px; culoare albă; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: majuscule; box-shadow: 0 0 7px # 356aa0; max-width: 350px;  .arrow width: 70px; înălțime: 16px; overflow: ascuns; poziția: absolută; stânga: 50%; margin-stânga: -35px; fund: -16px;  .arrow.top top: -16px; fund: auto;  .arrow.left stânga: 20%;  .arrow: după content: ""; poziția: absolută; stânga: 20px; top: -20px; lățime: 25px; înălțime: 25px; box-shadow: 6px 5px 9px -9px # 356aa0; -webkit-transform: rotiți (45deg); -moz-transform: rotiți (45deg); -ms-transform: rotire (45deg); -o-transform: roti (45deg); tranformă: rotiți (45deg);  .arrow.top: după bottom: -20px; top: auto;  

Simțiți-vă liber să modificați acest fișier CSS pentru a vă satisface nevoile.

Asta e tot. Acum ați creat cu succes un plugin care adaugă sfaturi jQuery în formularul de comentarii WordPress. Tot ce trebuie să faceți este să încărcați WPB-comment-ponturile folder de pe desktop la / Wp-content / plugins / director pe serverul dvs. web folosind un client FTP, cum ar fi Filezilla. Odată ce ați încărcat plugin-ul, mergeți la Plugin-uri în zona de administrare WordPress și activați pluginul.

Sperăm că acest tutorial vă va ajuta să învățați cum să adăugați sfaturi pentru jQuery în formularul de comentarii WordPress. Vă încurajăm să modificați acest cod și să încercați să adăugați sfaturi de orientare în alte locuri. De exemplu, verificați modul în care am adăugat mărturii la site-ul nostru. Pentru feedback și întrebări, vă rugăm să lăsați un comentariu mai jos.