Πώς να κάνετε τις εικόνες του WordPress ευαίσθητες
Το WordPress είναι μια πραγματικά ισχυρή πλατφόρμα. Δημιουργώντας ένα θέμα που ανταποκρίνεται και ενσωματώνοντας το είναι αρκετά εύκολο όταν μάθετε τα βασικά θέματα. Απόκριες εικόνες, από την άλλη πλευρά, δεν είναι κάτι WordPress ασχολείται με έξω από το κουτί. Θα μπορούσατε να κατεβάσετε τη διαδρομή για τη δημιουργία με μη αυτόματο τρόπο κάθε μέγεθος εικόνας, στη συνέχεια, στον επεξεργαστή HTML θα μπορούσατε να πληκτρολογήσετε με μη αυτόματο τρόπο την ετικέτα εικόνας, srcset χαρακτηριστικά και κάθε εικόνα. Αυτό δεν θα πάρει μόνο χρόνο, αλλά θα μπορούσε να είναι ένα πρόβλημα για οποιονδήποτε χρήστη διαχειριστή που δεν είναι εγγράφως HTML.
Ευτυχώς υπάρχει ένας τρόπος για να κάνετε το WordPress να κάνει όλη τη βαριά ανύψωση. Μπορεί να δημιουργήσει όλα τα μεγέθη εικόνων από μια μόνο μεταφόρτωση εικόνας και στη συνέχεια, μέσω ενός plugin, να εφαρμόσει τις ετικέτες εικόνας και τις ιδιότητες srcset οπουδήποτε ο συγγραφέας επιλέγει να εισαγάγει μια εικόνα.
Βήμα 1: Τροποποιήστε τις λειτουργίες.php για να δημιουργήσετε περισσότερα μεγέθη εικόνων
Κάθε φορά που ανεβάζετε μια εικόνα το WordPress αποθηκεύει στο εγγενές της μέγεθος. Παράγει επίσης αυτόματα 3 αντίγραφα μεγέθους σε αυτά τα τυποποιημένα μεγέθη (το ύψος ή το πλάτος μπορεί να αλλάξει με βάση την αναλογία εικόνας):
- Μικρογραφία (150 × 150)
- Μεσαίο (300 × 300)
- Μεγάλα (1024 × 1024)
Αυτό είναι ένα πραγματικά ισχυρό χαρακτηριστικό καθώς μπορεί να προσαρμοστεί για να κάνει οποιοδήποτε μέγεθος εικόνας. Αυτό σημαίνει ότι δεν χρειάζεται να δημιουργείτε πολλαπλά αντίγραφα μιας εικόνας σε διαφορετικά μεγέθη. Μόλις ανεβάσετε μια μόνο εικόνα και το WordPress δημιουργεί τα αντίγραφα μεγέθους.
Αυτό γίνεται με την τροποποίηση του αρχείου functions.php. Για να προσθέσετε νέα μεγέθη εικόνων, πρέπει να προσθέσετε κλήσεις στη συνάρτηση add_image_size . Ακολουθεί ένα παράδειγμα που προσθέτει τέσσερα νέα μεγέθη εικόνων:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Κάθε κλήση στη λειτουργία περιλαμβάνει ένα όνομα (έτσι το WordPress μπορεί να αναγνωρίσει το μέγεθος) και ένα πλάτος. Τα νέα μεγέθη θα έχουν πλάτος 300, 600, 1200 και 2400 pixel. Είναι δυνατόν με τη συνάρτηση add_image_size να έχει το WordPress να ρυθμίσει επίσης το ύψος ή την περικοπή της εικόνας, αλλά το παραπάνω παράδειγμα θα διατηρήσει την αρχική αναλογία εικόνας. (Περισσότερες πληροφορίες μπορείτε να βρείτε για τη συνάρτηση add_image_size στο WordPress Codex .)
Το παραπάνω παράδειγμα δείχνει μόνο τέσσερα νέα μεγέθη εικόνων που έχουν προστεθεί, αλλά ίσως θέλετε να προσθέσετε περισσότερα ή λιγότερα ... αυτό θα βασίζεται στη σχεδίασή σας. Τώρα κάθε φορά που μια εικόνα φορτώνεται στο WordPress, θα δημιουργήσει τα νέα μεγέθη εικόνων. Το επόμενο βήμα είναι να τα συμπεριλάβουμε στο HTML.
Βήμα 2: Εγκαταστήστε το plugin RICG Responsive Images
Προκειμένου το WordPress να εξάγει όλα τα μεγέθη εικόνων, πρέπει να εγκατασταθεί ένα νέο πρόσθετο: το Ανταπόκριτες εικόνες RICG συνδέω. Αφού εγκατασταθεί και ενεργοποιηθεί όλα τα μεγέθη εικόνων θα συμπεριληφθούν στην ετικέτα εικόνας μέσω του χαρακτηριστικού srcset.
Συνήθως όταν μια εικόνα προστίθεται σε μια σελίδα στο WordPress, η έξοδος HTML μοιάζει με αυτή:
Υπάρχει μια μόνο εικόνα στο χαρακτηριστικό src.
Μόλις εγκατασταθεί το πρόσθετο, το HTML θα μοιάζει με αυτό:
Όλα τα νέα μεγέθη εικόνων έχουν προστεθεί μέσω του χαρακτηριστικού srcset .
Το πρόσθετο περιλαμβάνει επίσης Picturefill.js , ένα polyfill με ευαισθησία εικόνας που προσθέτει υποστήριξη τόσο για το στοιχείο εικόνας όσο και για τα νέα χαρακτηριστικά απόκρισης για το στοιχείο img. Αυτό, μαζί με τις ιδιότητες srcset που περιλαμβάνονται τώρα στην ετικέτα εικόνας, είναι αυτό που κάνει τις εικόνες σας να αποκρίνονται.
Οι εικόνες σας ανταποκρίνονται τώρα
Τώρα οι εικόνες στον ιστότοπό σας θα ανταποκρίνονται - ο περιηγητής θα επιλέξει την πιο κατάλληλη εικόνα για λήψη.
Οι χρήστες σε συσκευές με μικρότερες οθόνες θα αποκτήσουν τις μικρότερες εικόνες. Ο ιστότοπός σας θα φορτώνεται γρηγορότερα, καθώς αυτές οι εικόνες θα κατεβάζουν ταχύτερα, θα χρειαστούν λιγότερα από το εύρος ζώνης των χρηστών. Οι χρήστες σε συσκευές με μεγαλύτερες οθόνες θα έχουν τις μεγαλύτερες εικόνες. Δεν θα εμφανιστούν pixelated ή με χαμηλότερη ποιότητα.
Υπάρχει μόνο ένα πιθανό πρόβλημα με αυτήν τη μέθοδο: θα λειτουργήσει μόνο με εικόνες που έχουν μεταφορτωθεί στο WordPress μετά την εγκατάσταση της πρόσθετης εφαρμογής RICG Responsive Images. Εάν πρόκειται για έναν ολοκαίνουργιο ιστότοπο στον οποίο εργάζεστε, τότε αυτό μπορεί να μην είναι πρόβλημα, ωστόσο εάν πρόκειται για υπάρχοντα ιστότοπο με υπάρχον περιεχόμενο, δεν θα έχουν δημιουργηθεί τα νέα μεγέθη εικόνων που προσθέσατε στις λειτουργίες.php. Ευτυχώς, δεν χρειάζεται να προσθέσετε ξανά όλες τις εικόνες - υπάρχει ένα plugin το οποίο μπορεί να σας βοηθήσει.
Βήμα 3: Εγκατάσταση plugin για να επαναδημιουργήσετε μεγέθη εικόνων (προαιρετικά)
ο Ανανέωση μικρογραφιών το plugin θα περάσει από όλα τα υπάρχοντα συνημμένα εικόνας και θα επαναδημιουργήσει τα νέα μεγέθη εικόνων με βάση τα νέα που δημιουργήθηκαν στις λειτουργίες.php - είναι μια εξοικονόμηση σε πραγματικό χρόνο και απαιτεί μόνο το πάτημα ενός κουμπιού.
Μόλις εγκατασταθεί, μεταβείτε στα Εργαλεία -> Regen. Κάντε μικρογραφίες και κάντε κλικ στο κουμπί "Αναγέννηση όλων των μικρογραφιών". Θα εμφανιστεί μια γραμμή κατάστασης και θα δείτε τις πληροφορίες σχετικά με τον αριθμό των εικόνων που έχουν αλλάξει.
Τώρα, όλες οι υπάρχουσες εικόνες στον ιστότοπό σας θα εκτυπωθούν σωστά χρησιμοποιώντας την ετικέτα εικόνας μέσω του χαρακτηριστικού srcset .
Προτεινόμενη χρήση εικόνας εικόνα της συσκευής και εικόνα κινητής συσκευής μέσω Shutterstock.