Ocjena zvjezdica za internet php. Broj zvjezdica na CSS-u. Prikaz resursa s najvišim ocjenama

Sve je počelo kada sam odlučio promijeniti ocjenu postova na svom blogu.

Glavni razlog za promjenu ocjene je taj što se ocjena prikazuje kao "cijeli broj" zvjezdica, pa, maksimalno što možete prikazati je pola zvjezdice. Odnosno, ako je ocjena za članak bila 4,75, tada je bilo potrebno prikazati ili 4,5 zvjezdica ili 5, što mi nije baš odgovaralo.

Stoga je odlučeno da napišem vlastiti dodatak u jQueryju za generiranje ocjene u obliku zvjezdica.

Osnovni zahtjevi za dodatak:

Ocjena je trebala biti ispravno prikazana, tj. ako je moja ocjena 4,78, onda bi broj osjenčanih zvjezdica trebao biti odgovarajući.
Mogućnost odabira efekta pri lebdenju miša iznad zvijezde. To znači koju ocjenu korisnik može dati. tj. prilikom prelaska pokazivača miša preko zvjezdica trebale su biti obojane ili cijele zvijezde, ili pola zvijezde, ili u apsolutnim vrijednostima iza pokazivača miša
Mogućnost postavljanja vlastitih zvijezda
Mogućnost određivanja URL-a na koji će se poslati rezultati glasovanja
Mogućnost određivanja broja zvjezdica prikazanih u ocjeni
Automatsko odbijanje rezultata glasovanja. (Na primjer: 1 glas, 2 glasa, 5 glasova)
Mogućnost postavljanja vlastitih imenica za rezultate glasovanja
Mogućnost postavljanja minimalne vrijednosti ocjene ispod koje korisnik neće moći glasati
Mogućnost izvršavanja prilagođene funkcije kada se klikne na zvjezdicu

Nakon što su razvijeni zahtjevi za dodatak, počeo sam programirati. Kao rezultat toga, došao sam do onoga što mislim da je prilično dobar jQuery dodatak za ocjenjivanje bilješki u obliku zvjezdica, koji rado mogu podijeliti s vama.

Kako bismo koristili ovaj dodatak na svojoj web stranici, prva stvar koju trebate učiniti je povezati jQuery biblioteku i sam dodatak. Povezat ćemo jQuery biblioteku ne na uobičajeni način, već iz Google repozitorija.

prozor.jQuery || document.write("");

Ovaj kod mora biti postavljen između oznaka na vašoj web stranici.

O tome zašto trebate povezati jQuery možete pročitati iz Google repozitorija.

Također, da bi dodatak ispravno radio, morate povezati sljedeće stilove:

Sve ćete to pronaći u izvornom kodu.

Nakon što su svi potrebni stilovi i biblioteke povezani, možete pozvati sam dodatak. Da biste to učinili, trebate umetnuti div na pravo mjesto na stranici, na primjer, s klasom ocjene:

Sada možete pozvati dodatak na ovom elementu ovako:

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

U tom slučaju, dodatak će biti pozvan sa zadanim postavkama, što će rezultirati stvaranjem 5 nepopunjenih zvjezdica.

Kako biste postavili određeni broj osjenčanih zvjezdica, potrebno je unutar našeg elementa umetnuti skriveno polje za unos s val klasom, koje će sadržavati vrijednost vaše ocjene:

Ako sada pozovete dodatak, stvorit će se sljedeća ocjena:

Nakon što korisnik klikne na željenu zvjezdicu, ocjena će se automatski preračunati (broj osjenčanih zvjezdica će se promijeniti) uzimajući u obzir napravljen izbor, a promijenit će se i broj glasova.

Ako postoji nekoliko ocjena na jednoj stranici i trebate poslati podatke na poslužitelj, onda se drugo skriveno polje za unos s klasom vote-id koristi za identifikaciju ocjene:

Značenje ovog poljaće se prenijeti na poslužitelj zajedno s rezultatom glasovanja. Na taj način možete identificirati ocjenu i ažurirati vrijednost ocjene koja vam je potrebna!

Sada razgovarajmo o tome koje postavke ima dodatak i kako ih možete promijeniti!

