Καλό απόγευμα φίλοι!

Συνεχίζουμε να μένουμε στο ίδιο θέμα των εκτεταμένων αποσπασμάτων, που αυξάνουν τον αριθμό των επισκεπτών από τα αποτελέσματα των μηχανών αναζήτησης.

Σήμερα δημοσιεύω το δεύτερο υλικό για αυτό το θέμα, μετά το πρώτο, όπου το φτιάξαμε για έναν ιστότοπο WordPress χρησιμοποιώντας το πρόσθετο Wp-PostRatigns.

Η βαθμολογία θα εμφανίζεται επίσης στο Αποτελέσματα αναζήτησης, αλλιώς δεν θα ήταν πολύ χρήσιμο. Είναι η επιλογή χωρίς πρόσθετο που χρησιμοποιώ αυτή τη στιγμή. Μπορείτε να δείτε ένα παράδειγμα υλοποίησης αμέσως μετά το κείμενο του άρθρου.

Γιατί εγκατέλειψα την προσθήκη;

Δεν είχα κανένα λόγο να διαγράψω την προσθήκη και να μεταβώ στη μέθοδο δέσμης ενεργειών έως ότου ανακάλυψα ότι κάποια λειτουργικότητα του ιστότοπου σταμάτησε να λειτουργεί όταν ήταν ενεργή η προσθήκη WP-PostRatings.

Έχω εφαρμόσει τις ακόλουθες λύσεις στο ιστολόγιό μου χωρίς πρόσθετο:

• Σενάριο για μεγέθυνση εικόνων κάνοντας κλικ;
• Σχόλια από το Cackle.
• Αναπτυσσόμενο spoiler για απόκρυψη κειμένου.

Όλες αυτές οι λειτουργίες σταμάτησαν να λειτουργούν αμέσως μετά την ενεργοποίηση του πρόσθετου. Το γεγονός είναι ότι τέτοια πρόσθετα λειτουργούν στην τεχνολογία Ajax, η οποία μπορεί να έρχεται σε σύγκρουση με ορισμένα σενάρια.

Φυσικά, αυτό δεν μου ταίριαζε· προσπάθησα να εγκαταστήσω άλλα πρόσθετα αξιολόγησης, αλλά η κατάσταση δεν άλλαξε καθόλου. Υπήρχαν 2 λύσεις: είτε να αφαιρέσω όλα τα σενάρια μου είτε να τα αντικαταστήσω με ανάλογα, είτε να εφαρμόσω την αξιολόγηση με άλλο τρόπο, για παράδειγμα χωρίς πρόσθετο, κάτι που έκανα.

Συνιστώ ανεπιφύλακτα να χρησιμοποιήσετε την προσθήκη εάν δεν υπάρχουν διενέξεις όταν εργάζεστε με σενάρια τρίτων, καθώς η προσθήκη είναι πολύ πιο φορητή και σε αυτήν μπορείτε να παρακολουθείτε στατιστικά αξιολόγησης, καθώς και να αλλάξετε ρυθμίσεις απευθείας μέσω του πίνακα διαχείρισης του WordPress.

Επιπλέον, το πρόσθετο σάς επιτρέπει να ορίσετε πιο αυστηρά τις επιλογές ψηφοφορίας. Για παράδειγμα, μπορείτε να ρυθμίσετε την αξιολόγηση του χρήστη ώστε να απομνημονεύεται από το cookie και τη διεύθυνση IP του, προκειμένου να προστατευτείτε από την εξαπάτηση αξιολογήσεων για μια πιο ρεαλιστική εικόνα της αξιολόγησης.

Εάν υπάρχουν συγκρούσεις, προτείνω να εξοικειωθείτε αναλυτικές οδηγίες, πώς να εφαρμόσετε μια αξιολόγηση με αστέρια χωρίς πρόσθετο, η οποία θα εμφανίζεται στο απόσπασμα και θα προσελκύσει περισσότερη προσοχή στον πόρο σας στα αποτελέσματα αναζήτησης.

Αξιολόγηση με αστέρια χωρίς πρόσθετο

Για να εφαρμόσετε αυτήν την επιλογή, χρειάζεστε αρχεία σεναρίων, εικόνων και στυλ. Μπορείτε να κατεβάσετε το αρχείο με τον φάκελο στον οποίο βρίσκονται όλα τα αρχεία παρακάτω. Τα αρχεία στο αρχείο έχουν ρυθμιστεί για μεγάλα εικονίδια, όπως το δικό μου. Μπορείτε να φτιάξετε μικρά, θα σας δείξω αργότερα.

Ανεβάζουμε τον φάκελο που βρίσκεται στο αρχείο στη φιλοξενία του φακέλου με το πρότυπο για την υλοποίηση αυτής της διαδρομής: site.ru/wp-content/themes/theme name/ratings.

require_once("ratings/rating.php");

Μπορείτε να το τοποθετήσετε στην ενότητα head του ιστότοπου, αλλά δεν μου αρέσει αυτή η επιλογή, καθώς κάνει την κεφαλίδα του ιστότοπου ογκώδη και ο ιστότοπος φορτώνει πιο αργά.

