Cum să creați un script de comentariu simplu. Sistem simplu de comentare folosind AJAX. De ce avem nevoie de la un sistem de comentarii?

07.09.2020 Interesant

Următorul pas este să deschideți fișierul comments.php și să căutați funcția de ieșire a comentariilor în el. Arata cam asa:

< ?php wp_list_comments(); ?>

Aceasta este o versiune simplificată a acesteia și va fi bine dacă o faceți așa. Apoi pur și simplu îl înlocuim cu exact același cod, doar câteva modificări cu un apel la funcția pe care am plasat-o mai devreme în fișierul de funcții.

< ?php wp_list_comments("callback=schema_comment"); ?>

Poate exista o situație în care, în loc de doar o variantă de cod, va exista o versiune ușor modificată cu parametri deja introduși, de exemplu:

< ?php wp_list_comments("type=comment&avatar_size=48"); ?>

În acest caz, folosim semnul & pentru a adăuga un apel la funcția noastră de marcare a comentariilor callback=schema_comment. Se va dovedi astfel:

< ?php wp_list_comments("type=comment&avatar_size=48&callback=schema_comment"); ?>

În exemplul meu, totul este încă mult mai complicat. În interiorul acestei funcții există parametri, ca în linia anterioară de cod. Dar sunt afișate puțin diferit.

< ?php wp_list_comments(array("style" =>"ol", "short_ping" => adevărat, "avatar_size" => 74,)); ?>

Dacă aveți această opțiune, atunci în paranteze de lângă toți parametrii introducem una nouă. Vom ajunge cu următorul cod.

< ?php wp_list_comments(array("style" =>"ol", "short_ping" => true, "avatar_size" => 74, "callback" => schema_comment,)); ?>

Când am plasat codul funcției în fișierul functions.php și, de asemenea, am schimbat puțin codul de afișare a comentariilor pe site în fișierul comments.php, putem verifica funcționarea markupului de comentarii.

Un semn de marcare corectă a comentariilor este imbricarea lor în corpul articolului, fără liniuțe sau spații. Fiecare comentariu trebuie să fie afișat în articol și afișat în validatorul Yandex.

După cum puteți vedea, comentariile sunt situate în corpul articolului. Așa ar trebui să fie și pentru tine.

De asemenea, puteți spune motoarelor de căutare numărul de comentarii la fiecare postare. Există și o etichetă pentru aceasta - itemprop="commentCount". Similar cu pașii anteriori, ar trebui plasat în interiorul etichetei de deschidere care înglobează funcția de afișare a numărului de comentarii. Această funcție se numește:

< ?php comments_number ?>

Linia de ieșire completă a acestei funcții poate fi diferită, dar esența sa este aceeași. Ar trebui să existe comentarii_număr înăuntru.

Pentru mine, această funcție are următorul formular complet împreună cu eticheta de ambalare.

< ?php comments_number("Комментариев пока нет. Будьте первым!","1 Комментарий","Комментариев: %") ?>

În funcție de șablon, trebuie să găsiți locația funcției. De obicei, totul este în același fișier comments.php. În șablonul meu, această funcție a fost localizată în fișierul cu o singură intrare single.php înainte de afișarea formularului de comentariu. Deoarece funcția mea a fost înfășurată într-o etichetă text span, inserez proprietatea commentCount în interiorul acesteia.

Contactăm validatorul.

Important. Trebuie doar să încheiați numărul de comentarii fără inscripții sau cuvinte. Markupul acceptă doar numere!

Atenție: nu sunt autorul funcțiilor. Funcțiile de marcare automată a comentariilor și imaginilor sunt preluate de pe site-ul http://seo-mayak.com/. Am schimbat puțin numele + am corectat puțin ceva undeva.

Micro marcare a antetului site-ului

Deschideți fișierul header.php al șablonului de design și căutați eticheta de antet de deschidere. Lipim în interiorul ei:

Itemscope itemtype="http://schema.org/WPHeader"

• Titlu - itemprop="titlu"
• Descriere - itemprop="description"

Iată varianta finală din imagine.

Acesta va fi afișat în validator astfel.

Bara laterală (coloana laterală) micro marcaj

Totul este simplu și aici. Deschidem fișierul care este responsabil pentru ieșirea coloanei laterale, de regulă, acesta este sidebar.php. Găsim un bloc sau etichetă care înfășoară întregul conținut al întregii coloane laterale și în interiorul acestuia plasăm eticheta entității corespunzătoare barei laterale.

