Evaluare cu stele pentru internet php. Evaluare cu stele pe CSS. Afișarea resurselor cu cele mai mari evaluări

Totul a început când am decis să schimb ratingul pentru postările de pe blogul meu.

Motivul principal pentru modificarea evaluării a fost că ratingul a fost afișat ca stele „întregi”, ei bine, maximul pe care l-ați putea afișa era o jumătate de stea. Adică dacă ratingul pentru un articol era 4,75, atunci era necesar să afișez fie 4,5 stele, fie 5, ceea ce nu mi se potrivea prea mult.

Prin urmare, s-a decis să scriu propriul plugin în jQuery pentru a genera o evaluare sub formă de stele.

Cerințe de bază pentru plugin:

Evaluarea ar fi trebuit să fie afișată corect, adică dacă evaluarea mea a fost 4,78, atunci numărul de stele umbrite ar trebui să fie adecvat.
Posibilitatea de a selecta un efect atunci când treceți mouse-ul peste o stea. Aceasta înseamnă ce rating poate acorda utilizatorul. adică atunci când treceți cursorul mouse-ului peste stele, acestea ar fi trebuit să fie pictate fie cu stele întregi, fie cu o jumătate de stea, fie în valori absolute urmând indicatorul mouse-ului
Posibilitatea de a-ți seta propriile stele
Posibilitatea de a specifica adresa URL la care va fi trimis rezultatul votului
Posibilitatea de a specifica numărul de stele afișate în evaluare
Scăderea automată a rezultatelor votului. (De exemplu: 1 vot, 2 voturi, 5 voturi)
Abilitatea de a seta propriile substantive pentru rezultatele votului
Posibilitatea de a seta o valoare minimă de evaluare sub care utilizatorul nu va putea vota
Abilitatea de a executa o funcție personalizată atunci când faceți clic pe o stea

După ce au fost dezvoltate cerințele pentru plugin, am început să programez. În consecință, am venit cu ceea ce cred că este un plugin jQuery destul de bun pentru note de rating sub formă de stele, pe care sunt bucuros să vă împărtășesc.

Pentru a folosi acest plugin pe site-ul dvs., primul lucru pe care trebuie să-l faceți este să conectați biblioteca jQuery și pluginul în sine. Vom conecta biblioteca jQuery nu în modul obișnuit, ci din depozitul Google.

fereastră.jQuery || document.write("");

Acest cod trebuie plasat între etichetele de pe site-ul dvs.

Puteți citi de ce trebuie să conectați jQuery din depozitul Google.

De asemenea, pentru ca pluginul să funcționeze corect, trebuie să conectați următoarele stiluri:

Toate acestea le veți găsi în codul sursă.

După ce toate stilurile și bibliotecile necesare sunt conectate, puteți apela pluginul în sine. Pentru a face acest lucru, trebuie să inserați un div în locul potrivit de pe pagina dvs., de exemplu, cu clasa de evaluare:

Acum puteți apela pluginul pe acest element astfel:

$("div.rating").rating();

În acest caz, pluginul va fi apelat cu setări implicite, în urma cărora vor fi create 5 stele necompletate.

Pentru a seta un anumit număr de stele umbrite, trebuie să inserați un câmp de intrare ascuns cu clasa val în interiorul elementului nostru, care va conține valoarea evaluării dvs.:

Dacă apelați acum pluginul, va fi creată următoarea evaluare:

După ce utilizatorul dă clic pe steaua dorită, ratingul va fi automat recalculat (numărul de stele umbrite se va modifica) ținând cont de alegerea făcută, iar numărul de voturi se va modifica și el.

Dacă există mai multe evaluări pe o pagină și trebuie să trimiteți date către server, atunci un alt câmp de intrare ascuns cu clasa vot-id este utilizat pentru a identifica evaluarea:

Sens a acestui domeniu vor fi transmise serverului împreună cu rezultatul votului. Astfel poți identifica ratingul și actualiza valoarea ratingului de care ai nevoie!

Acum să vorbim despre ce setări are pluginul și cum le puteți schimba!