Μπορείτε να δείτε άλλες ετικέτες micro-markup για άρθρα στη διεύθυνση http://schema.org/Article και να προσθέσετε αυτές που χρειάζεστε.

Μετά από αυτό, η ανάρτηση, με την προσθήκη της βαθμολογίας, μπορεί να ελεγχθεί στο εργαλείο επικύρωσης σήμανσης:
Google - https://developers.google.com/structured-data/testing-tool/ και
Yandex - http://webmaster.yandex.ua/microtest.xml.

Τέλος, προτείνω να παρακολουθήσετε ένα διαδικτυακό σεμινάριο για την κατάργηση τοποθεσιών από το AGS χρησιμοποιώντας περιεχόμενο που δημιουργεί προστιθέμενη αξία.

Για να εμφανίσουμε το αστέρι, θα χρησιμοποιήσουμε τον δεκαδικό κωδικό για το σύμβολο αστεριού σε HTML, δηλαδή: ☆.

HTML ☆☆☆☆☆

Χρειάζεται, όταν τοποθετείτε το ποντίκι πάνω από το αντίστοιχο αστέρι, να σπρώξουμε ένα συμπαγές κίτρινο αστέρι στο "κούφιο" αστέρι. Εύκολο: Απλώς τοποθετήστε ένα συμπαγές αστέρι χρησιμοποιώντας ένα ψευδοστοιχείο πάνω από το κοίλο αστέρι.

CSS .rating > span:hover:before ( περιεχόμενο: "\2605"; θέση: απόλυτη; )

Τοποθετούμε απόλυτα το συμπαγές αστέρι και, έτσι, το αστέρι μας θα καλύψει το κοίλο αστέρι.

Αλλά μέχρι στιγμής όλα λειτουργούν για εμάς μόνο για κάθε συγκεκριμένο αστέρι. Και το καθήκον μας, για καλύτερη εμπειρία χρήστη, είναι να γεμίσουμε όλα τα αστέρια (με βάση ποιο αστέρι δείχνει το ποντίκι). Για παράδειγμα, εάν ο χρήστης τοποθετήσει το ποντίκι πάνω από το 4ο αστέρι, τότε είναι απαραίτητο να εμφανίσει 4 αστέρια, αν στο 5ο, τότε 5, κ.λπ.

Δεν υπάρχει τρόπος να επιλέξετε το προηγούμενο παρακείμενο στοιχείο μέσω CSS. Ωστόσο, υπάρχει τρόπος να επιλέξετε τα παρακάτω παιδικά στοιχεία, μέσω .

Εάν αντιστρέψουμε κυριολεκτικά τους χαρακτήρες (το απόσπασμα θα μας βοηθήσει σε αυτό - ), μπορούμε στη συνέχεια να χρησιμοποιήσουμε έναν σχετικό συνδυασμό για να επιλέξουμε όλα τα αστέρια που εμφανίζονται πριν από το αστέρι του ποντικιού, αλλά μετά στο HTML.

CSS .rating ( unicode-bidi: bidi-override; κατεύθυνση: rtl; ) .rating > span:hover:before, .rating >

Έτσι, δημιουργήσαμε ένα φιλικό προς το χρήστη πρότυπο αξιολόγησης με αστέρι χρησιμοποιώντας λίγο κώδικα. Παρακάτω είναι ο πλήρης κωδικός CSS για να λειτουργήσει η βαθμολογία:

CSS .rating ( unicode-bidi: bidi-override; κατεύθυνση: rtl; ) .rating > span ( εμφάνιση: inline-block; θέση: σχετική; πλάτος: 1,1em; ) .rating > span:hover:before, .rating > span:hover ~ span:before ( περιεχόμενο: "\2605"; θέση: απόλυτη; ) Πραγματική χρήση

Πιθανότατα, δεν θα είναι δυνατό να γίνει χωρίς τη συμμετοχή του javascript. Όταν ο χρήστης κάνει κλικ σε ένα αστέρι, ένα αίτημα ajax αποστέλλεται στον διακομιστή και το widget λαμβάνει μια κλάση μέσω της οποίας εμφανίζεται ο επιλεγμένος αριθμός αστεριών. Είναι πραγματικά αδύνατο να βασιστούμε στη javascript, εάν χρησιμοποιείται παντού στον ιστότοπο, για να εφαρμόσουμε ένα τέτοιο σύστημα αστέρων; Εάν η εφαρμογή σας εξαρτάται εξ ολοκλήρου από τη Javascript, τότε αυτή η επιλογή είναι σίγουρα κατάλληλη. Αλλά, εάν ο ιστότοπός σας χρειάζεται να λειτουργεί χωρίς χρησιμοποιώντας javascript, τότε αυτή η βαθμολογία με αστέρια θα απαιτούσε πολύ περισσότερη δουλειά. Μπορείτε να δείτε το παράδειγμα της Lea Verous, η οποία χρησιμοποιεί κουμπιά επιλογής ως μέρος μιας φόρμας και δεν χρησιμοποιεί javascript.