WordPress Tutorial: Πώς να δημιουργήσετε μια ιστοσελίδα WF με άπειρη κύλιση

Ενημερώθηκε: 29 Ιουλ 2014 / Άρθρο από: Rochester Oliveira

Σίγουρα εργάζεστε σκληρά για να βελτιώσετε την ευχρηστία του ιστοτόπου σας, ώστε οι χρήστες σας να είναι πιο ευτυχισμένοι και πιο πιθανό να επιστρέψουν συχνά, σωστά; Λοιπόν, μια από τις βελτιώσεις που θα μπορούσατε να εφαρμόσετε είναι η ατελείωτη τεχνική κύλισης. Είναι βασικά το ίδιο με αυτό που έχουμε στο Twitter ή το Facebook, όπου στην αρχή εμφανίζεται μόνο το βασικό περιεχόμενο και προστίθεται περισσότερο περιεχόμενο κατά την κύλιση προς τα κάτω. Αυτό είναι πολύ καλό για να βελτιώσετε την απόδοση του ιστότοπού σας (μειώνοντας το χρόνο φόρτωσης) και βελτιώνοντας την εμπειρία του χρήστη (επειδή δεν απαιτείται ενέργεια για να φορτώσετε περισσότερα στοιχεία, όπως κάνοντας κλικ σε ένα κουμπί).

Εδώ θα δούμε γιατί και πώς να το χρησιμοποιήσετε στον δικό σας ιστότοπο

Παραδείγματα της ιστοσελίδας Infinite Scrolling

Είναι πάντα καλό να ελέγξετε τι κάνουν εκεί οι μεγάλοι, και αυτό το είδος επίδρασης (σκληρό και πολλές φορές ανεξήγητο) χρησιμοποιείται από πολλούς μεγάλους ιστότοπους και εφαρμογές, όπως το Facebook (ζωντανό feed), το Twitter, το Pinterest, η Feedly.

Feedly

Τουίτερ

Άπειρη κύλιση - Κάνε και μη

Αυτή η τεχνική θα καταργήσει τον συνηθισμένο σύνδεσμο σελίδωσης του ιστότοπού σας ("παλιότερες δημοσιεύσεις" ή τις αριθμημένες σελίδες που έχετε μετά τις αναρτήσεις σας). Το μεγάλο "pro" αυτής της τεχνικής είναι ο χρόνος φόρτωσης, δεδομένου ότι λιγότερα αντικείμενα φορτώνονται κατά την πρώτη, μπορείτε να έχετε πολύ πιο γρήγορο ιστότοπο και αφού προστίθενται περισσότερα στοιχεία χωρίς επαναφόρτωση σελίδας, ο χρήστης μπορεί να μετακινηθεί προς τα κάτω για σελίδες 10 παρατηρώντας, παραμένοντας πολύ περισσότερο στον ιστότοπό σας.

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

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

Τα περιουσιακά στοιχεία

Θα χρησιμοποιήσουμε Το plugin JS του Paul Irish. Κατεβάστε το και εγκαταστήστε το στο φάκελο js του θέματός σας. Θα χρησιμοποιήσουμε τα Twenty Twenty για προτάσεις μάθησης, αλλά μπορείτε να το χρησιμοποιήσετε σε οποιοδήποτε θέμα (και να δημοσιεύσετε ερωτήσεις εάν δεν σας δουλεύει).

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

Μόλις έχετε το σενάριο και την όμορφη εικόνα gif σας κάτω από το Wp-content / themes / twentytwelve / js μπορούμε να ξεκινήσουμε!

Ο κώδικας PHP

Εντάξει, μην φοβηθείτε, θα σας δώσουμε ένα απόσπασμα αντιγραφής & επικόλλησης, αλλά εδώ πρέπει να το κάνουμε για να το δουλέψουμε:

  • Δημιουργήστε μια λειτουργία που θα φορτώσει και θα καταχωρίσει την εσωτερική σελίδα του plugin infinite scroll - Αυτό θα εμποδίσει το WordPress να το φορτώσει δύο φορές και να σπάσει τη λειτουργικότητα του θέματος
  • Φόρτωση σεναρίου μόνο όταν έχετε μια σελίδα που δεν είναι μία ανάρτηση - μόνο οι σελίδες όπου έχετε περισσότερες από 1 δημοσιεύσεις για εμφάνιση θα πρέπει να φορτώσουν περισσότερα στοιχεία.

Το αρχείο functions.php είναι η καρδιά του θέματος. Όλες οι λειτουργίες είναι συνήθως εκεί ή καλούνται εκεί από άλλα αρχεία. Έτσι, μπορούμε να προσθέσουμε αυτόν τον κώδικα στο αρχείο λειτουργιών σας για να προσθέσουμε την υποστήριξη απεριόριστης κύλισης (προσθέστε το στο τέλος του αρχείου):

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

Εναλλακτική προσέγγιση - φόρτωση σελίδων και προσαρμοσμένων τύπων μηνυμάτων

Ο προηγούμενος κώδικας θα φορτώσει όλες τις αναρτήσεις σας, αλλά τι γίνεται αν θέλετε να προβάλετε σελίδες ή προσαρμοσμένους τύπους ανάρτησης (όπως τα στοιχεία χαρτοφυλακίου, αν το υποστηρίζουν); Λοιπόν, μπορούμε να τροποποιήσουμε λίγο τον κώδικα και να το λειτουργήσουμε επίσης.

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

ενώ (have_posts ()):

Έτσι, μόλις το βρείτε, μπορείτε να χρησιμοποιήσετε αυτόν τον μαγικό κώδικα:

"σελίδα", // Μόνο σελίδες); query_posts ($ args); // φόρτωση αναρτήσεων εάν (has_posts ()):?>

Συμπέρασμα

Αυτό είναι μόνο ένα "ζεστό" άρθρο. Υπάρχουν πολλά πράγματα που μπορείτε να κάνετε με αυτή την προσέγγιση. Για παράδειγμα, θα μπορούσατε να φορτώσετε προϊόντα στο κατάστημά σας (χρησιμοποιώντας το WooCommerce, ίσως) ως κύλιση χρήστη ή ακόμα να προσθέσετε περισσότερους κώδικες JS και CSS για να δημιουργήσετε και φοβερό φορτωτή τύπου parallax για φωτογραφίες μετά.

Τι πιστεύεις για αυτή την τεχνική; Σου αρέσει? Θα το χρησιμοποιούσατε; Μοιραστείτε τις σκέψεις σας χρησιμοποιώντας την ενότητα σχολίων!

Σχετικά με την Rochester Oliveira

Είμαι σχεδιαστής ιστοσελίδων και επιχειρηματίας από την Itajubá (MG), τη Βραζιλία. Μου αρέσει να γράφω για τα σκοτεινά θέματα και να κάνω μερικά δροσερά πράγματα.