Ο επεξεργαστής μπλοκ

Ενότητα 4: Δημιουργία περιεχομένου · Χρόνος ανάγνωσης: 8 λεπτά

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

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

Όλα είναι ένα μπλοκ

Από το WordPress 5.0 (τέλη του 2018) δημιουργείτε περιεχόμενο στον επεξεργαστή μπλοκ (γνωστό και ως Gutenberg, από το όνομα του project). Μια σελίδα αποτελείται από ξεχωριστά μπλοκ: έναν τίτλο, μια παράγραφο, μια εικόνα, ένα κουμπί, μια λίστα, έναν πίνακα, ένα ενσωματωμένο βίντεο. Κάθε μπλοκ έχει τις δικές του ρυθμίσεις. Τοποθετείτε τα μπλοκ το ένα κάτω από το άλλο, το ένα δίπλα στο άλλο (σε στήλες) ή το ένα μέσα στο άλλο (σε μια ομάδα).

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

Στο παρασκήνιο, το WordPress αποθηκεύει τα μπλοκ ως HTML με χαρακτήρες σχολίων πριν και μετά:

<!-- wp:heading -->
<h2 class="wp-block-heading">Ώρες λειτουργίας</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Είμαστε ανοιχτά από την Τρίτη έως και το Σάββατο.</p>
<!-- /wp:paragraph -->

Αυτό είναι χρήσιμο να το γνωρίζετε: το περιεχόμενο παραμένει αναγνώσιμη HTML, ακόμα κι αν αργότερα αλλάξετε θέμα εμφάνισης ή ένα μπλοκ δεν υπάρχει πια. Το βλέπετε αν σε ένα μπλοκ επιλέξετε «Επεξεργασία ως HTML», ή στον επεξεργαστή κώδικα (Ctrl+Shift+Alt+M).

Ο επεξεργαστής σε τρία μέρη

1. Ο καμβάς στο κέντρο: η σελίδα σας περίπου όπως θα εμφανιστεί.
2. Η γραμμή εργαλείων πάνω από ένα επιλεγμένο μπλοκ: έντονα, πλάγια, σύνδεσμος, στοίχιση, και η μετατροπή του μπλοκ σε άλλο τύπο (μια παράγραφος γίνεται λίστα, μια εικόνα γίνεται συλλογή εικόνων).
3. Η πλαϊνή στήλη στα δεξιά με δύο καρτέλες: Σελίδα (ή Άρθρο) με ρυθμίσεις για ολόκληρη τη σελίδα, και Μπλοκ με ρυθμίσεις του επιλεγμένου μπλοκ, όπως χρώμα, διάστημα και μέγεθος γραμματοσειράς.

Δύο εργαλεία που διευκολύνουν πολύ τη δουλειά σας:

• Προβολή λίστας (το εικονίδιο με τις τρεις γραμμές πάνω αριστερά): η δομή της σελίδας σας ως δέντρο. Με αυτήν επιλέγετε ακριβώς το μπλοκ που θέλετε, ακόμα κι αν βρίσκεται μέσα σε μια ομάδα μέσα σε μια στήλη.
• Εντολές με κάθετο (slash): πληκτρολογήστε σε μια κενή γραμμή / και το όνομα ενός μπλοκ (/heading, /button, /image) και πατήστε Εισαγωγή.

Δόμηση με ομάδες και στήλες

Μια καλή σελίδα έχει σαφή δομή. Για αυτό χρησιμοποιείτε τρία δομικά στοιχεία:

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

Χρησιμοποιήστε τους τίτλους με τον σωστό τρόπο: έναν H1 (τον τίτλο της σελίδας, που συνήθως τον δημιουργεί μόνο του το θέμα εμφάνισης), από κάτω H2 για τα κεφάλαια και H3 για τις υποενότητες μέσα σε αυτά. Μην επιλέγετε έναν τίτλο λόγω του μεγέθους της γραμματοσειράς· αυτό το προσαρμόζετε στις ρυθμίσεις μπλοκ. Οι αναγνώστες οθόνης και οι μηχανές αναζήτησης χρησιμοποιούν τους τίτλους για να κατανοήσουν τη σελίδα (μάθημα 9.2).

Μοτίβα: μην ξεκινάτε κάθε φορά από την αρχή

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

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

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

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

Αποθήκευση, δημοσίευση και προγραμματισμός

Μια σελίδα έχει μια κατάσταση:

