Πώς να βελτιώσετε τις εικόνες στο WordPress

Πώς να βελτιώσετε τις εικόνες στο WordPress


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

Ακριβώς επειδή είναι εύκολο να ανεβάσετε εικόνες στον ιστότοπό σας, αυτό δεν σημαίνει ότι πρέπει να το κάνετε χωρίς καμία προετοιμασία. Οι μη βελτιστοποιημένες εικόνες μπορούν, στην πραγματικότητα, να βλάψουν τον ιστότοπό σας με πολλούς τρόπους. από τον επηρεασμό του τρόπου με τον οποίο οι επισκέπτες σας σκέφτονται έως την ταχύτητα της κατάταξης του ιστότοπού σας και του SEO Εάν δεν το έχετε σκεφτεί ακόμα, είμαστε εδώ για να σας δείξουμε διάφορους τρόπους βελτίωσης εικόνων στο WordPress.

Σε αυτόν τον οδηγό, πρόκειται να σας δείξουμε:

  • Πώς να βελτιστοποιήσετε τις εικόνες για το WordPress για να επιταχύνετε τον ιστότοπό σας και να βελτιώσετε το SEO
  • Αλλάξτε τον τρόπο με τον οποίο το WordPress συμπιέζει εικόνες JPEG
  • Τα πιο δημοφιλή πρόσθετα βελτιστοποίησης εικόνας για το WordPress
  • Προσθέστε αργή φόρτωση για τα βίντεο και τις εικόνες σας
  • Εμφανίστε τις εικόνες πριν και μετά με έναν ελκυστικό τρόπο
  • Πώς να δημιουργήσετε διαδραστικές εικόνες – σχεδιάστε, προσθέστε περιγραφές και συνδέσμους
  • Πώς να αναδημιουργήσετε πρόσθετα μεγέθη εικόνας
  • Καταργήστε τα χαρακτηριστικά εικόνας πλάτους και ύψους με το jQuery
  • Πώς να δημιουργήσετε προσαρμοσμένα μεγέθη εικόνας στο Media Uploader
  • Δημιουργήστε αυτόματο στιγμιότυπο οθόνης από οποιονδήποτε ιστότοπο και δημοσιεύστε τον ως εικόνα στην ανάρτησή σας

Contents

Πώς να βελτιστοποιήσετε τις εικόνες για το WordPress, ώστε να επιταχύνετε τον ιστότοπό σας και να βελτιώσετε το SEO

Γιατί πρέπει να βελτιστοποιήσετε τις εικόνες για το WordPress; Εάν κάνετε μια προσπάθεια, μπορείτε να περιμένετε τα εξής:

  • Ταχύτερη τοποθεσία
  • Καλύτερο SEO
  • Μικρότερα αντίγραφα ασφαλείας
  • Λιγότερη χρήση εύρους ζώνης
  • Χαρούμενοι χρήστες

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

Δοκιμάστε γρήγορα τις εικόνες στον ιστότοπό σας

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

Μας αρέσει να χρησιμοποιούμε GTmetrix που θα σας δείξει ακόμη και τις ακριβείς εικόνες που κάνουν τον ιστότοπό σας να φορτώνει πιο αργά.

Βελτιστοποιήστε τις εικόνες για το WordPress πριν από τη μεταφόρτωση

Κατά το blogging, οι περισσότεροι άνθρωποι δεν λαμβάνουν όλα τα απαραίτητα μέτρα για τη βελτιστοποίηση των εικόνων τους. Συνήθως, οι άνθρωποι απλώς τραβούσαν μια φωτογραφία από την κάμερα ή το smartphone τους, έκαναν λήψη από το Διαδίκτυο ή δημιούργησαν μία χρησιμοποιώντας λογισμικό υπολογιστή.

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

Αλλαγή μεγέθους εικόνων

Αλλαγή μεγέθους εικόνων

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

Η αλλαγή μεγέθους των εικόνων είναι γρήγορη και εύκολη. Υπάρχουν πολλά δωρεάν εργαλεία όπως το Microsoft Paint που θα σας βοηθήσουν με αυτό. Μπορείτε ακόμη και να βρείτε δωρεάν διαδικτυακά εργαλεία για αλλαγή μεγέθους εικόνων όπως Εύκολη αλλαγή μεγέθους.

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

Αλλάξτε την ποιότητα

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

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

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

Επιλέξτε τη σωστή μορφή

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

Μορφές εικόνας

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

Σε πολλές περιπτώσεις, η αναμόρφωση των εικόνων δεν θα έχει σημαντικές διαφορές ποιότητας, ενώ μπορείτε να περιμένετε τη διαφορά στο μέγεθος. Την επόμενη φορά πριν ανεβάσετε μια φωτογραφία PNG, κάντε μια φωτογραφία και δοκιμάστε να την αποθηκεύσετε ως JPEG για να δείτε τη διαφορά. Για πιο λεπτομερή εξήγηση, ανατρέξτε στο διαφορά μεταξύ PNG, JPEG, GIF και SVG.

Φροντίστε τα ονόματα αρχείων

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

Σας προτείνουμε να ονομάσετε εικόνες χωρίς να χρησιμοποιείτε κενά. Μην ξεχάσετε να συμπεριλάβετε λέξεις-κλειδιά εάν θέλετε να κατατάσσεται η σελίδα και η εικόνα. Για παράδειγμα, εάν ανεβάζετε μια φωτογραφία της Ferrari California, το όνομα του αρχείου θα πρέπει να είναι “ferrari-california.jpg”. Εάν χρησιμοποιείτε μια προσθήκη SEO για WordPress, γνωρίζετε ήδη ότι ελέγχει τις ετικέτες alt σας για λέξεις-κλειδιά. Ναι, είναι πολύ σημαντικό να έχουμε το κατάλληλο όνομα εικόνας.

Βελτιστοποίηση εικόνων για WordPress μετά τη μεταφόρτωση

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

Τίτλος, περιγραφή, εναλλακτικό κείμενο και λεζάντα

Φροντίζοντας τις τεχνικές λεπτομέρειες, δεν πρέπει να ξεχνάτε το SEO. Να προσθέτετε πάντα τον τίτλο και την περιγραφή στα μέσα σας. Αυτό θα σας βοηθήσει με τη διαχείριση μέσων του WordPress και θα λειτουργήσει επίσης προς ένα καλύτερο SEO. Επίσης, μην ξεχνάτε την ετικέτα alt που θα εμφανίζεται για επισκέπτες που δεν μπορούν να δουν σωστά την εικόνα σας. Όχι μόνο αυτό θα είναι χρήσιμο για τους χρήστες σας, αλλά θα σας βοηθήσει επίσης με το SEO. Η σελίδα σας θα κατατάσσεται καλύτερα και οι χρήστες θα μπορούν να βρίσκουν τις νέες σας εικόνες πιο εύκολα.

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

Επεξεργασία εικόνων με WordPress

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

Αναδημιουργήστε όλες τις μικρογραφίες

Οι περισσότερες από τις προηγούμενες τεχνικές θα σας βοηθήσουν με νέα αρχεία εικόνας που πρόκειται να ανεβάσετε. Τι γίνεται όμως αν έχετε ήδη ανεβάσει εκατοντάδες αν όχι χιλιάδες αρχεία στον ιστότοπό σας στο WordPress; Μην ανησυχείτε. μπορείτε ακόμα να βελτιστοποιήσετε αυτές τις εικόνες και να αλλάξετε τα μεγέθη τους.

Για μια γρήγορη επιδιόρθωση, μπορεί να σας ενδιαφέρει μια δωρεάν προσθήκη Regenerate Thumbnails που έχει χρησιμοποιηθεί από περισσότερους από ένα εκατομμύριο χρήστες. Αν θέλετε περισσότερο έλεγχο των εικόνων, θα πρέπει να δείτε μερικές από τις καλύτερες προσθήκες WordPress για βελτιστοποίηση εικόνας που θα σας δείξουμε στις ακόλουθες γραμμές αυτού του άρθρου.

Πώς να αναδημιουργήσετε πρόσθετα μεγέθη εικόνας

Χρησιμοποιήστε πρόσθετα WordPress

Φυσικά, υπάρχουν δεκάδες προσθήκες WordPress που μπορούν να σας βοηθήσουν να βελτιστοποιήσετε τις εικόνες στον ιστότοπό σας. Κάντε κύλιση προς τα κάτω για να δείτε τις καλύτερες προσθήκες WordPress για βελτιστοποίηση εικόνων.

Lazy Φορτώστε εικόνες όταν είναι απαραίτητο

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

Το Lazy load είναι μια τεχνική που φορτώνει εικόνες μόνο όταν τις χρειάζονται οι χρήστες (μεταβείτε σε αυτά). Για παράδειγμα, αν ανεβάσατε είκοσι φωτογραφίες υψηλής ποιότητας σε ένα άρθρο, θα επιβραδύνουν σημαντικά τον ιστότοπό σας. Αλλά αν φορτώσετε τεμπέλης τις εικόνες, το άρθρο θα ήταν αστραπιαίο και οι φωτογραφίες θα φορτώνονταν μόνο όταν χρειαζόταν – τη στιγμή που ο χρήστης φτάσει σε αυτές.

Έχετε αποκριτικές εικόνες

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

Βελτιστοποίηση εικόνων για κοινωνικά μέσα

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

Εάν χρησιμοποιείτε μια προσθήκη SEO όπως το Yoast, μην ξεχάσετε να ελέγξετε τις ρυθμίσεις. Για παράδειγμα, το Yoast θα σας επιτρέψει να ρυθμίσετε μερικά πράγματα που σχετίζονται με τα κοινωνικά μέσα. Μεταβείτε λοιπόν στο SEO -> Social και εισαγάγετε τις πληροφορίες στο Facebook, το Twitter, το Google+ και το Pinterest.

Αν θέλετε περισσότερα και θέλετε να βελτιστοποιήσετε εικόνες για επιπλέον ιστότοπους κοινωνικών μέσων, ρίξτε μια ματιά WPSSO – Ακριβείς μετα-ετικέτες + Σήμανση σχήματος για βελτιστοποίηση κοινωνικής κοινοποίησης και προσθήκη SEO.

Αλλάξτε τον τρόπο με τον οποίο το WordPress συμπιέζει εικόνες JPEG

Εάν ανεβάζετε πολλές εικόνες JPEG στον ιστότοπό σας στο WordPress, ίσως έχετε παρατηρήσει ότι χάνουν την αρχική τους ποιότητα. Εάν αναρωτηθήκατε εάν φταίει το WordPress, τώρα θα έχετε την απάντησή σας – ναι, είναι!

Μόλις ανεβάσετε μια εικόνα σε μορφή JPEG, Το WordPress αλλάζει αυτόματα τη συμπίεση και αποφασίζει ότι θέλετε η εικόνα να χάσει την ποιότητα. Για να είμαστε πιο συγκεκριμένοι, το WP χρησιμοποιεί συμπίεση 90% στα JPGE σας. Αυτό είναι υπέροχο εάν οι εικόνες σας υπάρχουν μόνο για να χρησιμοποιηθούν ως μικρογραφίες ανάρτησης ή για να εμφανίζονται σε μια ανάρτηση, αλλά αν ανεβάζετε τις φωτογραφίες σας, θέλετε να είναι όσο το δυνατόν καλύτερες, σωστά?

Ευτυχώς, θα χρειαστείτε μόνο μία γραμμή κώδικα για να το αλλάξετε.

Διακοπή συμπίεσης εικόνων JPEG:

Εάν δεν θέλετε να συμπιέσετε τις εικόνες JPEG, απλώς αντιγράψτε και επικολλήστε τον ακόλουθο κώδικα στο αρχείο functions.php:

add_filter ('jpeg_quality', function ($ arg) {return 100;});

Μην ξεχάσετε να αποθηκεύσετε τις αλλαγές και είστε έτοιμοι να ανεβάσετε νέες εικόνες.

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

Συμπίεση εικόνων JPEG ακόμη περισσότερο:

Όσο χαμηλότερος είναι ο αριθμός, τόσο περισσότερες εικόνες θα συμπιέζονται. Για παράδειγμα, για να συμπιέσετε αυτά τα JPEG ακόμη περισσότερο, θα χρειαστείτε αυτόν τον κωδικό:

add_filter ('jpeg_quality', function ($ arg) {return 80;});

Μην ξεχνάτε. το προεπιλεγμένο επίπεδο συμπίεσης είναι 90.

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

Τα πιο δημοφιλή πρόσθετα βελτιστοποίησης εικόνας για το WordPress

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

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

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

Οι ακόλουθες προσθήκες θα σας βοηθήσουν να συμπιέσετε τις εικόνες σε οποιονδήποτε ιστότοπο WordPress έχετε. Θα κάνουν τη φόρτωση του ιστότοπου πιο γρήγορα και τελικά θα σας βοηθήσουν να βελτιώσετε το SEO.

WP Smush

ΤΙΜΗ: Δωρεάν

Με περισσότερες από 700.000 ενεργές εγκαταστάσεις, το WP Smush πρέπει να είναι ένα από τα καλύτερα πρόσθετα βελτιστοποίησης εικόνας για το WordPress. Μπορεί γρήγορα να βελτιστοποιήσει τις εικόνες χρησιμοποιώντας διαφορετικές τεχνικές συμπίεσης. Το σπουδαίο πράγμα για τη συμπίεση εικόνων με το WP Smush είναι ότι οι εικόνες δεν θα χάσουν την ποιότητα. Δεν μας πιστεύετε; Δοκιμάστε το πρόσθετο.

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

