Come stilizzare il modulo commenti di WordPress (Guida definitiva)

Vuoi cambiare lo stile del modulo commenti di WordPress sul tuo sito web? Noi di WPBeginner abbiamo passato anni a sperimentare diversi modi per aumentare il coinvolgimento degli utenti e abbiamo scoperto che un modulo commenti dall'aspetto gradevole e facile da usare può fare una differenza enorme.

I commenti svolgono un ruolo importante nella creazione del coinvolgimento degli utenti su un sito web. Quando rendi facile e visivamente accattivante per gli utenti lasciare commenti, incoraggi maggiori discussioni e interazioni sul tuo sito web.

In questo articolo, ti mostreremo come stilizzare facilmente il modulo commenti di WordPress per aumentare il coinvolgimento sul tuo sito web.

Prima di iniziare

I temi di WordPress controllano l'aspetto del tuo sito web. Ogni tema di WordPress viene fornito con diversi file, inclusi file di template, file functions, JavaScript e fogli di stile.

I fogli di stile contengono le regole CSS per tutti gli elementi utilizzati dal tuo tema WordPress. Puoi aggiungere il tuo CSS personalizzato per sovrascrivere le regole di stile del tuo tema.

Se non l'hai mai fatto prima, consulta il nostro articolo su come aggiungere CSS personalizzato in WordPress per principianti.

Oltre al CSS, potresti anche dover aggiungere alcune funzioni per modificare l'aspetto predefinito del modulo commenti di WordPress. Se non l'hai mai fatto prima, consulta il nostro articolo su come copiare e incollare codice in WordPress.

Detto questo, diamo un'occhiata a come stilizzare il modulo commenti di WordPress.

Poiché questa è una guida piuttosto completa, abbiamo creato un indice per una facile navigazione:

• Stilizzare il modulo commenti di WordPress usando SeedProd Theme Builder
• Change WordPress Comments with Default CSS Classes
• Aggiungere il login social ai commenti di WordPress
• Aggiungere testo sulla policy dei commenti nel modulo commenti di WordPress
• Spostare il campo di testo dei commenti in basso
• Rimuovere il campo Sito web (URL) dal modulo commenti di WordPress
• Aggiungere una casella di controllo "Iscriviti ai commenti" in WordPress
• Aggiungere campi personalizzati al modulo commenti di WordPress

Stilizzare il modulo commenti di WordPress usando SeedProd Theme Builder

Questo metodo richiede SeedProd che è il miglior plugin per la creazione di pagine e temi WordPress sul mercato.

È raccomandato per principianti senza esperienza di codifica. Tuttavia, lo svantaggio di questo metodo è che sostituirà il tuo tema WordPress esistente con un tema personalizzato.

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Nota: Avrai bisogno almeno del piano PRO per accedere alla funzionalità del theme builder.

Dopo l'attivazione, dovrai creare i template per il tuo tema WordPress personalizzato. SeedProd ti permette di generare facilmente questi template usando uno dei loro temi predefiniti.

Per istruzioni dettagliate, consulta il nostro tutorial su come creare un tema WordPress personalizzato senza codice.

Una volta generati i modelli del tuo tema, devi fare clic sul link 'Modifica design' sotto il modello del singolo post.

Questo caricherà l'anteprima del singolo post nell'interfaccia del tema builder di SeedProd. Noterai il blocco del modulo commenti in fondo all'anteprima.

Fai semplicemente clic sul modulo commenti e vedrai le sue proprietà nel pannello di sinistra.

Da qui, puoi aggiungere una nota per i commenti o una privacy policy, puoi anche passare alla scheda 'Avanzate' per modificare lo stile del modulo commenti senza scrivere alcun codice CSS.

Una volta terminato, non dimenticare di fare clic sul pulsante 'Salva' per pubblicare le tue modifiche.

SeedProd rende estremamente facile cambiare lo stile di qualsiasi elemento sul tuo sito web senza scrivere codice.

Tuttavia, è un tema builder e potresti già utilizzare un tema WordPress che ti piace. In tal caso, i seguenti suggerimenti ti aiuteranno a modificare manualmente gli stili del modulo commenti in WordPress.

Modifica dello stile del modulo commenti in WordPress

All'interno della maggior parte dei temi WordPress è presente un template chiamato comments.php. Questo file viene utilizzato per visualizzare i commenti e i moduli di commento sui post del tuo blog. Il modulo commenti di WordPress viene generato utilizzando la funzione: <?php comment_form(); ?>.

Per impostazione predefinita, questa funzione genera il tuo modulo commenti con tre campi di testo (Nome, Email e Sito Web), un campo di area di testo per il testo del commento, una casella di controllo per la conformità GDPR e il pulsante di invio.