fx	pluti	Efect când treceți mouse-ul peste o stea. float — Când treceți cursorul mouse-ului, stelele vor fi pictate treptat, urmând indicatorul mouse-ului jumătate - Când treceți cursorul mouse-ului, stelele vor fi pictate treptat, câte o jumătate de stea plin - Când treceți cursorul mouse-ului, întreaga stea va fi completată
imagine		calea către imaginea stelei. Trebuie remarcat faptul că imaginea trebuie făcută sub formă de sprite, adică. În partea de sus a imaginii există o stea, care va fi afișată pentru stelele neumplute. Dedesubt este o stea, care este afișată atunci când treceți cursorul mouse-ului. Și în partea de jos există o stea, care este afișată pentru stelele umbrite. Dacă decideți să schimbați stelele, atunci această secvență ar trebui menținută. Vă atrag atenția și asupra faptului că înălțimea și lățimea unei stele trebuie să fie egale. În caz contrar, evaluarea nu va fi afișată corect
lăţime	32	Lățimea unei stele
stele	5	Numărul de stele afișate în evaluare
titluri	[ "voce", "vot", "voturi" ]	O serie de substantive care vor fi afișate pentru a număra voturile
Numai citire	fals	Evaluare modul de operare. Valoarea implicită este false. Dacă se setează la adevărat, nu va fi posibil să se voteze
minim	0	Valoarea minimă de evaluare sub care utilizatorul nu va putea vota
url		Adresa paginii la care se va trimite cererea AJAX cu rezultatul votului
tip	post	Tip de solicitare AJAX. Valoarea implicită este postarea. Dacă trebuie să trimiteți o cerere GET către server, setați această valoare egală cu - get
încărcător		Calea către imaginea care va fi afișată în timp ce cererea AJAX este trimisă către server
clic		O funcție personalizată care este apelată atunci când utilizatorul face clic pe stea. Primul parametru al funcției va fi obiectul de evaluare în sine, iar al doilea va fi rezultatul votului utilizatorului

Format personalizat de ieșire a mesajului

Să presupunem că procesați o solicitare pe server și actualizați evaluarea unei note. În acest caz, puteți afișa mesajul „Mulțumesc. Votul dvs. a fost numărat”, reconstruiți evaluarea cu stele și actualizați numărul de alegători în browserul utilizatorului.

Dar cel mai adesea, înainte de a actualiza ratingul, trebuie să verificați dacă această persoană a votat pentru acest articol sau nu. Și dacă o persoană a votat deja pentru această notă, atunci ar trebui să se afișeze un avertisment în browserul utilizatorului și să nu actualizeze valoarea evaluării și numărul de alegători.

Prin urmare, pentru ca pluginul să funcționeze corect, serverul trebuie să returneze un obiect json de următoarea formă:

Dacă starea este egală cu valoarea - OK, atunci ratingul cu stele va fi actualizat și numărul de alegători va fi recalculat, altfel va fi afișat pur și simplu un mesaj de avertizare.

Acesta este pluginul universal pe care l-am creat pentru afișarea evaluării notelor sub formă de stele.

Puteți vedea demonstrația

Salut pe toată lumea la următoarea lecție despre un subiect interesant Evaluarea cu stele JQuery, acesta este numele care, în opinia mea, ar trebui să descrie mai precis acest script. Și așadar, în primul rând, să începem cu de ce este necesară evaluarea și sensul utilizării sale pe site-uri. Ei bine, în primul rând, acesta este statutul social al unui răspuns la orice material care trezește interes cu bine sau partea proasta. În al doilea rând, aceasta este o evaluare și, să spunem, un mini sondaj pentru a stabili dacă acest subiect este deloc interesant sau nu. În al treilea rând, ca și pe site-ul nostru, nivelul de complexitate al subiectului, deși aici pornim deja de la complexitatea special pentru începători, ține cont, și nu de la complexitatea pentru dezvoltatorii experimentați, deoarece astfel de materiale pot pur și simplu să nu fie interesante pentru ei. și, în principiu, nu sunt interesante, cu excepția doar obțineți scenariul terminat. Prin urmare, pentru mine personal, ratingul este o evaluare a materialului care a stârnit interes. De exemplu, sunteți interesat să cumpărați telefon mobil sau altceva, ați mers la un magazin online și îi puteți evalua popularitatea în funcție de rating; aici se află statutul social al popularității produsului.

