Thema's

Hoe het WordPress Comment Form (Ultimate Guide) te vormen

Hoe het WordPress Comment Form (Ultimate Guide) te vormen / Thema's

Wilt u de stijl van het WordPress-reactieformulier op uw website wijzigen? Opmerkingen spelen een belangrijke rol bij het vergroten van de betrokkenheid van gebruikers op een website. Een goed en gebruikersvriendelijk commentaarformulier moedigt gebruikers aan om deel te nemen aan de discussie. Daarom hebben we de ultieme handleiding gemaakt om het WordPress-opmerkingenformulier gemakkelijk in te richten.

Voordat u begint

WordPress-thema's regelen het uiterlijk van uw website. Elk WordPress-thema wordt geleverd met verschillende bestanden, waaronder sjabloonbestanden, functies, JavaScript en stylesheets.

Stijlbladen bevatten de CSS-regels voor alle elementen die door uw WordPress-thema worden gebruikt. U kunt uw eigen aangepaste CSS toevoegen om de stijlregels van uw thema te overschrijven.

Als je dit nog niet eerder hebt gedaan, lees dan ons artikel over het toevoegen van aangepaste CSS in WordPress voor beginners.

Afgezien van CSS, moet u mogelijk ook enkele functies toevoegen om de standaardweergave van uw WordPress-reactieformulier te wijzigen. Als u dit nog niet eerder hebt gedaan, raadpleegt u ons artikel over het kopiëren en plakken van code in WordPress.

Dat gezegd hebbende, laten we eens kijken hoe het WordPress comment-formulier moet worden vormgegeven.

Aangezien dit een vrij uitgebreide gids is, hebben we een inhoudstabel gemaakt voor eenvoudige navigatie:

  • Wijzig WordPress-opmerkingen met standaard CSS-klassen
  • Toevoegen van Social Login aan WordPress Comment Form
  • Notitiebeleidstekst toevoegen in WordPress Commentaarformulier
  • Verplaats commentaartekstveld naar beneden
  • Website (URL) veld verwijderen uit WordPress Commentaarformulier
  • Abonneren op opmerkingen toevoegen Selectievakje in WordPress
  • Voeg QuickTags toe in WordPress Comments

De vorm van opmerkingenformulieren wijzigen in WordPress

In de meeste WordPress-thema's bevindt zich een sjabloon met de naam comments.php. Dit bestand wordt gebruikt om opmerkingen en opmerkingen in uw blogberichten weer te geven. Het WordPress comment-formulier wordt gegenereerd met behulp van de functie: .

Standaard genereert deze functie uw reactieformulier met drie tekstvelden (Naam, E-mail en Website), een tekstveld voor de reactietekst, een selectievakje voor GDPR-compliance en de verzendknop.

U kunt eenvoudig elk van deze velden wijzigen door eenvoudigweg de standaard CSS-klassen aan te passen. Hieronder staat een lijst met de standaard CSS-klassen die WordPress aan elk commentaarformulier toevoegt.

 #respond  # reply-title  # cancel-comment-reply-link  #commentform  #author  #email  #url  #comment #submit .comment-notes  .required  .comment-form-author  .comment-form-email  .com-formulier-url  .comment-form-comment  .com-formulier-cookies-instemming  .form-allowed-tags  .form-submit

Door deze CSS-klassen eenvoudig aan te passen, kunt u het uiterlijk van uw WordPress-opmerkingenformulier volledig veranderen.

Laten we verder gaan en proberen een paar dingen te veranderen, zodat je een goed idee krijgt over hoe dit werkt.

Eerst zullen we beginnen met het markeren van het actieve formulierveld. Door het momenteel actieve veld te markeren, wordt uw formulier toegankelijker voor mensen met speciale behoeften, en wordt uw opmerkingenformulier er ook mooier uitzien op kleinere apparaten.

 #respond background: #fbfbfb; opvulling: 0 10px 0 10px;  / * Markeer het actieve formulierveld * / #respond invoer [type = tekst], textarea -webkit-transition: alle 0.30s ease-in-out; -moz-overgang: alle 0.30s gemak in-uit; -ms-overgang: alle 0.30s gemak in-uit; -o-overgang: alle 0.30s gemak in-uit; overzicht: geen; opvulling: 3px 0px 3px 3px; marge: 5px 1px 3px 0px; border: 1px solid #DDDDDD;  #respond invoer [type = tekst]: focus, invoer [type = email]: focus, invoer [type = url]: focus, tekstveld: focus vakje-schaduw: 0 0 5px rgba (81, 203, 238, 1 ); marge: 5px 1px 3px 0px; grens: 2px vaste rgba (81, 203, 238, 1);

