teman

Så stilar du WordPress-formuläret (Ultimate Guide)

Så stilar du WordPress-formuläret (Ultimate Guide) / teman

Vill du ändra stilen på WordPress-formuläret på din webbplats? Kommentarer spelar en viktig roll för att bygga användarengagemang på en webbplats. En snygg användarvänlig kommentarform uppmuntrar användarna att delta i diskussionen. Därför har vi skapat den ultimata guiden om hur du enkelt kan ställa in WordPress-formuläret.

Innan du börjar

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

Stylesheets 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 temaets stilregler.

Om du inte har gjort det tidigare, se vår artikel om hur du 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-formulär. Om du inte har gjort det här förut kan du se vår artikel om hur du kopierar och klistrar in kod i WordPress.

Med det sagt, låt oss ta en titt på hur man stilar WordPress-formuläret.

Eftersom det här är en ganska omfattande guide, har vi skapat en innehålls tabell för enkel navigering:

  • Ändra WordPress-kommentarer med standard CSS-klasser
  • Lägger till Social Login på WordPress Kommentarformulär
  • Lägga till kommentarpolicytext i WordPress Kommentarformulär
  • Flytta kommentarfältet till botten
  • Ta bort webbadress (URL) -fältet från WordPress-formuläret
  • Lägga till Prenumerera på Kommentarer Checkbox i WordPress
  • Lägg till Quicktags i WordPress Kommentarer

Ändra kommentarformat stil i WordPress

Inne i de flesta WordPress-teman finns en mall som heter comments.php. Den här filen används för att visa kommentarer och kommentarformulär på dina blogginlägg. WordPress-kommentarformuläret genereras genom att använda funktionen: .

Som standard genererar denna funktion din kommentarform med tre textfält (Namn, E-post och Webbplats), ett textområde för kommentartexten, en kryssruta för GDPR-överensstämmelse och Skicka-knappen.

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

 #respond  # reply-title  # cancel-comment-reply-link  #commentform  #author  #email  #url  #komment #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 helt enkelt anpassa dessa CSS-klasser kan du helt ändra utseendet på WordPress-formuläret.

Låt oss fortsätta och försöka ändra några saker, så du kan få en bra idé om hur det här fungerar.

Först börjar vi med att markera det aktiva formulärfältet. Markera det aktuella aktiva fältet gör din formulär mer tillgänglig för personer med särskilda behov, och det gör också att din kommentarform ser bättre ut på mindre enheter.

 #respond background: #fbfbfb; vaddering: 0 10px 0 10px;  / * Markera aktivt formulärfält * / #respond-inmatning [typ = text], textarea -webkit-övergång: allt 0.30s enkelt in-out; -moz-övergång: alla 0.30s enkelt-i-ut; -ms-övergång: alla 0.30s enkelt-i-ut; -överskridande: alla 0.30-tals lätt-i-ut; kontur: ingen; vaddering: 3px 0px 3px 3px; marginal: 5px 1px 3px 0px; gränsen: 1px solid #DDDDDD;  #respond input [typ = text]: fokusera, inmatas [typ = email]: fokusera, inmatas [typ = url]: fokus, textarea: fokus box-shadow: 0 0 5px rgba (81, 203, 238, 1 ); marginal: 5px 1px 3px 0px; gräns: 2px fast rgba (81, 203, 238, 1);

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

Med hjälp av dessa klasser kan du ändra hur text visas i inmatningsrutorna. Vi kommer att fortsätta och ändra textstilen för författarnamnet och URL-fälten.

 #author, #email font-family: "Open Sans", "Droid Sans", Arial; font-style: italic; color: # 1d1d1d; knipning: .1em;  #url färg: # 1d1d1d; font-family: "Luicida Console", "Courier New", "Courier", monospace;

Om du ser en närmare titt på skärmdumpen nedan är namnet och e-postfältet annorlunda än webbplatsens webbadress.

Du kan också ändra stilen på formuläret Skicka in WordPress-formuläret. Istället för att använda standardinställningsknappen, låt oss ge den lite CSS3-gradient och boxskugga.

 #submit background: -moz-linear gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrund: -webkit-linjär gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrund: -o-linjär gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrund: -ms-linjär gradient (topp, # 44c767 5%, # 5cbf2a 100%); bakgrund: linjär gradient (till botten, # 44c767 5%, # 5cbf2a 100%); background-color: # 44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; gräns: 1px fast # 18ab29; display: inline-block; markören: pointer; färg: #ffffff; font-family: Arial; font-size: 17px; vaddering: 16px 31px; text-decoration: none; textskugga: 0px 1px 0px # 2f6627;  #submit: sväva bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0.05, # 5cbf2a), färgstopp (1, # 44c767)); bakgrund: -moz-linjär gradient (topp, # 5cbf2a 5%, # 44c767 100%); bakgrund: -webkit-linjär gradient (topp, # 5cbf2a 5%, # 44c767 100%); bakgrund: -o-linjär gradient (topp, # 5cbf2a 5%, # 44c767 100%); bakgrund: -ms-linjär gradient (topp, # 5cbf2a 5%, # 44c767 100%); bakgrund: linjär gradient (till botten, # 5cbf2a 5%, # 44c767 100%); background-color: # 5cbf2a;  #submit: aktiv position: relative; top: 1px;

Med WordPress Kommentera formulär till nästa nivå

