Hur man stylar WordPress-kommentarsformuläret (ultimat guide)

Vill du ändra stilen på WordPress-kommentarsformuläret på din webbplats? På WPBeginner har vi spenderat år på att experimentera med olika sätt att öka användarnas engagemang, och vi har upptäckt att ett snyggt, användarvänligt kommentarsformulär kan göra en stor skillnad.

Kommentarer spelar en viktig roll för att bygga användarengagemang på en webbplats. När du gör det enkelt och visuellt tilltalande för användare att lämna kommentarer, uppmuntrar du mer diskussion och interaktion på din webbplats.

I den här artikeln visar vi dig hur du enkelt kan styla WordPress-kommentarformuläret för att öka engagemanget på din webbplats.

Innan du börjar

WordPress-teman styr utseendet på din webbplats. Varje WordPress-tema kommer med flera filer inklusive mallfiler, functions-fil, JavaScript och stylesheets.

Stilmallar innehåller CSS-reglerna för alla element som används av ditt WordPress-tema. Du kan lägga till din egen anpassade CSS för att åsidosätta ditt temas stilregler.

Om du inte har gjort detta tidigare, se vår artikel om hur man lägger till anpassad CSS i WordPress för nybörjare.

Förutom CSS kan du också behöva lägga till några funktioner för att ändra standardutseendet på ditt WordPress kommentarsformulär. Om du inte har gjort detta tidigare, se vår artikel om hur man kopierar och klistrar in kod i WordPress.

Med det sagt, låt oss titta på hur man stylar WordPress-kommentarsformuläret.

Eftersom detta är en ganska omfattande guide har vi skapat en innehållsförteckning för enkel navigering:

• Stilning av WordPress-kommentarformulär med SeedProd Theme Builder
• Change WordPress Comments with Default CSS Classes
• Lägga till social inloggning till WordPress-kommentarer
• Lägga till text för kommentatorspolicy i WordPress kommentarsformulär
• Flytta kommentarsfältet till botten
• Ta bort fältet för webbplats (URL) från WordPress-kommentarformuläret
• Lägg till en kryssruta för att prenumerera på kommentarer i WordPress
• Lägg till anpassade fält i WordPress-kommentarsformuläret

Stilning av WordPress-kommentarformulär med SeedProd Theme Builder

Denna metod kräver SeedProd vilket är den bästa plugin för WordPress sid- och temabyggare på marknaden.

Det rekommenderas för nybörjare utan kodningserfarenhet. Nackdelen med denna metod är dock att den kommer att ersätta ditt befintliga WordPress-tema med ett anpassat tema.

Först måste du installera och aktivera pluginet SeedProd. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Notera: Du behöver minst PRO-planen för att komma åt temabyggarfunktionen.

Efter aktivering måste du skapa mallar för ditt anpassade WordPress-tema. SeedProd låter dig enkelt generera dessa mallar med hjälp av en av deras inbyggda teman.

För detaljerade instruktioner, se vår handledning om hur man skapar ett anpassat WordPress-tema utan kod.

När du har genererat dina temamallar måste du klicka på länken ‘Redigera design’ under mallen för enskilda inlägg.

Detta laddar förhandsgranskningen av det enskilda inlägget i SeedProd-temabyggargränssnittet. Du kommer att märka blocket för kommentarformuläret längst ner i förhandsgranskningen.

Klicka helt enkelt på kommentarsformuläret så ser du dess egenskaper i den vänstra panelen.

Härifrån kan du lägga till en kommentar eller en integritetspolicy, du kan också växla till fliken 'Avancerat' för att redigera kommentarsformulärets stil utan att skriva någon CSS-kod.

När du är klar, glöm inte att klicka på knappen ‘Spara’ för att publicera dina ändringar.

SeedProd gör det superenkelt att ändra stilen på vilket element som helst på din webbplats utan att skriva kod.

Men, det är en temabyggare och du kanske redan använder ett WordPress-tema som du gillar. I så fall hjälper följande tips dig att manuellt ändra stilarna för kommentarsformuläret i WordPress.

Ändra stil för kommentarsformuläret i WordPress

Inuti de flesta WordPress-teman finns en mall som heter comments.php. Den här filen används för att visa kommentarer och kommentarsformulär på dina blogginlägg. WordPress-kommentarsformuläret genereras med hjälp av funktionen: <?php comment_form(); ?>.

Som standard genererar den här funktionen ditt kommentarformulär med tre textfält (Namn, E-post och Webbplats), ett textfältsfält för kommentaren, en kryssruta för GDPR-efterlevnad och skicka-knappen.

