Kako napraviti jednostavnu skriptu za komentare. Jednostavan sustav komentiranja koji koristi AJAX. Što nam treba od sustava komentiranja?
Vrijeme čitanja: 55 min
Dobar dan svima.
Sada je došlo vrijeme za dugo očekivani materijal o mikro markupu.
Odmah ću reći da će ovaj članak u početku biti prilično teško razumjeti, posebno za početnike, budući da postoji mnogo opcija za mikro označavanje i teško je sve odjednom dobiti u glavi. Ali pokušat ću opisati cjelokupnu sliku i istovremeno se usredotočiti na najvažnije i najčešće stvari.
Materijal je prilično opsežan, ali nadam se da će vam pomoći u stvaranju mikrooznaka na web mjestu.
U posljednje vrijeme primijetio sam da je mnogo ljudi opsjednuto mikropodacima. To se dogodilo nakon što su razni SEO blogeri počeli žustro raspravljati o tome. Ali hajde da shvatimo zašto se uopće koristi i je li potrebno posvetiti toliko pažnje tome. Je li igra vrijedna svijeće?
Što je mikro markup i zašto je potreban?
Ako čujete mikrooznačavanje ili semantičko označavanje stranice (mjesta), znajte da to znači označavanje stranice pomoću dodatnih atributa (oznaka), koji tražilicama daju ideju pojedinačni elementi stranice, s naznakom njihovog sadržaja.
Morate razumjeti da je obična stranica već označena, ali se koriste uobičajene općeprihvaćene oznake i atributi. To je sasvim dovoljno za tražilice i mnoge stranice još uvijek postoje na ovaj način i prilično uspješno napreduju.
No, ako želimo pomoći tražilicama da razumiju našu stranicu, uputiti ih na bitna područja stranice, razumjeti njenu strukturu, ukazati na sadržaj onih područja na koja prije svega treba obratiti pozornost, tada je potrebno implementirati mikro- markup, odnosno dodati određene oznake i atribute koji će označavati sve.
Čineći to, nećemo pomoći samo tražilicama, već i našoj web stranici, jer se mikro označavanje koristi ne samo za razumijevanje strukture i sadržaja stranice, već i za izgradnju Rezultati pretraživanja, formirajući funkcionalne i atraktivne isječke, što utječe na klikovni postotak (CTR) stranice u rezultatima pretraživanja. A to je povećanje ukupnog prometa na stranici.
Dolje možete vidjeti upečatljiv primjer takvih isječaka.
Na ovoj slici možete vidjeti, što nadopunjuje i čini ga uočljivijim među sivom masom drugih stranica u rezultatima pretraživanja. Također sam upotrijebio strelice za isticanje putanje kroz put, koja pokazuje jasnu strukturiranu stazu do materijala na stranici, umjesto jednostavnog nejasnog URL-a.
Ovaj navigacijski lanac je prilično jednostavan. Sve što trebate učiniti je instalirati ih na stranicu.
Evo još jedne opcije za bogate isječke.
Ista opcija omogućuje posjetitelju da odmah shvati o čemu se stranica radi i što mu ona može dati. Ako je isječak ispravno sastavljen u ovom slučaju, tada korisnik može odmah poduzeti radnju koja vam je potrebna, a kao što znamo, svaka stranica mora obavljati svoje vlastite zadatke (pretplata, kupnja itd.).
Složite se da će takav isječak biti uočljiviji u rezultatima pretraživanja od uobičajenog opisa stranice, budući da je puno veći. Da, i izgleda čvršće.
Odgovorimo sada na pitanje koje bi moglo zabrinjavati one koji misle da mikro markup pomaže u povećanju pozicija i da je jedan od faktora rangiranja.
Utječe li mikro markup na rangiranje? Treba li očekivati povećanje pozicija nakon njegove provedbe?
Kako ne bismo pisali svoje obrazloženje, okrenimo se pomoći tražilice Yandex. Dakle, što nam sam Yandex govori o tome? citiram:
Hoće li moje web mjesto bolje rangirati ako koristim označavanje?
Odgovor: Markup može vašu web-lokaciju učiniti vidljivijom u Yandex pretraživanju i tako privući više posjetitelja iz vaše ciljane publike. Yandex je zainteresiran za korisnike koji svoje probleme rješavaju pomoću Pretraživanja. Jedan od pokazatelja kvalitete pretraživanja naziva se "zadovoljstvo korisnika". Web stranice koje povećavaju "sreću" rangirane su više.
Možemo zaključiti da označavanje ne utječe izravno na pozicije, već samo neizravno, budući da možemo napraviti atraktivniji isječak, što će samo po sebi dovesti više posjetitelja na resurs. Onda je stvar tehnike. Više posjetitelja znači više akumuliranih dobrih pokazatelja o stranicama (ako je sadržaj kvalitetan) i pozicije će postupno rasti.
Također je vrijedno napomenuti da pomažući tražilicama da razumiju prirodu sadržaja, njegovu vrstu (informacija, sastanak, proizvod itd.), činimo sadržaj relevantnijim upit za pretraživanje a on bi trebao zauzimati više položaje. Možda ne izravno, ali neizravno - to je sigurno. Yandex nam je to potvrdio (vidi gore).
Dakle, napravimo kratak popis prednosti posjedovanja mikro oznaka na web mjestu. To su one točke koje neizravno ili izravno ukazuju na kvalitetu stranice, povećavaju njenu poziciju i pomažu tražilicama.
- Prvo, možemo zaključiti da se povjerenje tražilica u stranicu povećava jer robota za pretraživanje usmjeravamo na glavne elemente stranice, bez straha da s nama nešto nije u redu i bez pokušaja sakriti nešto od robota za pretraživanje. Zbog toga je logično da tražilice misle da im pomažemo i otkrivamo „dušu stranice“, što će svakako utjecati na kvalitetu indeksiranja stranice, au konačnici i na njezinu poziciju;
- Drugo, uz odgovarajuće postavke, možemo istaknuti naš isječak u rezultatima pretraživanja, što će dovesti do trenutnog povećanja prometa na stranicama resursa bez mijenjanja položaja. U konačnici, povećanje prometa dovest će do povećanja pojedinačnih stranica u rezultatima pretraživanja i web stranice u cjelini;
- Treće, povećavamo čimbenik ponašanja - CTR u rezultatima pretraživanja (click-through rate). Ova je točka vrlo blisko povezana s prethodnom. Budući da više ljudi klika na našu web stranicu, to znači da smo točnije pomogli posjetitelju da shvati da je naša stranica kvalitetnija nego na drugim stranicama. To znači da se stranica mora malo podići u rezultatima pretraživanja.
Dakle, mislim da je odgovor na pitanje dat.
Je li markup uopće potreban? - Da, treba mi.
Naravno, ako postoji izbor između bolne implementacije označavanja na web mjestu i rada na drugim aspektima, onda se, naravno, ne biste trebali usredotočiti samo na semantičko označavanje. Bolje je raditi na sadržaju, koji je puno važniji od nekih tehničkih detalja među stotinama ili tisućama drugih stvari. Štoviše, sada možete istaknuti svoj isječak u rezultatima pretraživanja bez uvođenja oznaka u predložak, već samo instaliranjem , koji već nudi oznake ocjena.
Nakon što saznamo glavne prednosti, možemo prijeći na razmatranje glavnih vrsta semantičkog označavanja.
Glavne vrste mikro označavanja
Ovdje je sve prilično komplicirano. Prvo, morate razumjeti da postoje rječnici mikro označavanja i njihove sintakse.
Rječnik se može shvatiti kao mikrooznačni jezik koji uključuje skup klasa i svojstava koja ukazuju na bit sadržaja stranice. U svakom rječniku, svaki element na web mjestu identificiran je pomoću različitih oznaka. Na primjer, u rječniku Schema.org, naziv dokumenta naznačen je pomoću oznake "name", ali mikroformati koriste CSS klasu unutar bloka elementa koji vrijedi označiti ( Kamilica, gdje je fn org naslovna oznaka u ovom slučaju).
Svaki rječnik i sintaksa imaju svoje oznake i atribute, što formate mikro označavanja čini takozvanim vinaigrette-om. Stvarno je teško sve shvatiti.
Sintaksa se shvaća kao način korištenja određenog jezika (rječnika) semantičkog označavanja. Sintaksa određuje koje će se oznake koristiti za označavanje suštine objekata i njihovih svojstava na stranici.
Iz prethodne definicije sintakse uveden je pojam suštine. Što to znači primjenjivo na predmetno pitanje?
Suština – jednostavno rečeno, to je vrsta informacije (jedinica sadržaja, informacija) koju upućujemo na tražilice. Na primjer, trebamo ukazati na najave na glavnoj stranici bloga, odnosno istaknuti suštinu ovog područja nekim tagom, definirajući ga kao područje najava. Isto je potrebno učiniti i sa post page-om, gdje je potrebno naznačiti suštinu područja gdje se sadržaj (članak) nalazi, odnosno istaknuti tekst kao sadržajno područje.
Gotovo za svaki element stranice možete definirati suštinu, odnosno naznačiti što je to: sadržaj ili ocjena, ili općenito komentari. Dakle, entiteti se mogu specificirati na takvim stranicama (uzimam jednostavan predložak bloga kao što je moj kao primjer):
- Početna - popis najava;
- Stranica postova - komentari, sadržaj, ocjena (ako je dostupna), putevi;
- Obična statična stranica - sadržaj, komentari (ako postoje).
Osim toga, na svakoj vrsti stranice možete odrediti isti element - zaglavlje stranice, podnožje (podnožje), bočna traka (bočni stupac), glavni izbornik.
Svaki entitet ima svoja svojstva, na primjer:
- Područje sadržaja na stranici s objavama - naslov članka, tekst članka, opis, ime autora članka, datum objave, kategorija, slike, video i ostalo;
- Područje za popis najava na glavnoj stranici, rubrike i arhive je isto;
- Područje komentara - ime komentatora, datum, tekst komentara;
- Područje sadržaja na običnoj statičnoj stranici u osnovi je isto kao u postovima;
- Područje zaglavlja stranice - naslov, opis;
- Područje ocjenjivanja na stranicama - maksimalna ocjena, trenutna ocjena, broj ocjena.
- Područje podnožja (podnožje stranice) - godina autorskog prava;
- Područje bočne trake (bočni stupac) - naziv widgeta;
- Područje glavnog izbornika - veze.
Postoje i druga područja sa svojstvima, ali ih neću razmatrati, budući da ih u svakom rječniku označavanja ima nekoliko desetaka, au označavanju sa schema.org njihov je broj općenito u stotinama.
Pogledat ćemo koje oznake i atribute koristiti za označavanje entiteta i svojstava svakog od njih u praktičnom dijelu ovog članka.
Sada prijeđimo na glavnu ideju odlomka i razmotrimo glavne formate semantičkog označavanja. Uži popis Ključni rječnici i sintakse mogu se vidjeti na donjoj mentalnoj mapi.
Nećemo razmatrati sve rječnike i sintakse jer je to besmisleno. Neće vam trebati. Razmotrimo samo ukratko glavne formate označavanja:
- Schema.org;
- Open Graph;
- Mikroformati.
Dotaknut ćemo se nekih od ostalih prilično malo.
Posljednji korak vrijedi spomenuti još jedan rječnik, odnosno Data Vocabulary, koji je razvio Google, a sada je njegov razvoj obustavljen. Sva pažnja usmjerena je na Schema.org. Možemo reći da su sva svojstva i entiteti koji su bili u ovom jeziku za označavanje postali prototipovi za označavanje sa schema.org.
Koliko ja razumijem, rječnik Data Vocabulary može raditi sa sintaksama: mikropodacima i RDF jezikom, što se može vrlo jasno vidjeti u Google pomoći o materijalu za mikrooznačavanje putanje. Postoje 2 opcije označavanja:
- Označavanje rječnika podataka mikropodacima;
- Označavanje rječnika podataka s RDFa.
Ja ću malo preduhitriti. Na prvoj slici možete vidjeti da se uz Rječnik podataka koriste mikropodaci sa Schema.org. Činjenica je da putevi sa shemom još nisu podržani. Stoga se koristi kombinirana opcija.
Koji je format označavanja najbolje koristiti?
Mislim da već znate odgovor na ovo pitanje, budući da sam u opisu svake vrste markupa dao neosporan argument da tražilice Oni sami preporučuju Schema.org markup dictionary. To je upravo ono što trebate koristiti. Ali može postojati puno opcija za implementaciju ovog mikro označavanja, kako od dodataka tako i od uvođenja entiteta i svojstava u predloške dizajna.
Posljednja opcija je najoptimalnija, jer je ovo jednokratni posao i mikro označavanje će biti na apsolutno svakoj stranici. Sve tražilice će ga vidjeti jer će biti ugrađen u predložak. Ali početnici bi mogli imati problema s implementacijom, budući da trebaju razumjeti kod svog predloška barem na minimalnoj osnovnoj razini i vidjeti koja oznaka prikazuje naslov članka, gdje je kod za prikaz teksta i tako dalje. Svi ovi trenuci morat će se omotati mikro oznakama.
Ova točka također pokreće pitanje kombiniranja različitih rječnika na jednom mjestu. To je prihvatljivo iu nekim slučajevima se ne može izbjeći. To se jasno vidi na primjeru označavanja putanje, kada se kombiniraju varijanta označavanja Data Vocabulary i označavanja mikropodataka sa Schema.org. Nema ništa loše u tome. Sam Yandex govori o tome.
Na vašoj je diskreciji. Ako vam je lakše koristiti mikroformate, krenite. Ja osobno ću pokazati cijeli proces na Schema.org mikro označavanju, budući da sam ga sam implementirao i sve radi s praskom bez ijedne greške.
Kako provjeriti prisutnost oznaka na web stranici
Naš je zadatak u ovoj fazi saznati ima li naš predložak neki format označavanja. To je sasvim moguće jer su većina korištenih predložaka prevedene teme na engleskom jeziku koje već sadrže neku vrstu formata semantičkog označavanja. U pravilu je to označavanje u mikroformatima koje nam uopće ne koristi. Bolje je da ga u početku nema, jer ćemo se tako spasiti od glavobolje kada ga skinemo.
Za provjeru prisutnosti oznaka, možete koristiti i validator mikro oznaka iz Yandexa i Google alat za provjeru strukturiranih podataka. Radije i toplo preporučujem da koristite Yandex validator jer je mnogo jednostavniji.
Nakon odlaska na Yandex validator, unosimo adresu stranice i kliknemo "Provjeri".
Ako piše "Mikro označavanje nije otkriveno", to znači da u predlošku nema označavanja treće strane. Ovo je jako dobro jer ne morate gubiti trud na njegovo uklanjanje. Ali budite oprezni, jer na jednoj vrsti stranice možda neće biti oznake, ali na drugoj će biti prisutna (na primjer, na stranici članka).
Dakle, analiziram stranicu objave i ispada da su komentari predloška označeni mikroformatima (vcard je prisutan). O tome svjedoče različiti kodovi u rezultatima skeniranja.
Ne trebaju nam mikroformati, pa bismo ih trebali ukloniti. Može se dogoditi da vaš predložak bude označen u drugim formatima označavanja. Tada ih također treba ukloniti. Moguće je da će označavanje sa Schema.org biti odmah implementirano. To se također događa, ali vrlo rijetko, jer nema vrijednih šablona besplatan pristup Gotovo nikad. Ali loši su sitniš.
Sada pogledajmo postupak uklanjanja oznaka treće strane.
Uklanjanje oznaka treće strane
Budući da se u mom slučaju pokazalo da se radi o označavanju treće strane pomoću mikroformata, upotrijebit ću njegov primjer da pokažem ovaj proces. Ako imate neku drugu oznaku, tada će princip brisanja biti sličan.
Sve se svodi na uklanjanje oznaka i njihovih atributa iz oznake koju imate. Jedina razlika između mikroformata i drugih vrsta mikro označavanja bit će da sve vrste osim mikroformata dodaju nove oznake i atribute. Mikroformati ne dodaju ništa, ali su zapisani unutar specifičnog atributa klase html element predložak (na primjer, naslov članka), kao što sam napisao u odlomku o glavnim vrstama.
Usput, u točki br. 6 ovog članka dajem kod za označavanje komentara koji je potrebno umetnuti u predložak funkcijske datoteke functions.php. Ovaj kôd trebao bi ispraviti ove pogreške iz oznake mikroformata treće strane. Stoga, ako imate ovaj problem, prvo preporučujem da provjerite taj kod na svom predlošku. Trebao bi pomoći. To će vas uštedjeti nepotrebnog rada ručnog odlaganja. Ako ništa ne uspije, onda sve radimo ručno, kao što opisujem u nastavku.
Sada prijeđimo na sam proces. Dakle, ranije je postalo jasno da imam dodatne oznake od mikroformata. Prilikom provjere u validatoru dobili smo oznaku vcard koja stvara greške.
Sada moramo otvoriti mapu s predloškom da bismo vidjeli sve njegove datoteke, a zatim se okrećemo onim datotekama koje su odgovorne za prikaz tih elemenata u kojima se nalaze mikroformati. Kako to učiniti, pogledajte popis u nastavku:
Nadam se da sam to sasvim jednostavno objasnio. Iako, početnik može imati veću zbrku u glavi.
Ovako je ovaj dio koda s vcard izvorno izgledao u mojoj datoteci predloška.
Nakon promjene postalo je ovako.
Također sam napravio promjene u stilovima.
Sada nema mikroformata i dizajn je sačuvan u izvornom stanju.
Dakle, kada smo uklonili standardnu oznaku (ako je bila prisutna), možemo ugraditi novu sa Schema.org. DO ovaj proces počinjemo.
Implementacija mikro označavanja Schema.org
Počnimo s malim objašnjenjem i teorijom, budući da se uvijek trebate pripremiti prije prakse.
Prvo, vrijedno je otkriti koje datoteke trebamo usmjeriti na potrebne entitete i njihova svojstva. Sada govorim o datotekama za WordPress motor. O drugim motorima neću ništa, jer ne radim s njima. Princip označavanja ostaje isti. Vi samo trebate odrediti datoteke u kojima se nalaze potrebna područja za označavanje.
- Single.php datoteka (datoteka zapisa): entitet - područje sadržaja (članak), svojstva - datum objave, autor, kategorija, naslov članka, slike;
- Datoteka Functions.php (u mom slučaju - oznaka koda komentara): entitet - komentar, svojstva - tekst komentara, datum i ime komentatora;
- Datoteke s popisom najava index.php, category.php, archive.php (glavni, kategorije i arhive, redom): entitet - popis najava, svojstva - datum objave, autor, kategorija, naslov članka;
- Stranica datoteke.php (obična statična stranica - izborno): entitet - područje sadržaja, svojstva - naslov teksta i, ako je dostupno, datum, autor i ostalo;
- U datoteci header.php također označite zaglavlje - entitet će biti zaglavlje, a svojstva će biti naslov stranice + opis;
- Datoteka sidebar.php (bočni stupac): entitet - cijela bočna traka, svojstvo - naslov svakog widgeta;
- Datoteka footer.php (podnožje stranice): entitet - cijelo podnožje, svojstvo - datum autorskog prava + naziv stranice (nisam označio ime);
- Zaglavlje datoteke.php (gornji dio resursa): entitet - glavni navigacijski izbornik, svojstvo - veze + njihova sidra.
Sada o oznakama i atributima koji odgovaraju svakoj vrsti entiteta i njihovim odgovarajućim svojstvima. Prvo o entitetima.
/***Popis najava***/ itemscope itemtype="http://schema.org/BlogPosting" /***Objavi sadržaj stranice***/ itemscope itemtype="http://schema.org/Article" / ***Komentari***/ itemprop="komentar" itemscope itemtype="http://schema.org/Comment" /***Uobičajena statična stranica***/ itemscope itemtype="http://schema.org / Članak" /***Bočna traka (bočna traka)***/ itemscope itemtype="http://schema.org/WPSideBar"> /***Podnožje (podnožje stranice)***/ itemscope itemtype="http:/ /schema.org/WPFooter"> /***Navigacija web mjestom (glavni izbornik)***/ itemscope itemtype="http://schema.org/SiteNavigationElement"> /***Slike***/ itemscope="" itemtype="https://schema.org/ImageObject" /***Trajni link na stranicu***/ itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" /***Organizacija * **/ itemscope itemtype="https://schema.org/Organization" /***Adresa***/ itemscope itemtype="http://schema.org/PostalAddress"
Sada oznake imovine.
- Naslov stranice (tekst) - itemprop="headline"
- Tekst unosa - itemprop="articleBody" (može se koristiti i za opis ako je formiran kao dio cjelovitog teksta)
- Datum objave - itemprop="datePublished"
- Autor - itemprop="autor"
- Kategorija članka - itemprop="articleSection"
- Slika - itemprop="slika"
- Tekst komentara - itemprop="tekst"
- Ime komentatora - itemprop="kreator"
- Datum komentara - itemprop="datePublished"
- Link (odnosi se na glavni izbornik i sliku) - itemprop="url"
- Godina autorskog prava u podnožju - itemprop="copyrightYear"
- datum Posljednja promjena stranice - itemprop="dateModified"
- Adresa - itemprop="adresa"
- Ulica - itemprop="adresa ulice"
- Indeks - itemprop="postalCode"
- Lokacija adrese - itemprop="addressLocality"
- Telefon - itemprop="telefon"
- Duljina slike - itemprop="width"
- Širina slike - itemprop="height"
- Logotip - itemprop="logotip"
Ovo su glavna svojstva koja ćemo sada koristiti.
Daljnji koraci za označavanje predloška prilično su jednostavni.
Svako područje koje treba definirati entitet i svojstvo korištenjem gore navedenih oznaka umotano je u neku vrstu zajedničke oznake. To može biti oznaka bloka div, oznaka članka, oznaka raspona, H1 zaglavlje i drugi. Radi lakšeg razumijevanja, naslov je gotovo uvijek omotan H1 oznakom, što i treba biti. Bit će 2 oznake: otvarajuća i zatvarajuća. I tako sa svakim elementom stranice, a ne samo sa zaglavljima.
Ideja je da će svakom potrebnom elementu trebati dodijeliti oznaku entiteta (odredite vrstu sadržaja: članak ili komentar, ili popis najava, itd.) i svojstva unutar njegove uvodne oznake.
Sada vježbajte. Na primjer, postoji datoteka jednog posta (članka) single.php. Počnimo s njegovim označavanjem.
Mikro označavanje posta (članka)
Počnimo s definiranjem entiteta. Predložak ima zajedničku oznaku koja obavija cijelo područje sadržaja objave (i tekst članka i naslov i komentare) i za svakoga je drugačiji. Za neke to može biti div blok. Imam ovaj članak. Naravno, ovaj tag se otvara na samom početku, gdje počinje sav sadržaj, a završava negdje kada sadržaj završi.
I na samom početku, unutar uvodne oznake članka, trebam umetnuti oznaku entiteta područja sadržaja na stranici objave (dao sam kodove malo više). Dat ću vam sliku (na klik) konačnog markupa single.php datoteke snimanja, a onda ću objasniti što se dogodilo i što se dogodilo na kraju, ako nekome nije jasno. Slika je velika, ali se može kliknuti, pa možete kliknuti na nju i pogledati je u većoj veličini ili je otvoriti u novoj kartici i pogledati u punoj veličini.
U početku se cijelo područje sadržaja objave otvara pomoću oznake članka. Bilo je ovako:
I postalo je ovako:
Kao što vidite, oznaka entiteta objave uključena je unutar oznake uvodnog članka. Sada će robot za pretraživanje shvatiti da je to područje koje sadrži sadržaj. Percipirat će ovo područje kao objekt. Vrlo je važno.
Usput. Mnogi ljudi postavljaju ocjene članaka bez dodatka, a nakon provjere stranice u Yandex ili Google validatoru, rečeno im je da predmet pregleda nije naveden. To je zbog činjenice da se ocjena objavljuje sama. Morate ga smjestiti unutar ovog područja, koje zauzvrat mora biti definirano oznakom za označavanje kao područje sadržaja (ili objekt pregleda). Tada će ocjena pripasti objektu, odnosno artiklu. Nakon ovoga neće biti grešaka.
Vratimo se procesu. Prvo smo postavili suštinu objekta (cijelo glavno područje smo omotali zajedničkom oznakom), a zatim smo označili njegova svojstva, odnosno sekundarne podatke: datum objave, autora, tijelo članka (sam tekst) , podaci o izdavaču (adresa, organizacija, logo), datum zadnje promjene stranice, adresa početne stranice i tako dalje. Sve je potpuno isto - unutar svake početne oznake potrebnog elementa označavamo odgovarajuće parametre. U nastavku dajem objašnjenje što se dogodilo prije unošenja promjena i što se dogodilo nakon.
U početku kopiramo 2 retka koda odmah nakon uvodne oznake koja obavija cijelo područje sadržaja. Za mene je ovo oznaka članka s entitetom unutar njega koji je postavljen ranije u tekstu.
"/>
- Prvi redak je odgovoran za izlaz retka koji pokazuje na adresu stranice i govori da je ova stranica glavna.
- 2. red - datum zadnje izmjene stranice.
Zatim u sljedećem redu dajemo podatke o izdavaču, tj. o tome tko objavljuje materijale. To uključuje nekoliko entiteta odjednom (Organizacija - adresa unutar nje, slika - logo). Ja vam dam kod, vi samo zamijenite savjete u njemu svojim podacima. Hoćete li stavljati stvarne ili ne na vama je, ali ako Google to ipak čini kako bi poboljšao rezultate i prikazao vaše podatke kako bi vam se povećao vjerodostojnost, onda bih označio prave. Općenito, ovo je svačiji posao. Evo koda.
Ako primijetite, u gornjim kodovima postoji display:none style tag, koji govori da ti podaci ne moraju biti prikazani na stranici, već samo u izvornom kodu, kako bi ih tražilica mogla vidjeti. Zapravo ovo je ono što mi treba. Ova oznaka se nalazi u redovima 2 i 9 i skriva prikaz logotipa i adrese. Ako želite prikazati, uklonite ove stilove. Ubuduće ću to raditi, kada blog radikalno redizajniram, dizajnirat ću ga u kompaktan, lijep blog koji će se dobro uklopiti u dizajn i dati informacije o meni.
Što se tiče loga, mnogi ga jednostavno nemaju. Predlažem da učinite sljedeće - ili napravite malu sliku i na nju napišite naziv stranice s adresom (najjednostavnija opcija logotipa) ili postavite svoju fotografiju (najljenija opcija). Imam logo, pa sam ga registrirao.
Dakle, sada označavamo sljedeće informacije. Ovdje će biti lakše. Vi samo trebate pronaći sve druge potrebne kodove koji prikazuju ove ili one informacije (naslov, kategorija, datum objave, autor) i umetnuti potrebne oznake svojstva schema.org markup unutar njihovih početnih oznaka u kojima su zatvoreni.
Naslov objave. Bio je:
Datum objave. Bio je:
".$current_category_name."
".$current_category_name."
Tekst članka. Bio je:
I sami biste trebali učiniti gotovo istu stvar. Jedina razlika bit će u oznakama, unutar kojih trebate postaviti oznake entiteta i svojstva. Njihov poredak također može biti drugačiji. Ili se može dogoditi da nešto uopće neće biti, na primjer, neće biti datuma objave ili poveznice na kategoriju. Zatim ćete te podatke morati dodati u predložak.
U pretposljednjem paragrafu članka dat ću vam kodove koje možete koristiti ako vam odjednom nešto nedostaje.
Dakle, sada moramo provjeriti našu stranicu u Yandex i Google validatorima.
U Googleovom validatoru bit će gotovo isto. U ovim podacima ne bi trebalo biti grešaka. Jedina nijansa odnosi se na mikrooznačavanje slika, na što prelazimo.
Svaku sliku možete označiti ručno, umotavši je u suštinu slika i navodeći potrebna svojstva, ali to je prilično nezgodno kada u svakoj objavi postoji nekoliko desetaka slika. Upotrijebimo sljedeći kod.
Funkcija micro_images_captions ($a, $attr, $content = null)( extract(shortcode_atts(array("id" => "", "align" => "alignnone", "width" => "", "caption" = > ""), $attr)); if (1 > (int) $width || empty($caption)) return $content; $caption = html_entity_decode($caption); if ($id) $id = "id ="" . esc_attr($id). "" "; return "
" . $natpis . "
Sada ne morate svakom članku dodavati oznaku za označavanje slike. Idemo na validator, provjerimo stranicu s barem jednom slikom i vidimo sljedeću sliku.
Ne bi trebalo biti nikakvih grešaka. Sve je jasno. Svaka slika treba biti omotana oznakom, baš kao na gornjoj snimci zaslona.
Mikro označavanje glavne stranice
Ovdje trebate omotati kod koji prikazuje popis najava s oznakom entiteta popisa najava. To se radi na potpuno isti način. Unutar opće oznake koja obavija sav kod u predlošku, postavljamo željenu oznaku (suština popisa blogova je blogposting, ili to možete učiniti po analogiji sa post page -article). Pogledajte sliku (može se kliknuti).
Kao što vidite, moj popis objava se prikazuje pomoću oznake li list, odnosno svaka objava je ograđena njime. Unutar popisa je gotovo isti kao i unutar samog unosa - tu su datumi, ime autora, naslov odjeljaka, adresa, logo, izdavač i tako dalje. To možete jasno vidjeti na stranicama bloga. Struktura je slična, samo tekst članka nije potpun. Općenito, označavanje je potpuno isto kao i za stranicu s objavom, s izuzetkom oznake entiteta objave objave na blogu.
Također je potrebno upotrijebiti nešto drugačiji kod za označavanje slike za stranicu s najavama, budući da prikazuje ne samo slike, već i minijature. Mikrooznačavanje sličica bit će provedeno korištenjem gotovo sličnog koda. Ako su se prije morali označavati rukom, sada to više nema smisla. Ovdje je kod (također ga stavljamo u datoteku functions.php).
Funkcija micro_thumbnail($content) ( $ar = "!!si"; $br = ""; $content = preg_replace($ar, $br, $content); return $content; ) add_filter("post_thumbnail_html", "micro_thumbnail ");
Kontaktiramo validatora i provjeravamo početna stranica. Pokazao sam vam samo 2 najave, jer... cijeli zaslon će biti vrlo velik.
Bit će onoliko takvih unosa za blogove koliko ima najava na ovoj stranici. Ako ste koristili članak umjesto blogpostinga, tada ćete imati nekoliko članaka ovisno o broju najava.
Jer početna stranica Budući da je njegova struktura slična stranicama odjeljaka i arhiva, njihova mikrooznaka je identična. Popisi najava prikazani su na svim vrstama stranica.
Dakle, sve što preostaje je analizirati oznake komentara, što je prilično kompliciran proces za početnika. Ostale su i obične statične stranice. Princip njihovog označavanja sličan je zapisima, pa ga neću pokazati.
Dakle, komentari. Pojednostavimo zadatak na umetanje jednog koda u datoteku functions.php i modificiranje funkcije koja prikazuje komentare na stranicama stranice. Prvo uzmite sljedeći kod i smjestite ga u datoteku functions.php na samom početku, neposredno prije uvodne oznake< ?php. Если будет выдавать ошибку, можно попробовать его разместить после закрывающего тега?>na samom kraju datoteke.
Postoji i opcija postavljanja kada trebate ukloniti otvor u ovom kodu na samom početku php kod(izbrisati< ?php) и в самом конце его закрытие (удалить?>). Tada trebate postaviti kod ne prije ili iza otvarajuće (zatvarajuće) php oznake, već unutar ovih oznaka pored svih ostalih funkcija. Ponekad sam nailazio na problem kada ova određena opcija postavljanja radi.
Kod ne radi na svim predlošcima!
< id="komentar-">
$add_below, "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>
Sljedeći korak je otvoriti datoteku comments.php i u njoj potražiti funkciju izlaza komentara. Ona izgleda ovako:
< ?php wp_list_comments(); ?>
Ovo je njegova pojednostavljena verzija i bit će dobro ako tako i napravite. Zatim ga jednostavno zamijenimo potpuno istim kodom, samo s nekoliko izmjena s pozivom funkcije koju smo ranije smjestili u datoteku funkcija.
< ?php wp_list_comments("callback=schema_comment"); ?>
Može doći do situacije kada će umjesto samo varijante koda postojati malo modificirana verzija s već unesenim parametrima, na primjer:
< ?php wp_list_comments("type=comment&avatar_size=48"); ?>
U ovom slučaju koristimo znak & za dodavanje poziva našoj funkciji označavanja komentara callback=schema_comment. Ispast će ovako:
< ?php wp_list_comments("type=comment&avatar_size=48&callback=schema_comment"); ?>
U mom primjeru sve je još puno kompliciranije. Unutar ove funkcije postoje parametri, kao u prethodnom retku koda. Ali oni su prikazani malo drugačije.
< ?php wp_list_comments(array("style" =>"ol", "short_ping" => true, "avatar_size" => 74,)); ?>
Ako imate ovu opciju, onda unutar zagrada pored svih parametara uvodimo novi. Završit ćemo sa sljedećim kodom.
< ?php wp_list_comments(array("style" =>"ol", "short_ping" => true, "avatar_size" => 74, "callback" => schema_comment,)); ?>
Kada smo kod funkcije smjestili u datoteku functions.php, te malo promijenili kod za prikaz komentara na stranici u datoteci comments.php, možemo provjeriti rad oznake komentara.
Znak ispravnog označavanja komentara je njihovo ugniježđivanje u tijelu članka bez ikakvih uvlaka i razmaka. Svaki komentar mora biti prikazan unutar članka i prikazan u Yandex validatoru.
Kao što vidite, komentari se nalaze unutar tijela članka. Tako bi i vama trebalo biti.
Također možete reći tražilicama broj komentara na svakom postu. Postoji i oznaka za ovo - itemprop="commentCount". Slično prethodnim koracima, treba ga postaviti unutar početne oznake koja obavija funkciju za prikaz broja komentara. Ova funkcija se zove:
< ?php comments_number ?>
Potpuna izlazna linija ove funkcije može biti drugačija, ali njezina suština je ista. Unutra bi trebao biti comments_number.
Za mene ova funkcija ima sljedeći potpuni oblik zajedno s oznakom za omatanje.
< ?php comments_number("Комментариев пока нет. Будьте первым!","1 Комментарий","Комментариев: %") ?>
Ovisno o predlošku, trebate pronaći mjesto funkcije. Obično je sve u istoj datoteci comments.php. U mom se predlošku ova funkcija nalazila u datoteci s jednim unosom single.php prije prikazivanja obrasca za komentare. Budući da je moja funkcija bila omotana u tekstualnu oznaku raspona, unutar nje umećem svojstvo commentCount.
Kontaktiramo validatora.
Važno. Trebate samo omotati broj komentara bez ikakvih natpisa ili riječi. Oznaka prihvaća samo brojeve!
Pažnja: nisam autor funkcija. Funkcije za automatsko označavanje komentara i slika preuzete su sa stranice http://seo-mayak.com/. Samo sam malo promijenio imena + negdje malo ispravio nešto.
Mikro označavanje zaglavlja stranice
Otvorite datoteku header.php predloška dizajna i potražite početnu oznaku zaglavlja. U njega lijepimo:
Itemscope itemtype="http://schema.org/WPHeader"
- Naslov - itemprop="headline"
- Opis - itemprop="opis"
Evo gotove verzije na slici.
Ovako će se prikazati u validatoru.
Mikro označavanje bočne trake (bočnog stupca).
I ovdje je sve jednostavno. Otvaramo datoteku koja je odgovorna za izlaz bočnog stupca, u pravilu, to je sidebar.php. Nalazimo blok ili oznaku koja obavija cijeli sadržaj cijelog bočnog stupca i unutar njega postavljamo oznaku entiteta koji odgovara bočnoj traci.
Register_sidebar(array("name" => __("Područje za umetanje widgeta u bočnu traku", "xmarkup"), "id" => "primary-widget-area", "description" => __("", " xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));
Od interesa su posljednja 2 retka (before_title i after_title), koji određuju što će biti prikazano prije i poslije naslova widgeta. Kao što vidite, naznačio sam da će prije i poslije biti oznaka raspona teksta. Možda tamo imate nešto prazno ili neke druge oznake, kao što je div block oznaka. Ako je prazna, preporučujem dodavanje oznake raspona slične mojoj verziji i navođenje svojstva name (itemprop="name") unutar početne oznake (redak prije_title). Dobit ćete sljedeću konstrukciju:
Register_sidebar(array("name" => __("Područje za umetanje widgeta u bočnu traku", "xmarkup"), "id" => "primary-widget-area", "description" => __("", " xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => " ", "after_title" => "",));
Ovisno o predlošku, može postojati nekoliko takvih dijelova koda. Zatim će se svi dijelovi morati finalizirati. Nakon izmjena provjeravamo označavanje bočne trake putem Yandex validatora i trebala bi se dobiti sljedeća slika.
Ovisno o broju widgeta, pri provjeri će se prikazati odgovarajući broj redaka.
Footer (podnožje) mikro oznake
Otvorite datoteku footer.php i potražite zajednički blok koji obavija sav sadržaj podnožja, uključujući autorska prava. Unutar uvodne oznake postavljamo oznaku entiteta itemscope itemtype="http://schema.org/WPFooter".
A unutar početne oznake, koja sadrži datum autorskog prava, postavljamo oznaku svojstva itemprop="copyrightYear".
Vrlo je važno da se unutar oznake copyrightYear nalazi samo datum u obliku broja. Bez stranih riječi ili simbola, inače će generirati pogrešku.
U radnom stanju vidjet ćete sljedeće u validatoru.
Mikro označavanje glavnog navigacijskog izbornika
I ovdje je sve vrlo jednostavno, ali ova opcija neće raditi za sve, jer je struktura izrade i prikaza izbornika u predlošcima drugačija.
Kod koji prikazuje izbornik nalazi se u datoteci header.php. Idemo tamo i tražimo sljedeći sadržaj:
< ?php wp_nav_menu(array("theme_location" =>"header-menu-top","container" => "")); ?>
Linija može biti malo drugačija. Glavna stvar je pronaći liniju koja uključuje wp_nav_menu. Bit će zamotan u oznake. Za mene i za većinu drugih tema princip je sličan. Koristi se navigacijska oznaka. Unutar početne oznake navigacije umećemo oznaku koja prikazuje suštinu ovog elementa, odnosno glavni izbornik:
Itemscope itemtype="http://schema.org/SiteNavigationElement"
Zatim, provjerite je li svakom linku u izborniku dodan atribut itemprop="url", koji će označavati da se radi o linku. Ako imate jednostavnu stranicu na kojoj je svaka stavka izbornika izrađena ručno, implementirajte ovaj atribut unutar oznake svake veze. Ako imate web stranicu na WordPressu i izbornik je formiran u datoteci functions.php na standardan način, trebali biste u istu datoteku postaviti sljedeći kod koji će automatski umetnuti ovaj atribut u svaku stavku izbornika.
Napominjem da e-pošta putem obične pošte u ovom slučaju nije prikladna. Trebate poštu poput [email protected], odnosno poštu na domeni.
Na ovome je vježbanje završeno. Mikro označavanje na vašem WordPressu mora biti implementirano i biti bez ijedne greške, kako u Yandexu tako iu Googleu.
Sada ću vam, kao što sam obećao, dati neke kodove koji će vam možda trebati ako vaš predložak ne prikazuje sve informacije potrebne za označavanje.
Korisne informacije
Dajem vam popis kodova s već implementiranim svojstvima označavanja. Zapravo, samo ih trebate umetnuti na prava mjesta u predlošku i postaviti stilove za klase koje su napisane u tim oznakama.
/***prikazuje datum objave unosa***/ /***zaključak autora***/
Također postoji vrlo velik broj zahtjeva putem e-pošte za mene s problemom uklanjanja grešaka koje nastaju zbog ugrađenog hentry markupa u predlošcima. Greške zvuče ovako:
Nedostaje: natuknica-naslov
Nedostaje: ažurirano
Nedostaje: autor
Zašto se ova situacija događa? Jednostavno je – u predložak se automatski dodaje klasa henrty, što podrazumijeva da se uz naslov, datum i autora moraju dodati odgovarajuće oznake (klase). Možete to učiniti - dodajte ove klase. Ne vidim puno smisla u ovome, budući da smo predložak već označili schema.org rječnikom i henrty mikroformati nam neće biti od koristi. Stoga bi najbrži i najlakši način bio koristiti malu funkciju koja uklanja ovu henty klasu iz predloška i Google neće čak ni pronaći hentry mikroformate.
//uklanjanje klase hentry start funkcija wph_remove_hentry_class($classes) ( $classes = array_diff($classes, array("hentry")); return $classes; ) add_filter("post_class", "wph_remove_hentry_class"); //uklanjanje klase hentry kraj
Funkcija se naravno dodaje u datoteku functions.php. Ako ste već imali slične pogreške ili su se počele pojavljivati, postupno kako Googleov robot za mikrooznačavanje indeksira stranicu vaše stranice, one će početi nestajati. Ako ih nije bilo, onda se neće ni pojaviti.
Postoji još jedna opcija kada možete patiti i dodati potrebne oznake izlazu naslova, datuma i autora. Tada će Google pronaći ovu oznaku i prepoznati je. Ako se odlučite na takve radnje, morate pronaći php kodove za prikaz naslova (1), datuma (2) i autora (3).
Gotovi kodovi s oznakama mikroformata bit će sljedeći:
Zamotavanje na ovaj način također će biti u redu.
Sljedeća točka bit će za one kojima je preteško sve ovo učiniti ili koji su previše lijeni.
Učinit ću sve za tebe
Mogu ti pomoći. Ali, naravno, ne besplatno. Osim jasnih odgovora na vaša pitanja u komentarima, mogu uz malu naknadu ugraditi sve gore opisane mikrooznake u vaš predložak.
Trošak ove usluge je 1000 rubalja.
Označit ću sve glavne podatke, naime:
- Glavna stranica + stranice arhiva i odjeljaka;
- Post (post) stranica;
- Obična statična stranica;
- Zaglavlje web stranice;
- Podrum;
- bočna traka;
- Navigacijski izbornik (ako predložak nije u sukobu);
- Mrvice kruha + ocjena (opcionalno + 200 rubalja).
Ova je opcija prikladna za osobne blogove, kao i za informativne stranice. Mogu raditi i na WordPress motoru i na običnoj html stranici. U početku neću ništa poduzeti, jer ću prvo analizirati Vaš predložak i odgovoriti mogu li to uopće učiniti. Moguće je da ćete nešto morati ponoviti u predlošku ili ga dovršiti. Svaka osoba dobiva individualni pristup.
Princip je sljedeći. Kontaktirate me putem stranice “Pišite mi” (možete me kontaktirati i u komentarima ovog članka). Odmah mi pošaljite link na vašu web stranicu + link za preuzimanje predloška. Analiziram i dajem vam odgovor u bliskoj budućnosti (1-2 dana). Ako je sve u mojoj moći, onda nakon plaćanja odmah počinjem označavati.
Svi prijatelji. Nadam se da vam je ovaj materijal pomogao. Nisam imao cilj napisati ovdje u 2 riječi kako sve napraviti. Moj je cilj bio napisati najbolji i najopsežniji vodič za implementaciju označavanja na web stranici. Nadam se da je uspjelo. To možete potvrditi svojim komentarima, lajkovima i ocjenama.
Vidimo se u sljedećim materijalima.
Srdačan pozdrav, Konstantin Khmelev!
U ovoj lekciji ću govoriti o tome kako napraviti komentari u HTML, CSS, PHP. Komentari su tekst koji nije vidljiv na web stranici. Koriste se za razne vrste objašnjenja, podsjetnika i opisa za webmastere, što vam omogućuje strukturiranje dokumenta. Komentari su nezamjenjivi prilikom otklanjanja pogrešaka u kodu; oni vam omogućuju brzu navigaciju označavanjem web stranice i pronalaženje željenog bloka. Komentari se često koriste za ispravljanje pogrešaka u HTML kodu. Na primjer, možete privremeno komentirati određeni blok koda tako da se ne izvršava, a ako je potrebno, možete ga jednostavno vratiti.
Komentari u HTML-u
U HTML-u, komentari se formiraju pomoću sljedećih znakova:. Stoga je svaki tekst između ovih znakova komentar. Pogledajmo primjer:
Primjer komentara u HTML-u
Komentari u CSS-u
Komentari u CSS-u kreiraju se pomoću znakova: /* i */. Da biste stvorili komentar, jednostavno morate postaviti kôd web stranice između ovih znakova:
/* Početak bloka sa stilovima za Body*/ body ( background: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; ) /* Kraj blok sa stilovima za tijelo*/
Komentari u PHP-u
Komentari u PHP-u mogu biti jednoredni ili višeredni:
1) Jednoredni komentari u PHP-u stvaraju se pomoću znakova: //. Jednostavno stavite ovaj znak ispred retka i on će biti komentiran.Ova opcija se koristi u slučaju kada se komentar sastoji od samo jednog retka.
2) Za implementaciju višerednih komentara koriste se sljedeći simboli: /* i */. Ova je opcija korisna ako se komentar proteže u nekoliko redaka.
Tako smo naučili raditi
Korak 1 - XHTML
Prvo, pogledajmo oznaku komentara. Ovaj kod generira PHP s klasom Komentar .
demo.php
Tekst komentara
div avatar sadrži poveznicu (ako je korisnik unio točan URL prilikom postavljanja komentara) i sliku avatara koju dobivamo s gravatar.com. Vratit ćemo se generiranju markupa u PHP koraku. Na kraju slijedite div Ime div vrijeme i tekst komentara.
Drugi važan element u XHTML-u je obrazac za komentar. Poslana je sa POST. Sva polja osim URL-a moraju biti ispunjena.
demo.php
Dodaj komentar
Obrazac se podnosi pomoću AJAX-a. Provjera se izvodi u pozadini podnijeti.php. Svako polje ima odgovarajući element označiti, s postavljenim atributom za .
Korak 2 - PHP
PHP upravlja komunikacijom s MySQL bazom podataka i generira oznake komentara. Također prima kraj AJAX zahtjeva i ubacuje podatke komentara u tablicu komentari.
demo.php
/* / Odaberite sve komentare i ispunite polje $comments objektima */ $comments = array(); $result = mysql_query("SELECT * FROM komentara ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )MySQL upit odabire sve zapise iz tablice i popunjava niz $komentari objekti klase komentar. Ovaj niz se dalje ispisuje kada se skripta izvrši.
demo.php
/* / Ispis komentara jedan po jedan: */ foreach($comments as $c)( echo $c->markup(); )Svaki komentar ima metodu markup(), koji generira ispravan HTML kod, spreman za prikaz na stranici. Ispod su definicije klasa i metoda.
Klasa dobiva red iz baze podataka (dobivene pomoću mysql_fetch_assoc()) i pohranjuje ga u varijablu $podaci. Dostupan je samo metodi klase.
comment.class.php - 1. dio
klasa Komentar ( privatni $data = array(); javna funkcija __construct($row) ( /* / Konstruktor */ $this->data = $row; ) javna funkcija markup() ( /* / Ova metoda daje XHTML oznaku za komentari */ // Postavite pseudonim kako ne biste svaki put pisali $this->data: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url "] )( // Ako je URL unesen prilikom dodavanja komentara, // odredite početne i završne oznake veze $link_open = ""; $link_close = ""; ) // Pretvorite vrijeme u UNIX format: $ d["dt"] = strtotime ($d["dt"]); // Potrebno za postavljanje zadane slike: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER[ "REQUEST_URI"])."/ img/default_avatar.gif"; return "
".$link_close."".$d["tijelo"]."
Skripta koristi gravatar za predstavljanje avatara u komentarima. Gravatar je vrlo korisna usluga koja povezuje avatar s adresom e-pošte. Slika avatara može se lako dobiti prolaskom kodirane funkcije md5() svoju adresu e-pošte na gravatar.com.
Skripta određuje URL na kojem se izvršava i određuje točnu adresu slike zadani_avatar.gif. Ova slika se prenosi paralelno s md5 hashom, a ako nije pronađen avatar za poslanu adresu e-pošte, prikazat će se alternativna slika.
comment.class.php - 2. dio
javna statička funkcija validate(&$arr) ( /* / Ova se metoda koristi za provjeru valjanosti podataka poslanih putem AJAX-a. / / Vraća true/false ovisno o točnosti podataka i popunjava / polje $arr koje se prosljeđuje kao parametar s podacima ili porukom o pogrešci. */ $errors = array(); $data = array(); // Koristite funkciju filter_input uvedenu u PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"e-pošta ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Molimo unesite valjanu e-poštu."; ) if(!($data["url"] = filter_input(INPUT_POST,"url" ,FILTER_VALIDATE_URL))) ( // Ako je netočan URL unesen u URL polje, // ponašajte se kao da URL nije unesen: $url = ""; ) // Koristite filtar s funkcijom povratnog poziva: if(! ($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["body"] = "Molimo unesite komentar tekst."; ) if(!( $data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["name "] = "Molimo unesite ime. "; ) if(!empty($errors))( // Ako postoje pogreške, kopirajte polje $errors u $arr: $arr = $errors; return false; ) // Ako su podaci ispravno uneseni, izbrišite podatke i kopirajte ga u $arr : foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // e-pošta mora biti pisana malim slovima: $arr["email"] = strtolower (trim($ arr["e-mail"])); vratiti istinito; )metoda potvrdi()(također dio klase) definiran kao statički. To znači da se može pozvati izravno pomoću konstrukcije Komentar::validate(), bez stvaranja objekta klase. Ova metoda provjerava podatke koji se šalju putem AJAX-a.
Metoda koristi novu funkciju filtra koja je postala dostupna u PHP 5.2.0. Na taj način možemo jednostavno provjeriti i filtrirati podatke koji se prosljeđuju skripti. Na primjer, filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL) znači da provjeravamo da li $_POST["url"] ispravan URL. Ako je tako, tada funkcija vraća vrijednost varijable, inače vraća vrijednost lažno.
Prije korištenja takve funkcije bilo je potrebno koristiti regularne izraze za provjeru valjanosti podataka (koristeći niz konstrukata ako). Dodatna prednost je što podatke primamo prije nego što se provedu bilo kakve specifične transformacije.
Također je moguće odrediti funkciju koja će izvršiti dodatne izmjene podataka.
comment.class.php - 3. dio
privatna statička funkcija validate_text($str) ( /* / Ova se metoda koristi kao FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. itd) i pretvoriti // znak novog retka u oznaku: $str = nl2br(htmlposebni znakovi($str)); // Ukloni sve preostale nove retke $str = str_replace(array(chr(10),chr(13)),"",$str); povratak $str; )
Posljednja metoda potvrdi_tekst proslijeđeno kao povratna funkcija u dva poziva filter_input. Pretvara sve posebne HTML znakove, što učinkovito blokira XSS napade. Također zamjenjuje nove retke s oznakama
.
podnijeti.php
/* / Ovo polje će biti ispunjeno ili podacima / koji se prosljeđuju skripti, / ili porukama o grešci. /*/ $arr = array(); $validates = Komentar::validate($arr); if($validates) ( /* Sve je u redu, umetnite podatke u bazu podataka: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]." ", "".$arr["url"].", "".$arr["email"].", "".$arr["body"]."")"); $arr["dt "] = datum("r",vrijeme()); $arr["id"] = mysql_insert_id(); /* / Podaci u $arr pripremljeni su za mysql upit, / ali moramo ispisati na ekran , pa / pripremite sve elemente u nizu: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = novi komentar($arr); /* Ispišite oznaku novoumetnutog komentara: */ echo json_encode(array("status "=>1,"html"=>$insertedComment->markup())); ) else ( /* Prikaži poruke o pogrešci */ echo "("status":0,"greške":" .json_encode($arr )")"; )podnijeti.php dobiva komentar iz podataka putem AJAX zahtjeva. Provjerava ga i ispisuje JSON objekt koji sadrži XHTML oznake s umetnutim komentarom ili popis pogrešaka. jQuery koristi svojstvo status kako biste odredili što treba ispisati - ili poruku o pogrešci ili dodavanje oznake komentara na stranicu.
Ispod su dva primjera.
Uspješan odgovor
( "status": 1, "html": "Html kod komentara dolazi ovdje...")Vlasništvo html sadrži kod komentara.
Odgovor na pogrešku
( "status": 0, "errors": ( "email": "Molimo unesite valjanu e-poštu.", "body": "Molimo unesite tijelo komentara.", "name": "Molimo unesite ime." ) )Ako postoji pogreška, jQuery prolazi kroz objekt pogreške i prikazuje poruke pored polja koja sadrže pogreške.
Korak 3 - CSS
Sada kada je oznaka ispravno generirana i prikazana na stranici, možemo prijeći na postavljanje stilova.
styles.css - 1. dio
.comment, #addCommentContainer( /* Stil za komentare */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px full white; color:#888; margin-bottom:25px; / * CSS3 zaobljeni kutovi i sjene */ -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( /* / Avatar je pozicioniran apsolutno. / Vanjski pomak za komentar div /*/ visina:50px; lijevo:- 70px; pozicija :apsolutna; širina:50px; pozadina:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Središte okomito: */ margin-top:-25px; gore:50%; -moz- box-shadow :1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2; box-shadow:1px 1px 0 #c2c2c2; )div .komentar I #addCommentContainer imaju isti stil. Koristi nekoliko CSS3 pravila za zaokruživanje kutova i reflektiranje sjena.
styles.css - 2. dio
.comment .avatar img( display:block; ) .comment .name( font-size:20px; padding-bottom:10px; color:#ccc; ) .comment .date( font-size:10px; padding:6px 0; position:absolute; right:15px; top:10px; color:#bbb; ) .comment p, #addCommentContainer p( font-size:18px; line-height:1.5; overflow-x:hidden; ) #addCommentContainer input, # addCommentContainer textarea( /* Stil unosa */ 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( /* Gumb Pošalji " * / boja pozadine:#58B9EB; obrub:1px solid #40A2D4; boja:#FFFFFF; kursor:pokazivač; obitelj-fontova:"Myriad Pro",Arial,Helvetica,sans-serif; veličina-fonta:14px; težina -font :bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #submit:hover( background-color:# 80cdf5; boja obruba:#52b1e2; )U drugom dijelu postavljamo stilove za komentare i elemente forme. Obratite pažnju na selektor ulazni koji ističe elemente na temelju atributa tip.
Korak 4 - jQuery
Sada prijeđimo na jQuery.
skripta.js
$(document).ready(function())( /* Sljedeći kod se izvršava samo nakon što se DOM učita */ /* Ova zastavica sprječava slanje više komentara: */ var working = false; /* Uhvati obrazac događaj podnošenja: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false; working = true; $("#submit").val("Radi. ."); $("span .error").remove(); /* Pošalji polja obrasca na submit.php: */ $.post("submit.php",$(this).serialize(),function( msg)(working = false; $ ("#submit").val("Submit"); if(msg.status)( /* / Ako je umetanje uspješno, dodajte komentar / ispod zadnjeg na stranici s efekt slideDown /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / If postoje pogreške, prođite kroz objekt / msg.errors i prikažite ih na stranicu /*/ $.each(msg.errors,function(k,v)( $("label").append(" "+v+""); )); ) ),"json"); )); ));Koristimo poziv funkcije $(dokument).ready(), koji vezuje funkciju za događaj. Varijabilna radeći djeluje kao oznaka koja signalizira da je AJAX zahtjev u tijeku (na taj način sprječava duplikate istog komentara).
U povratnoj funkciji za AJAX POST zahtjev provjeravamo svojstvo status kako biste utvrdili je li komentar uspješno umetnut. Ako da, dodajemo rezultirajuću oznaku na stranicu nakon zadnjeg komentara s animacijom spusti se.
Ako je bilo problema, prikazujemo poruke o pogrešci dodavanjem raspon greška na odgovarajući element označiti(atribut elementa označiti sadrži iskaznica unos koji ima grešku).
Spreman!
Zaključak
Da biste pokrenuli skriptu na svom poslužitelju, trebate izraditi tablicu komentari u vašoj MySQL bazi podataka. To možete učiniti pomoću SQL koda iz datoteke tablica.sql, koji se mora unijeti na kartici SQL u phpMyAdmin. Zatim trebate postaviti parametre povezivanja s MySQL bazom podataka u datoteci povezivanje.php .
U današnje vrijeme mnoge popularne stranice nisu samo izvor informacija, već i mjesto gdje se te informacije mogu raspravljati s drugim korisnicima; stranice se često pretvaraju u središta oko kojih se formira zajednica.
Komentari pomažu u izgradnji zajednice
Sada vam korisnici dolaze ne samo da pročitaju neku vijest ili članak, već i da o tome raspravljaju.
Ono što je tipično je da je čitatelj samu vijest mogao saznati na nekom drugom mjestu, ali upravo zajednica zanimljivih ljudi, prilika da progovore i čuju njihova mišljenja – to će dovesti do toga da će posjetiti vaš mjesto i otići na stranicu s vijestima koje već zna.
Prije samo desetak godina središta oko kojih se odvijao život bili su forumi. Međutim, danas to više nije tako zgodno i popularno; sada većina popularnih stranica radi u formatu bloga, a komunikacija korisnika odvija se u komentarima.
Dakle, komentari su faktor koji razlikuje obične stranice od stranica koje su uistinu uspješne u svom području. Ovo se odnosi na stranice s vijestima, blogove, interesne zajednice, ponekad čak i na internetske trgovine i razne specijalizirane stranice.
Komentari pružaju povratnu informaciju i motivaciju
Također je važno zapamtiti da su komentari izvor povratnih informacija od čitatelja, što vam omogućuje da saznate što im se točno sviđa i na što čitatelji reagiraju. A što je vaša stranica posjetiteljima bolja i zanimljivija, to vam se češće vraćaju i preporučuju je.
Osim toga, povratna informacija je uvijek dobra motivacija za same autore i administratore, što vam gotovo trenutno omogućuje da osjetite da su ljudi zainteresirani za ono što radite i vašu stranicu. To ne možete postići jednostavnim brojačem posjetitelja.
Što nam treba od sustava komentiranja?
Dakle, koji bi trebali biti "ispravni" komentari na modernoj web stranici?
- Jednostavno i čitateljima razumljivo.
- Zgodan i funkcionalan za administratore.
Koje mogućnosti trenutno ima webmaster?
Widgeti društvenih mreža
Postoji samo jedan plus - postoji prilično velika vjerojatnost da je korisnik već prijavljen na društvenu mrežu i stoga se neće morati registrirati.
Puno nedostataka
Usluge na ruskom jeziku
Analozi na ruskom jeziku često su potpuno plaćeni i ne mogu se pohvaliti atraktivnim dizajnom.
SV Kamen
Jedina iznimka ovdje je sustav SV Kament (svkament.ru), koji je potpuno besplatan i objedinjuje funkcionalnost raznih zapadnih sustava za komentiranje, ali je istovremeno fokusiran na rusko govoreći segment.
Pogledajmo na brzinu što bismo željeli vidjeti u našem sustavu komentiranja.
Stablo komentara s mogućnošću sažimanja pojedinačnih niti rasprave. Vrlo su korisni u vođenju rasprave kada ima puno komentara.
Prijava na društvene mreže- značajno pojednostavljuje registraciju i, kao rezultat toga, povećava broj komentara. Zapadne studije pokazuju da korištenje prijave putem društvene mreže ponekad povećava konverziju za više od 60%.
Ocjenjivanje komentara- prvo, pomaže u isticanju najzanimljivijih i najvrjednijih komentara, što je iznimno zgodno za čitatelje, i drugo, potiče korisnike na pisanje zanimljivih poruka.
Rad u stvarnom vremenu- što praktičniji i brži sustav radi, to ga više ljudi koristi i češće pišu komentare.
Obavijesti putem e-maila- koliko često gubimo potencijalne komentare samo zato što korisnik ne zna da mu je netko odgovorio na prethodnu poruku.
Iz perspektive menadžmenta
- Upravljanje izravno na mjestu.
- Informacije o korisniku.
- Jedinstvena kontrolna ploča za komentare za cijelu stranicu.
- Mogućnost imenovanja moderatora.
- Jednostavan za postavljanje.
Sustav SV Kament također ima niz zanimljivih karakteristika.
- Društvene emisije- omogućuju vam da "vratite" komunikaciju na svoju web stranicu s društvenih mreža. Ako imate VKontakte grupu u kojoj objavljujete najave novih članaka na web mjestu, onda često dio rasprave o člancima ostaje u komentarima na samu objavu i bilo bi sjajno emitirati te komentare natrag na svoju web stranicu.
- Korisnička ocjena i status- omogućuje vam da istaknete najaktivnije i najpopularnije posjetitelje, čime potičete svoje korisnike da ih češće posjećuju, više komuniciraju i pišu poruke zanimljive drugim ljudima.
Sve odjednom?
Postoji prilično uobičajena praksa postavljanja nekoliko sustava za komentiranje odjednom, na primjer, zasebni VKontakte widget, zasebni Facebook i poseban za sve ostale.
Po mom mišljenju, ovo je jedna od najgorih odluka, ali važno je razumjeti koji se točno ciljevi slijede.
Ako samo trebate prikupiti recenzije korisnika, onda ova metoda ima pravo na život, iako za to može biti dovoljna obična knjiga gostiju ili čak adresa e-pošte.
Ako nam je cilj stvoriti zajednicu i potaknuti komunikaciju među korisnicima, onda je ovakav pristup izrazito štetan, jer dijeljenjem komentara dijelimo i samu komunikaciju, pa umjesto jednog dijaloga dobivamo hrpu nepovezanih poruka.
Kakve komentare koristite? Smatrate li komentare važnima za vašu web-lokaciju i koliko su komentari na vašoj web-lokaciji praktični i učinkoviti?
Sada je postalo moderno zamijeniti uobičajeni WordPress sustav komentara komentarima s jedne od najpopularnijih društvenih mreža, Facebooka. Ovo smo već ranije objavili, no od tada je prošlo dosta vremena, a sada je ovaj postupak značajno pojednostavljen zahvaljujući već gotovom WordPress dodatku. Tako da će ovaj put sve biti puno lakše.
Reći ćemo vam kako implementirati Facebook komentare na svoju web stranicu malo kasnije, ali prvo ćemo pokušati utvrditi sve prednosti i mane takve zamjene.
Facebook komentari: za i protiv
Osim toga, faktor tzv anonimnost. Malo je vjerojatno da će neželjeni komentari biti dodani s Facebooka, budući da su svi vezani za stvarne korisničke račune.
Ali u isto vrijeme, mogu se pronaći i nedostaci takvog sustava. Mnogi korisnici preferiraju anonimnost, a ne zato što žele napisati nešto loše ili ostaviti spam. Ne. Čisto je stvar psihičkog momenta i osjećaja nelagode i srama koji doživljavaju kad javno govore. Ovaj faktor može smanjiti aktivnost korisnika.
Za razliku od drugih sustava za komentare poput Disqusa, Facebook komentari se ne sinkroniziraju s izvornim WordPress komentarima. U potpunosti ih zamjenjuju. Ako starije objave već imaju WordPress komentare, oni će se pojaviti prije ili nakon novih komentara dodanih putem Facebook obrasca.
Ovdje su možda sve prednosti i mane Facebook komentara.
Ako se još niste predomislili da ih instalirate na svoju WordPress stranicu, u nastavku pročitajte kako to učiniti.
Facebook dodatak za komentare za WordPress
Najprije instalirajte i aktivirajte dodatak Komentari na Facebooku i konfigurirajte ga u izborniku koji se pojavljuje u odjeljku Postavke → Facebook komentari.
Da biste počeli koristiti komentare na stranici, prvo trebate izraditi Facebook aplikaciju.
Ako ste prije izradili aplikaciju, odmah možete koristiti njezine ID podatke. U protivnom ćete morati stvoriti novi na stranici Facebook aplikacije:
Upravljačka ploča novostvorene aplikacije prikazat će njen ID, koji trebate kopirati i zalijepiti u postavke dodatka. Ali prije toga konfigurirajte aplikaciju na svojoj web stranici u "Postavke" pomoću gumba "Dodaj platformu".
Pojavit će se novi prozor u kojem trebate kliknuti na Web stranica i odaberite ga kao svoju platformu.
Tako će se na stranici postavki aplikacije pojaviti novi odjeljak "Web stranica" u kojem možete odrediti adresu svoje web stranice.
Spremite promjene, kopirajte ID aplikacije i postavite ga u postavke dodatka na vašoj stranici.
Ako niste shvatili kako postaviti Facebook aplikaciju, evo još jedne. kratke upute na engleskom s primjerom za našu web stranicu:
Ovaj Facebook dodatak za komentare ima puno opcija za konfiguriranje. Zadane postavke trebale bi funkcionirati s većinom web-mjesta. Međutim, možete ih promijeniti po vlastitom nahođenju i spremiti promjene.
Sada možete testirati radi li novi sustav komentara ispravno na vašoj stranici.
Moderiranje komentara
Budući da imate administratorska prava, primat ćete obavijesti o novim komentarima. Možete upravljati njima i odlučiti hoćete li ih objaviti ili ne.
Također možete dodati novog moderatora u postavkama:
Nadamo se da je ovaj vodič pružio jasnoću i pomogao vam da sami postavite komentare na Facebooku za svoje web mjesto koje nije WordPres.