Acum să vorbim despre scenariu în general și despre ideile mele. În esență, am decis să împart scenariul în două părți, cred că mulți vor fi interesați atât de prima, cât și de a doua, dar nu le-am combinat, ci le-am lansat în două articole diferite. În primul rând, pentru că ambele părți împreună se vor dovedi a fi destul de semnificative și, în al doilea rând, aș dori să văd comentariile, sau poate sfaturi sau întrebări, despre a doua parte și, în al treilea rând, în a doua parte va fi folosit cu siguranță nu numai JQuery. În general, în prima parte vreau să vă fac o poveste despre site-ul de unde puteți obține JQuery plugin pentru acest script, iar în a doua parte, introducerea ratingului când dați clic pe stea din baza de date fără a reporni. Prin urmare, dacă sunteți interesat de partea a doua, aștept cu nerăbdare aprecierile și comentariile voastre.

Ei bine, să începem. În primul rând, trebuie să vizitați site-ul oficial al acestui plugin și să îl descărcați. Ei bine, de asemenea, studiați cu atenție documentația privind configurarea pluginului în sine și optimizarea acestuia pentru funcționarea normală a scriptului. După examinare, ar trebui să aveți un fișier jquery.raty.js, dacă este posibil jquery.raty.css, dacă este necesar și există imagini implicite, sunt doar trei dintre ele. Din nou, voi spune, totul este implicit și conform standardului!

Prima parte. Conectarea fișierelor js și css. HTML. Imagini.

Conform standardului, includem fișierul de stil demo.cssși biblioteca necesară pentru muncă jquery.min.js, conecteaza jquery.raty.jsși scenariul nostru rata.js.

Apoi, la rădăcina scriptului, adăugați trei imagini care vin implicit: star-on.png- rating complet, star-off.png- fara rating, stea-jumătate.png- jumătate de rating. Dacă aveți propriile fotografii și doriți să le utilizați, le puteți crea, de exemplu, așa cum am făcut eu. Am creat un folder imgși am încărcat acolo două poze: rating_activ.png- stea activă, rating_passiv.png- steaua nu este activă.

Acum să trecem la HTML cod. Și aș dori să notez imediat că vom publica doar trei exemple de standard; toate celelalte le puteți găsi pe site-ul oficial, care este indicat în sursa materialelor.

Primul exemplu.

Când faceți clic pe asterisc, apare imediat o fereastră numită de metodă alerta(), în care putem vedea pe ce stea am dat clic și ce rating am ales.

Al doilea exemplu.

Când dați clic pe stea, se calculează și ratingul. Pentru demonstrație, pozele mele au fost instalate sub formă de stele, care se află în folder img.

Al treilea exemplu.

Este de remarcat faptul că atunci când faceți clic, toate stelele sunt salvate în ratingul în care ați dat clic pe ele, dar nu în baza de date, ci în partea client. Prin urmare, am decis să fac o discuție despre a doua parte, în care este posibil să se dezvolte o economisire cu drepturi depline a evaluărilor și numărarea clicurilor în general. Adică, evaluarea generală va fi stocată în baza de date.

A doua parte. JQuery.

Acum putem arunca o privire JQuery parte despre evaluarea cu stele a subiectului. Din nou, voi lua formularea că luăm în considerare doar trei exemple, care sunt, parcă, standard.

Cum funcționează, ce, cum și de ce, am descris deja în detaliu mai sus, așa că mă voi opri doar asupra detaliilor care s-ar putea să nu vă fie clare.