fx	plutati	Efekt kada mišem prijeđete preko zvjezdice. float — Kada lebdite kursorom miša, zvjezdice će se postupno preslikavati, prateći pokazivač miša pola - Kada lebdite kursorom miša, zvijezde će se postupno preslikavati, pola zvijezde odjednom full - Kada zadržite kursor miša, cijela zvijezda će biti popunjena
slika		put do slike zvijezde. Treba napomenuti da slika mora biti izrađena u obliku spritea, tj. Na samom vrhu slike nalazi se zvjezdica, koja će biti prikazana za nepopunjene zvjezdice. Ispod je zvjezdica koja se prikazuje kada zadržite pokazivač miša. A na samom dnu nalazi se zvjezdica, koja se prikazuje za osjenčane zvjezdice. Ako odlučite promijeniti zvjezdice, tada treba zadržati ovaj redoslijed. Također vam skrećem pozornost na činjenicu da visina i širina jedne zvijezde moraju biti jednake. U protivnom ocjena neće biti ispravno prikazana
širina	32	Širina jedne zvijezde
zvijezde	5	Broj zvjezdica prikazan u ocjeni
titule	[ "glas", "glasanje", "glasovi" ]	Niz imenica koje će biti prikazane za brojanje glasova
samo za čitanje	lažno	Način rada s ocjenom. Zadana vrijednost je lažna. Ako je postavljeno na true, neće biti moguće glasovati
minimalan	0	Minimalna vrijednost ocjene ispod koje korisnik neće moći glasati
url		Adresa stranice na koju će biti poslan AJAX zahtjev s rezultatom glasovanja
tip	objaviti	Vrsta AJAX zahtjeva. Zadana postavka je post. Ako trebate poslati zahtjev GET poslužitelju, tada postavite ovu vrijednost jednaku - get
utovarivač		Putanja do slike koja će biti prikazana dok se AJAX zahtjev šalje poslužitelju
klik		Prilagođena funkcija koja se poziva kada korisnik klikne na zvjezdicu. Prvi parametar funkcije bit će sam objekt ocjenjivanja, a drugi će biti rezultat glasanja korisnika

Prilagođeni izlazni format poruke

Recimo da obradite zahtjev na poslužitelju i ažurirate ocjenu bilješke. U tom slučaju možete prikazati poruku “Hvala. Vaš glas je prebrojan", obnovite ocjenu zvjezdicama i ažurirajte broj glasača u pregledniku korisnika.

Ali najčešće, prije ažuriranja ocjene, morate provjeriti je li ta osoba glasala za ovaj članak ili ne. A ako je osoba već glasala za ovu bilješku, tada bi se trebalo prikazati upozorenje u pregledniku korisnika, a ne ažurirati vrijednost ocjene i broj glasača.

Stoga, da bi dodatak ispravno radio, poslužitelj mora vratiti json objekt sljedećeg oblika:

Ako je status jednak vrijednosti - OK, tada će se ažurirati broj zvjezdica i ponovno izračunati broj glasača, inače će se jednostavno prikazati poruka upozorenja.

Ovo je univerzalni dodatak koji sam smislio za prikaz ocjene bilješki u obliku zvjezdica.

Možete vidjeti demo

Pozdravljam sve na sljedećoj lekciji o zanimljivoj temi JQuery zvjezdice, to je naziv koji bi, po mom mišljenju, trebao točnije opisati ovu skriptu. I tako, prije svega, počnimo s tim zašto je ocjena potrebna i značenje njezine upotrebe na stranicama. Pa, prvo, ovo je društveni status odgovora na bilo koji materijal koji izaziva interes s dobrim ili loša strana. Drugo, ovo je procjena i, recimo, mini anketa je li ova tema uopće zanimljiva ili nije. Treće, kao i na našoj stranici, razina složenosti teme, iako ovdje već polazimo od složenosti posebno za početnike, imajte na umu, a ne od složenosti za iskusne programere, budući da im takvi materijali možda jednostavno nisu zanimljivi i, u principu, nisu zanimljivi, s izuzetkom samo dobiti gotov scenarij. Stoga je za mene osobno ocjena ocjena materijala koji je izazvao interes. Na primjer, zainteresirani ste za kupnju mobitel ili nešto drugo, otišli ste u neku online trgovinu i na temelju ocjene možete procijeniti njenu popularnost, tu leži društveni status popularnosti proizvoda.

