Az egész akkor kezdődött, amikor úgy döntöttem, megváltoztatom a bejegyzések besorolását a blogomban.

A minősítés változásának fő oka az volt, hogy az értékelés "egész" csillagokban jelent meg, nos, a maximumot és egy fél csillagot lehetett megjeleníteni. Vagyis ha a cikk értékelése 4,75 volt, akkor vagy 4,5 csillagot vagy 5-öt kellett megjeleníteni, ami nekem nem nagyon jött be.

Ezért úgy döntöttünk, hogy megírom a saját jQuery bővítményemet, amely csillagok formájában való értékelést generál.

A bővítmény alapvető követelményei:

• Az értékelésnek helyesen kellett volna megjelennie, azaz ha az értékelésem 4,78 volt, akkor a betöltött csillagok száma megfelelő legyen.
• Lehetőség a hatás kiválasztására, amikor az egeret a csillag fölé viszi. Ez azt jelenti, hogy a felhasználó milyen értékelést tud majd adni. azaz amikor az egérmutatót a csillagok fölé viszi, akkor vagy egész csillagokkal, vagy a csillag felével, vagy az egérmutatót követő abszolút értékekkel kellett volna átfesteni
• Lehetőség saját csillagok beállítására
• Lehetőség annak az URL-nek a megadására, amelyre a szavazás eredménye elküldésre kerül
• Lehetőség megadni az értékelésben megjelenített csillagok számát
• A szavazási eredmények automatikus elutasítása. (Például: 1 szavazat, 2 szavazat, 5 szavazat)
• Lehetőség saját főnevek beállítására a szavazási eredményekhez
• Annak a minimális értékelési értéknek a beállítása, amely alatt a felhasználó nem szavazhat
• Egyéni funkció végrehajtásának lehetősége csillagra kattintva

Miután kidolgozták a bővítmény követelményeit, elkezdtem programozni. Ennek eredményeként kaptam egy egész jó, szerintem jQuery bővítményt az értékelési megjegyzésekhez csillagok formájában, amit szívesen megosztok veletek.

A használat érdekében ezt a bővítményt webhelyén az első lépés az, hogy összekapcsolja magát a jQuery könyvtárat és magát a bővítményt. A jQuery könyvtárat nem a megszokott módon fogjuk csatlakoztatni, hanem a Google repository-ból.

Ezt a kódot a címkék közé kell helyezni a webhelyén.

A Google adattárából olvashat arról, hogy miért kell csatlakoztatnia a jQueryt.

Ezenkívül a bővítmény megfelelő működéséhez a következő stílusokat kell megadnia:

Mindezt megtalálod a forráskódban.

Miután az összes szükséges stílust és könyvtárat csatlakoztatta, meghívhatja magát a bővítményt. Ehhez be kell szúrnia egy div-t az oldal megfelelő helyére, például az értékelési osztályhoz:

Most a plugin ezen az elemen a következőképpen hívható meg:

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

Ebben az esetben a bővítmény az alapértelmezett beállításokkal kerül meghívásra, ami 5 kitöltetlen csillagot eredményez.

Egy bizonyos számú kitöltött csillag beállításához be kell szúrni egy rejtett beviteli mezőt az elemünkbe a val osztállyal, amely az Ön értékelésének értékét tartalmazza:

Ha most meghívjuk a beépülő modult, akkor a következő értékelés jön létre:

Miután a felhasználó rákattint a kívánt csillagra, automatikusan újraszámításra kerül az értékelés (a betöltött csillagok száma módosul) a választott választás figyelembevételével, és a szavazatok száma is módosul.

Ha egy oldalon több értékelés is található, és adatokat kell küldenie a szervernek, akkor egy másik rejtett beviteli mezőt használunk a szavazatazonosító osztállyal az értékelés azonosítására:

Jelentése adott mező A szavazás eredményével együtt elküldjük a szerverre. Így azonosíthatja a minősítést, és frissítheti a szükséges értékelés értékét!

Most beszéljünk arról, hogy milyen beállításai vannak a bővítménynek, és hogyan módosíthatja azokat!

Egyedi üzenetkimeneti formátum

Tegyük fel, hogy a szerveren feldolgozza a kérést, és frissíti a jegyzet minősítését. Ebben az esetben megjelenítheti a „Köszönöm. Szavazata számít", állítsa újra a csillagos értékelést, és frissítse a szavazók számát a felhasználó böngészőjében.

De leggyakrabban az értékelés frissítése előtt ellenőriznie kell, hogy ez a személy szavazott-e erre a cikkre vagy sem. És abban az esetben, ha valaki már szavazott erre a megjegyzésre, akkor figyelmeztetést kell megjeleníteni a felhasználó böngészőjében, és nem frissíti az értékelési értéket és a szavazók számát.