$(document).ready(function())( $(".rate1").raty(( click: function(score, evt) ( alert("ID: " + this.id + "\nscore: " + scor ) ; ) )); $(".rate2").raty(( număr: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(".rate3") . rate(( număr: 4, țintă: „.nume”, indicii: [„foarte rău”, „rău”, „bine”, „bine”, „foarte bine”], )); ));

Sub clasa rata1, rulăm funcția cu parametri ScorȘi evt. În primul dintre care, obținem prin metodă alerta() numele, iar în al doilea rând ID, ratingul ales de noi. Sub clasa rata2, setăm numărul numărului de stele afișate, sau mai bine zis vor fi zece și facem ca imaginile să fie aplicabile nu implicit, ci de la noi, unde starOff- este un asterisc care nu este activ, dar StarOn- activ. Sub clasa rata 3, setăm numărul numărului de stele afișate și ascundem steaua implicită de pe afișajul general - foarte rău, setând valoarea totală a stării la cinci.

A treia parte. Biblioteca jquery.raty.js.

Să discutăm pe scurt pluginul în sine. Dacă acest subiect devine foarte interesant pentru dvs. sau nu îl puteți înțelege pe deplin, atunci îl vom analiza separat și în detaliu, poate după a doua parte, dacă există, sau poate ca parte separată pentru plugin. Ei bine, ca să fiu sincer, este suficient chiar și să citești puțină documentație și totul va deveni imediat clar. Principalul punct la care trebuie să acordați atenție este setările implicite.

Anulează: fals, cancelClass: „raty-cancel”, cancelHint: „Anulează această evaluare!”, cancelOff: „cancel-off.png”, cancelOn: „cancel-on.png”, cancelPlace: „stânga”, clic: nedefinit , jumătate: fals, jumătate Afișați: adevărat, indicii: [„rău”, „slab”, „obișnuit”, „bun”, „superb”], iconRange: nedefinit, mouseout: nedefinit, mouseover: nedefinit, noRatedMsg: „Neevaluat încă!", număr: 5, numărMax: 20, cale: nedefinit, precizie: fals, readOnly: fals, rotunjit: (în jos: 0,25, complet: 0,6, sus: 0,76), scor: nedefinit, scorNume: "scor", single: fals, spațiu: adevărat, starHalf: „star-half.png”, starOff: „star-off.png”, starOn: „star-on.png”, starType: „img”, target: nedefinit, targetFormat: „(scor)”, targetKeep: false, targetScore: nedefinit, targetText: „”, targetType: „hint”

După cum puteți vedea, am folosit deja unele dintre aceste setări în scriptul meu, fiți atenți la asta! Dacă nu înțelegi ceva, poți scrie în comentarii. Vă mulțumim pentru atenție, mult succes tuturor celor aflați în dezvoltare!

Într-o postare despre îmbunătățirea factorilor comportamentali (link în partea de jos a postării), am scris că conținutul care creează valoare adăugată va ajuta la creșterea timpului petrecut de un vizitator pe un site.

Scopul său nu este doar de a menține cititorii pe site și de a crește numărul de pagini vizualizate, ci și de a crește încrederea în site-ul tău și în tine personal (dacă site-ul este al autorului).

Ce ar putea interesa un vizitator și să-l țină pe site? 1. Conținut:

Articole interesante.
Servicii convenabile legate de subiectul site-ului.
Imagini și videoclipuri prezentate în articole.

2. Aveți încredere în autor și site:

Informații despre site și autor – pagina autorului.
Posibilitatea de a contacta autorul – formular de contact, email sau telefon.

3. Încurajarea activității utilizatorilor:

Oportunitatea de a-ți exprima opinia despre articol sau de a-l evalua:
- lăsați un comentariu și primiți un răspuns la acesta.
- apreciați sau adăugați un link către articolul de pe pagina dvs. în rețea socială– butoanele rețelelor sociale.
- dați o evaluare directă a materialului - o evaluare.
Votarea pe diverse teme.
Cadouri pentru cititori și utilizatori, competiții și promoții.

4. Design frumosși un site web ușor de utilizat.

Astăzi voi vorbi despre cum să adăugați o evaluare simplă cu stele a postărilor pe site-ul dvs. fără a utiliza pluginuri complexe și grele. În plus, ratingul nostru va conține micro-markup pentru rating, ceea ce înseamnă că stelele sale vor fi afișate în PV ( rezultatele cautarii) Google și atrageți atenția asupra fragmentului de site. Ca aceasta:

Iar șansele ca utilizatorul să dea clic pe un fragment cu stele sunt mult mai mari, așa că cu ajutorul lor putem crește CTR (click-through rate) paginilor din rezultatele căutării.

A avea o evaluare pe un site îl poate ajuta, de asemenea, să intre în YAN ( retea de publicitate Yandex) - moderatorii săi acordă întotdeauna atenție serviciilor suplimentare ale resursei.
De regulă, evaluările sunt create folosind pluginul WP-PostRatings.

Nu voi argumenta, acest plugin este foarte funcțional și vă permite să implementați o varietate de evaluări, dar, în același timp, acesta:

Încetinește grav încărcarea site-ului.

Intră în conflict cu multe alte plugin-uri, cum ar fi plugin-ul de imagine clic-pentru-mărire, care folosește și tehnologia Ajax.

Deci, să trecem la crearea unei evaluări cu stele: ↓ Puteți descărca scriptul de evaluare a site-ului din linkul de mai jos

Deja descărcat de 288 de ori

Deschide ↓

Pentru a debloca conținutul, introduceți codul din ultima scrisoare trimisă.

După despachetarea arhivei, veți primi un folder de evaluări și fișiere:

Functions.php,
- footer.php,
- single.php și
- style.css.

Dosarul de evaluări trebuie adăugat în dosarul cu teme.

Și transferați codul din fișierele functions.php, footer.php, single.php și, respectiv, style.css, în fișierele functions.php, footer.php, single.php și style.css ale temei dvs.

În functions.php și footer.php - până la începutul fișierului, în style.css - până la sfârșitul fișierului.

În single.php după etichetă

Puteți să vă uitați la alte etichete de micro-markup pentru articole la http://schema.org/Article și să adăugați pe cele de care aveți nevoie.

După aceasta, postarea, cu ratingul adăugat, poate fi verificată în validatorul de markup:
Google - https://developers.google.com/structured-data/testing-tool/ și
Yandex - http://webmaster.yandex.ua/microtest.xml.

În cele din urmă, vă sugerez să urmăriți un webinar despre eliminarea site-urilor din AGS folosind conținut care creează valoare adăugată.

Există o funcționalitate standard pentru evaluarea a ceva pe web, care poate fi găsită pe multe site-uri. De obicei, acest lucru se face din punct de vedere tehnic în mai multe moduri:

1. Un set de elemente de intrare de tip radio, fiecare dintre ele corespunde uneia sau alteia ratinguri

2. O mulțime de markup html + javascript inutile și non-semantice.

Recent, în timp ce puneam un proiect, a trebuit să mă confrunt cu o sarcină similară. După ce m-am gândit puțin, am ales prima variantă din mai multe motive:

– funcționalitatea bazată pe intrări a fost deja implementată în cms, așa că este mai bine să te ții de ea decât să forțezi programatorul să vină cu „cârje” pentru scriptul tău;

– Sunt leneș și uneori îmi este mai ușor să evoc CSS decât să caut pe tot internetul un plugin JavaScript care să satisfacă nevoile într-o anumită situație;

– Am văzut deja implementarea unui mecanism similar odată și eram sigur că este posibil.

Evaluare cu stele CSS

Deci, mecanismul de stilare a intrărilor radio folosind CSS nu este nou și nu l-am inventat, desigur. Dar dintr-un motiv oarecare, când am căutat „evaluare CSS”, nu am găsit o soluție gata făcută care să mi se potrivească. Prin urmare, l-am scris pe al meu.

1. Avem nevoie de imagini (de preferință în sprite) sub formă de stele (sori, pisoi, bufnițe și orice vă place mai mult).

2. Să ne hotărâm asupra marcajului (marcajul de mai jos este complet scris în exemplu, aici voi descrie ideea principală): avem un element de înfășurare, alternează și . Mai mult, ele alternează înapoi (acest lucru este foarte important pentru a putea stiliza toate stelele selectate atunci când dați clic și acest lucru este necesar și pentru efectul de hover, vezi exemplu). Intrările vin de sus, transparente, astfel încât să fie vizibile doar stelele-etichetă.

3. Când selectați una sau alta intrare, stilurile pentru toate de sub marcaj se schimbă (folosind selectorul css ~). De fapt, în formă, la fel ca butonul radio selectat de obicei, acesta devine bifat.