Sada razgovarajmo općenito o scenariju i mojim idejama. U biti, scenarij sam odlučio podijeliti na dva dijela, mislim da će mnoge zanimati i prvi i drugi dio, ali ja ih nisam kombinirao, već sam ih objavio u dva različita članka. Prvo, zato što će oba dijela zajedno biti dosta značajna, i drugo, volio bih vidjeti vaše komentare, ili možda savjete ili pitanja, o drugom dijelu, i treće, u drugom dijelu sigurno će se koristiti ne samo JQuery. Općenito, u prvom dijelu želim vam ispričati priču o mjestu gdje možete doći JQuery dodatak za ovu skriptu, au drugom dijelu unos ocjene kada kliknete na zvjezdicu u bazi bez ponovnog pokretanja sustava. Stoga, ako vas zanima drugi dio, veselim se vašim lajkovima i komentarima.

Pa, počnimo. Prvo svakako morate posjetiti službenu web stranicu ovog dodatka i preuzeti ga. Pa, također, pažljivo proučite dokumentaciju o postavljanju samog dodatka i njegovom optimiziranju za normalan rad skripte. Nakon pregleda trebali biste imati datoteku jquery.raty.js, ako je moguće jquery.raty.css, ako je potrebno i postoje zadane slike, postoje samo tri. Opet, reći ću, sve je to standardno i prema standardu!

Prvi dio. Povezivanje js i css datoteka. HTML. Slike.

U skladu sa standardom uključujemo stilsku datoteku demo.css te potrebna knjižnica za rad jquery.min.js, uključiti jquery.raty.js i naš scenarij rate.js.

Zatim u korijen skripte dodajte tri slike koje dolaze prema zadanim postavkama: star-on.png- puna ocjena, star-off.png- bez ocjene, zvijezda-pola.png- polovična ocjena. Ako imate svoje slike i želite ih koristiti, možete ih izraditi, na primjer, kao što sam ja napravio. Napravio sam mapu img i tamo postavio dvije slike: rating_activ.png- aktivna zvijezda, rating_passiv.png- nije aktivna zvijezda.

Sada prijeđimo na HTML kodirati. I želio bih odmah napomenuti da ćemo objaviti samo tri primjera prema standardu; sve ostalo možete pronaći na službenoj web stranici, što je navedeno u izvoru materijala.

Prvi primjer.

Kada kliknete na zvjezdicu, odmah se pojavljuje prozor koji poziva metoda upozorenje(), u kojem možemo vidjeti na koju smo zvjezdicu kliknuli i koju smo ocjenu odabrali.

Drugi primjer.

Kada kliknete na zvjezdicu, izračunava se i ocjena. Za demonstraciju, moje slike su instalirane u obliku zvijezda, koje se nalaze u mapi img.

Treći primjer.

Vrijedi napomenuti da se prilikom klika sve zvjezdice spremaju u ocjenu u kojoj ste kliknuli, ali ne u bazu podataka, već u klijentski dio. Stoga sam odlučio napraviti raspravu o drugom dijelu, gdje je moguće razviti punopravno spremanje ocjena i brojanje klikova općenito. Odnosno, ukupna ocjena bit će pohranjena u bazi podataka.

Drugi dio. JQuery.

Sada možemo pogledati JQuery dio o temi zvjezdice. Opet ću prihvatiti formulaciju da razmatramo samo tri primjera, koji su, takoreći, standardni.

Kako rade, što, kako i zašto, već sam gore detaljno opisao, pa ću se zadržati samo na detaljima koji vam možda neće biti jasni.

