Ρυθμίσεις ευθυγράμμισης εικόνων WordPress – Εξηγούνται!

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


Ας ρίξουμε μια ματιά σε κάθε ένα από αυτά με τη σειρά:

1. Στοίχιση αριστερά

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

Παράδειγμα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Στοίχιση αριστερά Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud άσκηση ullamco laboris nisi ut aliquip ex ea komodo συνέπεια. Duis aute irure dolor σε reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Ευθυγράμμιση στο κέντρο

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

Παράδειγμα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Στοίχιση στο κέντρο Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Ευθυγραμμίστε προς τα δεξιά

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

Παράδειγμα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Δεξιά στοίχιση εικόνας Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud άσκηση ullamco laboris nisi ut aliquip ex ea komodo συνέπεια. Duis aute irure dolor σε reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Ευθυγράμμιση Κανένα

Εικόνες που δεν έχουν εκχωρηθεί ευθυγράμμιση (εκχωρώντας τους μια ευθυγράμμιση “Κανένα”), θα κάθονται ακριβώς στο μέρος που τις εντοπίζετε – δηλαδή αν επιλέξετε να τοποθετήσετε μια εικόνα με μια ευθυγράμμιση του “Κανένα” μέσα σε μια παράγραφο κειμένου (δείτε το ακόλουθο παράδειγμα παρακάτω), θα τοποθετηθεί ευθυγραμμισμένο με αυτό το κείμενο, το οποίο θα έχει ως αποτέλεσμα να υπάρχει κείμενο τόσο στα αριστερά όσο και στα δεξιά της εικόνας (υποθέτοντας ότι η εικόνα δεν έχει το ίδιο πλάτος – ή ευρύτερο – από την περιοχή στο οποίο κάθεται **). Ωστόσο, με σύγχυση, μια εικόνα στην οποία ΔΕΝ έχουν εκχωρηθεί ευθυγράμμιση του “Κανένα” ΚΑΙ βρίσκεται εντός της δικής της παραγράφου (δηλαδή σε μια νέα γραμμή στον επεξεργαστή WordPress ή / και συγκεκριμένα σε ετικέτες HTML “p”) θα τοποθετηθεί αριστερά της περιοχής εντός της οποίας κατοικεί (με παρόμοιο τρόπο με αυτόν εάν θα είχε αφεθεί στοίχιση) αλλά χωρίς κείμενο στα δεξιά της. Γιατί; Επειδή μια εικόνα δεν έχει συγκεκριμένη ευθυγράμμιση (ή, από τεχνολογική άποψη: κανένα συγκεκριμένο αριστερό ή δεξιό «float») που βρίσκεται στην ίδια της την παράγραφο (χωρίς άλλα στοιχεία στην ίδια παράγραφο) θα διαχωριστεί και από τα δύο προηγούμενα και ακολουθώντας περιεχόμενο με γραμμές προκαθορισμένου λευκού χώρου – με τον ίδιο τρόπο που θα κάνει οποιαδήποτε άλλη παράγραφος!

Παράδειγμα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ευθυγράμμιση Κανένα Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Λοιπόν, τι πραγματικά συμβαίνει εδώ?

Γιατί συμβαίνουν όλα αυτά; Αυτό οφείλεται στην πραγματικότητα σε μια γλώσσα υπολογιστή που χρησιμοποιείται για να εκφράσει την παρουσίαση (διάταξη, διαστάσεις, χρώματα κ.λπ.) στοιχείων ιστού, γνωστά ως Cascading Style Sheets – ή “CSS” για συντομία. Στην ουσία, κάθε φορά που ορίζετε, ας πούμε, μια αριστερή στοίχιση σε μια εικόνα σε μια ανάρτηση ή σελίδα, για παράδειγμα, το WordPress προσθέτει ένα όνομα κλάσης HTML του “alignleft” στην εν λόγω εικόνα, το οποίο στη συνέχεια αναγκάζει αποτελεσματικά την εικόνα να αναφέρεται σε ένα συγκεκριμένο σύνολο προκαθορισμένων εντολών CSS που το λένε πού πρέπει να καθίσει στη σελίδα – απλή! Ομοίως, για καθεμία από τις άλλες ευθυγραμμίσεις που αναφέρονται, το WordPress εκχωρεί διαφορετικά ονόματα τάξεων – όπως “aligncenter” (για εικόνες που θα είναι κεντρική στοίχιση), “alignright” (για εικόνες που είναι σωστή στοίχιση) και “alignnone” (για εικόνες που είναι να μην έχει εκχωρηθεί συγκεκριμένη ευθυγράμμιση) – ότι κάθε αναφορά διαφορετικά σύνολα εντολών CSS.