Puoi facilmente modificare ciascuno di questi campi semplicemente modificando le classi CSS predefinite. Di seguito è riportato un elenco delle classi CSS predefinite che WordPress aggiunge a ciascun modulo commenti.

#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

Modificando semplicemente queste classi CSS, puoi cambiare completamente l'aspetto del tuo modulo commenti di WordPress.

Andiamo avanti e proviamo a cambiare alcune cose, in modo da avere una buona idea di come funziona.

Per prima cosa, inizieremo evidenziando il campo del modulo attivo. Evidenziare il campo attualmente attivo rende il tuo modulo più accessibile per le persone con bisogni speciali e rende anche il tuo modulo commenti più gradevole su dispositivi più piccoli.

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

Ecco come appariva il nostro modulo nel tema Twenty Sixteen di WordPress dopo le modifiche:

Utilizzando queste classi, puoi cambiare il comportamento di come appare il testo all'interno delle caselle di input. Continueremo e cambieremo lo stile del testo dei campi nome autore e URL.

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

Se dai un'occhiata più da vicino nello screenshot qui sotto, il font dei campi nome ed email è diverso da quello dell'URL del sito web.

Puoi anche cambiare lo stile del pulsante di invio del modulo di commento di WordPress. Invece di usare il pulsante di invio predefinito, diamogli un gradiente CSS3 e un'ombra a scatola 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;
}

Portare i moduli di commento di WordPress al livello successivo

Potresti pensare che sia stato troppo basilare. Beh, dobbiamo iniziare da lì in modo che tutti possano seguirci.

Tuttavia, puoi portare il tuo modulo di commento di WordPress al livello successivo riorganizzando i campi del modulo, aggiungendo il login sociale, le iscrizioni ai commenti, le linee guida per i commenti, i tag rapidi e altro ancora.

Aggiungere il login sociale ai commenti di WordPress

Iniziamo aggiungendo i login sociali ai commenti di WordPress.

La prima cosa che devi fare è installare e attivare il plugin Super Socializer. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, devi visitare Super Socializer » Social Login e quindi selezionare la casella che dice 'Abilita Social Login'.

Questo apre il pannello delle opzioni di login sociale. Per prima cosa, fai clic sulla scheda 'Configurazione avanzata'.

Quindi, assicurati che la casella 'Abilita nel modulo di commento' sia selezionata.

Successivamente, fai clic sulla scheda 'Configurazione di base'. Qui, puoi scegliere i social network che desideri aggiungere selezionando le caselle nella sezione 'Seleziona Social Network'.

Sotto questo, il plugin richiederà le chiavi API per potersi connettere con le piattaforme social. Fai semplicemente clic sull'icona a forma di 'punto interrogativo' per visualizzare le istruzioni su come ottenerle per ciascuna piattaforma.

Una volta terminato, fai clic sul pulsante 'Salva modifiche' per salvare le impostazioni di login sociale.

Ora puoi visitare il tuo sito web per vedere i pulsanti di accesso social sopra il tuo modulo di commento. 

Aggiungere il testo della policy dei commenti prima o dopo il modulo dei commenti

Amiamo tutti i nostri utenti e apprezziamo molto che dedichino qualche minuto a lasciare un commento sul nostro sito. Tuttavia, per creare un ambiente di discussione sano è importante moderare i commenti.

Per avere piena trasparenza, abbiamo creato una pagina di policy dei commenti, ma non puoi semplicemente mettere questo link nel footer.

Volevamo che la nostra policy sui commenti fosse prominente e visibile a tutti gli utenti che lasciano un commento. Ecco perché abbiamo deciso di aggiungere la policy sui commenti nel nostro modulo di commenti di WordPress.

Se vuoi aggiungere una pagina di policy sui commenti, la prima cosa da fare è creare una pagina WordPress e definire la tua policy sui commenti (puoi rubare la nostra e modificarla per soddisfare le tue esigenze).

Dopodiché, puoi aggiungere il seguente codice nel file functions.php del tuo tema o in un plugin per snippet di codice.

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');

Il codice sopra sostituirà il modulo di commenti predefinito prima delle note con questo testo. Abbiamo anche aggiunto una classe CSS nel codice, in modo da poter evidenziare l'avviso utilizzando il CSS. Ecco il CSS di esempio che abbiamo utilizzato:

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

Ecco come appariva sul nostro sito di prova:

Se vuoi visualizzare il link dopo l'area di testo dei commenti, usa il seguente codice.

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');

Non dimenticare di cambiare l'URL di conseguenza, in modo che rimandi alla tua pagina di policy sui commenti anziché a example.com.

