Så här lägger du till jQuery Tooltips i WordPress Kommentarformulär

Kommentarer tillåter användare att engagera sig med innehållet på din webbplats. Det är därför vi tror att det är viktigt att ställa in dina kommentarer layout och kommentarform, så det är användarvänligt och snyggt. Nyligen frågade en användare oss hur de kan lägga till jQuery-verktygstips till WordPress-formuläret. Vi trodde att andra skulle kunna finna det här användbart också. I den här handledningen visar vi dig hur du lägger till jQuery-verktygstips i WordPress-formuläret.

Varför Lägg till jQuery Tooltips?

Verktygstips visas när en användare tar musen till ett objekt, vanligtvis ger dem beskrivning om det aktuella objektet. I den här handledningen lägger vi till jQuery verktygstips för att visa tips som, använd ditt riktiga namn i kommentarfältet fält.

Genom att lägga till jQuery-verktygstips kan du förbättra användarupplevelsen och det blir snyggare.

Så här lägger du till jQuery Tooltips

Först måste du skapa en mapp på skrivbordet och namnge den WPB-comment-verktygstips. Inne i den här mappen måste du skapa dessa tre filer:

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

Använd en vanlig textredigerare som Anteckningsblock för att skapa dessa filer. När du har skapat filerna måste du öppna WPB-comment-tooltip.php i textredigerare. Kopiera och klistra in den här koden i filen:

 '. __ ('Email', 'twentythirteen'). ''. ($ req? '*': "). '
'; $ fält ['url'] = '
'. __ ('Website', 'twentythteen'). ''. '
'; $ fält ['author'] = '
'. ''. __ ('Namn', 'twentythirteen'). ''. ($ req? '*': "). '
'; returnera $ fält;  add_filter ('comment_form_default_fields', 'alter_comment_form_fields'); ?> 

I ovanstående kod skapade vi först en plugin header, givet det här plugin ett namn och en beskrivning. Därefter laddar vi in ​​vår JavaScript och CSS-fil (se vår guide om hur man lägger till JavaScript och format i WordPress).

Vi ser också till att dessa filer bara laddas när en kommentarformulär visas. Därefter ändrade vi standardformuläret för kommentarer och lade till titeltributet i inmatningsfält. Denna titelattribut innehåller det meddelande vi vill visas i verktygstipset. Till exempel har vi i författarfältet använt:

title = "Vänligen använd ditt riktiga namn, inga nyckelord."

Nu när du har skapat pluginfilen är det dags att lägga till lite jQuery. Öppna WPB-tooltip.js fil och lägg till den här koden inuti den:

 (funktion ($) $ ("#commentform") .tooltip (position: min: "center bottom-10", vid: "center top", med: funktion (position, feedback) $ (detta). css (position); $ ("") .addClass ("pil") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (this);;) (jQuery); 

I den här koden, #commentform är väljaren där jQuery visar verktygstips och .verktygstips är innehållsdelen där vi har definierat positionen för verktygstips.

Nu är det sista steget att lägga till en liten CSS i WPB-tooltip.css fil. Kopiera och klistra in den här koden:

 .ui-tooltip, .arrow: efter background: # 356aa0; gräns: 2px solid vit;  .ui-tooltip vaddering: 10px 20px; färg vit; gränsstråle: 20px; typsnitt: fet 14px "Helvetica Neue", Sans-Serif; text-transform: stor bokstav; boxskugga: 0 0 7px # 356aa0; max-bredd: 350 pixlar;  .arrow width: 70px; höjd: 16px; överflöde: gömd; position: absolut; vänster: 50%; marginal-vänster: -35px; botten: -16px;  .arrow.top top: -16px; botten: auto;  .arrow.left vänster: 20%;  .arrow: efter innehåll: ""; position: absolut; vänster: 20px; topp: -20px; bredd: 25px; höjd: 25px; boxskugga: 6px 5px 9px -9px # 356aa0; -webkit-transform: rotera (45deg); -moz-transform: rotera (45deg); -ms-transformer: rotera (45deg); -o-transform: rotera (45deg); tranform: rotera (45deg);  .arrow.top: efter botten: -20px; topp: auto;  

Gärna ändra denna CSS-fil för att möta dina behov.

Det är allt. Nu har du skapat ett plugin som lägger till jQuery-verktygstips i ditt WordPress-formulär. Allt du behöver göra är att ladda upp WPB-comment-verktygstips mapp från skrivbordet till / Wp-content / plugins / katalog på din webbserver med en FTP-klient som Filezilla. När du har laddat upp pluginet, gå till plugins sidan i WordPress admin-området och aktivera plugin.

Vi hoppas att denna handledning hjälpte dig att lära dig hur du lägger till jQuery-verktygstips i WordPress-formuläret. Vi uppmanar dig att ändra den här koden och försöka lägga till verktygstips till andra platser. Titta till exempel hur vi lagt till testtips för verktygstips på vår webbplats. För feedback och frågor, vänligen lämna en kommentar nedan.