Vai al contenuto principale

Come personalizzare la forma di commenti su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 dei temi di 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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

evidenziare-attivo-form-field

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.

how-form-input-style

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

how-submit-button

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.

come personalizzare il modulo di feedback di wordpress 2come personalizzare il modulo di feedback di wordpress 

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa 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. wp-tempo-search-wordpress-plugin-per-search

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 aver attivato questo plugin per WordPress.Pagina di errore 404 Reindirizza alla pagina iniziale o personalizzata

Tutte le pagine di errore 404 verranno reindirizzate alla home page o a un URL personalizzato. Utilizzando questo plugin per WordPress, consentirai 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 ...Post correlato Pro

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.

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.

...

Questo articolo contiene i commenti 5

  1. Grazie per questo tutorial, ma come modificare la traduzione iniziale
    Ad esempio Invia un commento è tradotto per Pubblica il commento
    Vorrei cambiare in Posta un commento
    Non ho trovato da nessuna parte un .po in cui si trova questo testo che appare nel file comments.php

    Grazie per il vostro aiuto

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
1 azioni
quota1
Tweet
Enregistrer