I commenti svolgono un ruolo cruciale nella costruzione di una comunità su Internet. I commenti forniscono una piattaforma di interazione per i tuoi lettori dove possono condividere i loro pensieri, il che molto spesso li spinge a tornare.

Esistono diversi modi per incoraggiare gli utenti a lasciare un commento sul tuo blog. Uno di questi modi è creare un modulo di commento bello, utilizzabile e accessibile.

In questo tutorial, ti mostreremo come modellare il modulo predefinito dei commenti di WordPress, ti mostreremo anche come aggiungere la funzionalità dei commenti tramite gli ID dei social media e come creare la funzionalità di iscrizione ai commenti e molto altro ancora. Di Più.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Come cambiare lo stile di commenti WordPress

Quando parliamo di stile, intendiamo il Lato CSS della cosa. Di seguito, ti mostrerò come personalizzare l'aspetto del modulo dei commenti in WordPress. Ogni elemento di default su WordPress ha un codice CSS, questo è il caso dell'elenco dei commenti, menu di navigazione, il modulo dei commenti, il widget e più.

Tra i file di Temi WordPress, abbiamo un file chiamato comments.php che viene utilizzato per visualizzare commenti e modulo di commento su post e pagine del blog. Per visualizzare il modulo dei commenti di WordPress, il " comment_form () È usato.

Scopri Come trovare il link alla pagina di login di WordPress

Per impostazione predefinita, questa funzione genera il modulo di commento con tre campi di testo (nome, e-mail e sito web), una grande casella di testo, per il contenuto del commento e il pulsante di invio.

Puoi facilmente modificare ciascuno di questi elementi semplicemente manipolando le classi e gli identificatori CSS predefiniti. Ecco un elenco delle classi CSS predefinite che WordPress aggiunge in ogni modulo di commento.

#respond {} # risposta-title {} # cancel-how-reply-link {} {} #commentform #author #email {} {} {} #URL #comment #submit .comment Note {} {} .required .come-form-autore {} .comment-form-mail} {.come-form-url} {.come-form-how {} .Form-permesso-tags {} .Form-presentare

Modificando semplicemente queste classi CSS, puoi cambiare completamente l'aspetto del modulo dei commenti. Proviamo a cambiare qualcosa per darti un'idea di cosa possiamo fare.

Scopri Come sostituire i collegamenti alle immagini dopo aver installato SSL su WordPress

Innanzitutto, inizieremo evidenziando il campo attivo nel modulo. Evidenziando i campi attivi, gli utenti possono facilmente vedere cosa stanno cambiando e dà un lato leggermente dinamico al tuo sito web.

#respond {background: #ececec; padding: 0 5 0px 5px; } / * Evidenziando il campo di testo attivo * / ingresso #respond [type = text] textarea {-webkit-transizione: tutti 0.30s facilità-in-out; -moz-transizione: tutti 0.30s facilità-in-out; -ms-transizione: tutti 0.30s facilità-in-out; -o-transizione: tutti 0.30s facilità-in-out; delineare: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px #dddddd solido; } #respond input [type = text]: fuoco, textarea: focus {box-ombra: 0 0 5px RGBA (81, 203, 238, 1); margin: 5px 1px 3px 0px; border: 1px RGBA solido (81, 203, 238, 1); }

Ecco come apparirà il tuo modulo di commento con Twenty Twelve.

Con l'uso di queste classi, puoi cambiare il modo in cui il testo appare all'interno dei campi. Questo è ciò che faremo nel seguente esempio.

#author {font-family: "Lobster Lobster 1.4", "Droid Sans", Arial; font-size: 16px; colore: #1d1d1d; letter-spacing: .1em; #URL} {color: #21759b; font-family: "Luicida Console", "Courier New", "Corriere", minivan; } 

Ecco il risultato che produrrà il codice precedente.

È inoltre possibile modificare lo stile del pulsante del modulo di commento. Nell'esempio seguente, gli daremo uno sfondo sfumato.

