Βήμα προς βήμα Οδηγός για το Gutenberg Builder για WordPress

Βήμα προς βήμα Οδηγός για το Gutenberg Builder για WordPress

Νομίζω ότι θα συμφωνήσετε όταν λέω: Όλη αυτή η επιχείρηση Gutenberg προκαλεί σύγχυση.


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

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

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

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

Τι είναι ο Gutenberg Editor?

συντάκτης wordpress gutenberg

Βλέπετε τον Gutenberg, τον προεπιλεγμένο πρόγραμμα επεξεργασίας μπλοκ WordPress

Εάν χρησιμοποιείτε το WordPress 5.0 και άνω, πρέπει να έχετε συναντήσει τον νέο και λαμπερό επεξεργαστή WordPress, γνωστό ως Gutenberg.

Και όπως και πολλοί άλλοι χρήστες, θέλετε να χρησιμοποιήσετε τον επαναστατικό επεξεργαστή, αλλά είστε διστακτικοί επειδή ο Gutenberg είναι περίπλοκο.

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

Έτσι, επιστρέψατε γρήγορα στο Κλασικό πρόγραμμα επεξεργασίας, που, BTW, είναι εντάξει μαζί μας. Απλώς λάβετε υπόψη ότι το WordPress δεν θα υποστηρίξει το Classic Editor μετά το 2022. Επιπλέον, χάνετε όλες τις επιπλέον προσφορές του Gutenberg.

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

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

Όμως, τι ακριβώς είναι ο Gutenberg?

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

Διατίθεται με πιο διαισθητικά χαρακτηριστικά από το Classic Editor, πράγμα που σημαίνει ότι μπορείτε να δημιουργήσετε περιεχόμενο εμπλουτισμένων μέσων εν κινήσει. Τώρα, μπορείτε να δημιουργήσετε γρήγορα εκπληκτικές διατάξεις, είτε εργάζεστε με αναρτήσεις ή σελίδες του WordPress.

Και με μερικά πρόσθετα, ο Gutenberg μπορεί να ανταγωνιστεί ευνοϊκά με τους καθιερωμένους δημιουργούς σελίδων WordPress όπως οι Brizy, Elementor και Divi.

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

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

Είσαι έτοιμος? Εάν ναι, ας δημιουργήσουμε αυτήν την ανάρτηση WordPress.

Πώς να δημιουργήσετε μια θέση WordPress με το Gutenberg

Εάν εκτελείτε έναν ιστότοπο WordPress, πιθανότατα δημιουργείτε περισσότερες αναρτήσεις από σελίδες. Στην επόμενη ενότητα, δημιουργούμε μια ανάρτηση WordPress στο Gutenberg από το μηδέν. Ελπίζω να διασκεδάσετε τόσο πολύ όσο έκανα δοκιμές στο Gutenberg.

Εκτός αυτού, μεταβείτε στο Δημοσιεύσεις> Προσθήκη νέου όπως επισημαίνουμε στο παρακάτω στιγμιότυπο οθόνης.

δημιουργώντας μια νέα θέση στο gutenberg

Κάτι τέτοιο σας οδηγεί κατευθείαν στον επεξεργαστή Gutenberg που φαίνεται παρακάτω.

συντάκτης wordpress gutenberg

Αρκετά τακτοποιημένο, ε; Τώρα, ας σηκώσουμε αυτά τα μανίκια και να ξεκινήσουμε τις δραστηριότητές μας.

Προσθήκη τίτλου

προσθέτοντας έναν νέο τίτλο στο gutenberg

Δεν μπορείτε να γράψετε μια ανάρτηση χωρίς έναν σταθερό τίτλο. Το καλό είναι ότι ο Gutenberg το καθιστά απίστευτα εύκολο να προσθέσετε έναν τίτλο.

Το πρώτο μπλοκ που βλέπετε είναι το Τίτλος στο επάνω μέρος του εγγράφου όπως περιγράφουμε λεπτομερώς στην παραπάνω εικόνα. Για να δημιουργήσετε έναν τίτλο για την ανάρτησή σας, πληκτρολογήστε μέσα στο μπλοκ. Απλό όπως A, B, C.