Ezért a beépülő modul megfelelő működéséhez a kiszolgálónak a következő formátumú json objektumot kell visszaadnia:

Ha a státusz egyenlő - OK, akkor a csillagos értékelés frissül, és a szavazók száma újraszámításra kerül, ellenkező esetben egyszerűen figyelmeztető üzenet jelenik meg.

Itt van egy ilyen univerzális beépülő modul a jegyzetek értékelésének megjelenítéséhez csillagok formájában.

Demót láthatsz

Szeretettel várok mindenkit egy újabb leckére egy érdekes témában. jQuery csillagos értékelés, egy ilyen név, ami véleményem szerint pontosabban írja le ezt a forgatókönyvet. Tehát mindenekelőtt kezdjük azzal, hogy miért van szükségünk minősítésre, és mi a használatának jelentése a webhelyeken. Nos, először is, ez a társadalmi státusz a válasz minden olyan anyag, amely felkelti az érdeklődést jó ill rossz oldal. Másodszor, ez egy értékelés és mondjuk egy mini felmérés, hogy ez a téma egyáltalán érdekes-e vagy sem. Harmadszor, akárcsak oldalunkon, a téma összetettségének szintje, bár itt már a kezdők bonyolultságából indulunk ki, ne feledje, és nem a tapasztalt fejlesztők bonyolultságából, így egyszerűen ezek az anyagok nem feltétlenül érdeklik őket , elvileg, az a kivétel, hogy csak szerezd be a kész scriptet. Ezért számomra személy szerint a minősítés az érdeklődést felkeltő anyag értékelése. Például érdeklődik a vásárlás iránt mobiltelefon vagy valami mást, menj el valamelyik webáruházba és értékeld a népszerűségét minősítéssel, ez a termék népszerűségének társadalmi státusza.

Most beszéljünk a forgatókönyvről általában és az én ötleteimről. Valójában úgy döntöttem, hogy két részre osztom a forgatókönyvet, szerintem sokakat érdekelni fog az első és a második is, de nem kombináltam őket, hanem két különböző cikkben adtam ki. Egyrészt azért, mert a két rész együtt igen jelentősnek bizonyul majd, másrészt szeretném látni észrevételeiteket, esetleg tanácsaitokat, kérdéseiteket a második résszel kapcsolatban, harmadszor pedig a második részben nem csak jQuery. Általánosságban elmondható, hogy az első részben egy történetet szeretnék készíteni Nektek egy olyan oldalon, ahol elvihetitek jQuery ennek a szkriptnek a beépülő modulja, a második részben pedig az értékelés megadása, amikor az adatbázisban egy csillagra kattintasz újratöltés nélkül. Ezért ha érdekel a második rész, várom a lájkokat, kommenteket.

Nos, kezdjük. A kezdéshez feltétlenül keresse fel a bővítmény hivatalos webhelyét, és töltse le. Nos, alaposan tanulmányozza át magának a beépülő modul beállításának és a szkript normál működéséhez való optimalizálásának dokumentációját. Elolvasás után rendelkeznie kell egy fájllal jquery.raty.js, ha lehetséges jquery.raty.css, ha szükséges, és alapértelmezés szerint képek, csak három van belőlük. Még egyszer mondom, hogy ez mind alapból és szabvány szerint!

Első rész. Beleértve a js és css fájlokat. HTML. Képek.

A szabvány szerint beletesszük a stílusfájlt demo.cssés a munkához szükséges könyvtárat jquery.min.js, csatlakoztat jquery.raty.jsés a forgatókönyvünk raty.js.

A szkript gyökerében adjon hozzá három, alapértelmezés szerint megjelenő képet: star-on.png- teljes minősítés, csillag off.png- nincs minősítés star-half.png- értékelés fele. Ha van saját képed, és szeretnéd használni, készíthetsz például úgy, ahogy én tettem. Létrehoztam egy mappát imgés feltöltöttem oda két képet: rating_activ.png- aktív csillag, rating_passive.png- nem aktív csillag.

Most menjünk tovább HTML kód. És azonnal szeretném megjegyezni, hogy csak három példát teszünk közzé a szabvány szerint, az összes többi megtalálható a hivatalos webhelyen, amelyet az anyagok forrásában jeleznek.

Első példa.

A csillagra kattintva azonnal megjelenik egy ablak, amelyet a metódus hív éber(), amelyben láthatjuk, melyik csillagra kattintottunk és melyik értékelést választottuk.

