Hoe jQuery Tooltips toe te voegen in WordPress Comment Form

Reacties stellen gebruikers in staat om zich bezig te houden met de inhoud op uw website. Daarom zijn we van mening dat het belangrijk is om uw commentaarlay-out en commentaarformulier te stylen, dus het is gebruiksvriendelijk en ziet er goed uit. Onlangs heeft een gebruiker ons gevraagd hoe ze jQuery-tooltips aan het commentaarformulier van WordPress konden toevoegen. We dachten dat anderen dit ook nuttig zouden kunnen vinden. In deze zelfstudie laten we u zien hoe u jQuery-tooltips toevoegt in het WordPress-reactieformulier.

Waarom jQuery-tooltips toevoegen?

Knopinfo wordt weergegeven wanneer een gebruiker met de muis naar een item gaat en meestal een beschrijving van dat item geeft. In deze zelfstudie zullen we jQuery-tooltips toevoegen om tips te geven zoals, gebruik alstublieft uw echte naam in velden van het commentaarformulier.

Door jQuery-tooltips toe te voegen, kunt u de gebruikerservaring verbeteren en ziet het er mooier uit.

Hoe jQuery Tooltips toe te voegen

Allereerst moet u een map op uw bureaublad maken en een naam geven PVDA-commentaar-tooltips. In deze map moet u deze drie bestanden maken:

• PVDA-commentaar-tooltips.php
• PVDA-tooltip.css
• PVDA-tooltip.js

Gebruik een gewone teksteditor zoals Notepad om deze bestanden te maken. Nadat u de bestanden hebt gemaakt, moet u openen PVDA-commentaar-tooltip.php in teksteditor. Kopieer en plak deze code in het bestand:

 '. __ ('Email', 'twentythirteen'). ''. ($ req? '*': "). '
'; $ fields ['url'] = '
'. __ ('Website', 'twentythirteen'). ''. '
'; $ fields ['author'] = '
'. ''. __ ('Naam', 'twintig dertien'). ''. ($ req? '*': "). '
'; return $ velden;  add_filter ('comment_form_default_fields', 'alter_comment_form_fields'); ?> 

In de bovenstaande code hebben we eerst een plug-in header gemaakt, met deze plugin een naam en beschrijving. Hierna laden we ons JavaScript- en CSS-bestand (zie onze handleiding over het toevoegen van JavaScript en stijlen in WordPress).

We zorgen er ook voor dat deze bestanden alleen worden geladen wanneer een reactieformulier wordt weergegeven. Daarna hebben we het standaard commentaarformulier aangepast en het titelkenmerk in invoervelden toegevoegd. Dit titelkenmerk bevat het bericht dat we in de tooltip willen weergeven. In het auteursveld hebben we bijvoorbeeld het volgende gebruikt:

title = "Gebruik alstublieft uw echte naam, geen trefwoorden."

Nu je het plugin-bestand hebt aangemaakt, is het tijd om een ​​beetje jQuery toe te voegen. Open PVDA-tooltip.js bestand en voeg deze code erin toe:

 (functie ($) $ ("#commentform") .tooltip (position: my: "center bottom-10", at: "centre top", met behulp van: functie (positie, feedback) $ (this). css (positie); $ ("") .addClass ("arrow") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (this););) (jQuery); 

In deze code, #commentform is de selector waar jQuery tooltips zal weergeven en .tooltip is het contentgedeelte waar we de positie voor tooltips hebben gedefinieerd.

Nu is de laatste stap om een ​​beetje CSS toe te voegen PVDA-tooltip.css het dossier. Kopieer en plak gewoon deze code:

 .ui-tooltip, .arrow: after background: # 356aa0; rand: 2px effen wit;  .ui-tooltip opvulling: 10px 20px; kleur wit; grensradius: 20px; lettertype: vet 14px "Helvetica Neue", Sans-Serif; text-transform: hoofdletters; vakschaduw: 0 0 7px # 356aa0; max-width: 350px;  .arrow width: 70px; hoogte: 16 px; overloop verborgen; positie: absoluut; links: 50%; marge links: -35px; onderaan: -16px;  .arrow.top top: -16px; onderaan: auto;  .arrow.left left: 20%;  .arrow: after content: ""; positie: absoluut; links: 20px; top: -20px; breedte: 25px; hoogte: 25px; vakschaduw: 6px 5px 9px -9px # 356aa0; -webkit-transform: roteren (45deg); -moz-transform: roteren (45 graden); -ms-transformatie: roteren (45 graden); -o-transform: roteer (45 graden); tranform: roteren (45deg);  .arrow.top: after bottom: -20px; top: auto;  

U kunt dit CSS-bestand aanpassen aan uw behoeften.

Dat is alles. Nu hebt u met succes een plug-in gemaakt die jQuery-tooltips toevoegt in uw WordPress-opmerkingenformulier. Het enige dat u hoeft te doen, is uploaden PVDA-commentaar-tooltips map van uw bureaublad naar / Wp-content / plugins / map op uw webserver met behulp van een FTP-client zoals Filezilla. Zodra u de plug-in heeft geüpload, gaat u naar plugins pagina in WordPress admin gebied en activeer de plugin.

We hopen dat deze tutorial u heeft geholpen om te leren hoe u jQuery-tooltips kunt toevoegen in het commentaarformulier van WordPress. We raden u aan deze code te wijzigen en te proberen tooltips aan andere plaatsen toe te voegen. Bekijk bijvoorbeeld hoe we tooltip-testimonials aan onze site hebben toegevoegd. Laat voor feedback en vragen hieronder een reactie achter.