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

Άρθρο που γράφτηκε από:
  • WordPress
  • Ενημερώθηκε: Ιούλιος 29, 2014

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

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

Παραδείγματα θέσης άπειρης κύλισης

Είναι πάντα καλό να ελέγξετε τι κάνουν εκεί οι μεγάλοι, και αυτό το είδος επίδρασης (σκληρό και πολλές φορές ανεξήγητο) χρησιμοποιείται από πολλούς μεγάλους ιστότοπους και εφαρμογές, όπως το 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 είναι η καρδιά του θέματος. Όλες οι λειτουργίες είναι συνήθως εκεί ή καλούνται εκεί από άλλα αρχεία. Έτσι, μπορούμε να προσθέσουμε αυτόν τον κώδικα στο αρχείο λειτουργιών σας για να προσθέσουμε την υποστήριξη απεριόριστης κύλισης (προσθέστε το στο τέλος του αρχείου):

<? Php / ************************* WEB ΕΣΟΔΩΝ ΑΠΕΙΡΟ SCROLLING ***************** ******** / / * Λειτουργία που θα εγγραφούν και Τοποθέτηση στην ουρά σενάριο του άπειρου scolling για να χρησιμοποιηθεί στο θέμα. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // όνομα του σεναρίου get_template_directory_uri ().) / js / jquery.infinitescroll.min.js ', // όπου το αρχείο είναι array (' jquery '), // αυτό το σενάριο απαιτεί μια δέσμη jquery null, // δεν έχει αριθμό έκδοσης σενάριο true // script θα τοποθετηθεί στο υποσέλιδο). αν {// μόνο όταν έχουμε πάνω από 1 μετά // θα φορτώσει αυτό το σενάριο wp_enqueue_script ( «infinite_scrolling») (is_singular (!))? }} // Καταχωρίστε τα προσαρμοσμένα σενάρια μας! ADD_ACTION ( 'wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling')? / * Λειτουργία που θα καθορίσει την άπειρη κύλιση που θα εμφανιστεί στη σελίδα. * / set_infinite_scrolling () {if (! is_singular ()) {// και πάλι, μόνο όταν έχουμε περισσότερα από 1 post // προσθέστε το script js παρακάτω;> <script type = "text / javascript"> μπορείτε να το τροποποιήσετε στη δική σας διαθήκη * / var inf_scrolling = {/ * img: είναι η διαδρομή φόρτωσης εικόνας, προσθέστε ένα ωραίο εικονίδιο φόρτωσης gif msgText: το μήνυμα φόρτωσης finishedMsg: το τελικό μήνυμα φόρτωσης * / loading: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Φόρτωση επόμενων δημοσιεύσεων ....", finishedMsg: " ορίστε nextSelector. Το NextSelector είναι η κατηγορία πλοήγησης της σελίδας css. Στην περίπτωση μας είναι η # nav-below .nav-previous a * / "nextSelector": "# nav-below .nav-previous a", // navSelector είναι css id της πλοήγησης σελίδας "navSelector" », // itemSelector είναι η div όπου εμφανίζεται μετά το“itemSelector”:“άρθρο”, // contentSelector είναι η div όπου εμφανίζεται το περιεχόμενο της σελίδας (δημοσιεύσεις)“contentSelector”:“# περιεχομένου”}? / * Το τελευταίο πράγμα που πρέπει να κάνετε είναι να ρυθμίσετε το contentSelector σε άπειρο κύλιση, με μια λειτουργία jquery από infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling). </ script> <? }} / * πρέπει να προσθέσουμε αυτήν την ενέργεια στο υποσέλιδο της σελίδας. Το 100 είναι ένας αριθμός προτεραιότητας που αντιστοιχεί σε μια μεταγενέστερη εκτέλεση. * / ADD_ACTION ( 'wp_footer', 'set_infinite_scrolling', 100)? ?>

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

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

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

ενώ (have_posts ()):

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

<div id = "content" role = "main"> <? php / * Εμφάνιση μόνο σελίδων σε άπειρο κύλιση! Εδώ είναι το μυστικό: Μπορείτε να ορίσετε post_type για αυτό που χρειάζεστε, είναι απλό! Μερικοί post_types θα μπορούσαν να είναι: χαρτοφυλάκιο, έργο, προϊόν Θα μπορούσαμε να προσθέσουμε όσα είδη θέσεων θέλουμε, χωρίζοντάς τα με κόμματα, όπως 'post', 'σελίδα', 'προϊόν' * / $ args = array 'post_type' => 'σελίδα', // Μόνο Σελίδες); query_posts ($ args); // να φορτώσετε τις θέσεις αν (have_posts ()):?> <? php / * Ξεκινήστε το Loop * /?> <? php ενώ (have_posts ()): the_post (); // ο "συνήθης" κώδικας βρόχου για την εμφάνιση αυτών των στοιχείων;>

Συμπέρασμα

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

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

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

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

Συνδέω: