Slik legger du til jQuery Tooltips i WordPress Comment Form

Kommentarer tillater brukere å engasjere seg med innholdet på nettstedet ditt. Det er derfor vi tror at det er viktig å utforme dine kommentarer layout og kommentar skjema, så det er brukervennlig og godt utseende. Nylig spurte en bruker oss hvordan de kan legge til jQuery-verktøytips til WordPress-kommentarskjema. Vi trodde andre kunne finne dette nyttig også. I denne veiledningen vil vi vise deg hvordan du legger til jQuery-verktøytips i WordPress-kommentarskjema.

Hvorfor legge til jQuery Tooltips?

Verktøytips vises når en bruker tar musen til et element, vanligvis gir dem beskrivelse om det aktuelle elementet. I denne opplæringen vil vi legge til jQuery-verktøytips for å vise tips som, vennligst bruk ditt virkelige navn i kommentarformularfeltene.

Ved å legge til jQuery-verktøytips, kan du forbedre brukeropplevelsen, og det vil se bedre ut.

Slik legger du til jQuery Tooltips

Første ting du trenger å gjøre er å lage en mappe på skrivebordet ditt og gi den navnet WPB-kommentar-verktøytips. I denne mappen må du opprette disse tre filene:

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

Bruk en vanlig tekstredigerer som Notisblokk for å lage disse filene. Når du har opprettet filene, må du åpne WPB-kommentar-tooltip.php i tekstredigeringsprogrammet. Kopier og lim inn denne koden i filen:

 '. __ ('Email', 'twentythirteen'). ''. ($ req? '*': "). '
'; $ felt ['url'] = '
'. __ ('Website', 'twentythirteen'). ''. '
'; $ felt ['author'] = '
'. ''. __ ('Name', 'twentythirteen'). ''. ($ req? '*': "). '
'; returner $ felt;  add_filter ('comment_form_default_fields', 'alter_comment_form_fields'); ?> 

I koden ovenfor skapte vi først en plugin header, gitt dette plugin et navn og en beskrivelse. Deretter laster vi inn vår JavaScript- og CSS-fil (se vår guide om hvordan du legger til JavaScript og stiler i WordPress).

Vi sørger også for at disse filene bare lastes når et kommentarskjema vises. Deretter endret vi standardkommentasjonsskjemaet og la tittelattributtet i inntastingsfelt. Denne tittelattributtet inneholder meldingen vi ønsker å bli vist i verktøylippen. For eksempel, i forfatterfeltet har vi brukt:

title = "Vennligst bruk ditt virkelige navn, ingen søkeord."

Nå som du har opprettet pluginfilen, er det på tide å legge til en liten jQuery. Åpen WPB-tooltip.js fil og legg til denne koden i den:

 (funksjon ($) $ ("#commentform") .tooltip (posisjon: min: "midtbunn-10", på: "sentertopp", ved hjelp av: funksjon (posisjon, tilbakemelding) $ (dette). css (posisjon); $ ("") .addClass ("pil") .addClass (feedback.vertical) .addClass (tilbakemelding.horisontal) .appendTo (dette);;) (jQuery); 

I denne koden, #commentform er väljeren der jQuery vil vise verktøytips og .verktøytips er innholdsdelen der vi har definert posisjonen for verktøytips.

Nå er det siste trinnet å legge til et lite CSS i WPB-tooltip.css fil. Bare kopier og lim inn denne koden:

 .ui-tooltip, .arrow: etter bakgrunn: # 356aa0; border: 2px solid hvit;  .ui-tooltip polstring: 10px 20px; farge: hvit; border-radius: 20px; font: fet 14px "Helvetica Neue", Sans-Serif; tekst-transformer: store bokstaver; boks-skygge: 0 0 7px # 356aa0; max-bredde: 350 piksler;  .arrow width: 70px; høyde: 16px; overløp: skjult; posisjon: absolutt; venstre: 50%; margin-venstre: -35px; bunn: -16px;  .arrow.top top: -16px; bunn: auto;  .arrow.left left: 20%;  .arrow: etter innhold: ""; posisjon: absolutt; venstre: 20px; topp: -20px; bredde: 25px; høyde: 25px; boksskygge: 6px 5px 9px -9px # 356aa0; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -ms-transformer: roter (45deg); -o-transformer: roter (45deg); tranform: roter (45deg);  .arrow.top: etter bunn: -20px; topp: auto;  

Du er velkommen til å endre denne CSS-filen for å dekke dine behov.

Det er alt. Nå har du opprettet et plugin som legger til jQuery-verktøytips i WordPress-kommentaren. Alt du trenger å gjøre er å laste opp WPB-kommentar-verktøytips mappe fra skrivebordet til / Wp-content / plugins / katalog på din webserver ved hjelp av en FTP-klient som Filezilla. Når du har lastet opp pluginet, går du til plugins side i WordPress admin-området og aktiver pluginet.

Vi håper denne veiledningen hjalp deg med å lære hvordan du legger til jQuery-verktøytips i WordPress-kommentaren. Vi oppfordrer deg til å endre denne koden og prøve å legge til verktøytips til andre steder. Se for eksempel hvordan vi har lagt til verktøytip-testimonials på nettstedet vårt. For tilbakemelding og spørsmål, vennligst legg igjen en kommentar nedenfor.