Zo zag onze vorm eruit in het WordPress Twenty Sixixthema na de wijzigingen:

Met behulp van deze klassen kunt u het gedrag wijzigen van hoe tekst in invoervakken wordt weergegeven. We gaan door en wijzigen de tekststijl van de naam van de auteur en de URL-velden.

 #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;

Als u in de onderstaande schermafbeelding goed kijkt, is de naam en het e-maildialtype anders dan de website-URL.

U kunt ook de stijl van de knop Verzenden indienen in WordPress wijzigen. In plaats van de standaard submit-knop te gebruiken, laten we het een CSS3 gradient en box shadow geven.

 #submit background: -moz-linear-gradient (top, # 44c767 5%, # 5cbf2a 100%); achtergrond: -webkit-lineaire gradiënt (bovenaan, # 44c767 5%, # 5cbf2a 100%); achtergrond: -o-lineaire gradiënt (boven, # 44c767 5%, # 5cbf2a 100%); achtergrond: -ms-lineaire gradiënt (boven, # 44c767 5%, # 5cbf2a 100%); achtergrond: lineair verloop (naar beneden, # 44c767 5%, # 5cbf2a 100%); background-color: # 44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; rand: 1px vast # 18ab29; weergave: inline-block; cursor: wijzer; color: #ffffff; font-family: Arial; font-size: 17px; opvulling: 16px 31px; text-decoration: none; text-shadow: 0px 1px 0px # 2f6627;  #submit: hover background: -webkit-gradient (lineair, linkerbovenkant, linkeronderkant, kleurstop (0,05, # 5cbf2a), kleurstop (1, # 44c767)); achtergrond: -moz-lineaire gradiënt (boven, # 5cbf2a 5%, # 44c767 100%); achtergrond: -webkit-lineaire gradiënt (boven, # 5cbf2a 5%, # 44c767 100%); achtergrond: -o-lineaire gradiënt (boven, # 5cbf2a 5%, # 44c767 100%); achtergrond: -ms-lineaire gradiënt (boven, # 5cbf2a 5%, # 44c767 100%); achtergrond: lineair verloop (naar beneden, # 5cbf2a 5%, # 44c767 100%); background-color: # 5cbf2a;  #submit: active position: relative; top: 1px;

WordPress-opmerkingen maken naar het volgende niveau

Je denkt misschien dat dat te simpel was. Nou, we moeten daar beginnen, zodat iedereen kan volgen.

U kunt uw commentaarformulier van WordPress meenemen naar het volgende niveau door formuliervelden opnieuw in te delen, sociale login toe te voegen, u te abonneren op opmerkingen, richtlijnen voor opmerkingen, quicktags en meer.

Voeg sociale login toe aan WordPress Comments

Laten we beginnen met het toevoegen van sociale logins aan WordPress-opmerkingen.

Het eerste dat u hoeft te doen, is de plug-in WordPress Social Login installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Bij activering moet je bezoeken Instellingen »WP Social Login pagina om plugin-instellingen te configureren.

De plug-in vereist API-sleutels om verbinding te maken met sociale platforms. U zult links zien met instructies voor het verkrijgen van deze informatie voor elk platform.

Nadat u uw API-sleutels hebt ingevoerd, klikt u op de knop Instellingen opslaan om uw wijzigingen op te slaan.

U kunt nu uw website bezoeken om de sociale login-knoppen boven uw reactieformulier te zien.

Opmerkingenbeltekst toevoegen vóór of na commentaarformulier

We houden van al onze gebruikers en we stellen het zeer op prijs dat ze een paar minuten nodig hebben om een ​​reactie achter te laten op onze site. Om een ​​gezonde discussieomgeving te creëren, is het echter belangrijk om reacties te modereren.

Voor volledige transparantie hebben we een pagina met reactiebeleid gemaakt, maar u kunt deze link niet alleen in de voettekst plaatsen.

We wilden ervoor zorgen dat ons beleid voor reacties prominent en zichtbaar is voor alle gebruikers die een reactie achterlaten. Daarom hebben we besloten om het commentaarbeleid toe te voegen aan ons commentaarformulier in WordPress.

Als u een reactiebeleidspagina wilt toevoegen, moet u eerst een WordPress-pagina maken en uw commentaarbeleid definiëren (u kunt de onze stelen en deze aanpassen om aan uw behoeften te voldoen).

Hierna kunt u de volgende code toevoegen in het functie.php-bestand van uw thema of een sitespecifieke plug-in. 

 function wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "
We zijn blij dat je hebt gekozen om een ​​reactie achter te laten. Houd er rekening mee dat opmerkingen worden gemodereerd volgens ons beleid inzake reacties.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before');