Θέλετε να επεξεργαστείτε τον μόνιμο σύνδεσμο; Μπορείτε εύκολα να το κάνετε αυτό στο Τίτλος μπλοκ κάνοντας κλικ στο Επεξεργασία κουμπί όπως φαίνεται παρακάτω.

επεξεργασία post permalink στο gutenberg

Αφού προσθέσετε τον τίτλο σας, πατήστε το ΕΙΣΑΓΩ κλειδί για να ξεκινήσετε μια νέα γραμμή. Ω ναι, ο Gutenberg διατηρεί την εγγενή πλοήγηση που σας άρεσε στον κλασικό επεξεργαστή WordPress.

Προσθήκη νέας παραγράφου

νέο τμήμα παραγράφων στο gutenberg

Χτυπώντας το ΕΙΣΑΓΩ το κλειδί δημιουργεί ένα νέο Παράγραφος μπλοκ, όπως φαίνεται παραπάνω. Πριν πληκτρολογήσετε οποιοδήποτε κείμενο, το μπλοκ σας παρουσιάζει μερικές επιλογές. Δείτε την αριθμημένη εικόνα παρακάτω για περισσότερες λεπτομέρειες.

νέες επιλογές μπλοκ παραγράφου gutenberg

Σημειώσεις. Μπορείς:

  1. Μετατρέψτε το νέο μπλοκ παραγράφου σε οποιοδήποτε άλλο μπλοκ, π.χ. εικόνα, επικεφαλίδα, εξώφυλλο, γκαλερί, WooCommerce, φόρμα κ.λπ..
  2. Χρησιμοποιήστε τη συντόμευση για να αλλάξετε το μπλοκ παραγράφων σε ένα μπλοκ εικόνας
  3. Αλλάξτε το μπλοκ παραγράφων σε ένα μπλοκ επικεφαλίδων, δηλαδή, H2, H3 και H4
  4. Μεταμορφώστε το μπλοκ παραγράφων σε ένα εξώφυλλο εικόνας

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

Γραμμή εργαλείων μορφοποίησης παραγράφων gutenberg

Χάρη στη γραμμή εργαλείων μορφοποίησης, μπορείτε:

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

Μπορείτε να προσαρμόσετε περαιτέρω το μπλοκ παραγράφων με τις διαθέσιμες επιλογές στο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ καρτέλα που βρέθηκε στο μενού πλευρικής γραμμής, όπως φαίνεται παρακάτω.

Επιλογές πλευρικής γραμμής gutenberg για το τμήμα παραγράφων

Μερικές σημειώσεις για την παραπάνω εικόνα:

  1. Επιλέξτε το ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ καρτέλα εδώ για να δείτε όλες τις επιλογές και τις ρυθμίσεις μπλοκ
  2. Επιλέξτε το μέγεθος της γραμματοσειράς και ενεργοποιήστε το Drop Cap εδώ
  3. Προσθέστε το χρώμα φόντου στην παράγραφο σας. Το έβαλα σε μπλε για σκοπούς απεικόνισης. Μπορείτε επίσης να προσαρμόσετε το χρώμα του κειμένου. Και στις δύο περιπτώσεις, μπορείτε να προσθέσετε απεριόριστα προσαρμοσμένα χρώματα
  4. Μπορείτε να προσθέσετε μια προσαρμοσμένη τάξη CSS εδώ, που σημαίνει ότι μπορείτε να προσθέσετε επιπλέον στυλ CSS στο μπλοκ σας
  5. Το μπλε φόντο και το Drop Cap έχουν ήδη εφαρμοστεί στο πρόγραμμα επεξεργασίας του Gutenberg

Η καρτέλα εγγράφου στην πλευρική γραμμή

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

καρτέλα παραγράφου μπλοκ παραγράφου

Εδώ, οι σημειώσεις για την παραπάνω εικόνα:

  1. Κάντε κλικ εδώ για εναλλαγή στο Εγγραφο αυτί
  2. Εδώ μπορείτε να προγραμματίσετε μια ανάρτηση, να ορίσετε την ορατότητα και στα δύο Ιδιωτικός ή Δημόσιο, ορίστε μια ανάρτηση σε Εκκρεμεί ανασκόπηση κατάσταση, επιλέξτε τη μορφή ανάρτησης και δημιουργήστε μια κολλώδη ανάρτηση
  3. Η ενότητα σάς επιτρέπει να επεξεργαστείτε τον μόνιμο σύνδεσμό σας
  4. Μπορείτε να επιλέξετε ή να δημιουργήσετε νέες κατηγορίες εδώ
  5. Προσθέστε ετικέτες στην ανάρτησή σας
  6. Ορισμός επιλεγμένης εικόνας
  7. Δημιουργήστε ένα χειροκίνητο απόσπασμα
  8. Να επιτρέπονται σχόλια, pingbacks και trackbacks

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