$(document).ready(function())( $(".rate1").raty(( click: function(score, evt) ( alert("ID: " + this.id + "\nscore: " + score ) ; ) )); $(".rate2").raty(( broj: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(".rate3") . rate(( broj: 4, target: ".name", savjeti: ["vrlo loše", "loše", "u redu", "dobro", "vrlo dobro"], )); ));

Ispod klase stopa1, pokrećemo funkciju s parametrima postići I evt. U prvom od njih dobivamo metodom upozorenje() ime, i drugo iskaznica, naša odabrana ocjena. Ispod klase stopa2, postavljamo broj prikazanih zvjezdica, točnije bit će ih deset, a slike činimo primjenjivima ne prema zadanim postavkama, već vlastitim, gdje starOff- je zvjezdica koja nije aktivna, ali StarOn- aktivan. Ispod klase stopa3, postavljamo broj prikazanih zvjezdica i skrivamo zadanu zvjezdicu s općeg prikaza - jako loše, postavljajući ukupnu vrijednost statusa na pet.

Treći dio. Knjižnica jquery.raty.js.

Raspravljajmo ukratko o samom dodatku. Ako vam ova tema postane jako zanimljiva ili je ne možete u potpunosti razumjeti, onda ćemo je analizirati posebno i detaljno, možda nakon drugog dijela, ako ga bude, ili možda kao poseban dio za dodatak. Pa, da budem iskren, dovoljno je samo malo pročitati dokumentaciju i sve će odmah postati jasno. Glavna točka na koju treba obratiti pozornost su zadane postavke.

Cancel: false, cancelClass: "raty-cancel", cancelHint: "Otkaži ovu ocjenu!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "lijevo", klik: nedefinirano , half: false, halfShow: true, savjeti: ["loš", "loš", "regularan", "dobar", "prekrasan"], iconRange: nedefinirano, mouseout: nedefinirano, mouseover: nedefinirano, noRatedMsg: "Nije ocijenjeno još!", broj: 5, brojMax: 20, put: nedefinirano, preciznost: lažno, samo za čitanje: lažno, okruglo: ( dolje: 0,25, puno: 0,6, gore: 0,76), rezultat: nedefinirano, scoreName: "rezultat", single: false, space: true, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", target: nedefinirano, targetFormat: "(rezultat)", targetKeep: false, targetScore: nedefinirano, targetText: "", targetType: "hint"

Kao što vidite, već sam koristio neke od ovih postavki u svojoj skripti, obratite pozornost na ovo! Ako vam nešto nije jasno, možete napisati u komentarima. Hvala na pažnji, sretno svima u razvoju!

U postu o poboljšanju faktora ponašanja (link na dnu posta), napisao sam da će sadržaj koji stvara dodanu vrijednost pomoći povećati vrijeme koje posjetitelj provede na stranici.

Njegov cilj nije samo zadržati čitatelje na stranici i povećati broj pregledanih stranica, već i povećati povjerenje u vašu stranicu i u vas osobno (ako je stranica autorova).

Što bi moglo zainteresirati posjetitelja i zadržati ga na stranici? 1. Sadržaj:

Zanimljivi članci.
Prikladne usluge povezane s temom stranice.
Istaknute slike i videozapisi u člancima.

2. Vjerujte autoru i stranici:

Podaci o stranici i autoru – stranica autora.
Mogućnost kontakta s autorom – kontakt obrazac, e-mail ili telefon.

3. Poticanje aktivnosti korisnika:

Prilika da izrazite svoje mišljenje o članku ili ga ocijenite:
- ostavite komentar i dobijte odgovor na njega.
- lajkajte ili dodajte poveznicu na članak na svoju stranicu u društvena mreža– gumbi društvenih mreža.
- dati izravnu ocjenu gradiva – ocjenu.
Glasanje o raznim temama.
Pokloni za čitatelje i korisnike, natjecanja i promocije.

4. Prekrasan dizajn i web mjesto jednostavno za korištenje.

Danas ću govoriti o tome kako svojoj web stranici dodati jednostavnu ocjenu postova zvjezdicama bez upotrebe složenih i teških dodataka. Osim toga, naša će ocjena sadržavati mikrooznaku za ocjenu, što znači da će njezine zvjezdice biti prikazane u PV-u ( Rezultati pretraživanja) Google i privucite pozornost na isječak stranice. Kao ovo:

A šanse da će korisnik kliknuti na isječak sa zvjezdicama puno su veće, pa uz njihovu pomoć možemo povećati CTR (click-through rate) stranica u rezultatima pretraživanja.

Imati ocjenu na web mjestu također može pomoći da uđe u YAN ( reklamna mreža Yandex) - njegovi moderatori uvijek obraćaju pozornost na dodatne usluge resursa.
U pravilu se ocjene izrađuju pomoću dodatka WP-PostRatings.

Neću se raspravljati, ovaj je dodatak vrlo funkcionalan i omogućuje vam implementaciju raznih ocjena, ali u isto vrijeme:

Ozbiljno usporava učitavanje stranice.

Sukob s mnogim drugim dodacima, poput dodatka za povećanje slike klikom, koji također koristi Ajax tehnologiju.

Dakle, prijeđimo na stvaranje ocjene zvjezdicama: ↓ Skriptu za ocjenjivanje web-lokacije možete preuzeti s donje veze

Već preuzeto 288 puta

Otvori ↓

Za otključavanje sadržaja unesite kod iz posljednjeg pisma koje ste primili.

Nakon raspakiranja arhive dobit ćete mapu s ocjenama i datoteke:

Funkcije.php,
- podnožje.php,
- single.php i
- stil.css.

Mapu s ocjenama potrebno je dodati u mapu vaše teme.

I prenesite kod iz datoteka functions.php, footer.php, single.php i style.css u datoteke functions.php, footer.php, single.php i style.css vaše teme.

U functions.php i footer.php - na početak datoteke, u style.css - na kraj datoteke.

U single.php nakon oznake

Možete pogledati druge mikrooznačne oznake za članke na http://schema.org/Article i dodati one koje su vam potrebne.

Nakon toga, post, s dodanom ocjenom, može se provjeriti u validatoru oznaka:
Google - https://developers.google.com/structured-data/testing-tool/ i
Yandex - http://webmaster.yandex.ua/microtest.xml.

Na kraju, predlažem da pogledate webinar o uklanjanju web stranica iz AGS-a pomoću sadržaja koji stvara dodanu vrijednost.

Postoji standardna funkcionalnost za procjenu nečega na webu, koja se može pronaći na mnogim stranicama. Obično se to tehnički izvodi na nekoliko načina:

1. Skup ulaznih elemenata vrste radija, od kojih svaki odgovara jednoj ili drugoj ocjeni

2. Puno nepotrebnog i nesemantičkog html označavanja + javascript.

Nedavno, dok sam postavljao projekt, morao sam se suočiti sa sličnim zadatkom. Nakon malo razmišljanja, odabrao sam prvu opciju iz nekoliko razloga:

– funkcionalnost temeljena na inputima već je implementirana u cms, pa je bolje držati se toga nego onda prisiljavati programera da smisli “štake” za vašu skriptu;

– Lijen sam i ponekad mi je lakše dočarati CSS nego po cijelom internetu tražiti JavaScript dodatak koji bi zadovoljio potrebe u datoj situaciji;

– Jednom sam već vidio primjenu sličnog mehanizma i bio siguran da je to moguće.

CSS ocjena zvjezdicama

Dakle, mehanizam za stiliziranje radijskih unosa pomoću CSS-a nije nov i nisam ga ja izmislio, naravno. Ali iz nekog razloga, kada sam tražio "CSS ocjenu", nisam pronašao gotovo rješenje koje bi mi odgovaralo. Stoga sam napisao svoje.

1. Trebamo slike (po mogućnosti u sprite) u obliku zvjezdica (sunca, mačića, sovica i što vam se najviše sviđa).

2. Odlučimo se o oznakama (oznake u nastavku u potpunosti su napisane u primjeru, ovdje ću opisati glavnu ideju): imamo element za omatanje, on se izmjenjuje i . Štoviše, one se izmjenjuju unatrag (ovo je vrlo važno kako biste mogli stilizirati sve odabrane zvjezdice kada kliknete, a to je također potrebno za efekt lebdenja, pogledajte primjer). Unosi dolaze odozgo, prozirni, tako da su vidljive samo oznake zvjezdica.

3. Kada odaberete jedan ili drugi unos, mijenjaju se stilovi za sve ispod oznake (pomoću css selektora ~). Zapravo, u obrascu, baš kao i obično odabrani radiobutton, postaje označen.