#submit {font-family: Arial; color: #FFFFFF; font-size: 20px; padding: 10px; text-decoration: none; box-ombra: 0px 1px 3px #666666; -webkit-box-ombra: 0px 1px 3px #666666; -moz-box-ombra: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; sfondo: -webkit-gradiente (lineare, 0 0, 0 100%, da (#006ad4) a (#003366)); sfondo: -moz-linear-pendenza (superiore, #006ad4, #003366); } #submit: hover {background: -webkit-gradiente (lineare, 0 0, 0 100%, da (#003366) a (#006ad4)); sfondo: -moz-linear-gradient (in alto, #003366, #006ad4)}

Ecco il risultato che verrà visualizzato.

Come aggiungere l'interazione sociale nei commenti

Cominciamo con l'aggiunta di accessi sociali al modulo dei commenti di WordPress. La prima cosa che devi fare è installare e attivare il plugin login Social

Scopri Come installare un plugin in WordPress Per attivare questo plugin è necessario creare un account gratuito andando al seguente indirizzo: https://app.oneall.com

Una volta fatto, non dovrai configurare un'API per ogni rete che desideri utilizzare per consentire agli utenti di connettersi attraverso di loro.

Sebbene le API dei diversi social network siano in costante cambiamento, non dovrai fare nulla, gli sviluppatori di questo plugin aggiorneranno le loro API per te. Tutto quello che devi fare è accedere all'API OneAll.

Ecco come verranno visualizzati i tuoi moduli.

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Ricerca istantanea WP e suggerimento automatico

Il plug-in "WP Instant Search & Auto Suggest" ti consente di ottenere immediatamente suggerimenti per articoli, pagine e tipi di post personalizzati durante la ricerca nel tuo blog WordPress. Funziona con WPBakery et Pietra angolare.

Le sue caratteristiche includono: la rcerca in modalità schermo intero, il rRicerca istantanea di tipi personalizzati di pubblicazioni, compatibilità con Visuale Compositore, Ttre stili di progettazione integrati, combinazioni di colori 5 tra cui scegliere, psupporto per tastiera e mouse, ecompletamente personalizzabile tramite parametri ecc ...

Download | Demo | Web hosting

2. Pagina di errore 404 Reindirizza alla pagina iniziale o personalizzata

Ecco uno dei modi migliori per aggiungere facilmente una pagina di errore 404 che reindirizzerà il visitatore alla home page o alla pagina personalizzata, dopo averlo abilitato WordPress Plugin.

Tutte le 404 pagine di errore verranno reindirizzate alla home page o a un URL personalizzato. Usando questo WordPress Plugin, permetterai a Google di ridurre il pagerank del tuo sito web se ha molte pagine di errore 404.

Questo plugin WordPress non reindirizza solo, ma può anche essere una soluzione adatta per migliorare il posizionamento del tuo sito Web nei risultati dei motori di ricerca.

Download | Demo | Web hosting

3. Related Posts Pro 

Articoli correlati Pro fornisce una soluzione semplice ma potente per tutti i tipi di contenuti simili su WordPress. Supporta tipi di post personalizzati, multisito, categorie, contenuti misti, contenuti personalizzati e altro ...

Come caratteristiche offre tra gli altri: 3 diversi tipi di layout, Modelli predefiniti 65 per ciascun layout, anon sarà necessaria alcuna codifica, il supporto di tnavigazione e riproduzione automatica, compatibilità con i tipi di post personalizzati utilizzati dai plugin WooCommerce, WP eCommerce, bbPress ecc ..., a barra di ricerca con filtro, a ddocumentazione molto descrittiva e molto altro.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

• Come visualizzare la descrizione delle categorie su WordPress
• Come ottimizzare il tuo file WordPress Robots.txt per un SEO perfetto
• Come creare un marketplace con WordPress
• Come aggiungere un widget per l'intestazione del tuo blog WordPress

Conclusione

Ecco ! Questo è tutto per questo tutorial. Ci auguriamo che questo articolo ti abbia aiutato a rendere più coinvolgenti i tuoi moduli di feedback. Non esitate a offrirci anche i vostri suggerimenti sulla personalizzazione di WordPress e soprattutto condividi questo articolo con i tuoi amici sui tuoi social network preferiti. 

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...