Du kan enkelt ändra vart och ett av dessa fält genom att helt enkelt justera standard-CSS-klasserna. Nedan finns en lista över standard-CSS-klasserna som WordPress lägger till i varje kommentarsformulär.

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit

Genom att bara justera dessa CSS-klasser kan du helt ändra utseendet på ditt WordPress-kommentarsformulär.

Låt oss gå vidare och försöka ändra några saker, så att du får en bra uppfattning om hur detta fungerar.

Först börjar vi med att markera det aktiva formulärsfältet. Att markera det fält som för närvarande är aktivt gör ditt formulär mer tillgängligt för personer med särskilda behov, och det gör också att ditt kommentarsformulär ser snyggare ut på mindre enheter.

#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

Så här såg vårt formulär ut i WordPress Twenty Sixteen-temat efter ändringarna:

Med dessa klasser kan du ändra hur texten visas inuti inmatningsrutorna. Vi kommer att gå vidare och ändra textstilen för författarens namn och URL-fälten.

#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
} 

#url  {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
} 

Om du tittar noga på skärmdumpen nedan är teckensnittet för fältet namn och e-post annorlunda än webbplatsens URL.

Du kan också ändra stilen på WordPress-kommentarsformulärets skicka-knapp. Istället för att använda standard skicka-knappen, låt oss ge den lite CSS3-gradient och box shadow.

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 

#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}

Ta WordPress-kommentarsformulär till nästa nivå

Du kanske tänker att det var för grundläggande. Tja, vi måste börja där så att alla kan följa med.

Du kan dock ta ditt WordPress-kommentarsformulär till nästa nivå genom att ordna om formulärfält, lägga till social inloggning, kommentarsaviseringar, kommentarsriktlinjer, snabbtangenter och mer.

Lägg till social inloggning till WordPress-kommentarer

Låt oss börja med att lägga till sociala inloggningar till WordPress-kommentarer.

Det första du behöver göra är att installera och aktivera Super Socializer-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du besöka Super Socializer » Social Login och sedan markera rutan som säger 'Aktivera social inloggning'.

Detta öppnar panelen för sociala inloggningsalternativ. Klicka först på fliken ‘Avancerad konfiguration’.

Se sedan till att rutan 'Aktivera vid kommentarsformulär' är markerad.

Klicka sedan på fliken ‘Basic Configuration’. Här kan du välja de sociala nätverk du vill lägga till genom att markera rutorna i avsnittet ‘Select Social Networks’.

Nedanför detta kommer pluginet att kräva API-nycklar för att ansluta till sociala plattformar. Klicka helt enkelt på ikonen 'Frågetecken' för att visa instruktionerna om hur du får detta för varje plattform.

När du är klar klickar du på knappen 'Spara ändringar' för att spara dina inställningar för social inloggning.

Du kan nu besöka din webbplats för att se knapparna för social inloggning ovanför ditt kommentarsformulär. 

Lägga till text för kommentatorspolicy före eller efter kommentarsformuläret

Vi älskar alla våra användare, och vi uppskattar verkligen att de tar några minuter att lämna en kommentar på vår webbplats. För att skapa en sund diskussionsmiljö är det dock viktigt att moderera kommentarer.

För fullständig transparens har vi skapat en sida med kommentarpolicy, men du kan inte bara lägga den här länken i sidfoten.

Vi ville att vår kommenteringspolicy skulle vara framträdande och synlig för alla användare som lämnar en kommentar. Det är därför vi bestämde oss för att lägga till kommenteringspolicyn i vårt WordPress-kommentarsformulär.

Om du vill lägga till en sida med kommentatorspolicy, är det första du behöver göra att skapa en WordPress-sida och definiera din kommentatorspolicy (du kan stjäla vår och anpassa den efter dina behov).

Därefter kan du lägga till följande kod i din temas functions.php-fil eller ett kodsnutt-plugin.

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

Ovanstående kod kommer att ersätta standardkommentarsformuläret före anteckningar med denna text. Vi har också lagt till en CSS-klass i koden, så att vi kan markera meddelandet med CSS. Här är exempel-CSS som vi använde:

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

Så här såg det ut på vår testwebbplats:

Om du vill visa länken efter textområdet för kommentarer, använd följande kod.

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

Glöm inte att ändra URL:en därefter, så att den går till din sida med kommentatorspolicy istället för example.com.

Flytta kommentarsfältet till botten

Som standard visar WordPress-kommentarsformuläret textområdet för kommentarer först och sedan fälten för namn, e-post och webbplats. Denna ändring introducerades i WordPress 4.4.

Innan dess visade WordPress-webbplatser namn, e-post och webbplatsfält först, och sedan textrutan för kommentarer. Vi kände att våra användare var vana vid att se kommentarsformuläret i den ordningen, så vi använder fortfarande den gamla fältordningen på WPBeginner.

Om du vill göra det, behöver du bara lägga till följande kod i ditt temas functions.php-fil eller ett kodsnutt-plugin.

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}

add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');

Vi rekommenderar alltid att lägga till kod i WordPress med hjälp av ett kodavsnitt-plugin som WPCode. Detta gör det enkelt att lägga till anpassad kod utan att redigera din functions.php-fil, så du behöver inte oroa dig för att bryta din webbplats.

För att komma igång måste du installera och aktivera det kostnadsfria WPCode-pluginet. För instruktioner, se den här guiden om hur man installerar ett WordPress-plugin.

Gå efter aktivering till Kodavsnitt » + Lägg till avsnitt från WordPress-instrumentpanelen.

Därifrån, hitta alternativet 'Lägg till din anpassade kod (nytt utdrag)' och klicka på knappen '+ Lägg till anpassat utdrag' under den.

Därefter måste du välja ‘PHP-kodavsnitt’ som kodtyp från listan med alternativ som visas på skärmen.

Lägg sedan till en titel för ditt utdrag överst på sidan, detta kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Klistra sedan in koden ovan i rutan "Code Preview".

Slutligen, växla helt enkelt omkopplaren från 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara utdrag'.

Den här koden flyttar helt enkelt fältet för kommentarsinmatning till botten.

Ta bort fältet för webbplats (URL) från WordPress-kommentarformuläret

Webbplatsfältet i kommentarsformuläret lockar många spammare. Även om det inte stoppar spammare eller ens minskar spamkommentarer att ta bort det, kommer det definitivt att rädda dig från att av misstag godkänna en kommentar med en dålig länk till författarens webbplats.

Det kommer också att minska ett fält från kommentarsformuläret, vilket gör det enklare och mer användarvänligt. För mer om detta ämne, se vår artikel om att ta bort fältet för webbplatsens URL från WordPress kommentarsformulär.

För att ta bort URL-fältet från kommentarsformuläret, lägg helt enkelt till följande kod i din functions.php-fil eller ett kodavsnittsplugin.

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Du kan följa samma steg som i föregående avsnitt för att säkert lägga till denna kod i WordPress med hjälp av WPCode-pluginet.

Lägg till en kryssruta för att prenumerera på kommentarer i WordPress

När användare lämnar en kommentar på din webbplats kanske de vill följa upp den tråden för att se om någon har svarat på deras kommentar. Genom att lägga till en kryssruta för att prenumerera på kommentarer, gör du det möjligt för användare att få omedelbara aviseringar när en ny kommentar visas i inlägget.

För att lägga till den här kryssrutan måste du först installera och aktivera pluginet Subscribe to Comments Reloaded. Efter aktivering måste du besöka sidan StCR » Comment Form för att konfigurera pluginets inställningar.

För detaljerade steg-för-steg-instruktioner, se vår artikel om hur du låter användare prenumerera på kommentarer i WordPress.

Lägg till extra fält i WordPress kommentarsformulär

Vill du lägga till extra fält i ditt WordPress-kommentarsformulär? Till exempel ett valfritt fält där användare kan lägga till sitt Twitter-handtag?

Installera och aktivera helt enkelt pluginet WordPress Comments Fields . Efter aktivering, gå till sidan ‘Comments Fields’ och byt till fliken ‘Comment Fields’.

Dra och släpp bara ett anpassat fält och ge det en titel, beskrivning och datanamn.

När du är klar med att lägga till fälten, glöm inte att klicka på knappen 'Spara alla ändringar'.

Du kan nu visa ditt kommentarsformulär för att se de anpassade fälten i aktion.

De anpassade fälten visas sedan i kommentar moderering och under kommentarinnehållet.

För mer information, se vår handledning om hur du lägger till anpassade fält i kommentarsformuläret i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du stylar WordPress kommentarformulär för att göra det roligare för dina användare. Du kanske också vill se våra tips för att få fler kommentarer på dina WordPress-blogginlägg och våra experttips om de bästa sociala mediepluginsen för WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.