Gutenberg Blocks: Τι είναι και πώς να τα χρησιμοποιήσετε στο WordPress
Θα κυκλοφορήσει στις 6 Δεκεμβρίου 2018, WordPress 5.0 φέρνει μαζί μια σημαντική ενημέρωση – το νέο πρόγραμμα επεξεργασίας του Gutenberg. Αν θέλετε να αξιοποιήσετε στο έπακρο αυτό το εργαλείο, θα πρέπει να μάθετε για το σύστημα μπλοκ Gutenberg.
Το Gutenberg σας βοηθά να δημιουργήσετε περιεχόμενο με πιο οπτικό τρόπο από τον προηγούμενο επεξεργαστή TinyMCE. Για να γίνει αυτό, παρέχει μια βιβλιοθήκη προκατασκευασμένων στοιχείων ή «μπλοκ». Κάθε μπλοκ μπορεί να προστεθεί σε μια σελίδα ή μια ανάρτηση και να προσαρμοστεί. Υπάρχουν μπλοκ για τη διαχείριση βασικών στοιχείων όπως κείμενο και εικόνες, καθώς και ορισμένα που παρέχουν προηγμένες δυνατότητες (όπως κουμπιά και πίνακες).
Contents
Πώς να χρησιμοποιήσετε μπλοκ Gutenberg για να δημιουργήσετε μια ανάρτηση WordPress (σε 3 βήματα)
Υποθέτοντας ότι έχετε ενημερώσει τον ιστότοπό σας σε WordPress 5.0, ο ιστότοπός σας θα πρέπει να χρησιμοποιεί το νέο πρόγραμμα επεξεργασίας Gutenberg από προεπιλογή.
Το μόνο που μένει είναι να μάθουμε πώς να εφαρμόζουμε το νέο σύστημα μπλοκ Gutenberg!
Θα παρουσιάσουμε τις βασικές δυνατότητες του προγράμματος επεξεργασίας, καθοδηγώντας σας πώς θέλετε να δημιουργήσετε μια βασική ανάρτηση στο WordPress, αλλά μπορείτε να χρησιμοποιήσετε την ίδια προσέγγιση ανεξάρτητα από το είδος του περιεχομένου που δημιουργείτε με το Gutenberg.
Βήμα 1: Προσθέστε ένα μπλοκ στην ανάρτησή σας
Το πρώτο πράγμα που θέλετε να κάνετε είναι να δώσετε έναν τίτλο στην ανάρτησή σας, χρησιμοποιώντας το ειδικό πεδίο στην κορυφή του προγράμματος επεξεργασίας:
Αυτό λειτουργεί ακριβώς με τον ίδιο τρόπο όπως και στον κλασικό επεξεργαστή. Μετά από αυτό, ωστόσο, τα πράγματα αρχίζουν να αλλάζουν.
Εάν τοποθετήσετε το δείκτη του ποντικιού πάνω από την περιοχή ακριβώς κάτω από τον τίτλο της ανάρτησής σας, θα δείτε μερικά εικονίδια:
ο Συν Το εικονίδιο σας επιτρέπει να επιλέξετε μπλοκ Gutenberg και να τα προσθέσετε στην ανάρτησή σας. Στα δεξιά, υπάρχουν επίσης επιλογές για γρήγορη προσθήκη των πιο συχνά χρησιμοποιούμενων μπλοκ – των επιλογών κειμένου, εικόνας και συλλογής.
Προς το παρόν, κάντε κλικ στο Συν εικονίδιο και θα δείτε ένα νέο μενού:
Αυτό το μενού απαριθμεί όλα τα μπλοκ Gutenberg που περιλαμβάνει ο επεξεργαστής. Υπάρχει μια ενότητα στην κορυφή με τη δική σας Περισσότερο χρησιμοποιημένο επιλογές, μια σειρά οργανωμένων κατηγοριών από κάτω, ακόμη και μια γραμμή αναζήτησης για να σας βοηθήσουν να βρείτε αυτό που χρειάζεστε γρήγορα.
Για να προσθέσετε ένα μπλοκ στην ανάρτησή σας, πρέπει απλώς να το βρείτε και να κάνετε κλικ σε αυτό. Ας ξεκινήσουμε απλό, με ένα Παράγραφος ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Τοποθετήστε το μπλοκ στην ανάρτησή σας και μετά προχωρήστε στο επόμενο βήμα (Μπορείτε επίσης να δημιουργήσετε ένα μπλοκ παραγράφων απλά πληκτρολογώντας τον επεξεργαστή).
Βήμα 2: Προσαρμόστε το μπλοκ σας
Όταν προσθέτετε ένα μπλοκ παραγράφων, δεν μοιάζει πολύ αμέσως. Ωστόσο, μόλις αρχίσετε να πληκτρολογείτε στο πεδίο, θα εμφανιστούν νέες επιλογές:
Θα δείτε μερικές βασικές ρυθμίσεις μορφοποίησης, όπως στοίχιση, έντονη γραφή και πλάγιους χαρακτήρες. Επιπλέον, ελέγξτε τη δεξιά πλευρική γραμμή της οθόνης επεξεργασίας:
Εκεί, θα βρείτε περισσότερες επιλογές για συγκεκριμένους αποκλεισμούς. Σε αυτήν την περίπτωση, μπορείτε να αλλάξετε το μέγεθος και το χρώμα της γραμματοσειράς του κειμένου, να προσθέσετε ένα καπάκι και ακόμη και να συμπεριλάβετε κάποιο προσαρμοσμένο CSS (στο Προχωρημένος μενού). Τυχόν αλλαγές που κάνετε, είτε εδώ είτε στο ίδιο το μπλοκ, θα είναι άμεσα ορατές.
Κάθε ένα από τα μπλοκ Gutenberg που προσφέρεται διαθέτει τις δικές του μοναδικές ρυθμίσεις.
Για παράδειγμα, αν πατήσετε Εισαγω, θα προσθέσετε ένα νέο μπλοκ κάτω από το μπλοκ παραγράφων. Ωστόσο, αυτή τη φορά μπορείτε να δοκιμάσετε να προσθέσετε ένα μπλοκ εικόνας χρησιμοποιώντας το ίδιο Συν σημάδι:
Όπως μπορείτε να δείτε, μπορείτε να ανεβάσετε μια εικόνα ή να προσθέσετε μια που είναι ήδη στη βιβλιοθήκη πολυμέσων σας. Μπορείτε να επεξεργαστείτε την εικόνα, να αλλάξετε την ευθυγράμμισή της και να προσθέσετε CSS στην πλευρική γραμμή.
Δεν υπάρχει αμφιβολία ότι θα χρησιμοποιήσετε πολλές παραγράφους και μπλοκ εικόνας. Ωστόσο, ο Gutenberg έχει περισσότερα να προσφέρει. Υπάρχει επίσης ένας αριθμός μπλοκ Gutenberg που προσφέρουν νέες επιλογές που δεν είναι διαθέσιμες στον κλασικό επεξεργαστή.
Για παράδειγμα, μπορείτε να προσθέσετε ένα Κουμπί αποκλεισμός στην ανάρτησή σας:
Αυτό δημιουργεί ένα κουμπί με δυνατότητα κλικ για να αλληλεπιδρούν οι επισκέπτες. Μπορείτε να επεξεργαστείτε το κείμενο του ίδιου του κουμπιού και να συμπεριλάβετε τη διεύθυνση URL στην οποία θα συνδεθεί ακριβώς παρακάτω:
Επιλέγοντας το εικονίδιο στην επάνω αριστερή γωνία του μπλοκ, μπορείτε να αλλάξετε το στυλ του κουμπιού σας:
Επιπλέον, μπορείτε να αλλάξετε και τα χρώματα φόντου και κειμένου στην πλευρική γραμμή. Αν και αυτό δεν είναι ένα τεράστιο φάσμα επιλογών, αρκεί να δημιουργήσετε ένα εύχρηστο προσαρμοσμένο κουμπί, το οποίο μπορείτε να χρησιμοποιήσετε για να ενθαρρύνετε τους επισκέπτες να εγγραφούν σε μια λίστα email, να αγοράσουν ένα προϊόν ή οτιδήποτε άλλο εντυπωσιάζει..
Βήμα 3: Βάλτε τις τελευταίες πινελιές στην ανάρτησή σας
Μόλις προσθέσετε μερικά μπλοκ, ενδέχεται να θέλετε να κάνετε κάποιες αλλαγές. Ευτυχώς, το πρόγραμμα επεξεργασίας του Gutenberg είναι αρκετά ευέλικτο στο να σας επιτρέπει να τροποποιήσετε τη διάταξη του περιεχομένου σας.
Εάν θέλετε να διαγράψετε ένα μπλοκ, για παράδειγμα, μπορείτε να επιλέξετε το Επιλογές εικονίδιο πάνω από αυτό και κάντε κλικ στο Κατάργηση μπλοκ:
Τοποθετώντας το δείκτη του ποντικιού πάνω από ένα μπλοκ, μπορείτε να χρησιμοποιήσετε τα πάνω και κάτω βέλη για να αναδιατάξετε τα μπλοκ κατά βούληση. Ή, μπορείτε επίσης να κάνετε κλικ στο έξι κουκκίδες ανάμεσα στα βέλη για χρήση drag and drop για να μετακινήσετε ένα μπλοκ:
Αξίζει επίσης να σημειωθεί ότι μπορείτε να δημιουργήσετε διατάξεις πολλών στηλών. Αυτό είναι ένα συναρπαστικό χαρακτηριστικό, αν και εξακολουθεί να βρίσκεται σε έκδοση beta κατά τη στιγμή αυτής της γραφής. Μπορείτε να αποκτήσετε πρόσβαση σε αυτό τοποθετώντας ένα Στήλες αποκλεισμός στην ανάρτησή σας:
Αυτό σας επιτρέπει να δημιουργήσετε έως και έξι στήλες δίπλα-δίπλα και να τοποθετήσετε ό, τι μπλοκ θέλετε σε κάθε μία. Είναι μια επιλογή που προσφέρει πολλές δυνατότητες για τη δημιουργία μοναδικών διατάξεων.
Τέλος, είναι σημαντικό να σημειώσετε ότι εξακολουθείτε να έχετε πρόσβαση σε ρυθμίσεις μετά το πλάτος (ή σε ολόκληρη τη σελίδα). Στη δεξιά πλευρική γραμμή, κάντε κλικ στο Εγγραφο καρτέλα για να τα βρείτε:
Εδώ, θα βρείτε τις περισσότερες από τις επιλογές που γνωρίζετε. Μπορείτε να δημοσιεύσετε την ανάρτηση, να ορίσετε έναν συντάκτη, να επιλέξετε κατηγορίες και ετικέτες, να προσθέσετε μια επιλεγμένη εικόνα και ούτω καθεξής. Μπορείτε ακόμη και να τροποποιήσετε τις ρυθμίσεις σχολίων στο Συζήτηση μενού. Ωστόσο, δεν θα χρειαστεί να αποθηκεύσετε το περιεχόμενό σας, καθώς θα αποθηκεύεται αυτόματα σε συχνά διαστήματα ενώ εργάζεστε.
Αυτό είναι το μόνο που πρέπει να γνωρίζετε για να χρησιμοποιήσετε το σύστημα μπλοκ Gutenberg! Είναι γρήγορο να πάρει, αλλά υπάρχουν πολύ περισσότερες επιλογές από ό, τι έχουμε καλύψει εδώ. Σας ενθαρρύνουμε να συνεχίσετε να πειραματίζεστε με τα διάφορα διαθέσιμα μπλοκ Gutenberg και να νιώθετε άνετα με τις επιλογές που προσφέρονται (οπότε θα είστε έτοιμοι όταν ξεκινά ο πραγματικός συντάκτης).
Μπορείτε επίσης να χρησιμοποιήσετε προσθήκες για να προσθέσετε νέα μπλοκ
Ένα από τα πιο ισχυρά πράγματα για το Gutenberg είναι ότι χρησιμοποιείτε πρόσθετα για να προσθέσετε όλα τα είδη νέων μπλοκ στον επεξεργαστή. Στην πραγματικότητα, ορισμένα από τα αγαπημένα σας πρόσθετα μπορεί να έχουν ήδη προσθέσει τα δικά τους μπλοκ.
Για παράδειγμα, ορισμένες προσθήκες γκαλερί σας επιτρέπουν τώρα να εισαγάγετε μια συλλογή χρησιμοποιώντας ένα μπλοκ, αντί για την παλιά μέθοδο σύντομου κώδικα που χρησιμοποιούσαν πολλές προσθήκες.
Πέρα από αυτό, μπορείτε επίσης να βρείτε τόνους προσθηκών που εστιάζονται αποκλειστικά στην προσθήκη νέων μπλοκ. Για παράδειγμα, η προσθήκη Otter Blocks σας παρέχει μπλοκ για:
- Πίνακες τιμών
- Μαρτυρίες
- Κοινή χρήση εικονιδίων με παρότρυνση για δράση
- Πολύ περισσότερα
Υπάρχουν πολλά άλλα πρόσθετα μπλοκ Gutenberg που μπορείτε να βρείτε και στο WordPress.org.
Ένα άλλο πρόσθετο που αξίζει να αναφερθεί είναι το πρόσθετο Cloud Blocks. Ενώ είναι ακόμα σε έκδοση beta, προσφέρει μια ενδιαφέρουσα προσέγγιση που σας επιτρέπει να εγκαταστήσετε μπλοκ Gutenberg από προγραμματιστές τρίτων “από το cloud”.
συμπέρασμα
Με την κυκλοφορία του WordPress 5.0, το Gutenberg αναμένεται να γίνει ο προεπιλεγμένος επεξεργαστής για όλους τους ιστότοπους του WordPress (εκτός αν χρησιμοποιείτε την προσθήκη Classic Editor).
Ευτυχώς, η δημιουργία περιεχομένου στο Gutenberg είναι πολύ απλή. Απλά πρέπει:
- Προσθέστε ό, τι μπλοκ Gutenberg θέλετε στην ανάρτηση ή τη σελίδα σας.
- Προσαρμόστε τις μεμονωμένες ρυθμίσεις κάθε μπλοκ.
- Αναδιατάξτε μπλοκ, διαγράψτε τα και ακόμη και οργανώστε τα σε στήλες αν θέλετε.
Και αν θέλετε ακόμη περισσότερα μπλοκ να χρησιμοποιηθούν στα σχέδιά σας, σκεφτείτε να προσθέσετε ένα από τα πολλά πρόσθετα μπλοκ Gutenberg.
Αν θέλετε πιο περιεκτικά σεμινάρια Gutenberg, έχουμε γράψει ένα πιο γενικό Gutenberg για νέα άτομα, καθώς και ένα λεπτομερές εκπαιδευτικό πρόγραμμα Gutenberg με μερικές προηγμένες συμβουλές παραγωγικότητας.
