Slik stiler du WordPress Comment Form (Ultimate Guide)

Vil du endre stilen på WordPress-kommentarformularen på nettstedet ditt? Kommentarer spiller en viktig rolle i å bygge brukerengasjement på et nettsted. Et godt brukervennlig kommentarskjema oppfordrer brukerne til å delta i diskusjon. Derfor har vi laget den ultimate guiden på hvordan du enkelt kan stile WordPress-kommentaren.

Før Komme i gang

WordPress-temaer styrer utseendet på nettstedet ditt. Hvert WordPress-tema kommer med flere filer, inkludert malfiler, funksjonsfil, JavaScripts og stylesheets.

Stylesheets inneholder CSS-reglene for alle elementene som brukes av WordPress-temaet. Du kan legge til din egen tilpassede CSS for å overstyre temaets stilregler.

Hvis du ikke har gjort dette før, kan du se vår artikkel om hvordan du legger til tilpasset CSS i WordPress for nybegynnere.

Bortsett fra CSS, må du kanskje også legge til noen funksjoner for å endre standardutseendet til WordPress-kommentaren. Hvis du ikke har gjort dette før, vennligst se vår artikkel om hvordan du kopierer og limer inn kode i WordPress.

Når det er sagt, la oss ta en titt på hvordan du stiler WordPress-kommentaren.

Siden dette er en ganske omfattende guide, har vi opprettet et innholdsfortegnelse for enkel navigering:

• Endre WordPress-kommentarer med standard CSS-klasser
• Legge til sosial pålogging til WordPress Comment Form
• Legger til kommentarpolitikktekst i WordPress-kommentarformular
• Flytter kommentarfelt til bunn
• Fjerning av webområde (URL) -felt fra WordPress-kommentarformular
• Legge til Abonner på kommentarer-boksen i WordPress
• Legg til Quicktags i WordPress-kommentarer

Endre kommentarformat stil i WordPress

I de fleste WordPress-temaer er det en mal som heter comments.php. Denne filen brukes til å vise kommentarer og kommentarskjema på blogginnleggene dine. WordPress-kommentarskjemaet blir generert ved å bruke funksjonen: .

Som standard genererer denne funksjonen kommentarskjemaet med tre tekstfelter (Navn, E-post og Nettsted), et tekstområde for kommentarteksten, en avkrysningsboks for GDPR-samsvar og innleveringsknappen.

Du kan enkelt endre hvert av disse feltene ved å justere standard CSS-klassene. Nedenfor er en liste over standard CSS-klasser som WordPress legger til i hvert kommentarskjema.

 #respond  # reply-title  # avbryt-kommentere-svar-lenke  #kommentform  #author  #email  #url  #komment #send inn .kommentarer  .required  .comment-form-author  .comment-form-email  .comment-form-url  .komment-form-kommentar  .komment-form-cookies-consent  .form-allowed-tags  form mens-sender 

Ved å justere disse CSS-klassene, kan du helt endre utseendet på WordPress-kommentaren.

La oss gå videre og prøve å endre noen ting, så du kan få en god ide om hvordan dette fungerer.

Først vil vi begynne med å markere feltet aktivt form. Fremhever det aktive feltet gjør skjemaet ditt lettere tilgjengelig for personer med spesielle behov, og det gjør også kommentarskjemaet ditt bedre på mindre enheter.

 #respond bakgrunn: #fbfbfb; polstring: 0 10px 0 10px;  / * Marker aktivt formfelt * / #respond-inngang [type = tekst], textarea -webkit-overgang: alle 0.30-talls brukervennlighet; -moz-overgang: alle 0.30s brukervennlighet -ms-overgang: alle 0.30s brukervennlighet; -o-overgang: alle 0.30s brukervennlighet; oversikt: ingen; polstring: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; grense: 1px solid #DDDDDD;  #respond input [type = tekst]: fokus, input [type = email]: fokus, input [type = url]: fokus, textarea: fokus box-shadow: 0 0 5px rgba (81, 203, 238, 1 ); margin: 5px 1px 3px 0px; grense: 2px solid rgba (81, 203, 238, 1);  

Slik ser vi skjemaet ut i WordPress Twenty Sixteen temaet etter endringene:

Ved hjelp av disse klassene kan du endre oppførselen til hvordan tekst vises i innsatsbokser. Vi vil fortsette og endre tekststilen til forfatternavnet og URL-feltene.

 #author, #email font-family: "Open Sans", "Droid Sans", Arial; font-style: italic; color: # 1d1d1d; brev-Avstand: .1em;  #url farge: # 1d1d1d; font-familie: "Luicida Console", "Courier New", "Courier", monospace;  

Hvis du ser nærmere på skjermbildet under, er navn og e-postfelt skilt annerledes enn nettadressen til nettadressen.

Du kan også endre stilen på WordPress-kommentarseddel send-knappen. I stedet for å bruke standard innleveringsknappen, la oss gi den litt CSS3-gradient og bokseskygge.

 #submit background: -moz-linear-gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrunn: -webkit-lineær-gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrunn: -o-lineær gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrunn: -ms-lineær gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrunn: lineær gradient (til bunn, # 44c767 5%, # 5cbf2a 100%); background-color: # 44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; grense: 1px solid # 18ab29; display: inline-blokk; Markøren: pekeren; color: # ffffff; font-family: Arial; font-size: 17px; polstring: 16px 31px; text-decoration: none; tekstskygge: 0px 1px 0px # 2f6627;  #submit: hover bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0.05, # 5cbf2a), fargestopp (1, # 44c767)); bakgrunn: -moz-lineær gradient (topp, # 5cbf2a 5%, # 44c767 100%); bakgrunn: -webkit-lineær gradient (topp, # 5cbf2a 5%, # 44c767 100%); Bakgrunn: -O-lineær-gradient (topp, # 5cbf2a 5%, # 44c767 100%); bakgrunn: -ms-lineær gradient (topp, # 5cbf2a 5%, # 44c767 100%); bakgrunn: lineær gradient (til bunn, # 5cbf2a 5%, # 44c767 100%); background-color: # 5cbf2a;  #submit: aktiv posisjon: relative; top: 1px;  

Tar WordPress Kommentar skjemaer til neste nivå

Du kan tenke det var for grunnleggende. Vel, vi må starte der, så alle kan følge med.

Du kan ta WordPress-kommentarskjemaet til neste nivå ved å omorganisere skjemafelter, legge til sosiale innlogginger, abonnere på kommentarer, kommentars retningslinjer, quicktags og mer.

Legg til sosiale innlogging til WordPress-kommentarer

La oss begynne med å legge til sosiale innlogginger til WordPress-kommentarer.

Det første du må gjøre er å installere og aktivere pluginet for WordPress Social Inlogging. For mer informasjon, se vår trinnvise veiledning om hvordan du installerer et WordPress-plugin.

Ved aktivering må du besøke Innstillinger »WP Social Login side for å konfigurere plugininnstillinger.

Pluggen vil kreve API-nøkler for å kunne koble til sosiale plattformer. Du vil se koblinger med instruksjoner om hvordan du får denne informasjonen for hver plattform.

Når du har tastet inn API-nøklene dine, klikker du på lagreinnstillinger-knappen for å lagre endringene dine.

Du kan nå besøke nettstedet ditt for å se de sosiale innloggingsknappene over kommentarskjemaet ditt.

Legger til kommentarpolitikktekst før eller etter kommentarskjema

Vi elsker alle våre brukere, og vi setter pris på at de tar noen minutter for å legge igjen en kommentar på nettstedet vårt. Men for å skape et sunt diskusjonsmiljø er det viktig å moderate kommentarer.

For å få full åpenhet, har vi opprettet en kommentarpolitikkside, men du kan ikke bare sette denne linken i bunnteksten.

Vi ønsket å få vår kommentarpolitikk til å være fremtredende og synlig for alle brukere som forlater en kommentar. Derfor bestemte vi oss for å legge til kommentarpolitikken i vårt WordPress-kommentasjonsskjema.

Hvis du vil legge til en kommentarpolitikkside, så er det første du må gjøre å lage en WordPress-side og definere din kommentarpolitikk (du kan stjele vår og endre den for å dekke dine behov).

Deretter kan du legge til følgende kode i temaets funksjoner.php-fil eller et nettstedspesifikt plugin.

 funksjon wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "
Vi er glade for at du har valgt å legge igjen en kommentar. Vær oppmerksom på at kommentarer blir moderert i henhold til vår kommentarpolicy.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before'); 