Μετά την πρώτη παράγραφο, πατήστε το ΕΙΣΑΓΩ για να δημιουργήσετε μια νέα γραμμή (ή μπλοκ παραγράφων). Τώρα, ας προσθέσουμε μια εικόνα κάτω από την πρώτη παράγραφο.

Προσθήκη εικόνων στο Gutenberg

προσθέτοντας μια νέα εικόνα στο gutenberg

Λένε ότι μια εικόνα μιλά χίλιες λέξεις και μια ανάρτηση ιστολογίου χωρίς εικόνες είναι, λοιπόν, άθλια. Για να προσθέσετε μια εικόνα στην ανάρτηση του WordPress χρησιμοποιώντας το Gutenberg, έχετε μερικές επιλογές.

Όταν χτυπάτε το ΕΙΣΑΓΩ κλειδί πριν από λίγα λεπτά, ενεργοποιήσατε ένα νέο μπλοκ παραγράφων. Βλέποντας ότι το Gutenberg είναι διαισθητικό, μπορείτε να προσθέσετε μια εικόνα κάνοντας κλικ στα εικονίδια συν (+), εικόνας ή εξωφύλλου όπως επισημαίνουμε στην παρακάτω εικόνα.

προσθέτοντας μια νέα εικόνα στο πρόγραμμα επεξεργασίας gutenberg

Μερικές σημειώσεις:

  1. Μπορείτε να προσθέσετε μια εικόνα μέσω των εικονιδίων συν (+)
  2. Εδώ, μπορείτε να προσθέσετε μια εικόνα εύκολα
  3. Αυτή η επιλογή σας επιτρέπει να προσθέσετε ένα κάλυμμα image (Αυτές είναι συνήθως μεγαλύτερες από άλλες φωτογραφίες. Επιπλέον, μπορείτε να προσθέσετε κείμενο σε εικόνες εξωφύλλου, BTW)

Προχωρήστε και κάντε κλικ σε οποιοδήποτε από τα εικονίδια συν (+). Στη συνέχεια, κάντε κλικ στο Εικόνα καρτέλα, όπως φαίνεται παρακάτω.

προσθέτοντας εικόνες στο gutenberg

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

μπλοκ εικόνας gutenberg

ο Εικόνα Το μπλοκ σάς επιτρέπει να ανεβάσετε μια εικόνα ή να προσθέσετε μία από μια διεύθυνση URL ή τη βιβλιοθήκη πολυμέσων. Στη διαδικασία, μπορείτε να προσθέσετε κείμενο alt (σημαντικό για SEO), λεζάντα και περιγραφή μέσω των ρυθμίσεων της οθόνης πολυμέσων ή του ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ πλευρική γραμμή όπως φαίνεται στις ακόλουθες εικόνες.

Οι συνήθεις ρυθμίσεις πολυμέσων…

ρυθμίσεις πολυμέσων wordpress

…και το Εικόνα ρυθμίσεις μπλοκ.

ρυθμίσεις μπλοκ εικόνας gutenberg

Μαθαίνεις κάτι εδώ σήμερα; Το ελπίζω. Ας προχωρήσουμε.

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

Τρόπος προσθήκης αρχείων με δυνατότητα λήψης, π.χ. PDF, εικόνες, βίντεο κ.λπ.

Το Gutenberg το καθιστά εξαιρετικά εύκολο να προσθέσετε αρχεία με δυνατότητα λήψης στην ανάρτηση ή τη σελίδα του WordPress.

Σε ένα νέο Παράγραφος μπλοκ, κάντε κλικ στο εικονίδιο συν (+), μεταβείτε στο Κοινά μπλοκ και χτυπήστε το Αρχείο όπως επισημαίνουμε παρακάτω.

προσθέτοντας αρχεία με δυνατότητα λήψης στο gutenberg

