Opmerkingen spelen een cruciale rol bij het opbouwen van een community op internet. Opmerkingen bieden een platform voor interactie voor uw lezers waar ze hun mening kunnen delen, waardoor ze vaak terug willen komen.

Er zijn verschillende manieren om gebruikers aan te moedigen een reactie op uw blog achter te laten. Een van die manieren is om een ​​mooi, bruikbaar en toegankelijk reactieformulier te maken.

In deze zelfstudie laten we u zien hoe u het standaard WordPress-opmerkingenformulier opmaakt, we laten u ook zien hoe u opmerkingen kunt toevoegen via ID's voor sociale media en hoe u een functie voor het abonneren op opmerkingen kunt maken en nog veel meer. meer.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

Hoe de stijl van WordPress-reacties veranderen

Als we het over stijl hebben, bedoelen we de CSS-kant van het ding. Hieronder laat ik u zien hoe u het uiterlijk van het opmerkingenformulier in WordPress kunt aanpassen. Elk element op WordPress heeft standaard een CSS-code, dit is het geval voor de lijst met opmerkingen, navigatiemenu's, het opmerkingenformulier, de widgets en nog veel meer.

Onder de bestanden van WordPress-thema's, we hebben een bestand met de naam comments.php die wordt gebruikt om opmerkingen en commentaarformulier op blogposts en pagina's weer te geven. Om het WordPress-opmerkingenformulier weer te geven, de " comment_form () Wordt gebruikt.

Ontdek Hoe kan ik de link naar de WordPress login pagina

Standaard genereert deze functie uw reactieformulier met drie tekstvelden (naam, e-mail en website), een groot tekstvak voor de commentaarinhoud en de verzendknop.

U kunt elk van deze elementen eenvoudig wijzigen door de standaard CSS-klassen en ID's te manipuleren. Hier is een lijst met de standaard CSS-klassen die WordPress aan elk reactieformulier toevoegt.

#comment {# # #} {# #} # comment # reply-link {} #comment # .comment-form-email {} .comment-form-url {} .comment-form-comment {} .form-allowed-tags {

Door eenvoudig deze CSS-klassen aan te passen, kunt u het uiterlijk van het opmerkingenformulier volledig wijzigen. Laten we proberen iets te veranderen om u een idee te geven van wat we kunnen doen.

Ontdek Hoe afbeeldingslinks te vervangen na het installeren van SSL op WordPress

We beginnen met het markeren van het actieve veld op het formulier. Door de actieve velden te markeren, kunnen gebruikers gemakkelijk zien wat ze veranderen en het geeft een kleine dynamische kant aan uw website.

#respond {background: #ececec; padding: 0 5px 0 5px; } / * Highlighting het actieve tekstveld * / #respondinvoer [type = tekst], textarea {-webkit-overgang: alle 0.30's in-out; -moz-overgang: alle 0.30's eenvoudig in-out; -ms-overgang: alle 0.30's eenvoudig in-out; -Overgang: alle 0.30's gemakkelijk in-out; overzicht: geen; padding: 3px 0px 3px 3px; marge: 5px 1px 3px 0px; grens: 1px solid #DDDDDD; } # invoerinvoer [type = tekst]: focus, textarea: focus {box-shadow: 0 0 5px rgba (81, 203, 238, 1); marge: 5px 1px 3px 0px; rand: 1px vaste rgba (81, 203, 238, 1); }

Zo ziet je reactieformulier eruit met Twenty Twelve.

Met behulp van deze klassen kunt u de manier waarop tekst in velden wordt weergegeven, wijzigen. Dit is wat we zullen doen in het volgende voorbeeld.

#author {font-family: Hummer, "Lobster 1.4", "Droid Sans", Arial; lettergrootte: 16px; kleur: #1d1d1d; letter-spacing: .1em; } #url {kleur: #21759b; font-family: "Luicida Console", "Courier New", "Courier", minivan; } 

Hier is het resultaat dat de vorige code zal produceren.

U kunt ook de stijl van de commentaarformulierknop wijzigen. In het volgende voorbeeld geven we het een verloopachtergrond.

