Come modellare il modulo di commento WordPress (Guida definitiva)

Vuoi cambiare lo stile del modulo di commento di WordPress sul tuo sito web? I commenti hanno un ruolo importante nel costruire il coinvolgimento degli utenti su un sito web. Un modulo di commento di facile utilizzo incoraggia gli utenti a partecipare alla discussione. Ecco perché abbiamo creato la guida definitiva su come modellare facilmente il modulo di commento di WordPress.

Prima di iniziare

I temi WordPress controllano l'aspetto del tuo sito web. Ogni tema WordPress viene fornito con diversi file tra cui file modello, file funzioni, JavaScript e fogli di stile.

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

Se non l'hai già fatto, consulta il nostro articolo su come aggiungere CSS personalizzati in WordPress per principianti.

Oltre al CSS, potrebbe essere necessario aggiungere alcune funzioni per modificare l'aspetto predefinito del modulo di commento di WordPress. Se non l'hai già fatto, consulta il nostro articolo su come copiare e incollare il codice in WordPress.

Detto questo, diamo un'occhiata a come stile il modulo di commento di WordPress.

Poiché questa è una guida abbastanza completa, abbiamo creato una tabella dei contenuti per una facile navigazione:

• Modifica i commenti di WordPress con le classi CSS predefinite
• Aggiunta di accesso social al modulo di commento di WordPress
• Aggiunta del testo dei criteri di commento nel modulo commenti di WordPress
• Spostamento del campo di testo del commento in basso
• Rimozione del campo del sito web (URL) dal modulo di commento di WordPress
• Aggiunta di iscrizioni ai commenti Casella di controllo in WordPress
• Aggiungi Quicktags nei commenti di WordPress

Modifica dello stile del modulo di commento in WordPress

Nella maggior parte dei temi WordPress c'è un modello chiamato comments.php. Questo file viene utilizzato per visualizzare commenti e modulo di commento sui post del blog. Il modulo di commento di WordPress viene generato utilizzando la funzione: .

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

È possibile modificare facilmente ciascuno di questi campi semplicemente modificando le classi CSS predefinite. Di seguito è riportato un elenco delle classi CSS predefinite che WordPress aggiunge a ogni modulo di commento.

 #respond  # reply-title  # cancel-comment-reply-link  #commentform  #author  #email  #url  #comment #submit .comment-notes . richiesto  .comment-form-author  .com-form-email  .com-form-url . -form-form-comment . -form-form-cookies-permission  .form-allowed-tags  .Form-submit 

Semplicemente modificando queste classi CSS, è possibile modificare completamente l'aspetto del proprio modulo di commento WordPress.

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

Innanzitutto, inizieremo evidenziando il campo del modulo attivo. Evidenziando il campo attualmente attivo rendi il tuo modulo più accessibile per le persone con esigenze speciali, e rende anche il tuo modulo di commento più gradevole su dispositivi più piccoli.

 #respond background: #fbfbfb; imbottitura: 0 10px 0 10px;  / * Evidenzia campo modulo attivo * / input #respond [tipo = testo], textarea -webkit-transition: tutti gli anni '30 easy-in-out; -moz-transition: tutti gli anni '30 easy-in-out; -ms-transition: tutti gli anni '30 easy-in-out; -o-transizione: tutti gli anni '30 easy-in-out; contorni: nessuno; imbottitura: 3px 0px 3px 3px; margine: 5px 1px 3px 0px; border: 1px solid #DDDDDD;  input #respond [tipo = testo]: focus, input [tipo = email]: focus, input [tipo = url]: focus, textarea: focus box-shadow: 0 0 5px rgba (81, 203, 238, 1 ); margine: 5px 1px 3px 0px; border: 2px solid rgba (81, 203, 238, 1);  

Ecco come appariva la nostra forma nel tema WordPress Twenty Sixteen dopo le modifiche:

Usando queste classi, puoi cambiare il comportamento di come il testo appare all'interno delle caselle di input. Andremo avanti e cambieremo lo stile del testo del nome dell'autore e dei campi dell'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 osservi attentamente lo screenshot qui sotto, il nome e il carattere del campo email sono diversi dall'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, diamo un po 'di sfumatura CSS3 e ombreggiatura.

 #submit background: -moz-linear-gradient (in alto, # 44c767 5%, # 5cbf2a 100%); background: -webkit-linear-gradient (in alto, # 44c767 5%, # 5cbf2a 100%); sfondo: -o-linear-gradient (in alto, # 44c767 5%, # 5cbf2a 100%); sfondo: -ms-linear-gradient (in alto, # 44c767 5%, # 5cbf2a 100%); sfondo: gradiente lineare (in basso, # 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; imbottitura: 16px 31px; text-decoration: none; text-shadow: 0px 1px 0px # 2f6627;  #submit: hover background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0.05, # 5cbf2a), color-stop (1, # 44c767)); sfondo: -moz-linear-gradient (in alto, # 5cbf2a 5%, # 44c767 100%); background: -webkit-linear-gradient (in alto, # 5bfbf 5%, # 44c767 100%); sfondo: -o-lineare-gradiente (in alto, # 5cbf2a 5%, # 44c767 100%); sfondo: -ms-linear-gradient (in alto, # 5bfbf 5%, # 44c767 100%); sfondo: gradiente lineare (verso il basso, # 5cbf2a 5%, # 44c767 100%); background-color: # 5cbf2a;  #submit: active position: relative; top: 1px;  

Prendendo i moduli di commento WordPress al livello successivo

Potresti pensare che fosse troppo semplice. Bene, dobbiamo iniziare lì, quindi tutti possono seguire.

Puoi portare il tuo modulo di commento WordPress al livello successivo riorganizzando i campi del modulo, aggiungendo login social, iscriviti ai commenti, linee guida per i commenti, quicktags e altro.

Aggiungi accesso social ai commenti WordPress

Iniziamo con l'aggiunta di accessi social ai commenti di WordPress.

La prima cosa che devi fare è installare e attivare il plugin di accesso ai social network di WordPress. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l'attivazione, è necessario visitare Impostazioni »Accesso social WP pagina per configurare le impostazioni del plugin.

Il plugin richiederà le chiavi API per connettersi con le piattaforme social. Vedrai link con le istruzioni su come ottenere queste informazioni per ogni piattaforma.

Dopo aver inserito le chiavi API, fare clic sul pulsante Salva impostazioni per memorizzare le modifiche.

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

Aggiunta del testo del criterio commenti prima o dopo il modulo di commento

Amiamo tutti i nostri utenti e apprezziamo davvero che ci vorranno alcuni minuti per lasciare un commento sul nostro sito. Tuttavia, per creare un ambiente di discussione sano è importante moderare i commenti.

Per avere la massima trasparenza, abbiamo creato una pagina dei criteri di commento, ma non puoi semplicemente inserire questo link nel piè di pagina.

Volevamo che la nostra politica dei commenti fosse visibile e visibile per tutti gli utenti che lasciavano un commento. Questo è il motivo per cui abbiamo deciso di aggiungere la politica di commento nel nostro modulo di commento WordPress.

Se si desidera aggiungere una pagina della politica dei commenti, la prima cosa che devi fare è creare una pagina WordPress e definire la tua politica dei commenti (puoi rubare la nostra e modificarla per soddisfare le tue esigenze).

Successivamente, puoi aggiungere il seguente codice nel file functions.php del tuo tema o in un plug-in specifico del sito.

 function wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "
Siamo lieti che tu abbia scelto di lasciare un commento. Tieni presente che i commenti sono moderati in base alla nostra politica sui commenti.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before'); 