Βεβαίως (δυστυχώς), η ιδέα να τυλίξετε το κεφάλι σας σε όλο τον κόσμο των εντολών CSS μπορεί να είναι κάτι παραπάνω από λίγο τρομακτικό για τον μέσο χρήστη του WordPress. Ωστόσο, εάν έχετε το ενδιαφέρον να μάθετε περισσότερα για αυτά, θα σας επιτρέψουν γρήγορα να αποκτήσετε έναν εντελώς νέο βαθμό ελευθερίας όσον αφορά το στυλ του περιεχομένου σας – ή ακόμα και ολόκληρου του ιστότοπού σας! Αν σας ενδιαφέρει να μάθετε, ρίξτε μια ματιά στην προηγούμενη ανάρτησή μας σχετικά με το καλύτερο που μπορείτε να μάθετε για την εκμάθηση CSS στο διαδίκτυο – ή, εναλλακτικά, απλώς επισκεφθείτε το καλό Google και πηγαίνετε άγρια! 😉

Περίληψη

Ορίστε λοιπόν: εξηγούνται οι ευθυγραμμίσεις εικόνας! Με λίγα λόγια: χρησιμοποιήστε μια αριστερή στοίχιση όταν θέλετε μια εικόνα να κάθεται στα αριστερά και άλλα στοιχεία (όπως κείμενο κ.λπ.) για να τυλίγεται γύρω από τα δεξιά. Χρησιμοποιήστε μια κεντρική ευθυγράμμιση όταν θέλετε μια εικόνα να βρίσκεται στο κέντρο / κέντρο του περιεχομένου σας χωρίς άλλα στοιχεία και στις δύο πλευρές. Χρησιμοποιήστε μια σωστή ευθυγράμμιση όταν θέλετε μια εικόνα να κάθεται στα δεξιά και άλλα γειτονικά στοιχεία ιστού για να τυλίγονται γύρω από τα αριστερά. και χρησιμοποιήστε μια ευθυγράμμιση «κανένας» εάν θέλετε η εικόνα σας να κάθεται ακριβώς εκεί που επιλέγετε να την τοποθετήσετε σε σχέση με τα γειτονικά της στοιχεία (π.χ. κείμενο κ.λπ.) – ΚΑΙ τέλος, εάν θέλετε μια εικόνα να βρίσκεται στα αριστερά του περιεχομένου -εραία εντός της οποίας κατοικεί ΑΛΛΑ δεν θέλω να εμφανίζεται κείμενο κλπ στα δεξιά του, εκχωρήστε στην εικόνα ευθυγράμμιση του «Κανένα» και βεβαιωθείτε ότι βρίσκεται στην ιδιωτική του παράγραφο!

* μέσω ενός αναπτυσσόμενου μενού που βρίσκεται κάτω δεξιά στο παράθυρο «Βιβλιοθήκη πολυμέσων» του WordPress, κάτω από την επικεφαλίδα «Ρυθμίσεις εμφάνισης συνημμένου».

** Σε αυτήν την περίπτωση, το κείμενο που κανονικά θα κάθονταν και στις δύο πλευρές του δεν θα έχει πουθενά αλλού εκτός από πάνω ή κάτω από την εικόνα – σημειώστε ότι τέτοιες περιπτώσεις μπορεί συχνά να οδηγήσουν σε σύγχυση μεταξύ των τεσσάρων ευθυγραμμίσεων, καθώς δεν υπάρχει χώρος για καμία άλλη κείμενο / στοιχεία και στις δύο πλευρές της εικόνας ουσιαστικά δεν θα κάνει καμία διαφορά ποια ευθυγράμμιση επιλέγετε να χρησιμοποιήσετε!

Χρήσιμος?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me