#submit {font-family: Arial; kleur: #ffffff; lettergrootte: 20px; padding: 10px; tekst-decoratie: geen; box-shadow: 0px 1px 3px #666666; -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; tekstschaduw: 1px 1px 3px #666666; achtergrond: -webkit-gradiënt (lineair, 0 0, 0 100%, van (#006ad4) tot (#003366)); achtergrond: -moz-lineaire-gradiënt (bovenste, #006ad4, #003366); } #submit: hover {background: -webkit-gradiënt (lineair, 0 0, 0 100%, van (#003366) tot (#006ad4)); achtergrond: -moz-lineaire-gradiënt (bovenste, #003366, #006ad4)}

Hier is het resultaat dat wordt weergegeven.

Hoe u sociale interactie toevoegt aan opmerkingen

Laten we beginnen met het toevoegen van sociale logins aan het WordPress-opmerkingenformulier. Het eerste dat u hoeft te doen, is de plug-in installeren en activeren sociale Inloggen

Ontdek Hoe maak je een plugin in WordPress installeren Om deze plug-in te activeren, moet u een gratis account aanmaken door naar het volgende adres te gaan: https://app.oneall.com

Als u klaar bent, hoeft u niet voor elk netwerk dat u wilt gebruiken een API in te stellen om uw gebruikers via hen verbinding te laten maken.

Hoewel de API's van de verschillende sociale netwerken constant veranderen, hoef je niets te doen, de ontwikkelaars van deze plug-in zullen hun API voor je updaten. Het enige dat u hoeft te doen, is inloggen op de OneAll API.

Dit is hoe uw formulieren worden weergegeven.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. WP Direct zoeken en automatisch voorstellen

Met de plug-in "WP Instant Search & Auto Suggest" kunt u direct suggesties krijgen voor artikelen, pagina's en aangepaste berichttypen wanneer u op uw WordPress-blog zoekt. Het werkt met WPBakery et Cornerstone.

De kenmerken ervan zijn: de rzoeken in volledig scherm, de rDirect zoeken naar aangepaste soorten publicaties, compatibiliteit met Visual Composer, Tdrie geïntegreerde ontwerpstijlen, 5 kleurenschema's om uit te kiezen, de ptoetsenbord- en muisondersteuning, evolledig aanpasbaar via parameters etc ...

Downloaden | demonstratie | web hosting

2. 404 Foutpagina Doorverwijzing naar startpagina of aangepaste pagina

Hier is een van de beste manieren om eenvoudig een 404-foutpagina toe te voegen die de bezoeker doorverwijst naar de startpagina of aangepaste pagina, nadat dit is ingeschakeld WordPress Plugin.

Alle 404-foutpagina's worden doorgestuurd naar de startpagina of een aangepaste URL. Door dit te gebruiken WordPress Plugin, staat u Google toe de pagerank van uw website te verlagen als deze veel 404-foutpagina's heeft.

Ce WordPress Plugin doet niet alleen aan omleiding, maar kan ook een geschikte oplossing zijn om de ranking van uw website in de zoekresultaten van zoekmachines te verbeteren.

Downloaden | demonstratie | web hosting

3. Gerelateerde berichten Pro 

Related Posts Pro biedt een eenvoudige maar krachtige oplossing voor allerlei soortgelijke inhoud op WordPress. Het ondersteunt aangepaste berichttypen, multisite, categorieën, gemengde inhoud, aangepaste inhoud en meer ...

Als functies biedt het onder andere: 3 verschillende soorten lay-outs, 65 vooraf gedefinieerde sjablonen voor elke lay-out, eencodering is niet nodig, de ondersteuning van tbrowsen en Autoplay, compatibiliteit met de aangepaste berichttypen die door plug-ins worden gebruikt WooCommerce, WP eCommerce, kunnen plaatsen enz ..., een zoekbalk met filter, een dzeer beschrijvende documentatie en nog veel meer.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

• Hoe om categorie beschrijvingen te bekijken op WordPress
• Hoe uw WordPress Robots.txt-bestand te optimaliseren voor een perfecte SEO
• Een marktplaats maken met WordPress
• Hoe maak je een widget toe te voegen aan de kop van uw WordPress blog

Conclusie

Alstublieft ! Dat is het voor deze tutorial. We hopen dat dit artikel je heeft geholpen om je feedbackformulieren aantrekkelijker te maken. Aarzel niet om ons ook uw tips te geven over het aanpassen van WordPress, en vooral deel dit artikel met je vrienden op je favoriete sociale netwerken. 

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.

...