Μια τέτοια λειτουργία όπως το κουμπί "πάνω" για τον ιστότοπο κάνει τον πόρο του Διαδικτύου πιο βολικό για τους επισκέπτες του. Σας βοηθά να μετακινηθείτε εύκολα από οπουδήποτε στη σελίδα στην κορυφή της σελίδας. Αυτό είναι απαραίτητο για ηλεκτρονικά καταστήματα και ιστότοπους με μεγάλα άρθρα που απαιτούν μεγάλη κύλιση προς τα κάτω.
Τι είναι για
Αυτή τη στιγμή, οι περισσότεροι ιστότοποι δεν διαθέτουν τέτοια λειτουργία ως κουμπί "επάνω" και δεν υπάρχει τίποτα κρίσιμο σε αυτό. Όμως η χρήση του μπορεί να αποφέρει πολλά πλεονεκτήματα τόσο για τον πόρο του Διαδικτύου όσο και για τους επισκέπτες του.
Όφελος για επισκέπτες
Συχνά συμβαίνει όταν η σελίδα ενός πόρου του Διαδικτύου είναι πολύ φορτωμένη με πληροφορίες, όταν ένα ενημερωτικό άρθρο καταλαμβάνει πολύ χώρο και πρέπει να κάνετε κύλιση προς τα κάτω στη σελίδα με τον τροχό του ποντικιού. Εκτός από αυτό, στο τέλος του άρθρου μπορεί να υπάρχουν πολλά σχόλια για αυτό.
Όταν ένας επισκέπτης διαβάζει ένα άρθρο, δεν είναι τίποτα κουραστικό να κάνει κύλιση προς τα κάτω στη σελίδα, αλλά όταν το κείμενο έχει τελειώσει και πρέπει να ανέβεις, αρχίζει να γίνεται λίγο κουραστικό. Οι περισσότεροι άνθρωποι απλώς θα είναι πολύ τεμπέληδες για να κάνουν κύλιση για μεγάλο χρονικό διάστημα και απλώς θα κλείσουν τον ιστότοπο, αντί να κάνουν άλλη μια βόλτα στις εκτάσεις του.
Χρήση του κουμπιούη άμεση μετακίνηση στην κορυφή της σελίδας καθιστά πιο βολικό να περνάτε χρόνο στον ιστότοπο.
Όφελος για τον πόρο Διαδικτύου
Τα θετικά για τον ίδιο τον πόρο προέρχονται από παράγοντες του παρελθόντος, καθώς η ευκολότερη πλοήγηση στον ιστότοπο βελτιώνει τους παράγοντες συμπεριφοράς, καθώς όλοι οι επισκέπτες θα είναι πιο ενεργοί στις ενέργειές τους και θα μετακινούνται σε άλλες σελίδες.
Έτσι, αυτοί οι παράγοντες συμπεριφοράς επηρεάζουν τη στάση όλων των μηχανών αναζήτησης στον ιστότοπο και οδηγούν σε βελτίωση της θέσης στα αποτελέσματα αναζήτησης.
Πώς να φτιάξετε μόνοι σας το κουμπί "επάνω" στον ιστότοπο
Συμφωνείτε περαιτέρω. Μπορείτε πάντα να κάνετε μόνοι σας ένα κουμπί κύλισης προς τα πάνω για έναν ιστότοπο σε οποιοδήποτε από τα CMS ακολουθώντας μερικά εξαιρετικά απλά βήματα:
- δημιουργία εικόνας;
- δημιουργία σεναρίου;
- δημιουργία στυλ κουμπιού;
- προσθήκη στον ιστότοπο.
Εικόνα κουμπιού
Για να προσθέσετε ένα κουμπί "πάνω" στον ιστότοπο, πρέπει πρώτα να δημιουργήσετε το ίδιο το εικονίδιο, όταν κάνετε κλικ, ο χρήστης θα μετακινηθεί στην κορυφή της σελίδας. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε έτοιμες επιλογές, μεταξύ των οποίων μπορείτε πάντα να επιλέξετε την καταλληλότερη.
Για να βελτιώσουμε την εμφάνιση του κουμπιού, πρέπει να κάνουμε κάποιες βελτιώσεις, δηλαδή να δημιουργήσουμε ένα sprite που μας επιτρέπει να συνδυάζουμε εικόνες φόντου με βάση το CSS, δημιουργώντας έτσι μια κινούμενη εικόνα από αυτές.
Για έργα γραφικών, μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας. Αλλά η πιο βολική επιλογή θα ήταν μια διαδικτυακή υπηρεσία. PIXLR, καθώς δεν υπάρχει τίποτα για λήψη εδώ και μπορείτε να το χρησιμοποιήσετε απευθείας στο πρόγραμμα περιήγησής σας.
Για να ξεκινήσετε, στο παράθυρο του προγράμματος επεξεργασίας που εμφανίζεται, επιλέξτε το πεδίο "Μεταφόρτωση εικόνας από υπολογιστή". Ας πάρουμε για παράδειγμα την εικόνα ενός πυραύλου.
Αν οι διαστάσεις του επιλεγμένου εικονιδίου είναι πολύ μεγάλες, τότε θα χρειαστεί να κάνετε μια προσαρμογή μικρού μεγέθους. Για να το κάνετε αυτό, μεταβείτε στο επάνω μενού και επιλέξτε το πεδίο "Επεξεργασία" και μετά το "Ελεύθερος μετασχηματισμός …"
Στη συνέχεια, εμφανίζονται ειδικοί δείκτες δίπλα στην εικόνα, μετακινώντας τους οποίους μπορείτε να αλλάξετε το μέγεθος της εικόνας. Για να διατηρήσετε τις αναλογίες, μπορείτε να χρησιμοποιήσετε το πλήκτρο Shift, κρατώντας πατημένο το οποίο πρέπει να μετακινήσετε τους μπλε δείκτες. Στο τέλος αυτών των βημάτων, λαμβάνεται μια εικόνα ενός πυραύλου.
Το επόμενο βήμα είναι να δημιουργήσετε ένα αντίγραφο του επιπέδου.
Τώρα πρέπει να μετακινήσετε λίγο την εικόνα του πυραύλου από το νέο επίπεδο. Για να το κάνετε αυτό, θα είναι βολικό να χρησιμοποιήσετε το εργαλείο μετακίνησης, το οποίο βρίσκεται στη δεύτερη στήλη του αριστερού μενού, και το επάνω βέλος στο πληκτρολόγιο.
Τώρα πρέπει να κάνουμε την επάνω εικόνα ασπρόμαυρη. Αυτό μπορεί να γίνει χρησιμοποιώντας το στοιχείο "Διόρθωση" - "Απόχρωση / Κορεσμός" στο επάνω μενού. Για πλήρη αποκορεσμό, το ρυθμιστικό Saturation θα πρέπει να ρυθμιστεί στο -100. Αυτή η ενέργεια θα σας επιτρέψει να δημιουργήσετε ένα εφέ στο οποίο το κουμπί "Επάνω" θα μετατρέπεται από ασπρόμαυρο σε έγχρωμο όταν τοποθετείτε το δείκτη του ποντικιού πάνω του.
Η τελευταία πινελιά είναι η αφαίρεση επιπλέον χώρου γύρω από τις δύο εικόνες. Για να το κάνετε αυτό, επιλέξτε το στοιχείο "Περικοπή" από το αριστερό μενού καιεπιλέγουμε μόνο δύο πυραύλους σε ένα ορθογώνιο. Για να πραγματοποιήσετε περικοπή, πατάτε το πλήκτρο Enter.
Το αποτέλεσμα είναι μια εικόνα στην οποία δεν υπάρχει επιπλέον ελεύθερος χώρος. Θα χρειαστεί να σημειώσετε το πλάτος και το ύψος της εικόνας που προκύπτει, καθώς αυτά τα δεδομένα θα είναι χρήσιμα στο επόμενο βήμα.
Για αποθήκευση, πρέπει να κάνετε κλικ στο "Αρχείο" - "Αποθήκευση", όπου στην αριστερή παράγραφο "Ο Υπολογιστής μου" γράφουμε το όνομα της εικόνας (μόνο η αγγλική διάταξη), επιλέξτε τη μορφή (σε αυτό θήκη, PNG) και κάντε κλικ στο κουμπί "Ναι".
Αρχείο με το σενάριο του κουμπιού "πάνω"
Δεν χρειάζεται να γράψετε σενάριο σε αυτήν την περίπτωση. Θα είναι δυνατή η χρήση της δημόσιας έκδοσης, κάνοντας ορισμένες τροποποιήσεις στον τελικό κώδικα.
Για να το κάνετε αυτό, πρέπει να κατεβάσετε οποιοδήποτε πρόγραμμα επεξεργασίας κώδικα. Η πιο δημοφιλής και επίσης δωρεάν επιλογή είναι το Notepad++. Αφού το εγκαταστήσετε, πρέπει να αντιγράψετε και να επικολλήσετε όλο αυτόν τον κώδικα σε αυτόν:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').κάντε κλικ(συνάρτηση () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Επόμενο, κάντε κλικ στο επάνω μενού "Αρχείο" - "Αποθήκευση ως …", μετά από το οποίο αποθηκεύουμε τον κώδικα σε μορφή.js. Μετά από αυτό, μπορείτε να χρησιμοποιήσετε αυτόν τον κώδικα στον ιστότοπό σας ανεβάζοντας τα αρχεία σεναρίου και τις εικόνες σε αυτόν χρησιμοποιώντας μια σύνδεση FTP.
Εγκατάσταση στον ιστότοπο
Για να ρυθμίσετε το κουμπί κύλισης προς τα πάνω για τον ιστότοπο, πρέπει να το τοποθετήσετεαπαιτούμενος κωδικός θέσης. Πρέπει να το εισαγάγετε πριν από την ετικέτα.
Δημιουργία στυλ κουμπιού με CSS
Πιο συχνά, το κουμπί "πάνω" για τον ιστότοπο βρίσκεται στο κάτω μέρος ("υποσέλιδο").
Ο ακόλουθος κώδικας πρέπει να προστεθεί στο αρχείο style.css του ιστότοπου:
|
/Κουμπί Up/ .scrollTop{ background:url('images/up.png') 0 0 χωρίς επανάληψη;/εγγενής διαδρομή εικόνας/ width:39px;/ κουμπί πλάτος/ ύψος:96 εικονοστοιχεία;/50% ύψος κουμπιού/ bottom:5 εικονοστοιχεία;/κάτω γέμιση σε σταθερή θέση/ αριστερά:89%;/shift αριστερά/ }.scrollTop:hover{ background-position:0 -108px; } /μετατόπιση φόντου/" |
Σε αυτήν την περίπτωση, θα χρειαστούν αυτά τα δεδομένα πλάτους και ύψους εικόνας. Απομένει μόνο να εισαγάγετε τα ληφθέντα δεδομένα στον κωδικό και το κουμπί "πάνω" για τον ιστότοπο θα είναι έτοιμο! Τι άλλο;
κουμπί Up για ιστότοπο Wordpress
Για αυτό το CMS, το κουμπί "Επάνω" μπορεί να δημιουργηθεί χρησιμοποιώντας πρόσθετα, καθώς και ανεξάρτητα.
Η μέθοδος των προσθηκών είναι η πιο βολική και εύκολη στην εγκατάσταση, καθώς απαιτεί μόνο να κάνετε κλικ στο κουμπί εγκατάστασης και να διαμορφώσετε όλες τις λειτουργίες στο μενού των προσθηκών.
Η επιλογή του τελευταίου πρέπει να προσεγγιστεί με προσοχή, καθώς με αυτό θα είναι εύκολο να αποκτήσετε έναν ιό στον ιστότοπο. Η πιο δημοφιλής και αποδεδειγμένη επιλογή είναι μια προσθήκη που ονομάζεται Scroll Back To Top. Μπορείτε να το κατεβάσετε χρησιμοποιώντας την τυπική αναζήτηση για προσθήκες Wordpress.
Αυτή η επέκταση έχειπολλαπλές λειτουργίες και θα είναι πολύ εύκολο να προσαρμόσετε το κουμπί "πάνω" για έναν ιστότοπο Wordpress. Δεν είναι απαραίτητο να αλλάξετε καθόλου όλες τις τιμές, χρειάζεται μόνο να διαμορφώσετε την εμφάνιση και τη θέση του κουμπιού στη σελίδα του ιστότοπου.
Όπως μπορείτε να δείτε, η ρύθμιση του κουμπιού up με πρόσθετα είναι πολύ εύκολη. Αλλά υπάρχει μια σημαντική απόχρωση, η οποία είναι ότι κάθε εγκατεστημένο πρόσθετο φορτώνει το CMS. Αυτό μπορεί να επηρεάσει την ταχύτητα του πόρου Διαδικτύου. Αυτός είναι ο λόγος για τον οποίο οι περισσότεροι κάτοχοι ιστοτόπων προσπαθούν να κάνουν όλες τις αλλαγές απευθείας στον κώδικα και όχι με τη βοήθεια επεκτάσεων τρίτων. Μπορείτε να δημιουργήσετε ένα κουμπί "επάνω" για έναν ιστότοπο HTML, το οποίο θα ελαχιστοποιήσει τους πόρους που καταναλώνονται.
Πριν αλλάξετε όλα τα αρχεία συστήματος του Wordpress, πρέπει να δημιουργήσετε αντίγραφα ασφαλείας τους. Στη συνέχεια, μπορείτε να ακολουθήσετε όλα τα βήματα για να δημιουργήσετε το δικό σας κουμπί, που περιγράφονται παραπάνω.
Κουμπί "πάνω" για το Joomla
CMS Το Joomla υποστηρίζει επίσης την εγκατάσταση πρόσθετων, όπως το Wordpress. Η πιο επιτυχημένη έκδοση του κουμπιού "πάνω" για έναν ιστότοπο στο Joomla 3 είναι μια επέκταση που ονομάζεται Top of the Page.
Σε αυτό το CMS, οποιαδήποτε προσθήκη μπορεί να εγκατασταθεί μέσω του "Extension Manager". Για αυτό χρειάζεστε:
- κατεβάστε την προσθήκη στο Διαδίκτυο;
- κάντε κλικ στο κουμπί "Αναζήτηση" στον διαχειριστή επεκτάσεων;
- επιλογή αρχείου λήψης;
- κάντε κλικ στο "Λήψη" και εγκατάσταση.
Τώρα πρέπει να το ενεργοποιήσετε στο "Διαχείριση προσθηκών". Για αυτόπρέπει να μεταβείτε σε αυτήν την ενότητα, να βρείτε την προσθήκη και να αλλάξετε την κατάστασή της σε "ενεργοποιημένη".
Το επόμενο βήμα είναι να διαμορφώσετε όλες τις παραμέτρους επέκτασης χρησιμοποιώντας την ίδια ενότητα όπου πρέπει να βρείτε τις "Βασικές παραμέτρους" αυτής της προσθήκης στη δεξιά πλευρά.
Η κορυφή της σελίδας έχει την ακόλουθη λειτουργικότητα:
- Εκτέλεση σε/ διαχειριστής - ενεργοποιώντας την επιλογή όχι μόνο στον πόρο του Διαδικτύου, αλλά και στον ίδιο τον πίνακα CMS του Joomla.
- Button Reveal Position - πόσα pixel πρέπει να επαναφέρει ο χρήστης για να εμφανιστεί το κουμπί επάνω.
- Κείμενο κουμπιού Παράλειψη - η παρουσία κειμένου στο κουμπί.
- Πάντα στην κορυφή - η σελίδα του ιστότοπου θα εμφανίζεται πάντα από την κορυφή της. Όταν χρησιμοποιείτε άγκυρες για κύλιση σε μια συγκεκριμένη τοποθεσία στη σελίδα, αυτή η επιλογή δεν χρειάζεται να είναι ενεργοποιημένη.
- Smooth Scroll - κάνει την κύλιση σελίδας πιο ομαλή.
- Διάρκεια κύλισης - ο χρόνος μετά τον οποίο η σελίδα θα μετακινηθεί εντελώς στην αρχή.
- Scroll Transition - Προσθέτει περισσότερα οπτικά εφέ στην κύλιση.
- Transition Easing - "αποδυνάμωση" της κίνησης στην κορυφή της σελίδας.
- Τοποθεσία συνδέσμου - η θέση του εικονιδίου. Από προεπιλογή, το κουμπί βρίσκεται στην κάτω δεξιά γωνία.
- Χρήση στυλ – μεμονωμένο στυλ κουμπιών, το οποίο μπορεί να οριστεί στο παρακάτω πεδίο. Εάν αλλάξει σε αρνητική τιμή, τότε όλες οι ρυθμίσεις στυλ θα ληφθούν από το ενεργό θέμα του ιστότοπου.
- Στυλ συνδέσμου - ένα πεδίο για την εισαγωγή των παραμέτρων στυλ κουμπιού.
Για να προσαρμόσετε το στυλ του κουμπιού "πάνω", πρέπει να έχετε τουλάχιστον ελάχιστοΓνώση CCS. Διαφορετικά, θα πρέπει να αλλάξετε την τιμή της προτελευταίας παραμέτρου σε "Όχι".
Μια άλλη σημαντική απόχρωση είναι ότι η συνηθισμένη επιγραφή στο εικονίδιο περιέχει το αγγλικό κείμενο: Επιστροφή στην κορυφή. Ένα τέτοιο κείμενο δεν μπορεί να υπάρχει σε ιστότοπο στη ρωσική γλώσσα, επομένως θα πρέπει απλώς να το απενεργοποιήσετε στις παραμέτρους της προσθήκης ή να το αλλάξετε σε Ρωσικά.
Για να αλλάξετε αυτήν την επιγραφή, πρέπει να μεταβείτε στον διακομιστή τοποθεσίας χρησιμοποιώντας FTP ή τη διαχείριση αρχείων που είναι ενσωματωμένη στη φιλοξενία. Στη συνέχεια, στον κατάλογο "/administrator/language/en-GB/" πρέπει να βρείτε ένα αρχείο που ονομάζεται "en-GB.plg_system_topofthepage.ini".
Πριν αλλάξετε το κείμενο, θα πρέπει να αλλάξετε την κωδικοποίηση αυτού του εγγράφου σε UTF-8. Αυτό θα κάνει την κανονική εμφάνιση των ρωσικών γραμμάτων.
Στη συνέχεια βρίσκουμε την ακόλουθη γραμμή:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Επιστροφή στην κορυφή"" |
και αλλάξτε τη φράση σε εισαγωγικά σε Ρωσικά. Μπορείτε να χρησιμοποιήσετε φράσεις όπως "Πάνω!", "Στην κορυφή!" ή "Επάνω!".
Στο τέλος, θα πρέπει να αποθηκεύσετε το τροποποιημένο αρχείο και να ελέγξετε για το κουμπί "επάνω" για τον ιστότοπο στο Joomla.
κουμπί Up για Ucoz
Το κουμπί "επάνω" για τον ιστότοπο στο Ucoz θα πρέπει να γίνει χρησιμοποιώντας την ένεση κώδικα, καθώς είναι αδύνατη η σύνδεση προσθηκών για αυτό το CMS. Ωστόσο, αυτό δεν απαιτεί μακρά μελέτη των αρχείων συστήματος και αναζήτηση των απαραίτητων γραμμών, απλά πρέπει να επικολλήσετε έναν μικρό κωδικό στη σωστή θέση.
Για να μας εγκαταστήσετεαπαιτείται:
- μεταβείτε στον Πίνακα Ελέγχου -> Σχεδίαση -> Διαχείριση σχεδίασης (πρότυπα) -> Κάτω μέρος του ιστότοπου;
- εισαγάγετε το σενάριο (μπορείτε να το βρείτε στον επίσημο ιστότοπο του έργου και σε πόρους τρίτων).
Συμπέρασμα
Μετά από αυτό, θα εμφανιστεί ένα εικονίδιο στην κάτω δεξιά γωνία, μετακινώντας τον χρήστη στην κορυφή της σελίδας.
Όπως μπορείτε να δείτε, η ρύθμιση του κουμπιού επιστροφής για οποιοδήποτε από τα CMS δεν ήταν ιδιαίτερα δύσκολη. Μπορείτε να χρησιμοποιήσετε τόσο μια αυτοματοποιημένη μέθοδο εγκατάστασης (πρόσθετα) όσο και μια μη αυτόματη. Ωστόσο, η τελευταία επιλογή παραμένει η πιο κατάλληλη, καθώς δεν επηρεάζει αρνητικά την απόδοση του ιστότοπου.
Μπορείτε να χρησιμοποιήσετε το κουμπί "πίσω στην κορυφή" για έναν ιστότοπο HTML για να ελαχιστοποιήσετε την κατανάλωση των πόρων του ιστότοπου, καθώς ένας μεγάλος αριθμός επεκτάσεων μπορεί να έχει αρνητικό αντίκτυπο στην απόδοση του πόρου. Μια προσθήκη κουμπιού "πάνω" δεν θα μπορεί να επηρεάσει σε μεγάλο βαθμό τον χρόνο φόρτωσης των σελίδων του ιστότοπου, αλλά στις περισσότερες περιπτώσεις ο χρήστης έχει τουλάχιστον δώδεκα πρόσθετα εγκατεστημένα στο CMS. Σε αυτήν την περίπτωση, οποιαδήποτε προσθήκη μπορεί να επηρεάσει αρνητικά την απόδοση των σελίδων του ιστότοπου.
