Dzień dobry przyjaciele!

W dalszym ciągu poruszamy ten sam temat rozszerzonych fragmentów, które zwiększają liczbę odwiedzających z wyników wyszukiwania.

Dziś publikuję drugi, zaraz po pierwszym, materiał na ten temat, w którym wykonaliśmy go na stronę WordPress za pomocą wtyczki Wp-PostRatigns.

Ocena zostanie również wyświetlona w wyniki wyszukiwania inaczej nie na wiele by się to przydało. Jest to opcja bez wtyczki, z której korzystam ten moment. Przykład realizacji można zobaczyć zaraz po tekście artykułu.

Dlaczego porzuciłem wtyczkę?

Nie miałem powodu usuwać wtyczki i przechodzić na metodę skryptową, dopóki nie odkryłem, że niektóre funkcjonalności witryny przestały działać, gdy wtyczka WP-PostRatings była aktywna.

Zaimplementowałem na swoim blogu następujące rozwiązania bez wtyczki:

• Skrypt powiększający obrazy poprzez kliknięcie;
• Komentarze od Cackle;
• Rozwijany spoiler, aby ukryć tekst.

Wszystkie te funkcje przestały działać natychmiast po włączeniu wtyczki. Faktem jest, że takie wtyczki działają w technologii Ajax, co może powodować konflikty z niektórymi skryptami.

Oczywiście mi to nie odpowiadało, próbowałem zainstalować inne wtyczki oceniające, ale sytuacja wcale się nie zmieniła. Rozwiązania były 2: albo usunąć wszystkie moje skrypty, albo zastąpić je analogami, albo zaimplementować ocenę w inny sposób, na przykład bez wtyczki, co też zrobiłem.

Zdecydowanie polecam korzystanie z wtyczki, jeśli nie ma konfliktów podczas pracy ze skryptami innych firm, ponieważ wtyczka jest znacznie bardziej mobilna i można w niej śledzić statystyki ocen, a także zmieniać ustawienia bezpośrednio z panelu administracyjnego WordPress.

Dodatkowo wtyczka umożliwia bardziej rygorystyczne ustawienie opcji głosowania. Na przykład możesz ustawić, aby ocena użytkownika była zapamiętywana na podstawie jego pliku cookie i adresu IP, aby uchronić się przed oszukaniem ocen i uzyskać bardziej realistyczny obraz oceny.

Jeśli występują konflikty, sugeruję zapoznanie się z nimi szczegółowe instrukcje, jak zaimplementować ocenę z gwiazdkami bez wtyczki, która wyświetli się we fragmencie i przyciągnie większą uwagę do Twojego zasobu w wynikach wyszukiwania.

Ocena w postaci gwiazdek bez wtyczki

Aby zaimplementować tę opcję, potrzebujesz skryptów, obrazów i plików stylów. Możesz pobrać archiwum z folderem, w którym znajdują się wszystkie pliki poniżej. Pliki w archiwum są skonfigurowane pod kątem dużych ikon, takich jak moje. Możesz zrobić małe, pokażę ci później.

Przesyłamy folder znajdujący się w archiwum na hosting w folderze z szablonem do wdrożenia tej ścieżki: site.ru/wp-content/themes/theme name/ratings.

require_once("oceny/ocena.php");

Możesz umieścić go w sekcji nagłówka witryny, ale nie podoba mi się ta opcja, ponieważ powoduje, że nagłówek witryny jest nieporęczny i witryna ładuje się wolniej.

Możesz przejrzeć inne znaczniki mikroznaczników dla artykułów na stronie http://schema.org/Article i dodać te, których potrzebujesz.

Następnie post z dodaną oceną można sprawdzić w walidatorze znaczników:
Google – https://developers.google.com/structured-data/testing-tool/ i
Yandex – http://webmaster.yandex.ua/microtest.xml.

Na koniec sugeruję obejrzenie webinaru na temat usuwania witryn z AGS przy użyciu treści tworzących wartość dodaną.

Aby wyświetlić gwiazdkę, użyjemy kodu dziesiętnego symbolu gwiazdy w HTML, a mianowicie: ☆.

HTML ☆☆☆☆☆

Musimy, kiedy najedziesz myszką na odpowiednią gwiazdę, wepchnąć stałą żółtą gwiazdę w „pustą” gwiazdę. Łatwe: po prostu umieść gwiazdę pełną za pomocą pseudoelementu na górze pustej gwiazdy.

Ocena CSS > span:hover:before ( treść: "\2605"; pozycja: bezwzględna; )

Pozycjonujemy absolutnie gwiazdę stałą i w ten sposób nasza gwiazda zakryje pustą gwiazdę.

Ale jak dotąd wszystko działa dla nas tylko dla każdej konkretnej gwiazdy. Naszym zadaniem, dla lepszego doświadczenia użytkownika, jest wypełnienie wszystkich gwiazdek (w zależności od tego, na którą gwiazdkę wskazuje mysz). Na przykład, jeśli użytkownik najedzie myszką na 4. gwiazdkę, konieczne będzie wyświetlenie 4 gwiazdek, jeśli na 5., to 5 itd.

Nie ma możliwości wybrania poprzedniego sąsiedniego elementu za pomocą CSS. Istnieje jednak sposób, aby wybrać następujące elementy elementy podrzędne, Poprzez .

Jeśli dosłownie odwrócimy znaki (pomoże nam w tym fragment kodu - ), możemy następnie użyć powiązanego kombinatora, aby wybrać wszystkie gwiazdy, które pojawiają się przed gwiazdką najechaną myszką, ale po niej w kodzie HTML.

CSS .rating ( unicode-bidi: bidi-override; kierunek: rtl; ) .rating > span:hover:before, .rating >

Dlatego stworzyliśmy przyjazny dla użytkownika szablon oceny gwiazdkowej, używając niewielkiej ilości kodu. Poniżej znajduje się pełny kod CSS umożliwiający ocenę:

CSS .rating ( unicode-bidi: bidi-override; kierunek: rtl; ) .rating > span ( display: inline-block; pozycja: względna; szerokość: 1,1 em; ) .rating > span:hover:before, .rating > span:hover ~ span:before (treść: "\2605"; pozycja: bezwzględna; ) Rzeczywiste użycie

Najprawdopodobniej nie będzie to możliwe bez udziału javascript. Gdy użytkownik kliknie w gwiazdkę, do serwera wysyłane jest żądanie ajax, a widget otrzymuje klasę, za pomocą której wyświetlana jest wybrana liczba gwiazdek. Czy naprawdę nie da się polegać na JavaScript, jeśli jest on używany wszędzie w witrynie, aby wdrożyć taki system gwiazdowy? Jeśli Twoja aplikacja jest całkowicie zależna od JavaScript, ta opcja z pewnością będzie odpowiednia. Ale jeśli Twoja witryna musi działać bez za pomocą JavaScriptu, wtedy ocena w postaci gwiazdek wymagałaby znacznie więcej pracy. Możesz zobaczyć przykład Lei Verous, która używa przycisków opcji jako części formularza i nie używa JavaScript.