De bovenstaande code vervangt het standaard commentaarformulier vóór notities met deze tekst. We hebben ook een CSS-klasse in de code toegevoegd, zodat we de melding met CSS kunnen markeren. Hier is de voorbeeld-CSS die we hebben gebruikt: 

 p.comment-policy border: 1px solid # ffd499; achtergrondkleur: # fff4e5; grensradius: 5px; opvulling: 10px; marge: 10px 0px 10px 0px; lettergrootte: klein; lettertype-stijl: cursief;

Zo zag het er uit op onze testsite:

Als u de koppeling achter het commentaartekstgebied wilt weergeven, gebruikt u de volgende code. 

 function wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "
We zijn blij dat je hebt gekozen om een ​​reactie achter te laten. Houd er rekening mee dat opmerkingen worden gemodereerd volgens ons beleid inzake reacties.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after');

Vergeet niet om de URL dienovereenkomstig te wijzigen, zodat deze naar uw reactiebeleidspagina gaat in plaats van example.com

Verplaats commentaartekstveld naar beneden

Standaard verschijnt in het commentaarformulier van WordPress eerst het gebied met de commentaartekst en vervolgens de velden naam, e-mail en website. Deze wijziging is geïntroduceerd in WordPress 4.4.

Voordien vertoonden WordPress-websites eerst naam-, e-mail- en websitevelden en vervolgens het tekstvak voor opmerkingen. We voelden dat onze gebruikers gewend zijn om het commentaarformulier in die volgorde te zien, dus we gebruiken nog steeds de oude veldvolgorde op WPBeginner.

Als je dat wilt doen, hoef je alleen maar de volgende code toe te voegen aan het function.php-bestand van je thema of een site-specifieke plug-in. 

 functie wpb_move_comment_field_to_bottom ($ velden) $ comment_field = $ fields ['comment']; unset ($ fields ['comment']); $ fields ['comment'] = $ comment_field; return $ velden;  add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom'

Met deze code verplaatst u eenvoudig het veld voor het opmerkingenveld naar de onderkant.

Verwijder Website (URL) Field uit WordPress Comment Form

Het veld website in het commentaarformulier trekt veel spammers aan. Hoewel het verwijderen spammers niet zal stoppen of zelfs spam-reacties zal verminderen, zal het je zeker beschermen tegen het per ongeluk goedkeuren van een commentaar met een slechte website-link.

Het verkleint ook een veld uit het commentaarformulier, waardoor het eenvoudiger en gebruikersvriendelijker wordt. Zie ons artikel over het verwijderen van het url-veld van de website uit het WordPress-reactieformulier voor meer informatie over dit onderwerp

Als u het URL-veld uit het opmerkingenformulier wilt verwijderen, voegt u eenvoudig de volgende code toe aan uw functions.php-bestand of een sitespecifieke plug-in. 

 functie wpbeginner_remove_comment_url ($ arg) $ arg ['url'] = "; return $ arg; add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Voeg een selectievakje Abonneren op Reacties toe in WordPress

Wanneer gebruikers een reactie achterlaten op uw website, willen ze wellicht die discussie volgen om te zien of iemand op hun opmerking heeft gereageerd. Door een subscribe to comments-vakje toe te voegen, stelt u gebruikers in staat om instantmeldingen te ontvangen wanneer een nieuw commentaar in het bericht verschijnt.

Om dit selectievakje toe te voegen, is het eerste wat u hoeft te doen installeren en activeren Abonneren op reacties Reloaded-plug-in. Na activering, moet je naar Instellingen "Abonneren op opmerkingen" gaan om de plug-in-instellingen te configureren.

Raadpleeg ons artikel over gedetailleerde stapsgewijze instructies om gebruikers toe te staan ​​zich te abonneren op opmerkingen in WordPress.

Voeg Quicktags toe in commentaarformulier

QuickTags zijn opmaakknoppen waarmee gebruikers hun opmerkingen eenvoudig kunnen opmaken. Deze omvatten knoppen om vet, cursief, een link of blockquote toe te voegen.

Om quicktags toe te voegen, moet u de Basic Comment Quicktags-plug-in installeren en activeren. Zie ons artikel voor meer informatie over het eenvoudig toevoegen van quicktags in het commentaarformulier van WordPress.

Dit is hoe uw commentaarformulier eruitziet na het toevoegen van quicktags.

We hopen dat dit artikel je heeft geholpen om een ​​WordPress-reactieformulier te stijlen om het leuker te maken voor je gebruikers. U kunt ook onze tips bekijken om meer reacties op uw WordPress-blogposts te krijgen.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.