Cum să stilul formularului de comentariu WordPress (Ultimate Guide)

Doriți să modificați stilul formularului de comentariu WordPress pe site-ul dvs.? Comentariile joacă un rol important în construirea implicării utilizatorilor pe un site web. Un formular de comentarii ușor de utilizat încurajează utilizatorii să participe la discuții. De aceea am creat ghidul final cu privire la modul în care puteți personaliza cu ușurință formularul de comentarii WordPress.

Înainte de a începe

Temele WordPress controlează aspectul site-ului dvs. Fiecare temă WordPress vine cu mai multe fișiere, inclusiv fișiere șablon, fișiere de funcții, JavaScript și foi de stil.

Foile de stil conțin regulile CSS pentru toate elementele utilizate de tema WordPress. Puteți adăuga propriul CSS personalizat pentru a înlocui regulile stilului temei.

Dacă nu ați făcut acest lucru înainte, consultați articolul nostru despre cum să adăugați CSS personalizat în WordPress pentru începători.

În afară de CSS, poate fi necesar să adăugați și câteva funcții pentru a modifica aspectul implicit al formularului de comentarii WordPress. Dacă nu ați făcut acest lucru înainte, vă rugăm să consultați articolul nostru despre cum să copiați și să inserați codul în WordPress.

Acestea fiind spuse, să aruncăm o privire asupra modului de a modela formularul de comentarii WordPress.

Deoarece acesta este un ghid destul de cuprinzător, am creat un tabel de conținut pentru o navigare ușoară:

• Modificați comentariile WordPress cu clasele CSS implicite
• Adăugarea de conectare socială la WordPress Formularul de comentariu
• Adăugarea textului politicii de comentarii în formularul de comentarii WordPress
• Se mișcă câmpul textului Comentariu în partea inferioară
• Eliminarea câmpului web (URL) din formularul de comentariu WordPress
• Adăugarea Abonare la comentarii Câmp de verificare în WordPress
• Adăugați Quicktags în comentariile WordPress

Schimbarea stilului de formular de comentariu în WordPress

În interiorul majorității temelor WordPress există un șablon numit comments.php. Acest fișier este utilizat pentru a afișa comentariile și formularul de comentarii în postările de pe blog. Formularul de comentarii WordPress este generat prin utilizarea funcției: .

În mod implicit, această funcție generează formularul de comentarii cu trei câmpuri de text (nume, e-mail și site web), un câmp textarea pentru textul comentariului, o casetă de selectare pentru conformitatea cu GDPR și butonul de trimitere.

Puteți modifica cu ușurință fiecare dintre aceste câmpuri prin simpla modificare a claselor CSS implicite. Mai jos este o listă a claselor CSS implicite pe care WordPress le adaugă fiecărui formular de comentarii.

 #responsive-link  #comment #comment notes comment # -submit .comment-notes  .required  .comment-form-author  .comment-form-email  .comment-form-url  .comment-form-comment  .form-submit 

Prin simpla modificare a acestor clase CSS, puteți schimba complet aspectul și comentariul dvs. al formularului de comentarii WordPress.

Să mergem mai departe și să încercăm să schimbăm câteva lucruri, astfel încât să puteți avea o idee bună despre cum funcționează acest lucru.

În primul rând, vom începe prin evidențierea câmpului formularului activ. Evidențierea câmpului activ în prezent face ca formularul dvs. să fie mai accesibil pentru persoanele cu nevoi speciale și, de asemenea, face ca formularul de comentarii să arate mai bine pe dispozitivele mai mici.

 #respond background: #fbfbfb; umplutura: 0 10px 0 10px;  / * Evidențiați câmpul formularului activ * / #respondul de intrare [type = text], textarea -webkit-transition: all 0.30s easy-in-out; -moz-tranziție: toate 0.30s ușurință-în-out; -ms-tranziție: toate 0.30s ușurință în-out; -o-tranziție: toate 0,30s ușurință în-out; contur: nici unul; padding: 3px 0px 3px 3px; margine: 5px 1px 3px 0px; frontieră: 1px solid #DDDDDD;  # introduceți intrarea [tip = text]: focalizare, introducere [tip = email]: focalizare, introducere [tip = url]: focus, textarea: focus box-shadow: 0 0 5px rgba (81, 203, 238, 1) ); margine: 5px 1px 3px 0px; graniță: rpx 2px solid (81, 203, 238, 1);  

Așa a arătat forma noastră în tema WordPress Twenty Sixteen după schimbări:

Folosind aceste clase, puteți schimba comportamentul modului în care textul apare în casetele de introducere. Vom merge mai departe și vom schimba stilul de text al numelui autorului și al câmpurilor de adrese URL.

 #author, #email font-family: "Open Sans", "Droid Sans", Arial; -Stil de font: italic; Culoare: # 1d1d1d; literă Spațiere: .1em;  #url culoare: # 1d1d1d; font-family: "Luicida Console", "Courier New", "Curier", monospace;  

Dacă analizați cu atenție imaginea de mai jos, fontul câmpului de nume și e-mail este diferit de adresa URL a site-ului web.

De asemenea, puteți schimba stilul butonului de trimitere a formularului de comentarii WordPress. În loc să utilizați butonul implicit de trimitere, să-i dăm un gradient CSS3 și umbra cutie.

 #submit background: -moz-linear-gradient (sus, # 44c767 5%, # 5cbf2a 100%); fundal: -webkit-gradient linear (top, # 44c767 5%, # 5cbf2a 100%); fundal: -o-gradient linear (top, # 44c767 5%, # 5cbf2a 100%); fundal: -ms-gradient liniar (top, # 44c767 5%, # 5cbf2a 100%); fundal: gradient liniar (la fund, # 44c767 5%, # 5cbf2a 100%); background-color: # 44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; frontieră: 1px solid # 18ab29; display: inline-block; cursor: pointer; Culoare: #FFFFFF; font-family: Arial; font-size: 17px; padding: 16px 31px; text-decoration: none; text-shadow: 0px 1px 0px # 2f6627;  #submit: hover fundal: -webkit-gradient (liniuță, stânga sus, jos stânga, oprire color (0,05, # 5cbf2a), stop color (1, # 44c767)); fundal: -moz-linear-gradient (top, # 5cbf2a 5%, # 44c767 100%); fundal: -webkit-gradient liniar (top, # 5cbf2a 5%, # 44c767 100%); fundal: -o-gradient linear (top, # 5cbf2a 5%, # 44c767 100%); fundal: -ms-linear-gradient (top, # 5cbf2a 5%, # 44c767 100%); fundal: gradient liniar (la fund, # 5cbf2a 5%, # 44c767 100%); background-color: # 5cbf2a;  #submit: activă position: relative; sus: 1px;  

Luând formularele de comentarii WordPress la nivelul următor

S-ar putea să vă gândiți că a fost prea de bază. Ei bine, trebuie să începem acolo, astfel încât toată lumea să poată urma.

Puteți lua formularul de comentarii WordPress la următorul nivel, rearanjând câmpurile de formular, adăugând datele de conectare sociale, abonați-vă la comentarii, linii directoare pentru comentarii, repere rapide și multe altele.

Adăugați date de conectare sociale la comentarii în WordPress

Să începem cu adăugarea de logare socială la comentariile WordPress.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WordPress Social Login. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să vizitați Setări »Conectare socială WP pentru a configura setările pluginului.

Pluginul va necesita chei API pentru a se conecta cu platformele sociale. Veți vedea linkuri cu instrucțiuni despre cum puteți obține aceste informații pentru fiecare platformă.

După introducerea cheilor API, faceți clic pe butonul de salvare a setărilor pentru a stoca modificările.

Acum puteți vizita site-ul dvs. Web pentru a vedea butoanele de conectare socială deasupra formularului dvs. de comentariu.

Adăugarea textului politicii de comentarii înainte sau după formularul de comentariu

Îți place toți utilizatorii noștri, iar noi le apreciem cu adevărat câteva minute pentru a lăsa un comentariu pe site-ul nostru. Cu toate acestea, pentru a crea un mediu de discuții sănătos, este important să moderați comentariile.

Pentru a avea o transparență deplină, am creat o pagină cu politica de comentarii, însă nu puteți pune acest link în subsol.

Am dorit ca politica noastră de comentarii să fie proeminentă și vizibilă pentru toți utilizatorii care lasă un comentariu. De aceea am decis să adăugăm politica de comentarii în formularul nostru de comentarii WordPress.

Dacă doriți să adăugați o pagină de politică cu comentarii, atunci primul lucru pe care trebuie să-l faceți este să creați o pagină WordPress și să definiți politica de comentarii (puteți să furați a noastră și să o modificați pentru a vă satisface nevoile).

După aceasta, puteți adăuga următorul cod în fișierul functions.php al temei sau în plugin-ul specific site-ului.

 funcția wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "
Suntem bucuroși că ați ales să lăsați un comentariu. Rețineți că comentariile sunt moderate în conformitate cu politica noastră de comentarii.
"return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before'); 