Αυτή η φανταστική προσθήκη μπορεί να λειτουργήσει με αρχεία JPEG, GIF και PNG. Λειτουργεί με όλους τους καταλόγους σας, φροντίζει αυτόματα τα συνημμένα και λειτουργεί ακόμη και σε πολλές τοποθεσίες. Μπορείτε να χειριστείτε χειροκίνητα σε κάθε εικόνα ή να επεξεργαστείτε μαζικά πενήντα από αυτές. Αν θέλετε ακόμη καλύτερα αποτελέσματα και περισσότερες επιλογές, δείτε το WP Smush PRO.

EWWW Image Optimizer

ΤΙΜΗ: Δωρεάν

Πίσω από το αστείο όνομα, υπάρχει ένα από τα πιο δημοφιλή πρόσθετα βελτιστοποίησης εικόνας για το WordPress. Όπως και το προηγούμενο, το EWWW Image Optimizer μπορεί να συμπιέσει τις εικόνες σας χωρίς να επηρεάσει την ποιότητά τους. Όταν σκέφτεστε ότι η προσθήκη μπορεί να επιταχύνει τον ιστότοπό σας σε δευτερόλεπτα, θα έχετε ήδη ξεκινήσει τη λήψη του. Μόλις το κάνετε αυτό, θα έχετε τη δυνατότητα βελτιστοποίησης μαζικών εικόνων και γκαλερί όπως το GRAND FlaGallery, το NextCellent και το NextGEN θα αποκτήσουν ακόμη και τις δικές τους σελίδες μαζικής βελτιστοποίησης.

Όλες οι εικόνες που χρησιμοποιούν κλάση WP_Image_Editor στο WordPress θα είναι βελτιστοποιείται αυτόματα, ενώ μπορείτε να κάνετε χειροκίνητα τη μαγεία σε όλους τους άλλους. Μας αρέσει να επιλέγετε φακέλους που θέλετε να βελτιστοποιήσετε. Για περισσότερες λεπτομέρειες σχετικά με αυτό και ποιες προσθήκες χρησιμοποιούν την τάξη, ανοίξτε τον επίσημο Σελίδα EWWW Image Optimizer στο αποθετήριο WordPress.

Συμπίεση εικόνων JPEG & PNG

ΤΙΜΗ: Δωρεάν

Μικρές εικόνες συμπίεσης

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

Εάν πάτε με αυτό το πρόσθετο, το Panda θα βελτιστοποιήσει αυτόματα τις εικόνες σας. Κάθε φορά που ανεβάζετε ένα νέο, η προσθήκη θα αναλαμβάνει και θα κάνει τη δουλειά της. Ωστόσο, μπορείτε να βελτιστοποιήσετε μεμονωμένες εικόνες ή να το κάνετε μαζικά, μεταβαίνοντας στη βιβλιοθήκη πολυμέσων.

Η συμπίεση εικόνων JPEG & PNG υποστηρίζει ακόμη και κινούμενα PNG, λειτουργεί τέλεια σε ένα multisite, είναι συμβατό με το WooComerce και δεν θα έχει προβλήματα με το WP Offload S3.

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

Δεν υπάρχουν όρια μεγέθους αρχείου, μπορείτε να ορίσετε ένα widget πίνακα ελέγχου και λειτουργεί ακόμη και με την εφαρμογή WordPress για κινητά. Λόγω όλων αυτών, οι εικόνες Compress JPEG & PNG έχουν περισσότερες από 100.000 ενεργές εγκαταστάσεις και αξίζουν μια θέση στη λίστα των καλύτερων προσθηκών βελτιστοποίησης εικόνας για το WordPress.

Ευκαμψία

ΤΙΜΗ: Δωρεάν

Ευκαμψία

Παρόλο που η εικόνα εξωφύλλου για αυτό το πρόσθετο μπορεί να σας τρομάξει, πάρτε ένα δευτερόλεπτο και ρίξτε μια ματιά σε όλα τα χαρακτηριστικά του Imsanity. Ω, ακόμη και το όνομα της προσθήκης ακούγεται τρελό, έτσι; Μόλις είστε εντάξει με το όνομα της προσθήκης, θα δείτε ότι έχει πολλά να προσφέρει.

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

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

Μας άρεσε πολύ η επιλογή που σας επιτρέπει να μετατρέψετε εικόνες BMP σε JPG. Ακριβώς σε περίπτωση που έχετε πολλά αρχεία BMP που έχετε ανεβάσει κατά λάθος πριν από λίγο καιρό, αυτό θα είναι σωτηρία.

ShortPixel Image Optimizer

ΤΙΜΗ: Δωρεάν

ShortPixel Image Optimizer

Με περισσότερες από 30.000 ενεργές εγκαταστάσεις, το ShortPixel Image εξακολουθεί να είναι ένα από τα πιο δημοφιλή πρόσθετα βελτιστοποίησης εικόνας για το WordPress. Η προσθήκη είναι γεμάτη με χαρακτηριστικά και θα είναι απαραίτητη για ιστότοπους που έχουν πολλές εικόνες για βελτιστοποίηση.