Második példa.

Ha egy csillagra kattint, a rendszer kiszámolja az értékelést is. A bemutatóhoz a képeimet telepítettem, csillagok formájában, amelyek a mappában találhatók img.

Harmadik példa.

Érdemes megjegyezni, hogy kattintáskor az összes csillag mentésre kerül, ugyanabban a minősítésben, mint ahogy rájuk kattintott, de nem az adatbázisban, hanem a kliens oldalon. Ezért úgy döntöttem, hogy megbeszélést folytatok a második rész számláján, ahol lehetőség van az értékelés és általában a kattintások számításának teljes körű megőrzésére. Vagyis az összesített értékelés az adatbázisban tárolódik.

A második rész. jQuery.

Most ismerkedhetünk meg jQuery rész a témában csillagos értékelés. Ismét azt a megfogalmazást veszem fel, hogy csak három példát veszünk figyelembe, amelyek mintegy szabványosak.

Hogy hogyan működnek, mit, hogyan és miért, azt fent már részletesen leírtam, így csak azokra a részletekre fogok koncentrálni, amelyek nem biztos, hogy egyértelműek az Ön számára.

$(document).ready(function()( $(.rate1").raty(( kattintás: function(pontszám, evt) ( alert("ID: " + this.id + "\nscore: " + pontszám) ; ) )); $(.rate2").raty(( szám: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" )); $(.rate3"). raty(( szám: 4, cél: ".név", tippek: ["nagyon rossz", "rossz", "ok", "jó", "nagyon jó"], )); ));

Az osztály alatt ráta1, futtatjuk a függvényt paraméterekkel pontszámés evt. Az elsőben a módszerrel kapunk éber() név, másodszor ID az általunk választott minősítés. Az osztály alatt ráta2, beállítjuk a megjelenítendő csillagok számát, vagy inkább tíz lesz és a képek alkalmazhatóságát nem alapból, hanem saját magunkévá tesszük, ahol csillag Off- egy csillag nem aktív, de StarOn- aktív. Az osztály alatt ráta3, beállítjuk a megjelenítendő csillagok számát, és alapértelmezés szerint elrejtjük a csillagot az általános kijelzőről - nagyon rossz, állítsa be a teljes állapotértéket ötre.

A harmadik rész. jquery.raty.js könyvtár.

Beszéljük meg röviden magát a bővítményt. Ha ez a téma nagyon érdekes lesz számodra, vagy nem tudod teljesen megérteni, akkor külön és részletesen elemezzük, esetleg a második rész után, ha igen, vagy esetleg külön rész a plugin számára. Nos, hogy őszinte legyek, elég egy kis dokumentációt elolvasni, és minden azonnal világossá válik. A legfontosabb dolog, amire figyelni kell, az az alapértelmezett beállítások.

Mégse: false, cancelClass: "raty-cancel", cancelHint: "Cancel this rating!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", click: undefined , fele: hamis, feleMegjelenítés: igaz, tippek: ["rossz", "rossz", "rendes", "jó", "gyönyörű"], iconRange: undefined, mouseout: undefined, mouseover: undefined, noRatedMsg: "Nincs minősítés még!", szám: 5, számMax: 20, elérési út: undefined, pontosság: hamis, csak olvasható: hamis, kerek: ( le: 0,25, teljes: 0,6, fel: 0,76 ), pontszám: undefined, scoreName: "score", single: false, space: true, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", target: undefined, targetFormat: "(pontszám)", targetKeep: false, targetScore: undefined, targetText: "", targetType: "hint"

Néhány ilyen beállítást, amint látja, már használtam a forgatókönyvemben, erre figyeljen! Ha valamit nem értesz, írd meg a megjegyzésekben. Köszönöm a figyelmet, sok sikert mindenkinek a fejlesztéshez!

A viselkedési tényezők javításáról szóló bejegyzésben (link a bejegyzés alján) azt írtam, hogy az értékteremtő tartalom hozzáadásával növelhető a látogató által az oldalon eltöltött idő.

Célja nemcsak az olvasók jelenléte az oldalon és a megtekintett oldalak számának növelése, hanem az Ön webhelye és személyesen Önbe vetett bizalom növelése is (ha az oldal szerzője).

Mi érdekelheti a látogatót és mi tarthatja az oldalon?

1. Tartalom:

• Érdekes cikkek.
• Kényelmes szolgáltatások az oldal témájában.
• Tematikus képek és videók a cikkekben.

2. Bízzon a szerzőben és a webhelyben:

• Információ az oldalról és a szerzőről - a szerző oldala.
• Kapcsolatfelvétel a szerzővel - kapcsolatfelvételi űrlap, e-mail vagy telefon.

3. Felhasználói aktivitás ösztönzése:

• Lehetőség, hogy véleményt nyilvánítson a cikkről, vagy értékelje azt:
  • hagyj megjegyzést, és kapj rá választ.
  • lájkold, vagy adj hozzá egy linket a cikkhez az oldalon közösségi háló- közösségi média gombok.
  • tegyen közvetlen értékelést az anyagról - minősítés.
• Szavazás különböző témákban.
• Ajándékok olvasóknak és felhasználóknak, versenyek és promóciók.

4. Gyönyörű design és könnyen használható webhely.

Ma arról fogok beszélni, hogyan adhatok hozzá egy egyszerű "csillagos" bejegyzésértékelést a webhelyhez bonyolult és nehéz bővítmények használata nélkül. Ezen kívül értékelésünk tartalmazni fogja az értékeléshez tartozó mikroadatokat is, ami azt jelenti, hogy a csillagai megjelennek a Google SE-jében (keresési eredmények), és felhívják a figyelmet a webhelyrészletre. Mint ez:

Annak pedig sokkal nagyobb az esélye, hogy a felhasználó rákattint a csillagokkal jelölt részletre, így segítségükkel növelhetjük a lapszámban szereplő oldalak CTP-jét (átkattintási arányát).

Az értékelés jelenléte az oldalon szintén segíthet neki bejutni a YAN-ba ( hirdetési hálózat Yandex) - moderátorai mindig figyelmet fordítanak a további erőforrás-szolgáltatásokra.
Az értékelések általában a WP-PostRatings beépülő modul segítségével jönnek létre.

Nem fogok vitatkozni, ez a bővítmény nagyon funkcionális, és lehetővé teszi különféle minősítések megvalósítását, ugyanakkor:

1. Erősen lelassítja az oldal betöltődését.
2. Sok más beépülő modullal ütközik, mint például a kattintással nagyítható képbővítménnyel, amely szintén Ajax technológiát használ.

Tehát folytassuk a csillagbesorolás létrehozását:

↓ A webhelyértékelési szkriptet az alábbi linkről töltheti le

Már letöltve 288 alkalommal

Nyissa meg ↓

Az archívum kicsomagolása után megkapja az értékelések mappáját és fájljait:

Functions.php
-footer.php
- single.php és
-style.css

Az értékelések mappát hozzá kell adni a téma mappájához.

És vigye át a kódot a functions.php, footer.php, single.php és style.css fájlokból a témája functions.php, footer.php, single.php és style.css fájljaiba.

Functions.php és footer.php esetén - a fájl elejére, style.css esetén - a fájl végére.

A single.php-ben a címke után

Előfordulhat, hogy a jquery könyvtár valamelyik verziója már jelen van az Ön webhelyén, ezért a csatlakoztatás előtt nézze meg az oldal HTML kódját (jobb egérgombbal nyissa meg a helyi menüt és keresse meg az "Oldal forráskódja" ill. "Oldalkód megtekintése" elem benne) .

Ha a jquery.min.js-hez hasonlót talál a kódban, akkor csak a rating.js szkriptet használja. És csak akkor csatlakoztathatja az 1.8.2-es verziót, ha a besorolás nem működik a jquery könyvtárával.

Ahhoz, hogy a csillagok megjelenjenek az oldalon, ki kell üríteni a gyorsítótárazó bővítmény gyorsítótárát (ha van ilyen) és a böngésző gyorsítótárát, és kétszer újra kell töltenie az oldalt.

Ha ezután nem jelennek meg a csillagok, ellenőrizze, hogy a szkriptek értékelési mappájának elérési útja és a style.css fájlban a csillagokkal ellátott kép helyes-e.

Íme, minek kell történnie:

Ahogy fentebb írtam, az értékelési szkriptnek van mikro-jelölése az értékeléshez.

Annak érdekében, hogy a hozzáadott értékelést tartalmazó oldal helyesen legyen megjelölve, paramétereket kell hozzáadnia a kódjához itemscope itemtype="http://schema.org/Article", jelezve a tartalom típusát (esetünkben Cikk). Erre azért van szükség, hogy jelezzük, mire is vonatkozik az értékelésünk.

Ha ez nem történik meg, akkor az ellenőrzéskor a validátor a "Ellenőrzési objektum nincs megadva" hibaüzenetet ad - elvégre a minősítés nem létezhet önmagában, mindig az egyik webhelyelemre vonatkozik.

Ezeket a paramétereket bármely címkéhez hozzáadhatja, amely a kód felett található single.php fájlban található

Például így: