Εργασία με μπλοκ εικόνας WordPress: Πώς να προσθέσετε εικόνες στο WordPress [+Μυστική συμβουλή]

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

1. Γιατί να χρησιμοποιήσετε το μπλοκ εικόνας WordPress
2. Πώς να προσθέσετε εικόνες με το μπλοκ εικόνας WordPress
3. Πρόσθετη διαδικασία μορφοποίησης εικόνων
4. Έξτρα συμβουλή από εμάς μέσα στο άρθρο

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

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

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

Γιατί το WordPress Image block είναι απαραίτητο για τον ιστότοπό σας

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

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

Για αυτόν τον λόγο πρέπει να χρησιμοποιήσουμε το μπλοκ εικόνας WordPress για να εστιάσουμε την προσοχή σε σημαντικά πράγματα.

Ενδεικτικό κείμενο και πλαίσιο

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

Κάντε την ιστοσελίδα πιο όμορφη

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

Πώς να προσθέσετε εικόνες στο πρόγραμμα επεξεργασίας μπλοκ WordPress

Για να εισαγάγετε μια εικόνα σε Δημοσίευση ή Σελίδα, πρέπει να προσθέσετε βασικό μπλοκ – Μπλοκ εικόνας. Υπάρχουν διάφοροι τρόποι για να το κάνετε:

– Χρησιμοποιώντας το «+» στην επάνω γραμμή ή οπουδήποτε στο πρόγραμμα επεξεργασίας

– Χρησιμοποιώντας κάθετο «/» και γράφοντας στη συνέχεια τη λέξη «εικόνα».

Θα δημιουργηθεί νέο μπλοκ όπου μπορείτε να προσθέσετε πραγματικές εικόνες.

Μεταφόρτωση εικόνων στο WordPress

Πώς να τοποθετήσετε τις εικόνες εκεί όπου θέλετε;

• Χρησιμοποιήστε το Upload και επιλέξτε μια εικόνα από τον σκληρό σας δίσκο
• Χρησιμοποιήστε τη Βιβλιοθήκη πολυμέσων, όπου μπορείτε να επιλέξετε εικόνες που έχουν ήδη μεταφορτωθεί στον ιστότοπό σας
• Χρησιμοποιήστε το ποντίκι και μεταφέρετε και αποθέστε την εικόνα
• Εισαγάγετε διεύθυνση URL εικόνας

Λιγότερο γνωστή μέθοδος προσθήκης εικόνων WordPress

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

• Αντιγράψτε εικόνα από οποιοδήποτε περιεχόμενο ή
• Απλώς «σύρετε» την εικόνα με τον κέρσορα του ποντικιού

Στη συνέχεια, εισαγάγετε ή μετακινήστε (απόθεση) την επιλεγμένη εικόνα στη θέση στην περιοχή περιεχομένου που θέλετε.

Την ίδια τεχνική που μπορείτε να χρησιμοποιήσετε και σε περίπτωση που θέλετε να επικολλήσετε μια εικόνα που τραβήχτηκε από την οθόνη σας. Χρειάζονται μόνο τρία απλά βήματα. Πρώτα, πρέπει να τραβήξετε ένα στιγμιότυπο οθόνης χρησιμοποιώντας τη δυνατότητα εκτύπωσης οθόνης. Για παράδειγμα, τα Windows 10 παρέχουν το προεπιλεγμένο εργαλείο Snippet που ονομάζεται Snip & Sketch, το οποίο είναι επίσης διαθέσιμο μέσω μιας συντόμευσης – απλώς πατήστε τα πλήκτρα Win+Shift+S μαζί στο πληκτρολόγιό σας. Στη συνέχεια, επιλέξτε την περιοχή της εικόνας που θέλετε να τραβήξετε. Το τελευταίο βήμα είναι να επικολλήσετε την αντιγραμμένη εικόνα (ή μέρος της) στην περιοχή περιεχομένου χρησιμοποιώντας τη βασική συντόμευση Ctrl+V.

Και τι συμβαίνει με την εικόνα WordPress που έχετε επικολλήσει στον επεξεργαστή σας; Λοιπόν, προστίθεται αυτόματα στη Βιβλιοθήκη πολυμέσων όπου μπορείτε να επεξεργαστείτε αυτήν την εικόνα.

Περιορισμένες επιλογές μεταδεδομένων εικόνας

Κατά την επεξεργασία εικόνας μπορείτε να ορίσετε τον τίτλο, τη λεζάντα, την περιγραφή και το εναλλακτικό κείμενο. Δυστυχώς, δεν μπορείτε να αλλάξετε το όνομα αρχείου εικόνας – θα διατηρήσει το όνομα που δημιουργείται αυτόματα, όπως π.χ image-1.png και ούτω καθεξής. Αυτός ο τύπος ονόματος αρχείου μπορεί να είναι λίγο μειονέκτημα όσον αφορά τη βελτιστοποίηση SEO λόγω σύγκρουσης με τις συστάσεις ονομασίας αρχείων. Επομένως, πρέπει να λάβετε υπόψη αυτήν την πτυχή πριν μετακινήσετε εικόνες WordPress στην περιοχή περιεχομένου.

Ευθυγράμμιση εικόνας

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

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

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

Νέο στυλ μπλοκ που μετατρέπει μια εικόνα σε σχήμα κύκλου

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

Νέες δυνατότητες στο μπλοκ Εικόνες WordPress (προστέθηκαν στο WP 5.3)

Υποστήριξη για εικόνες υψηλής ανάλυσης

Ένα από τα μεγαλύτερα χαρακτηριστικά του WP 5.3 είναι η βελτιωμένη επεξεργασία εικόνας στην πλατφόρμα WordPress. Η εργασία με εικόνες έχει πλέον δύο βασικά χαρακτηριστικά:

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

Ρυθμίσεις στο Inspector

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

Είναι πολύ γρήγορο και πρακτικό γιατί μπορείτε να κάνετε όλες τις αλλαγές μεγέθους εικόνας ακριβώς μέσα στο μπλοκ Εικόνες του WordPress και τα πάντα σε ένα μέρος στο πρόγραμμα επεξεργασίας μπλοκ.

Άλλες ρυθμίσεις μπλοκ εικόνων

Πώς να προσθέσετε διεύθυνση URL

Οι εικόνες μπορούν να χρησιμοποιηθούν ως στατικές εικόνες ή μπορούν επίσης να κάνουν κλικ και να συνδεθούν με:

•   Αρχείο πολυμέσων
•   Σελίδα συνημμένου
•   προσαρμοσμένη διεύθυνση URL

Πώς να επεξεργαστείτε εικόνα στο μπλοκ εικόνας WordPress

Κάθε εικόνα μπορεί να επεξεργαστεί αφού κάνετε κλικ στο εικονίδιο με το μολύβι. Θα ανοίξει το παράθυρο Modal με τη Βιβλιοθήκη πολυμέσων όπου μπορείτε να γράψετε εναλλακτικό κείμενο, τίτλο, λεζάντα και περιγραφή. Με τον ίδιο τρόπο που το έχετε ήδη συνηθίσει να το κάνετε στην παλαιότερη έκδοση του WordPress με τον κλασικό επεξεργαστή.

Γιατί είναι σημαντικό να συμπληρώνονται αυτά τα κείμενα;

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

Extra Tips

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

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

2 τρόποι για να προσθέσετε λεζάντα εικόνας

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

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

Σας αρέσει πόσο εύκολη είναι η προσθήκη εικόνων στο μπλοκ εικόνας του WordPress; Δοκιμάστε το μόνοι σας!

Μάθετε περισσότερα για το ολοκαίνουργιο θέμα Citadela WordPress και τα προσαρμοσμένα πακέτα διάταξης. Σχεδιάστηκαν και αναπτύχθηκαν ειδικά για διαφορετικούς τύπους επιχειρήσεων και υποστηρίζουν επίσης τον νέο τρόπο επεξεργασίας περιεχομένου μέσω του WordPress block editor.