Hoe het WordPress-commentaarformulier op te stellen - DeLaatbusiness

Hoe het WordPress-commentaarformulier op te stellen

7 min


109
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

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 te stijlen.

voor 700+ andere wordpress artikelen check:https://delaatbusiness.com/category/wordpress/

Styling WordPress reactieformulier

Voordat u begint

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

Stijlbladen bevatten de CSS- regels voor alle elementen die worden gebruikt door uw WordPress-thema. 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 een aantal 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.

Verander de vorm van commentaarformaten 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 op uw blogberichten weer te geven. De WordPress reactieformulier wordt gegenereerd door gebruik te maken van de functie: <?php comment_form(); ?>.

Standaard genereert deze functie uw opmerkingenformulier met drie tekstvelden (Naam, E-mail en Website), een tekstveld voor de reactietekst , een selectievakje voor GDPR-conformiteit en de knop Verzenden .

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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

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. Als u het momenteel actieve veld markeert, wordt uw formulier toegankelijker voor mensen met speciale behoeften. Bovendien ziet uw opmerkingen er op kleinere apparaten mooier uit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    
#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);
}

Zo zag onze vorm eruit in het WordPress Twenty Sixteen-thema na de wijzigingen:

Markeer het actieve formulierveld voor opmerkingen

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

1
2
3
4
5
6
7
8
9
10
11
#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 aandachtig kijkt, is de naam en het e-maildialtype anders dan de website-URL.

Het wijzigen van de invoervorm van het commentaarformulier

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#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;
}

Knopstijl in reactievorm

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 WordPress-reactieformulier naar een hoger niveau brengen 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 Logininstalleren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

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

WP Social Login-instellingen

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.

Voeg sociale login-knoppen toe aan het reactieformulier

Notitiebeleidstekst 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 .

Om volledige transparantie te hebben, hebben we een reactie beleid pagina, maar je kunt niet zomaar deze link in de voettekst.

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 .

1
2
3
4
5
6
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');

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

1
2
3
4
5
6
7
8
9
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;
}

Zo zag het er uit op onze testsite:

Reactie beleidsbeleid

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

1
2
3
4
5
6
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');

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

Verplaats commentaartekstveld naar beneden

Standaard wordt in het commentaarformulier van WordPress eerst het gebied met de commentaartekst weergegeven en vervolgens de velden Naam, E-mailadres 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 gebruiken we 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 .

1
2
3
4
5
6
7
8
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'

Deze code verplaatst eenvoudig het veld voor het commentaartekstgebied naar beneden.

Commentaartekst naar beneden

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 weerhouden om per ongeluk een commentaar met slechte auteurswebsite goed te keuren.

Het verkleint ook een veld uit het commentaarformulier, waardoor het eenvoudiger en gebruiksvriendelijker wordt. Meer informatie over dit onderwerp vindt u in ons artikel over het verwijderen van het URL-veld van een website in het WordPress-reactieformulier

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.

1
2
3
4
5
function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

URL-veld uit commentaarformulier verwijderen

Voeg een selectievakje Abonneren op opmerkingen toe in WordPress

Wanneer gebruikers een opmerking achterlaten op uw website, willen ze misschien 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 direct notificaties te ontvangen wanneer een nieuwe reactie op het bericht verschijnt.

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

Abonneren op reacties opnieuw geladen

Voeg Quicktags toe in commentaarformulier

QuickTags zijn opmaakknoppen waarmee gebruikers hun opmerkingen gemakkelijk 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 .

Zo ziet uw reactieformulier er uit na het toevoegen van quicktags.

quicktags in commentaarformulier

We hopen dat dit artikel je heeft geholpen om te leren hoe je een WordPress-reactieformulier vormgeeft om het leuker te maken voor je gebruikers. 


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format