Με αυτόν τον τρόπο ξεκινά το ακόλουθο μπλοκ:

μπλοκ αρχείων gutenberg

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

προσθήκη αρχείου στο gutenberg

Μπορείτε να παίξετε με τις επιλογές. Για παράδειγμα, μπορείτε να επεξεργαστείτε / διαγράψετε το “Δωρεάν λίστα ελέγχου Gutenberg PDFΤίτλος καθώς και το Κατεβάστε κουμπί. Μπορείτε να προσθέσετε μια κλάση CSS στο μπλοκ και να το στυλ όποιο τρόπο θέλετε.

Προσθήκη προσφοράς στο Gutenberg

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

προσθέτοντας αποσπάσματα στο gutenberg

Με αυτόν τον τρόπο προσθέτει το Παραθέτω, αναφορά μπλοκάρετε στην ανάρτησή σας, όπως τονίζουμε στο screengrab παρακάτω.

ρυθμίσεις μπλοκ παραπομπών gutenberg

Παρατηρήστε τις ρυθμίσεις μπλοκ προσφορών στην δεξιά πλευρική γραμμή παραπάνω?

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

απόσπασμα gutenberg

Φαίνεται απίστευτο, σωστά?

Προσθήκη ενσωματώσεων πολυμέσων στο Gutenberg

Το Gutenberg διαθέτει πολλά μπλοκ για την ενσωμάτωση βίντεο και άλλων μέσων από 30+ ιστότοπους όπως το YouTube, το Vimeo, το Facebook, το SoundCloud, το WordPress, το Slideshare και ούτω καθεξής..

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

gutenberg youtube ενσωμάτωση

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

μπλοκ ενσωμάτωσης gutenberg youtube

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

ενσωματωμένο βίντεο youtube στο gutenberg

Ομαλή ιστιοπλοΐα σε όλη τη διαδρομή. Τώρα, ας προσθέσουμε ένα αυτόνομο κουμπί που είναι ιδανικό για τη δημιουργία παρότρυνσης για δράση (CTA).

Πώς να προσθέσετε ένα κουμπί στο Gutenberg

Δεν πρέπει να δυσκολευτείτε να προσθέσετε μπλοκ σε αυτό το σημείο. Απλώς κάντε κλικ στο συν (+) και επιλέξτε το μπλοκ σας. Δεν μπορεί να γίνει ευκολότερο από αυτό.

Λοιπόν, πώς προσθέτουμε ένα κουμπί?

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

προσθέτοντας κουμπιά στο πρόγραμμα επεξεργασίας gutenberg

Κάτι τέτοιο σας οδηγεί στο Κουμπί μπλοκ όπως περιγράφουμε παρακάτω.

προσθέτοντας κουμπιά στο πρόγραμμα επεξεργασίας gutenberg

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

Μετά από μερικά κλικ, αυτό είναι που έχω.

παράδειγμα κουμπιών gutenberg

Παρεμπιπτόντως, εάν χρησιμοποιείτε σκληρούς χρωματικούς συνδυασμούς στα κουμπιά σας, Ο Gutenberg θα σας ενημερώσει αμέσως. Τι ωραία?

Πώς να προσθέσετε στήλες στο Gutenberg

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

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

καρτέλα στηλών gutenberg editor

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

στήλες gutenberg στο πρόγραμμα επεξεργασίας wordpress

Που με παίρνει:

frontuten στήλες gutenberg

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

Υπάρχει ένα μπλοκ για αυτό; Ναι υπάρχει!

Πώς να προσθέσετε μια εικόνα δίπλα στο κείμενο στο Gutenberg

Θέλετε να προσθέσετε μια εικόνα δίπλα σε κάποιο κείμενο; Εάν ναι, θα λατρέψετε την ακόλουθη ενότητα.

Όπως συνήθως, κάντε κλικ στο εικονίδιο συν (+), μεταβείτε στο Στοιχεία διάταξης και κάντε κλικ Μέσα και κείμενο όπως φαίνεται παρακάτω.

μπλοκ μέσων και κειμένου gutenberg

Θα πρέπει να δείτε το Μέσα και κείμενο μπλοκ, όπως φαίνεται παρακάτω.

πολυμέσων και μπλοκ κειμένου στο gutenberg

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

Έπαιξα με το Μέσα και κείμενο μπλοκ, και ήρθα με τα ακόλουθα. Νου σας Κατάφερα να πατήσω και ένα κουμπί εκεί ��

πολυμέσα και μπλοκ κειμένου σε πλήρη δράση

Ω, αυτό είναι το πίσω μέρος! Επιτρέψτε μου να σας δείξω το front-end. Εδώ:

μπλοκ κειμένου πολυμέσων στο gutenberg

Φαίνεται πολύ επαγγελματικό, έτσι; Μπορείτε σίγουρα να φανταστείτε πόσα μπορείτε να επιτύχετε με τον συντάκτη Gutenberg.

Μπλοκ τρίτου μέρους Gutenberg

Οι προγραμματιστές WordPress επιθυμούν να κάνουν συμβατά θέματα και πρόσθετα με τον επεξεργαστή Gutenberg. Μερικά παραδείγματα περιλαμβάνουν τα WooCommerce, Jetpack και Yoast SEO.

Για παράδειγμα, μπορείτε να προσθέσετε μπλοκ WooCommerce στην ανάρτηση του WordPress. Πρώτον, πρέπει να εγκαταστήσετε και να ενεργοποιήσετε το WooCommerce.

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

μπλοκ woocommerce gutenberg

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

Άλλα αξιόλογα μπλοκ

Έχουμε ήδη πάνω από 2.000 λέξεις και αν το διατηρήσουμε αυτό, θα καταλήξουμε να γράψουμε ένα ολόκληρο eBook. Η προσευχή μου είναι ότι μπορείτε τώρα να χρησιμοποιήσετε το Gutenberg χωρίς κανένα λόξυγκας.

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

  • Widgets – Μπορείτε να προσθέσετε περιεχόμενο από τα widget σας σε αναρτήσεις ιστολογίου
  • Σύντομοι κωδικοί – Μπορείτε ακόμα να χρησιμοποιήσετε εγγενείς σύντομους κωδικούς WordPress
  • Κλασσικός – Ένα υπέροχο μπλοκ που κρατά το παλιό σας περιεχόμενο
  • Περισσότερο – Το μπλοκ ήταν παλαιότερα γνωστό ως Διαβάστε περισσότερα ετικέτα
  • Διακοπή σελίδας, διαχωριστικά, διαχωριστικά
  • Προσαρμοσμένο HTML, Pullquote, Table
  • Εκθεσιακός χώρος και Ήχος / βίντεο HTML5
  • Και πολλά άλλα ανάλογα με τα θέματα και τις προσθήκες που χρησιμοποιείτε

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

Γρήγορες συντομεύσεις Gutenberg Hacks & πληκτρολογίου

Το Gutenberg συνοδεύεται από μερικές εισβολές και συντομεύσεις πληκτρολογίου που το καθιστούν ακόμη πιο εύκολο. Για παράδειγμα, εάν πληκτρολογήσετε “/” μέσα σε ένα μπλοκ παραγράφων, εμφανίζει μια λίστα μπλοκ.

Μπορείτε ακόμη και να επιλέξετε ένα συγκεκριμένο μπλοκ πληκτρολογώντας τον τίτλο του μπλοκ μετά την ανάστροφη κάθετο (/), π.χ., πληκτρολογώντας “/ image” εμφανίζεται το μπλοκ εικόνας μεταξύ άλλων μπλοκ που σχετίζονται με την εικόνα. Δείτε την εικόνα παρακάτω για περισσότερες λεπτομέρειες.

συντόμευση ανταπόκρισης gutenberg

Συντομεύσεις πληκτρολογίου: Για προβολή όλων των διαθέσιμων συντομεύσεων, πατήστε SHIFT + ALT + H στα Windows και OPT + CTRL + Η σε Mac.

Στην κορυφή του εγγράφου, μπορείτε να δείτε τη δομή του εγγράφου κάνοντας κλικ στο εικονίδιο (i), όπως φαίνεται παρακάτω.

δομή εγγράφων gutenberg

Ομορφη. Εξαιρετικά απαλό.

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


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

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

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

Μοιραστείτε τις ανησυχίες, τις σκέψεις και τις ερωτήσεις σας στην παρακάτω ενότητα σχολίων.

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