Codul de mai sus va înlocui formularul de comentariu implicit înainte de note cu acest text. De asemenea, am adăugat o clasă CSS în cod, astfel încât să putem evidenția notificarea utilizând CSS. Iată exemplul CSS folosit:

 politica p.comment border: 1px solid # ffd499; fundal-culoare: # fff4e5; raza de graniță: 5px; padding: 10px; margine: 10px 0px 10px 0px; font-size: mic; font-style: italic;  

Acesta este modul în care a arătat pe site-ul nostru de testare:

Dacă doriți să afișați linkul după zona de text a comentariilor, utilizați următorul cod.

 funcția wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "
Suntem bucuroși că ați ales să lăsați un comentariu. Rețineți că comentariile sunt moderate în conformitate cu politica noastră de comentarii.
"return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after'); 

Nu uitați să schimbați adresa URL în mod corespunzător, deci mergeți mai degrabă la pagina de politică cu comentarii, decât la example.com

Deplasați câmpul text pentru comentarii în partea inferioară

Implicit, formularul de comentarii WordPress afișează mai întâi zona de text a comentariilor, apoi câmpurile de nume, e-mail și site-uri web. Această modificare a fost introdusă în WordPress 4.4.

Înainte de aceasta, site-urile WordPress afișează mai întâi câmpurile de nume, e-mail și site-ul Web, apoi caseta de text pentru comentarii. Am considerat că utilizatorii noștri sunt obișnuiți să vadă formularul de comentarii în ordinea respectivă, așa că încă mai folosim vechea comandă de câmp pe WPBeginner.

Dacă doriți să faceți acest lucru, tot ce trebuie să faceți este să adăugați următorul cod la fișierul functions.php al temei sau la un plugin specific site-ului.

 funcția wpb_move_comment_field_to_bottom (câmpuri $) $ comment_field = $ fields ['comment']; unset (câmpuri $ ['comment']); câmpuri $ ['comment'] = $ comment_field; returnați câmpurile $;  add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom' 

Acest cod se mișcă pur și simplu în câmpul de text pentru textul comentariu în partea de jos.

Eliminați câmpul Website (URL) din formularul de comentariu WordPress

Câmpul site-ului din formularul de comentarii atrage mulți spamatori. În timp ce eliminați acest lucru nu va opri spammeri sau chiar va reduce comentariile despre spam, acesta vă va salva cu siguranță de la aprobarea accidentală a unui comentariu cu link-ul de site autor rău.

De asemenea, va reduce un câmp din formularul de comentarii, făcându-l mai ușor și mai ușor de utilizat. Pentru mai multe informații despre acest subiect, consultați articolul despre eliminarea câmpului url al site-ului din formularul de comentarii WordPress

Pentru a elimina câmpul URL din formularul de comentariu, pur și simplu adăugați următorul cod la fișierul functions.php sau la un plugin specific site-ului.

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

Adăugați o listă de abonare la comentarii din caseta de selectare în WordPress

Atunci când utilizatorii lasă un comentariu pe site-ul dvs., ar putea dori să urmeze acel fir pentru a vedea dacă cineva a răspuns la comentariul lor. Adăugând o casetă de selectare pentru abonarea la comentarii, permiteți utilizatorilor să primească notificări instantanee ori de câte ori apare un comentariu nou în postare.

Pentru a adăuga această casetă de selectare, primul lucru pe care trebuie să-l faceți este să instalați și să activați Abonare la Comentarii Reîncărcate plugin. La activare, trebuie să accesați Setări "Abonare la comentarii pentru a configura setările pluginului.

Pentru instrucțiuni detaliate pas cu pas, consultați articolul despre cum să permiteți utilizatorilor să se aboneze la comentarii în WordPress.

Adăugați Quicktags în formularul de comentarii

Quicktags sunt butoane de formatare care permit utilizatorilor să-și modeleze ușor comentariile. Acestea includ butoanele pentru caractere aldine, italicize, adăugați un link sau blochează.

Pentru a adăuga seturi rapide, trebuie să instalați și să activați pluginul Quicktail Quick Comment. Pentru detalii, a se vedea articolul nostru cu privire la modul de a adăuga cu ușurință quicktags în WordPress formularul de comentariu.

Acesta este modul în care formularul dvs. de comentariu va avea grijă de adăugarea rapidă.

Sperăm că acest articol v-a ajutat să învățați să formați un stil de comentariu pentru WordPress, pentru al face mai distractiv pentru utilizatorii dvs. De asemenea, puteți dori să vedeți sfaturile noastre pentru a obține mai multe comentarii cu privire la postările de pe blogul dvs. WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.