Register_sidebar(array("name" => __("Zona pentru inserarea widget-urilor în bara laterală", "xmarkup"), "id" => "primary-widget-zona", "descriere" => __("", " xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));

De interes sunt ultimele 2 rânduri (before_title și after_title), care determină ce va fi afișat înainte și, respectiv, după titlul widgetului. După cum puteți vedea, am indicat că va exista o etichetă text span înainte și după. Este posibil să aveți ceva gol acolo sau alte etichete, cum ar fi o etichetă de bloc div. Dacă este gol, recomand să adăugați o etichetă span similară cu versiunea mea și să specificați proprietatea numelui (itemprop="name") în interiorul etichetei de deschidere (before_title line). Veți obține următoarea construcție:

Register_sidebar(array("name" => __("Zona pentru inserarea widget-urilor în bara laterală", "xmarkup"), "id" => "primary-widget-zona", "descriere" => __("", " xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => " ", "after_title" => "",));

În funcție de șablon, pot exista mai multe astfel de părți de cod. Apoi toate piesele vor trebui finalizate. După modificări, verificăm marcajul barei laterale prin validatorul Yandex și ar trebui să obținem următoarea imagine.

În funcție de numărul de widget-uri, numărul corespunzător de rânduri va fi afișat la verificare.

Micromarcaje de subsol (subsol).

Deschideți fișierul footer.php și căutați un bloc comun care cuprinde tot conținutul subsolului, inclusiv drepturile de autor. În interiorul etichetei de deschidere plasăm eticheta de entitate itemscope itemtype="http://schema.org/WPFooter".

Și în interiorul etichetei de deschidere, care conține data drepturilor de autor, plasăm eticheta de proprietate itemprop="copyrightYear".

Este foarte important ca în interiorul etichetei copyrightYear să existe doar o dată sub forma unui număr. Fără cuvinte sau simboluri străine, altfel va genera o eroare.

În stare de funcționare, veți vedea următoarele în validator.

Micro marcare a meniului principal de navigare

Și aici totul este extrem de simplu, dar această opțiune nu va funcționa pentru toată lumea, deoarece structura de construire și afișare a meniului în șabloane este diferită.

Codul care afișează meniul se află în fișierul header.php. Mergem acolo și căutăm următorul conținut:

< ?php wp_nav_menu(array("theme_location" =>"header-menu-top","container" => "")); ?>

Linia poate fi ușor diferită. Principalul lucru este să găsiți linia care include wp_nav_menu. Va fi împachetat în etichete. Pentru mine și în majoritatea celorlalte subiecte principiul este similar. Se folosește eticheta nav. În interiorul etichetei nav de deschidere inserăm o etichetă care arată esența acestui element și anume meniul principal:

Itemscope itemtype="http://schema.org/SiteNavigationElement"

Apoi, ar trebui să vă asigurați că atributul itemprop="url" este adăugat la fiecare link din meniu, ceea ce va indica că acesta este un link. Dacă aveți un site simplu în care fiecare element de meniu este creat manual, atunci implementați acest atribut în interiorul etichetei fiecărui link. Dacă aveți un site web pe WordPress și meniul este format în fișierul functions.php într-un mod standard, ar trebui să plasați următorul cod în același fișier, care va insera automat acest atribut în fiecare element de meniu.

Funcția nav($conținut) ( $pattern = "

După ce verificăm orice pagină (unde există un meniu) în validatorul Yandex, ar trebui să vedem eticheta de entitate împreună cu o listă cu toate elementele de meniu.

Dacă funcția pentru șablonul dvs. nu funcționează, atunci nu veți vedea link-uri în validator, ci doar entitatea.

În acest din urmă caz, este mai bine să eliminați marcajul din meniu, deoarece nu are nicio semnificație semantică, iar instrumentul Google de verificare a datelor structurate va da un avertisment.

Aceasta completează partea principală a micro-markup-ului. Un blog obișnuit (site de informații) nu are nevoie de nimic altceva.

Micromarcarea adreselor (detalii de contact)

Dacă pe site-ul dvs. le arătați vizitatorilor informațiile dvs. de contact (numele organizației, adresa, numărul de telefon etc.), le puteți marca și pe aceștia. Acest lucru se face foarte simplu. Mai jos dau codul, pe care trebuie doar să îl plasezi în modul html pe pagina dorită (de exemplu, contacte) și să introduci datele tale.

Numele site-ului index, tara, regiune, oras numele strazii Telefon: telefon E-mail: adresa ta de e-mail este [email protected]

Observ că e-mailul prin poștă obișnuită nu este adecvat în acest caz. Aveți nevoie de e-mail precum [email protected], adică de e-mail pe domeniu.

În această notă, practica sa încheiat. Micro markup pe WordPress trebuie să fie implementat și să fie fără o singură eroare, atât în ​​Yandex, cât și în Google.

Acum, așa cum am promis, vă voi oferi câteva coduri de care ați putea avea nevoie dacă șablonul dvs. nu afișează toate informațiile necesare pentru marcare.

Informații utile

Vă dau o listă de coduri cu proprietăți de markup deja implementate. De fapt, trebuie doar să le inserați în locurile potrivite din șablon și să setați stiluri pentru clasele care sunt scrise în aceste etichete.

/***afișează data publicării intrării***/ /***concluzia autorului***/ Autor: /***afișează numărul de comentarii***/ Comentarii: /***Titlul paginii de ieșire***/

/***Ieșire categorie***/ Nume; $current_category_link = $cat->cat_ID; )) ecou " „.$nume_categorie_actuală”."; ?>

Există, de asemenea, un număr foarte mare de solicitări de e-mail către mine cu problema eliminării erorilor care apar din cauza marcajului hentry încorporat în șabloane. Erorile sună așa:

Lipsește: titlul de intrare
Lipsă: actualizat
Lipsă: autor

De ce se întâmplă această situație? Este simplu - clasa henrty este adăugată automat la șablon, ceea ce implică faptul că etichetele (clasele) corespunzătoare trebuie adăugate la titlu, dată și autor. Puteți face acest lucru - adăugați aceste clase. Nu văd prea mult rost în asta, deoarece am marcat deja șablonul cu dicționarul schema.org și microformatele henrty nu ne vor fi de nici un folos. Prin urmare, cea mai rapidă și mai ușoară cale ar fi să folosiți o funcție mică care elimină această clasă henty din șablon și Google nu va găsi nici măcar microformatele hentry.

//elimină clasa hentry start function wph_remove_hentry_class($clase) ( $clase = array_diff($clase, array("hentry")); return $clase; ) add_filter("post_class", "wph_remove_hentry_class"); //eliminarea clasei hentry end

Funcția este desigur adăugată la fișierul functions.php. Dacă ați avut deja erori similare sau ați început să apară, atunci treptat, pe măsură ce robotul de micro-markup al Google accesează cu crawlere pagina site-ului dvs., acestea vor începe să dispară. Dacă nu erau acolo, atunci nu vor apărea.

Există o altă opțiune când puteți suferi și adăuga etichetele necesare la ieșirea titlului, datei și autorului. Apoi Google va găsi acest marcaj și îl va recunoaște. Dacă decideți să faceți astfel de acțiuni, atunci trebuie să găsiți codurile php pentru afișarea titlului (1), data (2) și autorul (3).

Codurile finite cu etichete de microformat vor fi următoarele:

Înfășurarea în acest fel va fi, de asemenea, bine.

Următorul punct va fi pentru cei cărora le este prea greu să facă toate acestea sau care sunt prea leneși.

Voi face totul pentru tine

Te pot ajuta. Dar, desigur, nu gratuit. Pe lângă răspunsurile clare la întrebările dvs. din comentarii, pot încorpora toate micro-markupurile descrise mai sus în șablonul dvs. pentru o mică taxă.

Costul acestui serviciu este de 1000 de ruble.

Voi marca toate datele principale, și anume:

1. Pagina principală + pagini de arhive și secțiuni;
2. Pagină de postare;
3. O pagină statică obișnuită;
4. Antetul site-ului;
5. Subsol;
6. Bara laterală;
7. Meniul de navigare (dacă șablonul nu intră în conflict);
8. Pesmet + rating (opțional + 200 de ruble).

Această opțiune este potrivită pentru blogurile personale, precum și pentru site-urile de informații. Pot lucra atât pe motorul WordPress, cât și pe un site html obișnuit. Inițial, nu voi face nimic, deoarece voi analiza mai întâi șablonul dvs. și vă voi răspunde dacă pot să o fac deloc. Este posibil să trebuiască să refaceți ceva în șablon sau să îl finalizați. Fiecare persoană primește o abordare individuală.

Principiul este următorul. Mă contactați prin pagina „Scrie-mi” (mă poți contacta și în comentariile acestui articol). Trimite-mi imediat un link către site-ul tău web + un link pentru a descărca șablonul. Analizez și vă dau un răspuns în viitorul apropiat (1-2 zile). Dacă totul este în puterea mea, atunci după plată încep imediat să marchez.

Toți prietenii. Sper că acest material te-a ajutat. Nu am avut nici un scop să scriu aici în 2 cuvinte cum să fac totul. Scopul meu a fost să scriu cel mai bun și mai cuprinzător ghid pentru implementarea marcajului pe un site web. Sper că a funcționat. Puteți confirma acest lucru cu comentariile, aprecierile și evaluările dvs.

Ne vedem în materialele următoare.

Salutări, Konstantin Khmelev!

În această lecție voi vorbi despre cum se face comentarii în HTML, CSS, PHP. Comentariile sunt text care nu este vizibil pe pagina web. Acestea sunt folosite pentru diverse tipuri de explicații, mementouri și descrieri pentru webmasteri, ceea ce vă permite să structurați documentul. Comentariile sunt indispensabile la depanarea codului; ele vă permit să navigați rapid în marcajul unei pagini web și să găsiți blocul dorit. Comentariile sunt adesea folosite pentru a depana codul HTML. De exemplu, puteți comenta temporar un anumit bloc de cod, astfel încât să nu fie executat și, dacă este necesar, îl puteți restaura cu ușurință.

Comentarii în HTML

În HTML, comentariile sunt formate folosind următoarele caractere:. Astfel, orice text între aceste personaje este un comentariu. Să ne uităm la un exemplu:

Exemplu de comentarii în HTML

Comentarii în CSS

Comentariile în CSS sunt create folosind caracterele: /* și */. Pentru a crea un comentariu, trebuie pur și simplu să plasați codul paginii web între aceste caractere:

/* Începutul unui bloc cu stiluri pentru Body*/ body ( fundal: #efeed; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; ) /* Sfârșitul un bloc cu stiluri pentru Body*/

Comentarii în PHP

Comentariile în PHP pot fi pe o singură linie sau pe mai multe rânduri:

1) Comentariile pe o singură linie în PHP sunt create folosind caracterele: //. Pur și simplu puneți acest caracter în fața rândului și va fi comentat.Această opțiune este folosită în cazul în care comentariul constă dintr-o singură linie.

2) Pentru a implementa comentarii pe mai multe rânduri, sunt folosite următoarele simboluri: /* și */. Această opțiune este utilă dacă comentariul se întinde pe mai multe rânduri.

Așa că am învățat să facem

Pasul 1 - XHTML

Mai întâi, să ne uităm la marcajul de comentarii. Acest cod este generat de PHP cu clasa cometariu .

demo.php

div avatar conține un link (dacă utilizatorul a introdus adresa URL corectă când a postat un comentariu) și o imagine avatar, pe care o obținem de la gravatar.com. Vom reveni la generarea markupului în pasul PHP. Urmează în sfârșit div Nume div timp și comentariu text.

Un alt element important în XHTML este formularul de comentarii. Ea este trimisă cu POST. Toate câmpurile, cu excepția URL-ului, trebuie completate.

demo.php

Formularul este trimis folosind AJAX. Cecul rulează în fundal în trimite.php. Fiecare câmp are un element corespunzător eticheta, cu atributul setat pentru .

Pasul 2 - PHP

PHP se ocupă de comunicarea cu baza de date MySQL și generează marcarea comentariilor. De asemenea, primește sfârșitul solicitării AJAX și inserează datele comentariilor în tabel comentarii.

demo.php

/* / Selectați toate comentariile și umpleți tabloul $comments cu obiecte */ $comments = array(); $rezultat = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ($comments = new Comment($row); )

Interogarea MySQL selectează toate înregistrările din tabel și umple matricea $comentarii obiecte de clasă cometariu. Această matrice este scoasă mai departe atunci când scriptul este executat.

demo.php

/* / Printează comentariile unul câte unul: */ foreach($comentarii ca $c)( echo $c->markup(); )

Fiecare comentariu are o metodă marcaj(), care generează codul HTML corect, gata să fie afișat pe pagină. Mai jos sunt definițiile clasei și metodei.

Clasa primește un rând din baza de date (obținut folosind mysql_fetch_assoc()) și îl stochează într-o variabilă $date. Este disponibil numai pentru metoda clasei.

comment.class.php - Partea 1

clasa Comentariu ( private $date = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( /* / Aceasta metoda produce markup XHTML pentru comentarii */ // Setați un alias pentru a nu scrie $this->data de fiecare dată: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url) "] )( // Dacă a fost introdusă o adresă URL la adăugarea unui comentariu, // determinați etichetele de deschidere și de închidere ale linkului $link_open = ""; $link_close = ""; ) // Convertiți ora în format UNIX: $ d["dt"] = strtotime ($d["dt"]); // Este necesar pentru a seta imaginea implicită: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER[ „REQUEST_URI”]).”/ img/default_avatar.gif”; returnează „ "; }

Scriptul folosește gravatar pentru a reprezenta avatarul în comentarii. Gravatar este un serviciu foarte util care potrivește un avatar cu o adresă de e-mail. Imaginea avatarului poate fi obținută cu ușurință prin trecerea funcției codificate md5() adresa ta de e-mail pe gravatar.com.

Scriptul determină adresa URL unde este executat și determină adresa exactă a imaginii default_avatar.gif. Această imagine este transmisă în paralel cu hash-ul md5, iar dacă nu a fost găsit niciun avatar pentru adresa de e-mail transmisă, va fi afișată o imagine alternativă.

comment.class.php - Partea 2

funcția publică statică validate(&$arr) ( /* / Această metodă este folosită pentru a valida datele trimise prin AJAX. / / Returnează adevărat/fals în funcție de corectitudinea datelor și completează / tabloul $arr, care este transmis ca parametru fie cu date, fie cu mesaj de eroare. */ $errors = array(); $data = array(); // Folosiți funcția filter_input introdusă în PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Vă rugăm să introduceți un e-mail valid."; ) if(!($data["url"] = filter_input(INPUT_POST,"url" ,FILTER_VALIDATE_URL))) ( // Dacă a fost introdusă o adresă URL incorectă în câmpul URL, // acționați ca și cum URL-ul nu ar fi fost introdus: $url = ""; ) // Folosiți un filtru cu o funcție de apel invers: if(! ($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options" =>"Comment::validate_text")))) ( $errors["body"] = "Vă rugăm să introduceți comentariul text."; ) if(!( $date["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["name "] = "Vă rugăm să introduceți un nume."; ) if(!empty($erori))( // Dacă există erori, copiați tabloul $errors în $arr: $arr = $erori; returnează fals; ) // Dacă datele sunt introduse corect, ștergeți datele și copiați-l în $arr : foreach($date ca $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // e-mailul trebuie să fie cu litere mici: $arr["email"] = strtolower (trim($ arr["email"])); returnează adevărat; )

Metodă valida()(de asemenea, parte a unei clase) definit ca static. Aceasta înseamnă că poate fi apelat direct folosind constructul Comentariu::validate(), fără a crea un obiect de clasă. Această metodă verifică datele care sunt trimise prin AJAX.

Metoda folosește o nouă funcție de filtru care a devenit disponibilă în PHP 5.2.0. În acest fel putem verifica și filtra cu ușurință datele care sunt transmise scriptului. De exemplu, filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL)înseamnă că verificăm dacă $_POST[„url”] URL-ul corect. Dacă da, atunci funcția returnează valoarea variabilei, în caz contrar returnează valoarea fals.

Înainte de a utiliza o astfel de funcție, a fost necesar să se utilizeze expresii regulate pentru a valida datele (folosind o serie de constructe dacă). Un avantaj suplimentar este că primim datele înainte de efectuarea oricăror transformări specifice.

De asemenea, este posibil să specificați o funcție care va efectua modificări suplimentare de date.

comment.class.php - Partea 3

funcție statică privată validate_text($str) ( /* / Această metodă este folosită ca FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. etc) și convertiți // caracterul newline într-o etichetă
: $str = nl2br(htmlspecialchars($str)); // Eliminați orice linii noi rămase $str = str_replace(array(chr(10),chr(13)),"",$str); returnează $str; )

Ultima metoda validate_text transmisă ca funcție de returnare în două apeluri intrare_filtru. Convertește toate caracterele speciale HTML, care blochează efectiv atacurile XSS. De asemenea, înlocuiește liniile noi cu etichete
.

trimite.php

/* / Această matrice va fi completată fie cu date / care sunt transmise scriptului, fie cu mesaje de eroare. /*/ $arr = matrice(); $validates = Comentariu::validate($arr); if($validates) ( /* Totul este în regulă, introduceți datele în baza de date: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["nume"]")." ", "".$arr["url"].", "".$arr["email"].", "".$arr["body"]."")"); $arr["dt "] = data("r",time()); $arr["id"] = mysql_insert_id(); /* / Datele din $arr sunt pregătite pentru interogarea mysql, / dar trebuie să ieșim pe ecran , deci / pregătește toate elementele din matrice: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Afișează marcajul comentariului nou introdus: */ echo json_encode(array("status "=>1,"html"=>$insertedComment->markup())); ) else ( /* Afișează mesaje de eroare */ echo "("stare":0,"erori":" .json_encode($arr )")"; )

trimite.php primește un comentariu de la date printr-o solicitare AJAX. Îl validează și emite un obiect JSON care conține fie marcaj XHTML cu un comentariu inserat, fie o listă de erori. jQuery folosește proprietatea stare pentru a determina ce trebuie să fie scos - fie un mesaj de eroare, fie adăugarea unui marcaj de comentariu la pagină.

Mai jos sunt două exemple.

Răspuns de succes

( „starea”: 1, „html”: „Codul HTML al comentariului vine aici...” )

Proprietate html conține codul de comentariu.

Răspuns de eroare

( „stare”: 0, „erori”: ( „e-mail”: „Vă rugăm să introduceți un e-mail valid.”, „body”: „Vă rugăm să introduceți un corp de comentariu.”, „nume”: „Vă rugăm să introduceți un nume.” ) )

Dacă există o eroare, jQuery parcurge obiectul erori și afișează mesaje lângă câmpurile care au erori.

Pasul 3 - CSS

Acum că marcajul este corect generat și afișat pe pagină, putem trece la setarea stilurilor.

styles.css - Partea 1

.comment, #addCommentContainer( /* Stil pentru comentarii */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; / * Colțuri și umbre rotunjite CSS3 */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 0 #c2c2c2; -webkit-box- shadow:2px 2px 0 #c2c2c2; box-shadow:2px 2px 0 #c2c2c2; ) .comment .avatar( /* / Avatarul este poziționat absolut. / Offset exterior pentru comentariul div /*/ înălțime: 50px; stânga:- 70px; poziție:absolut; lățime:50px; background:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Centru vertical: */ margin-top:-25px; top:50%; -moz- box-shadow:1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2; box-shadow:1px 1px 0 #c2c2c2; )

div .cometariu Și #addCommentContainer au acelasi stil. Utilizează mai multe reguli CSS3 pentru rotunjirea colțurilor și reflectarea umbrelor.

styles.css - Partea 2

.comment .avatar img( display:block; ) .comment .name( font-size:20px; padding-bottom:10px; color:#ccc; ) .comment .date( font-size:10px; padding:6px 0; poziție:absolut; dreapta:15px; sus:10px; culoare:#bbb; ) .comment p, #addCommentContainer p( font-size:18px; line-height:1.5; overflow-x:hidden; ) #addCommentContainer intrare, # addCommentContainer textarea( /* Stil de intrare */ display:block; border:1px solid #ccc; margin:5px 0 5px; padding:3px; font-size:12px; color:#555; font-family:Arial, Helvetica, sans -serif; ) #addCommentContainer textarea( width:300px; ) label( font-size:10px; ) label span.error( color:red; position:relative; right:-10px; ) #submit( /* Butonul de trimitere " * / culoare de fundal:#58B9EB; chenar:1px solid #40A2D4; culoare:#FFFFFF; cursor:pointer; font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:14px; font -weight :bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #submit:hover( background-color:# 80cdf5; culoarea chenarului:#52b1e2; )

În a doua parte am stabilit stiluri pentru comentarii și elemente de formular. Observați selectorul intrare care evidențiază elemente în funcție de atribut tip.

Pasul 4 - jQuery

Acum să trecem la jQuery.

script.js

$(document).ready(function())( /* Următorul cod este executat numai după ce DOM-ul este încărcat */ /* Acest flag împiedică trimiterea mai multor comentarii: */ var working = false; /* Prindeți formularul eveniment de trimitere: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false; working = true; $("#submit").val("Working. ."); $("span .error").remove(); /* Trimite câmpuri de formular către submit.php: */ $.post("submit.php",$(this).serialize(),function( msg)( working = false; $ ("#submit").val("Submit"); if(msg.status)( /* / Dacă inserarea a avut succes, adăugați un comentariu / sub ultimul de pe pagină cu efectul slideDown /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / Dacă există erori, parcurgeți obiectul / msg.errors și afișați-le pe pagina /*/ $.each(msg.errors,function(k,v)( $("label").append(" „+v+”"); )); ) ),"json"); )); ));

Folosim un apel de funcție $(document).gata(), care leagă o funcție de un eveniment. Variabil lucru acționează ca un flag care semnalează că o solicitare AJAX este în curs (prevenind astfel duplicarea aceluiași comentariu).

În funcția de returnare pentru cererea AJAX POST verificăm proprietatea stare pentru a determina dacă comentariul a fost introdus cu succes. Dacă da, adăugăm markupul rezultat în pagină după ultimul comentariu cu animație glisați în jos.

Dacă au apărut probleme, afișăm mesaje de eroare prin adăugare span eroare la elementul corespunzător eticheta(atributul elementului eticheta conţine id intrare care are o eroare).

Gata!

Concluzie

Pentru a rula scriptul pe serverul dvs. trebuie să creați un tabel comentarii în baza de date MySQL. Puteți face acest lucru folosind codul SQL dintr-un fișier tabel.sql, care trebuie introdus în fila SQL din phpMyAdmin. Apoi trebuie să setați parametrii de conectare la baza de date MySQL din fișier conectați.php .

În zilele noastre, multe site-uri populare nu sunt doar o sursă de informații, ci și un loc unde aceste informații pot fi discutate cu alți utilizatori; site-urile se transformă adesea în centre în jurul cărora se formează o comunitate.

Comentariile ajută la construirea comunității

Acum utilizatorii vin la tine nu doar pentru a citi o știre sau un articol, ci și pentru a le discuta.

Ceea ce este tipic este că cititorul ar fi putut afla știrile însuși în alt loc, dar este comunitatea de oameni interesanți, oportunitatea de a vorbi și de a le auzi părerile - asta va duce la faptul că vă va vizita. site și accesați pagina cu știrile pe care le cunoaște deja.

Cu doar zece ani în urmă, centrele în jurul cărora toată viața era în plină desfășurare erau forumuri. Cu toate acestea, în zilele noastre acest lucru nu mai este atât de convenabil și popular; acum cele mai populare site-uri funcționează în format blog, iar comunicarea cu utilizatorii are loc în comentarii.

Astfel, comentariile sunt factorul care deosebește site-urile obișnuite de site-urile care au cu adevărat succes în domeniul lor. Acest lucru se aplică site-urilor de știri, blogurilor, comunităților de interese, uneori chiar și magazinelor online și diverse site-uri specializate.

Comentariile oferă feedback și motivație

De asemenea, este important să rețineți că comentariile sunt o sursă de feedback din partea cititorilor, ceea ce vă permite să aflați ce le place exact și la ce reacționează cititorii. Și cu cât site-ul tău este mai bun și mai interesant pentru vizitatori, cu atât se întorc mai des la tine și îl recomandă.

În plus, feedback-ul este întotdeauna o motivație bună pentru autorii și administratorii înșiși, ceea ce îți permite aproape instantaneu să simți că oamenii sunt interesați de ceea ce faci și de site-ul tău. Nu puteți realiza acest lucru cu un simplu contor de vizitatori.

De ce avem nevoie de la un sistem de comentarii?

Deci, care ar trebui să fie comentariile „corecte” pe un site web modern?

• Simplu și ușor de înțeles pentru cititori.
• Convenabil și funcțional pentru administratori.

Ce opțiuni are în prezent un webmaster?

Widgeturi pentru rețelele sociale

Există un singur plus - există o probabilitate destul de mare ca utilizatorul să fie deja conectat la rețeaua socială și, prin urmare, nu va trebui să se înregistreze.

O mulțime de contra

Servicii în limba rusă

Analogii în limba rusă sunt adesea complet plătiți și nu se pot lăuda cu un design atractiv.

SV Kament

Singura excepție aici este sistemul SV Kament (svkament.ru), care este complet gratuit și reunește funcționalitatea diferitelor sisteme de comentare occidentale, dar în același timp este concentrat pe segmentul de limbă rusă.

Să aruncăm o privire rapidă la ceea ce am dori să vedem în sistemul nostru de comentarii.

Comentarii arbore cu capacitatea de a restrânge firele de discuții individuale. Sunt foarte utile în navigarea în discuție atunci când există o mulțime de comentarii.

Conectare socială- simplifică semnificativ înregistrarea și, ca urmare, crește numărul de comentarii. Studiile occidentale arată că utilizarea unui login social crește uneori conversia cu mai mult de 60%.

Comentarii de evaluare- în primul rând, ajută la evidențierea celor mai interesante și valoroase comentarii, ceea ce este extrem de convenabil pentru cititori și, în al doilea rând, încurajează utilizatorii să scrie mesaje interesante.

Funcționare în timp real- cu cât sistemul funcționează mai comod și mai rapid, cu atât oamenii îl folosesc mai mult și cu atât mai des scriu comentarii.

Notificări prin e-mail- cât de des pierdem potențiale comentarii doar pentru că utilizatorul nu știe că cineva a răspuns la mesajul său anterior.

Din perspectiva managementului

• Management direct pe site.

• Informații despre utilizator.

• Un singur panou de control pentru comentarii pentru întregul site.
• Capacitatea de a numi moderatori.
• Ușor de instalat.

Sistemul SV Kament are și o serie de caracteristici interesante.

• Emisiuni sociale- vă permit să „reveniți” comunicarea către site-ul dvs. din rețelele sociale. Dacă aveți un grup VKontakte în care postați anunțuri cu articole noi pe site, atunci de multe ori o parte din discuția articolelor rămâne în comentariile postării în sine și ar fi grozav să difuzați aceste comentarii înapoi pe site-ul dvs.

• Evaluarea și starea utilizatorului- îți permite să evidențiezi cei mai activi și populari vizitatori, stimulând astfel utilizatorii tăi să viziteze mai des, să comunice mai mult și să scrie mesaje interesante pentru alte persoane.

Dintr-o dată?

Există o practică destul de comună de a plasa mai multe sisteme de comentarii simultan, de exemplu, un widget VKontakte separat, unul separat de Facebook și unul separat pentru toți ceilalți.

În opinia mea, aceasta este una dintre cele mai proaste decizii, dar este important să înțelegem exact ce obiective sunt urmărite.

Dacă trebuie doar să colectați recenzii ale utilizatorilor, atunci această metodă are drept la viață, deși o simplă carte de oaspeți sau chiar o adresă de e-mail poate fi suficientă pentru asta.

Dacă scopul nostru este să creăm o comunitate și să stimulăm comunicarea între utilizatori, atunci această abordare este extrem de dăunătoare, deoarece prin împărțirea comentariilor, împărțim comunicarea în sine, astfel încât în ​​loc de un singur dialog, primim o grămadă de mesaje fără legătură.

Ce fel de comentarii folosești? Considerați că comentariile sunt importante pentru site-ul dvs. și cât de convenabil și eficient găsiți comentariile pe site-ul dvs.?

Acum a devenit la modă înlocuirea sistemului obișnuit de comentarii WordPress cu comentarii de la una dintre cele mai populare rețele sociale, Facebook. Am publicat deja acest lucru înainte, dar a trecut mult timp de atunci, iar acum această procedură a fost simplificată semnificativ datorită unui plugin WordPress gata făcut. Așa că de data aceasta totul va fi mult mai ușor.

Vă vom spune cum să implementați comentariile Facebook pe site-ul dvs. web puțin mai târziu, dar mai întâi vom încerca să stabilim toate avantajele și dezavantajele unei astfel de înlocuiri.

Comentarii Facebook: argumente pro și contra

În plus, factorul așa-numitului anonimat. Este puțin probabil ca comentariile spam să fie adăugate de pe Facebook, deoarece toate sunt legate de conturi de utilizator reale.

Dar, în același timp, se pot găsi și dezavantaje ale unui astfel de sistem. Mulți utilizatori preferă anonimatul și deloc pentru că vor să scrie ceva rău sau să lase spam. Nu. Este pur și simplu o chestiune de moment psihologic și sentimentul de disconfort și jenă pe care îl experimentează atunci când vorbesc în public. Acest factor poate reduce activitatea utilizatorului.

Spre deosebire de alte sisteme de comentarii precum Disqus, comentariile Facebook nu se sincronizează cu comentariile native din WordPress. Le înlocuiesc complet. Dacă postările mai vechi au deja comentarii WordPress, acestea vor apărea înainte sau după noile comentarii adăugate prin formularul Facebook.

Iată, poate, toate avantajele și dezavantajele comentariilor de pe Facebook.

Dacă încă nu v-ați răzgândit cu privire la instalarea acestora pe site-ul dvs. WordPress, atunci citiți mai jos despre cum să o faceți.

Facebook Comments Plugin pentru WordPress

Mai întâi, instalați și activați pluginul Comentarii Facebookși configurați-l în meniul care apare în secțiunea Setări → Comentarii Facebook.

Pentru a începe să utilizați comentarii pe site, trebuie mai întâi să creați o aplicație Facebook.

Dacă ați creat o aplicație înainte, puteți utiliza datele de identificare ale acesteia chiar acum. În caz contrar, va trebui să creați unul nou pe pagină Aplicații Facebook:

Panoul de control al aplicației nou create va afișa ID-ul acesteia, pe care trebuie să-l copiați și să-l inserați în setările pluginului. Dar înainte de asta, configurați aplicația de pe site-ul dvs. în „Setări” folosind butonul „Adăugați platformă”.

Va apărea o nouă fereastră în care trebuie să faceți clic pe site webși alegeți-l ca platformă.

Deci, pe pagina de setări a aplicației va apărea o nouă secțiune „Site web”, în care puteți specifica adresa site-ului dvs. web.

Salvați modificările, copiați ID-ul aplicației și plasați-l în setările pluginului site-ului dvs.

Dacă nu v-ați dat seama cum să configurați aplicația Facebook, iată o alta. instructiuni scurteîn engleză cu un exemplu pentru site-ul nostru:

Acest plugin de comentarii Facebook are o mulțime de opțiuni de configurat. Setările implicite ar trebui să funcționeze cu majoritatea site-urilor. Cu toate acestea, le puteți modifica la discreția dvs. și le puteți salva.

Acum puteți testa dacă noul sistem de comentarii funcționează corect pe site-ul dvs.

Moderarea comentariilor

Deoarece aveți drepturi de administrator, veți primi notificări cu privire la noile comentarii. Puteți să le gestionați și să decideți dacă le publicați sau nu.

De asemenea, puteți adăuga un nou moderator în setări:

Sperăm că acest ghid a oferit claritate și v-a ajutat să configurați singur comentarii Facebook pentru site-ul dvs. care nu este WordPres.