Το ShortPixel Image Optimizer όχι μόνο βελτιστοποιεί έγγραφα JPG, PNG, GIF και PDF για εσάς, αλλά θα σας επιτρέψει επίσης μετατρέψτε οποιαδήποτε εικόνα JPEG, PNG ή GIF σε WebP. Η προσθήκη λειτουργεί καλά με άλλες προσθήκες συλλογής και δεν με νοιάζει εάν ο ιστότοπός σας χρησιμοποιεί HTTP ή HTTPS. Θα σας επιτρέψει να αφαιρέσετε δεδομένα EXIF ​​από εικόνες (κάτι που οι φωτογράφοι θα λατρέψουν να έχουν).

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

Optimus – WordPress Image Optimizer

ΤΙΜΗ: Δωρεάν

Optimus

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

Το Optimus λειτουργεί σε πολλούς ιστότοπους, δεν είναι ξένο για τους ιστότοπους ηλεκτρονικού εμπορίου WordPress και είναι πλήρως βελτιστοποιημένο για εφαρμογές για φορητές συσκευές WordPress και Windows Live Writer. Θα επιταχύνει τον ιστότοπό σας χωρίς να χρειάζεται να αγγίξετε μια γραμμή κώδικα. Η προσθήκη προσφέρει πολλά περισσότερα, αλλά θα πρέπει να επιλέξετε την premium έκδοση. Για να δείτε περισσότερα, μεταβείτε στην επίσημη σελίδα στο αποθετήριο προσθηκών WordPress.

Προσθέστε τεμπέλης φόρτωση για τα βίντεο και τις εικόνες σας στο WordPress

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

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

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

Lazy Load για βίντεο

ΤΙΜΗ: δωρεάν

Lazy Load για βίντεο

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

WP YouTube Lyte

ΤΙΜΗ: Δωρεάν

WP YouTube Lyte

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

a3 Lazy Load

ΤΙΜΗ: Δωρεάν
DEMO 1
DEMO 2

a3 Lazy Load

Αυτό είναι αφιερωμένο στον ιστότοπό σας για κινητά. Εάν έχετε πολλές εικόνες ή / και βίντεο που θέλετε να εμφανίζονται στους επισκέπτες σας σε κινητές συσκευές, θα πρέπει να ρίξετε μια ματιά στο a3 Lazy Load. Θα σας επιτρέψει να προσθέσετε τεμπέλης φόρτωση στις εικόνες και τα βίντεό σας και η προσθήκη θα σας αφήσει ακόμη και να επιλέξετε εφέ μετάβασης που θα εμφανίζονται στους χρήστες ενώ κάνουν κύλιση στο περιεχόμενο που φορτώνει.

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

BJ Lazy Load

ΤΙΜΗ: Δωρεάν

BJ Lazy Load

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

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

Εμφανίστε τις εικόνες πριν και μετά με έναν ελκυστικό τρόπο

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

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

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

Είκοσι είκοσι

ΤΙΜΗ: δωρεάν

Είκοσι είκοσι

Το Twenty Twenty είναι το όνομα αυτού του καταπληκτικού plugin το οποίο μπορείτε να κατεβάσετε δωρεάν στο αποθετήριο WordPress plugin.

Η προσθήκη θα σας επιτρέψει να τοποθετήσετε μια εικόνα πάνω από την άλλη και να σας αφήσει να παίξετε με ένα ρυθμιστικό, ώστε να μπορείτε να αποκρύψετε / να αποκαλύψετε την εικόνα. Παρακαλώ, δείτε την επίδειξη και θα δείτε τι μιλάμε.

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

  1. Δημιουργήστε νέα ανάρτηση ή ανοίξτε την υπάρχουσα
  2. Εισαγάγετε δύο εικόνες στην ανάρτηση. Εάν εργάζεστε σε ένα Visual Editor, θα πρέπει να βλέπετε την εικόνα πάνω από την άλλη. Εάν εργάζεστε σε ένα πρόγραμμα επεξεργασίας κειμένου, θα πρέπει να δείτε έναν κωδικό παρόμοιο με αυτό:
  3. 
    
    
    
  4. Εισαγάγετε την ετικέτα [είκοσι είκοσι] πριν από την πρώτη εικόνα
  5. Μετά το δεύτερο εισάγετε [/ είκοσι είκοσι] ετικέτα
  6. Θα πρέπει να καταλήξετε με κάτι τέτοιο στον Επεξεργαστή κειμένου:

    [είκοσι είκοσι]
    
    
    
    [/ είκοσι είκοσι]
    
  7. Βεβαιωθείτε ότι οι φωτογραφίες σας έχουν το ίδιο μέγεθος για να επιτύχετε τα καλύτερα αποτελέσματα
  8. Προεπισκόπηση ή δημοσίευση της ανάρτησής σας και απολαύστε τις οπτικά εντυπωσιακές σας φωτογραφίες πριν και μετά