Du kanske tror att det var för grundläggande. Nåväl måste vi börja där, så alla kan följa med.

Du kan ta ditt WordPress-formulär till nästa nivå genom att omforma formulärfält, lägga till sociala inloggningar, prenumerera på kommentarer, kommentarsedlar, quicktags 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 pluginprogrammet för WordPress Social Inloggning. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du besöka Inställningar »WP Social Login sida för att konfigurera insticksinställningar.

Pluggen kommer att kräva API-nycklar för att ansluta till sociala plattformar. Du kommer att se länkar med instruktioner om hur du får denna information för varje plattform.

När du har angett API-nycklarna klickar du på knappen Spara inställningar för att lagra dina ändringar.

Du kan nu besöka din webbplats för att se de sociala inloggningsknapparna ovanför din kommentarform.

Lägga till kommentarpolicytext före eller efter kommentarformulär

Vi älskar alla våra användare, och vi uppskattar verkligen att de tar några minuter för att lämna en kommentar på vår sida. Men för att skapa en hälsosam diskussionsmiljö är det viktigt att moderera kommentarer.

För att få full insyn skapade vi en kommentarpolicysida, men du kan inte bara sätta den här länken i sidfoten.

Vi ville ha vår kommentarpolicy vara framträdande och synlig för alla användare som lämnar en kommentar. Därför bestämde vi oss för att lägga till kommentarpolicyen i vårt formulär för WordPress.

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

Därefter kan du lägga till följande kod i ditt temas funktioner.php-fil eller ett sajtspecifikt plugin. 

 funktion wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "
Vi är glada att du har valt att lämna en kommentar. Tänk på att kommentarer är modererade enligt vår kommentarpolicy.
"; returnera $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before');

Ovanstående kod kommer att ersätta standardformuläret före anteckningar med den här texten. Vi har också lagt till en CSS-klass i koden, så att vi kan markera meddelandet med hjälp av CSS. Här är det exempel CSS vi använde: 

 p.comment-policy border: 1px solid # ffd499; bakgrundsfärg: # fff4e5; gränsstråle: 5px; vaddering: 10px; marginal: 10px 0px 10px 0px; fontstorlek: liten; typsnittstyp: kursiv;

Så här såg det på vår testplats:

Om du vill visa länken efter kommentartextområdet använder du följande kod. 

 funktion wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "
Vi är glada att du har valt att lämna en kommentar. Tänk på att kommentarer är modererade enligt vår kommentarpolicy.
"; returnera $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after');

Glöm inte att ändra webbadressen i enlighet med detta, så det går till din kommentarpolicysida i stället för example.com

Flytta kommentartextfält till botten

Som standard visar WordPress-formuläret kommentars textområdet först och sedan namn, e-post och webbfält. Denna ändring infördes i WordPress 4.4.

Innan det visade WordPress-webbplatser först namn, email och webbplatsfält först och sedan kommentars textrutan. Vi ansåg att våra användare är vana vid att se kommentarformuläret i den ordningen, så vi använder fortfarande den gamla fältordern på WPBeginner.

Om du vill göra det är allt du behöver göra att lägga till följande kod i ditt temas funktioner.php-fil eller en webbplatsspecifik plugin. 

 funktion wpb_move_comment_field_to_bottom ($ fält) $ comment_field = $ fält ['comment']; unset ($ fält ['comment']); $ fält ['comment'] = $ comment_field; returnera $ fält;  add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom'

Den här koden flyttar helt enkelt fältet för kommentartextområde till botten.

Ta bort webbadress (URL) -fältet från WordPress-formuläret

Webbplatsfältet i kommentarformuläret lockar många spammare. Medan du tar bort det kommer inte att stoppa spammare eller till och med minska spam-kommentarer, det kommer säkert att rädda dig från att oavsiktligt godkänna en kommentar med dålig författarwebbplats länk.

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

För att ta bort URL-fältet från kommentarformulär, lägg bara till följande kod till din functions.php-fil eller ett sajtspecifikt plugin. 

 funktion wpbeginner_remove_comment_url ($ arg) $ arg ['url'] = "; returnera $ arg; add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Lägg till en Prenumerera på Kommentarer Checkbox 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å sin kommentar. Genom att lägga till en prenumeration på kommentarer, gör du det möjligt för användare att få omedelbara meddelanden när en ny kommentar visas på inlägget.

För att lägga till den här kryssrutan är det första du behöver göra att installera och aktivera Prenumerera på Kommentarer omladdad plugin. Vid aktivering måste du besöka Inställningar "Prenumerera på Kommentarer för att konfigurera insticksinställningarna.

För detaljerade stegvisa instruktioner, se vår artikel om hur du tillåter användare att prenumerera på kommentarer i WordPress.

Lägg till Quicktags i kommentarformulär

Quicktags formaterar knappar som gör att användarna enkelt kan ställa in sina kommentarer. Dessa inkluderar knappar till fetstil, kursivisera, lägga till en länk eller blockquote.

För att lägga till quicktags måste du installera och aktivera pluginprogrammet Basic Comment Quicktags. För detaljer, se vår artikel om hur du enkelt lägger till quicktags i WordPress-formuläret.

Så här kommer din kommentarform att se efter att du har lagt till quicktags.

Vi hoppas att den här artikeln hjälpte dig att lära dig att style WordPress-formulä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.

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