Spostare il campo di testo dei commenti in basso

Per impostazione predefinita, il modulo di commenti di WordPress visualizza prima l'area di testo dei commenti e poi i campi nome, email e sito web. Questa modifica è stata introdotta in WordPress 4.4.

Prima di ciò, i siti web WordPress visualizzavano prima i campi nome, email e sito web, e poi la casella di testo dei commenti. Abbiamo ritenuto che i nostri utenti fossero abituati a vedere il modulo di commenti in quell'ordine, quindi utilizziamo ancora il vecchio ordine dei campi su WPBeginner.

Se vuoi farlo, tutto ciò che devi fare è aggiungere il seguente codice al file functions.php del tuo tema o a un plugin per snippet di codice.

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');

Raccomandiamo sempre di aggiungere codice in WordPress utilizzando un plugin per snippet di codice come WPCode. Questo rende facile aggiungere codice personalizzato senza modificare il tuo file functions.php, quindi non devi preoccuparti di interrompere il tuo sito.

Per iniziare, devi installare e attivare il plugin gratuito WPCode. Per istruzioni, consulta questa guida su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress.

Da lì, trova l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fai clic sul pulsante '+ Aggiungi snippet personalizzato' sotto di essa.

Dopo di che, devi selezionare 'Snippet PHP' come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Successivamente, aggiungi un titolo per il tuo snippet in cima alla pagina, questo può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.

Quindi, incolla il codice sopra nella casella 'Anteprima codice'.

Infine, semplicemente sposta l'interruttore da 'Inattivo' ad 'Attivo' e fai clic sul pulsante 'Salva snippet'.

Questo codice sposta semplicemente il campo di testo dei commenti in fondo.

Rimuovere il campo Sito web (URL) dal modulo commenti di WordPress

Il campo del sito web nel modulo dei commenti attira molti spammer. Sebbene la sua rimozione non fermerà gli spammer o addirittura ridurrà i commenti di spam, ti risparmierà sicuramente dall'approvare accidentalmente un commento con un link al sito web dell'autore dannoso.

Ridurrà anche un campo dal modulo dei commenti, rendendolo più facile e intuitivo. Per saperne di più su questo argomento, consulta il nostro articolo su come rimuovere il campo URL del sito web dal modulo dei commenti di WordPress.

Per rimuovere il campo URL dal modulo dei commenti, aggiungi semplicemente il seguente codice al tuo file functions.php o a un plugin per snippet di codice.

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

Puoi seguire gli stessi passaggi della sezione precedente per aggiungere in sicurezza questo codice in WordPress utilizzando il plugin WPCode.

Aggiungere una casella di controllo "Iscriviti ai commenti" in WordPress

Quando gli utenti lasciano un commento sul tuo sito web, potrebbero voler seguire quella discussione per vedere se qualcuno ha risposto al loro commento. Aggiungendo una casella di controllo per l'iscrizione ai commenti, consenti agli utenti di ricevere notifiche istantanee ogni volta che appare un nuovo commento nel post.

Per aggiungere questa casella di controllo, la prima cosa da fare è installare e attivare il plugin Subscribe to Comments Reloaded. Dopo l'attivazione, devi visitare la pagina StCR » Modulo di commento per configurare le impostazioni del plugin.

Per istruzioni dettagliate passo dopo passo, consulta il nostro articolo su come consentire agli utenti di iscriversi ai commenti in WordPress.

Aggiungi campi extra al modulo di commento di WordPress

Vuoi aggiungere campi extra al tuo modulo di commento di WordPress? Ad esempio, un campo opzionale dove gli utenti possono aggiungere il loro handle di Twitter?

Installa e attiva semplicemente il plugin WordPress Comments Fields . Dopo l'attivazione, vai alla pagina 'Campi commenti' e passa alla scheda 'Campi commenti'.

Trascina e rilascia semplicemente un campo personalizzato e dagli un titolo, una descrizione e un nome dati.

Una volta terminato di aggiungere i campi, non dimenticare di fare clic sul pulsante 'Salva tutte le modifiche'.

Ora puoi visualizzare il tuo modulo di commento per vedere i campi personalizzati in azione.

I campi personalizzati vengono quindi visualizzati nella moderazione dei commenti e sotto il contenuto del commento.

Per maggiori dettagli, consulta il nostro tutorial su come aggiungere campi personalizzati al modulo di commenti in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come stilizzare il modulo di commenti di WordPress per renderlo più divertente per i tuoi utenti. Potresti anche voler consultare i nostri suggerimenti per ottenere più commenti sui tuoi post del blog di WordPress e le nostre scelte di esperti dei migliori plugin per social media per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.