Χρησιμοποιήστε την Προεπισκόπηση για να δείτε τη σελίδα όπως τη βλέπει ένας επισκέπτης, και σε κινητό και σε tablet, πριν τη δημοσιεύσετε.

Αναθεωρήσεις: πίσω στον χρόνο

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

Οι αναθεωρήσεις είναι το πρώτο σας δίχτυ ασφαλείας σε περίπτωση λάθους («κατά λάθος διέγραψα τη μισή σελίδα»). Όμως όλες αποθηκεύονται στη βάση δεδομένων. Ένας ιστότοπος με χιλιάδες αναθεωρήσεις γίνεται μεγαλύτερος και μερικές φορές πιο αργός. Μπορείτε να περιορίσετε τον αριθμό στο wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Το μάθημα 6.3 αφορά τον καθαρισμό παλαιών αναθεωρήσεων.

Πού σταματά ο επεξεργαστής

Ο επεξεργαστής μπλοκ δημιουργεί το περιεχόμενο μιας σελίδας. Ό,τι βρίσκεται γύρω από το περιεχόμενο (η κεφαλίδα του ιστότοπου, το μενού, το υποσέλιδο) ανήκει στο θέμα εμφάνισης. Σε ένα θέμα εμφάνισης με μπλοκ αυτό το επεξεργάζεστε στον Eπεξεργαστή ιστότοπου (Εμφάνιση > Επεξεργαστής) με τα ίδια μπλοκ· σε ένα κλασικό θέμα εμφάνισης στον Προσαρμογέα και στις Μικροεφαρμογές (μάθημα 5.1). Αν χρησιμοποιείτε ένα εργαλείο κατασκευής σελίδων όπως το Elementor ή το Divi, τότε δουλεύετε σε εκείνο το πρόγραμμα αντί για τον επεξεργαστή μπλοκ· τα μειονεκτήματα αυτού τα συζητά το μάθημα 5.1.

Σύνοψη

• Μια σελίδα αποτελείται από μπλοκ που τοποθετείτε το ένα κάτω, δίπλα και μέσα στο άλλο· το WordPress τα αποθηκεύει ως HTML με χαρακτήρες σχολίων.
• Η προβολή λίστας και οι εντολές με κάθετο κάνουν τη δόμηση γρήγορη και ακριβή.
• Χρησιμοποιήστε τίτλους για τη δομή (H2, H3), όχι για το μέγεθος της γραμματοσειράς.
• Τα μοτίβα εξοικονομούν δουλειά· ένα συγχρονισμένο μοτίβο αλλάζει παντού ταυτόχρονα.
• Προσχέδιο, προγραμματισμένο, ιδιωτικό και αναθεωρήσεις σάς δίνουν έλεγχο πάνω στο τι είναι ορατό πότε και έναν δρόμο επιστροφής.

Κουίζ

Άσκηση

Άσκηση D4.1: Δημιουργήστε μια σελίδα με μπλοκ. Δημιουργήστε μια σελίδα προσχεδίου «Σχετικά με εμάς» με: έναν H2 και έναν H3, τουλάχιστον δύο παραγράφους, μια εικόνα με alt-κείμενο, ένα μπλοκ στηλών με δύο στήλες, ένα κουμπί με σύνδεσμο, και ένα μοτίβο από τη βιβλιοθήκη. Μετατρέψτε μία ομάδα σε δικό σας συγχρονισμένο μοτίβο και εισαγάγετέ το σε μια δεύτερη σελίδα προσχεδίου. Στη συνέχεια προσαρμόστε το σε ένα σημείο και δείτε τι συμβαίνει στην άλλη σελίδα. Τέλος, επαναφέρετε μια προηγούμενη αναθεώρηση. Σημειώστε κάθε βήμα και περιγράψτε σε δύο προτάσεις πότε θα χρησιμοποιούσατε και πότε όχι ένα συγχρονισμένο μοτίβο.

Περαιτέρω ανάγνωση

Για την εργασία μέσα στο ίδιο το WordPress δεν έχουμε ακόμα δικά μας άρθρα· η επίσημη τεκμηρίωση του WordPress είναι εκτενής.

• Ο επεξεργαστής μπλοκ (wordpress.org, στα αγγλικά): https://wordpress.org/documentation/article/wordpress-block-editor/
• Μοτίβα (wordpress.org, στα αγγλικά): https://wordpress.org/documentation/article/block-pattern/
• Αναθεωρήσεις (wordpress.org, στα αγγλικά): https://wordpress.org/documentation/article/revisions/