Πώς να δημιουργήσετε διαδραστικές εικόνες – σχεδιάστε, προσθέστε περιγραφές και συνδέσμους

Σήμερα, είναι δύσκολο να τρέξετε έναν ιστότοπο χωρίς πολυμέσα. Οι εικόνες, τα βίντεο και η μουσική αποτελούν μέρος σχεδόν κάθε ιστότοπου. Ένας μέσος χρήστης του Διαδικτύου εξαρτάται σε μεγάλο βαθμό από τα οπτικά ερεθίσματα, επομένως πρέπει να φροντίσετε τα οπτικά και τα διαδραστικά μέρη του ιστότοπού σας. Λαμβάνουν άρθρα με εικόνες 94% περισσότερες προβολές από αυτά χωρίς ένα. Επίσης, είναι ήδη γνωστό ότι τα πολυμέσα σε ιστότοπους μπορούν να ενισχύσουν την απόδοση επένδυσης περιεχομένου.

Ελπίζουμε ότι δεν χρειάζεται να σας πείσουμε να φροντίσετε τις εικόνες στον ιστότοπό σας. Ακόμα κι αν δεν χρησιμοποιείτε εικόνες σε άρθρα (που πρέπει), χρησιμοποιείτε επιλεγμένες εικόνες, έτσι; Υπάρχουν πάρα πολλές προσθήκες γκαλερί που μπορούν να σας βοηθήσουν να διαχειριστείτε εικόνες στον ιστότοπό σας στο WordPress, μπορείτε να έχετε θέματα που σχετίζονται με τη φωτογραφία, να συνδέσετε το Instagram με τον ιστότοπό σας στο WordPress και να κάνετε πολλά περισσότερα. Τι γίνεται όμως αν θέλετε να δημιουργήσετε πιο διαδραστικό περιεχόμενο?

Για αρχάριους, μπορεί να σας ενδιαφέρει να προσθέσετε εφέ εικόνας πριν και μετά που θα λατρέψουν οι χρήστες σας. Μην ξεχνάτε την Εικονική Πραγματικότητα στο WordPress, η οποία γίνεται πιο δημοφιλής αφού η Automattic παρουσίασε το VR στο WordPress.com. Ακόμα, λείπει κάτι. Είναι δυνατή η δημιουργία διαδραστικών εικόνων με μέρη με δυνατότητα κλικ; Ναι, αυτό είναι δυνατό και πρόκειται να σας δείξουμε πόσο διασκεδαστικό και εύκολο είναι.

Τραβώ την προσοχή

ΤΙΜΗ: Δωρεάν
ΔΙΑΔΗΛΩΣΗ

Το πρώτο πράγμα σχετικά με αυτό το πρόσθετο που θέλετε είναι ότι είναι εντελώς δωρεάν! Όπως και με οποιοδήποτε άλλο πρόσθετο από το αποθετήριο WordPress, μπορείτε να το κατεβάσετε, να το εγκαταστήσετε και να το ενεργοποιήσετε μέσα σε λίγα λεπτά. Η δωρεάν έκδοση θα σας επιτρέψει να εργαστείτε με μια διαδραστική εικόνα. Αν θέλετε περισσότερα, θα πρέπει να επιλέξετε την έκδοση PRO, αλλά θα το συζητήσουμε αργότερα.

Η προσθήκη ανταποκρίνεται και δεν χρειάζεται να ανησυχείτε για την σωστή εμφάνιση των διαδραστικών εικόνων σε οποιαδήποτε συσκευή. Όχι μόνο ότι η εικόνα θα κλιμακωθεί σύμφωνα με το μέγεθος της οθόνης, αλλά θα λειτουργήσει στα περισσότερα σύγχρονα και παλαιότερα προγράμματα περιήγησης (επιτραπέζιοι και κινητές συσκευές). Το Draw Attention χρησιμοποιεί στοιχεία καμβά όταν εμφανίζονται σε νέα προγράμματα περιήγησης ενώ θα επιστρέψει στους χάρτες εικόνων εάν το φορτώσετε σε παλαιότερο.

Χαρακτηριστικά

Πριν φτάσετε σε ένα παράδειγμα που θα σας δείξει πόσο ισχυρή είναι αυτή η απλή προσθήκη, ας δούμε τι να περιμένετε από το Draw Attention:

  • Σχεδιάζω – Αφού ανεβάσετε μια εικόνα, θα έχετε την ευκαιρία να σχεδιάσετε σχήματα πάνω της. Επιλέξτε οποιοδήποτε μέρος της εικόνας σας που θα γίνει επιλέξιμο / κλικ
  • Χρωματιστά – Προσαρμόστε τα χρώματα, ώστε να μπορείτε να προσαρμόσετε τα hotspots με το σχεδιασμό του ιστότοπού σας
  • Επισήμανση στο δείκτη – Εμφάνιση ενός άλλου μέρους της εικόνας εάν ένας χρήστης αιωρείται πάνω από το επιλεγμένο τμήμα
  • Εμφάνιση περισσότερων πληροφοριών – Εμφάνιση περισσότερων πληροφοριών σχετικά με το επιλεγμένο τμήμα της εικόνας
  • Μεταβείτε στη διεύθυνση URL – Ανακατευθύνετε τους χρήστες σε οποιαδήποτε διεύθυνση URL εάν κάνουν κλικ στην επιλογή

Σχεδίαση ρυθμίσεων προσοχής

Παράδειγμα – Διαδραστικός χάρτης της Χαβάης

Θα χρησιμοποιήσουμε το παράδειγμα από τον ιστότοπο επίδειξης για να σας δείξουμε τι ακριβώς μπορείτε να κάνετε με το Draw Attention. Ας δούμε λοιπόν πώς φαίνεται ένας διαδραστικός χάρτης της Χαβάης όταν δημιουργείται με την προσθήκη.

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

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

Draw Attention - πώς να δημιουργήσετε διαδραστικές εικόνες στο WordPress

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

Έτσι, σε αυτό το παράδειγμα, θα πρέπει να επιλέξετε ένα από τα νησιά. Επιλέξτε έναν τίτλο για το νησί, προσθέστε μια περιγραφή και την επιπλέον εικόνα που θα εμφανιστεί μόλις ένας χρήστης αιωρήσει το hotspot (δεξιά μέρος της εικόνας GIF που φαίνεται παραπάνω).

Θα πρέπει να επαναλάβετε τη διαδικασία για κάθε ένα από τα νησιά που θέλετε να είστε διαδραστικοί. Μόλις ετοιμάσετε τα hotspots, απλώς αντιγράψτε τον σύντομο κωδικό από τη δεξιά πλευρά. Επικολλήστε τον σύντομο κώδικα σε μια ανάρτηση, σελίδα, widget ή οπουδήποτε θέλετε να εμφανιστεί ο νέος διαδραστικός χάρτης σας και τελειώσατε! Εάν θέλετε να ανακατευθύνετε τους χρήστες σε οποιαδήποτε άλλη σελίδα μόλις κάνουν κλικ στις επιλογές, απλά πρέπει να επιλέξετε τη διεύθυνση URL αντί για την περιγραφή. Εύκολο!

Έκδοση PRO

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

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

Υπάρχουν επίσης είκοσι προκαθορισμένες παλέτες χρωμάτων, επομένως δεν χρειάζεται να προσαρμόζετε κάθε χρώμα χειροκίνητα. Η έκδοση PRO θα σας κοστίσει 74 $ για μια άδεια μίας τοποθεσίας, αλλά αν χρειάζεστε περισσότερες από μία διαδραστικές εικόνες, αυτό θα είναι απαράδεκτο.

Πώς να αναδημιουργήσετε πρόσθετα μεγέθη εικόνας

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

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

Αναγέννηση μικρογραφιών:

ΤΙΜΗ: Δωρεάν
  1. Παω σε Πρόσθετα-> Προσθήκη νέου
  2. Αναζήτηση για “Αναγέννηση μικρογραφιών”
  3. Εγκαταστήστε και ενεργοποιήστε την προσθήκη
  4. Μεταβείτε στο Εργαλεία-> Regen.Thumbnails

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

Πώς να αναδημιουργήσετε πρόσθετα μεγέθη εικόνας

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

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

Αυτό είναι. Απολαύστε τις νέες μικρογραφίες σας ή ρίξτε μια ματιά Απλά μεγέθη εικόνας πρόσθετο που μπορεί να κάνει το ίδιο πράγμα.

Καταργήστε τα χαρακτηριστικά εικόνας πλάτους και ύψους με το jQuery

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

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

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

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

Κατάργηση χαρακτηριστικών εικόνας πλάτους και ύψους:

  1. Ανοίξτε το αρχείο header.php από το φάκελο θέματος
  2. Αντιγράψτε και επικολλήστε αυτόν τον κωδικό οπουδήποτε μεταξύ και ετικέτες:
  3.  
  4. Αποθήκευσε τις αλλαγές

Και τελειώσατε! Ο κώδικας θα κάνει τη μαγεία του αφού ανοίξετε μια ανάρτηση που περιέχει μια εικόνα και θα αφαιρέσει ετικέτες πλάτους και ύψους από αυτήν.

Πώς να δημιουργήσετε προσαρμοσμένα μεγέθη εικόνας στο Media Uploader

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

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

Στην πραγματικότητα, δεν χρειάζεται να το κάνετε αυτό. Υπάρχει μια τακτοποιημένη μικρή λειτουργία που ονομάζεται add_image_size (), η οποία είναι ένα εξαιρετικό εργαλείο για προγραμματιστές. Και μετά από αυτό το άρθρο, θα το βρείτε επίσης χρήσιμο.

Ας υποθέσουμε ότι το θέμα σας έχει προσαρμοσμένο πλάτος και θέλετε να ενσωματώσετε εύκολα εικόνες ώστε να ταιριάζουν τέλεια εκεί. Ας υποθέσουμε ότι το πλάτος είναι 666 εικονοστοιχεία (δεν θα εξετάσουμε γιατί έχετε ορίσει το πλάτος σε αυτόν τον αριθμό, είναι η επιλογή σας). Για να το κάνετε αυτό, πρέπει να προσθέσετε ένα επιπλέον κουμπί επιλογής στο Media Uploader. Με τον παρακάτω κώδικα, θα προσθέσετε ένα ακόμη μέγεθος που είναι το μισό μέγεθος του αρχικού.

  1. Ανοίξτε το αρχείο functions.php
  2. Αντιγράψτε και επικολλήστε αυτό το κομμάτι κώδικα:
  3. συνάρτηση custom_image_sizes () {
    add_image_size ("one-size", 333, 333, true);
    add_image_size ("άλλο μέγεθος", 666, 666, true);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    function show_image_sizes (μεγέθη $) {
    $ size ['one-size'] = __ ('Προσαρμοσμένο μέγεθος 1', 'isitwp');
    $ size ['another-size'] = __ ('Προσαρμοσμένο μέγεθος 2', 'isitwp');
    επιστρέψτε τα μεγέθη $;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Αποθήκευσε τις αλλαγές
  5. Δοκιμάστε να προσθέσετε μια εικόνα από το Media Uploader όπου θα πρέπει να βλέπετε τις νέες επιλογές μεγέθους στην ενότητα “Ρυθμίσεις εμφάνισης συνημμένου”

Δημιουργήστε αυτόματο στιγμιότυπο οθόνης από οποιονδήποτε ιστότοπο και δημοσιεύστε τον ως εικόνα στην ανάρτησή σας

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

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

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

Δημιουργήστε αυτόματο στιγμιότυπο οθόνης:

  1. Ανοίξτε το functions.php
  2. Αντιγράψτε και επικολλήστε τον ακόλουθο κώδικα:
  3. συνάρτηση wp_webscreen ($ atts, $ content = NULL) {
    απόσπασμα (shortcode_atts (πίνακας (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // πλάτος
    "h" => '450' // ύψος
    ), $ atts));
    
    $ img = '";
    επιστροφή $ img;
    }
    add_shortcode ("οθόνη", "wp_webscreen");
  4. Αλλαγή προεπιλεγμένων μεταβλητών στον πίνακα
  5. Αποθήκευσε τις αλλαγές

Αυτή η λειτουργία δημιουργεί έναν σύντομο κωδικό που μπορείτε εύκολα να χρησιμοποιήσετε οπουδήποτε στον ιστότοπο του WordPress. Είτε θέλετε να χρησιμοποιήσετε το στιγμιότυπο οθόνης μιας ιστοσελίδας σε μια ανάρτηση, ένα widget πλαϊνής γραμμής ή το υποσέλιδο σας, για παράδειγμα, απλώς c / p ο σύντομος κωδικός στο σωστό σημείο:

[οθόνη url = “http://www.firstsiteguide.com” alt = “fsg” w = “600 ″ h =” 450 ″]

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

Σημειώστε ότι μπορείτε να αλλάξετε τις παραμέτρους του σύντομου κώδικα από αυτό. Δεν χρειάζεται να τροποποιήσετε τον κώδικα στο αρχείο functions.php εάν θέλετε να τραβήξετε το στιγμιότυπο άλλης διεύθυνσης URL ή να τραβήξετε το στιγμιότυπο σε διαφορετική διάσταση.

Παράδειγμα:

Ας υποθέσουμε ότι θέλετε να τραβήξετε ένα στιγμιότυπο οθόνης του Google και να το μεγαλώσετε 200 × 400 εικονοστοιχεία:

[οθόνη url = “http://www.google.com” alt = “Google” w = “200 ″ h =” 400 ″]

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

συμπέρασμα

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map