Ovennevnte kode erstatter standardkommentasjonsskjemaet før notater med denne teksten. Vi har også lagt til en CSS-klasse i koden, slik at vi kan markere varselet ved hjelp av CSS. Her er prøven CSS vi brukte:

 p.comment-policy grense: 1px solid # ffd499; bakgrunnsfarge: # fff4e5; border-radius: 5px; polstring: 10px; margin: 10px 0px 10px 0px; skriftstørrelse: liten; font-style: kursiv;  

Slik så det på teststedet vårt:

Hvis du vil vise linken etter kommentartekstområdet, bruker du følgende kode.

 funksjon wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "
Vi er glade for at du har valgt å legge igjen en kommentar. Vær oppmerksom på at kommentarer blir moderert i henhold til vår kommentarpolicy.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after'); 

Ikke glem å endre nettadressen i henhold til dette, så det går til din kommentarspolitiske side i stedet for example.com

Flytt kommentartekstfelt til bunn

Som standard viser WordPress-kommentarskjema først kommentarområdet og deretter navn, e-post og nettstedfelt. Denne endringen ble introdusert i WordPress 4.4.

Før det viste WordPress-nettsteder først navn på navn, e-post og nettsted, og deretter kommentaren tekstboksen. Vi følte at brukerne våre er vant til å se kommentarskjemaet i den rekkefølgen, så vi bruker fortsatt den gamle feltbestillingen på WPBeginner.

Hvis du vil gjøre det, er alt du trenger å gjøre, legg til følgende kode i temaets funksjoner.php-fil eller et nettstedspesifikt plugin.

 funksjon wpb_move_comment_field_to_bottom ($ felt) $ comment_field = $ felt ['kommentar']; unset ($ felt ['kommentar']); $ felt ['comment'] = $ comment_field; returner $ felt;  add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom' 

Denne koden beveger rett og slett feltet kommentartekstfelt til bunnen.

Fjern webområde (URL) -felt fra WordPress-kommentarformular

Nettstedet i kommentarformen tiltrekker seg mange spammere. Når du fjerner det, vil det ikke stoppe spammere eller til og med redusere spam-kommentarer, det vil sikkert redde deg fra et uhell ved å godkjenne en kommentar med dårlig forfatter nettstedslink.

Det vil også redusere et felt fra kommentarskjemaet, noe som gjør det enklere og mer brukervennlig. For mer om dette emnet, se vår artikkel om å fjerne webadresser url-felt fra WordPress-kommentarskjema

Hvis du vil fjerne URL-feltet fra kommentarformular, legger du ganske enkelt til følgende kode i din functions.php-fil eller et nettstedspesifikt plugin.

 funksjon wpbeginner_remove_comment_url ($ arg) $ arg ['url'] = "; returner $ arg; add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url'); 

Legg til et abonner på kommentarer i boksen i WordPress

Når brukere legger en kommentar på nettstedet ditt, kan de kanskje følge opp den tråden for å se om noen har svart på kommentaren. Ved å legge til en abonnement på kommentarer, gjør du det mulig for brukere å motta øyeblikkelige varsler hver gang en ny kommentar vises på innlegget.

For å legge til denne avmerkingsboksen, er det første du må gjøre, å installere og aktivere Abonner på tilbakemelding av kommentarer. Ved aktivering må du besøke Innstillinger "Abonner på kommentarer for å konfigurere plugininnstillingene.

For detaljerte trinnvise instruksjoner, se vår artikkel om hvordan du tillater brukere å abonnere på kommentarer i WordPress.

Legg til Quicktags i kommentarformular

Quicktags formatterer knapper som gjør at brukerne enkelt kan stille sine kommentarer. Disse inkluderer knapper til fet skrift, kursiviser, legg til en kobling eller blockquote.

For å legge til quicktags må du installere og aktivere plugin for Basic Comment Quicktags. For detaljer, se vår artikkel om hvordan du enkelt legger til quicktags i WordPress-kommentarformular.

Dette er hvordan kommentarskjemaet ditt vil se etter at du legger til quicktags.

Vi håper denne artikkelen hjalp deg med å lære hvordan du stiler WordPress-kommentarskjema for å gjøre det morsommere for brukerne. Du vil kanskje også se våre tips for å få flere kommentarer på dine WordPress-blogginnlegg.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.