Il codice sopra sostituirà il modulo di commento predefinito prima delle note con questo testo. Abbiamo anche aggiunto una classe CSS nel codice, in modo che possiamo evidenziare la notifica utilizzando CSS. Ecco il CSS di esempio che abbiamo usato:

 p.comment-policy border: 1px solid # ffd499; background-color: # fff4e5; border-radius: 5px; imbottitura: 10px; margine: 10px 0px 10px 0px; font-size: small; stile di carattere: corsivo;  

Ecco come è apparso sul nostro sito di test:

Se si desidera visualizzare il collegamento dopo l'area di testo del commento, utilizzare il seguente codice.

 function wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "
Siamo lieti che tu abbia scelto di lasciare un commento. Tieni presente che i commenti sono moderati in base alla nostra politica sui commenti.
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after'); 

Non dimenticare di modificare l'URL di conseguenza, quindi va alla pagina della politica dei commenti piuttosto che example.com

Sposta il campo di testo del commento in basso

Per impostazione predefinita, il modulo di commento di WordPress visualizza prima l'area del testo del commento e poi i campi del nome, della posta elettronica e del sito web. Questa modifica è stata introdotta in WordPress 4.4.

Prima di ciò, i siti Web di WordPress hanno visualizzato prima i campi nome, e-mail e sito Web, quindi la casella di testo del commento. Abbiamo sentito che i nostri utenti sono abituati a vedere il modulo di commento in questo ordine, quindi utilizziamo ancora il vecchio ordine di campo 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 specifico del sito.

 function wpb_move_comment_field_to_bottom ($ fields) $ comment_field = $ fields ['comment']; unset ($ fields ['comment']); $ fields ['comment'] = $ commento_field; restituire $ campi;  add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom' 

Questo codice sposta semplicemente il campo dell'area di testo del commento in basso.

Rimuovi il campo del sito web (URL) dal modulo dei commenti di WordPress

Il campo del sito Web nel modulo dei commenti attira molti spammer. Durante la rimozione non fermerà gli spammer e non ridurrà nemmeno i commenti di spam, ma sicuramente ti salverà dall'accidentale approvazione di un commento con link al sito web sbagliato.

Ridurrà anche un campo dal modulo di commento, rendendolo più facile e più user-friendly. Per ulteriori informazioni su questo argomento, vedere il nostro articolo sulla rimozione del campo url del sito Web dal modulo di commento di WordPress

Per rimuovere il campo URL dal modulo di commento, è sufficiente aggiungere il seguente codice al file functions.php o a un plug-in specifico del sito.

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

Aggiungi una casella di controllo Iscriviti ai commenti in WordPress

Quando gli utenti lasciano un commento sul tuo sito web, potrebbero voler seguire quel thread per vedere se qualcuno ha risposto al loro commento. Aggiungendo una casella di controllo Iscriviti ai commenti, si consente agli utenti di ricevere notifiche istantanee ogni volta che un nuovo commento appare sul post.

Per aggiungere questa casella di controllo, la prima cosa che devi fare è installare e attivare Abbonati ai commenti Reloaded plugin. Dopo l'attivazione, è necessario visitare Impostazioni "Iscriviti ai commenti per configurare le impostazioni del plugin.

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

Aggiungi Quicktags nel modulo dei commenti

Le etichette rapide sono pulsanti di formattazione che consentono agli utenti di modificare facilmente i loro commenti. Questi includono pulsanti in grassetto, in corsivo, aggiungi un link o blockquote.

Per aggiungere quicktags, è necessario installare e attivare il plug-in QuickTags di commento di base. Per i dettagli, vedere il nostro articolo su come aggiungere facilmente quicktags nel modulo di commento di WordPress.

Questo è il modo in cui il tuo modulo di commento si occuperà di aggiungere i quicktags.

Ci auguriamo che questo articolo ti abbia aiutato a capire come applicare lo stile di commento WordPress per renderlo più divertente per i tuoi utenti. Potresti anche voler vedere i nostri suggerimenti per ottenere più commenti sui tuoi post sul blog WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.