Αν ξεφυλλίσουμε το Κατάλογος θεμάτων WordPress, η πλειοψηφία των θεμάτων προβάλλει εικόνες εξωφύλλου. Είναι ένα χαρακτηριστικό σε δημοφιλή ζήτηση. Η τάση του εξωφύλλου ισχύει ακόμη και στο μπλοκ καταλόγου θεμάτων στιγμιότυπα οθόνης επίσης.
Ας εξετάσουμε το ακόλουθο παράδειγμα από Είκοσι είκοσι (ένα κλασικό θέμα) που περιλαμβάνει α πρότυπο εξωφύλλου που μπορεί να χρησιμοποιηθεί για εμφάνιση τόσο σε μεμονωμένη ανάρτηση όσο και σε σελίδα, όπου η επιλεγμένη εικόνα της ανάρτησης εμφανίζεται στο επάνω μέρος που εκτείνεται σε όλη την οθόνη του προγράμματος περιήγησης, με τον τίτλο της ανάρτησης και άλλα επιθυμητά μεταδεδομένα παρακάτω. Τα πρότυπα εξωφύλλων επιτρέπουν τη δημιουργία περιεχομένου που ξεχωρίζει από τους παραδοσιακούς περιορισμούς εμφάνισης περιεχομένου.
Η δημιουργία προτύπων εξωφύλλου απαιτεί τη σύνταξη κώδικα PHP όπως αποτυπώνεται εδώ στο Twenty Twenty Πρότυπο εξωφύλλου προεπιλεγμένου θέματος. Αν κοιτάξουμε το template-parts/content-cover.php αρχείο, περιέχει το κωδικός για την εμφάνιση περιεχομένου όταν το cover-template χρησιμοποιείται.
Επομένως, δεν είναι δυνατή η δημιουργία προσαρμοσμένης εξωφύλλου εάν δεν έχετε βαθιά γνώση της PHP. Για πολλούς απλούς χρήστες του WordPress, η μόνη επιλογή είναι η χρήση προσθηκών όπως Custom Post Type UI όπως περιγράφεται στο αυτό το σύντομο βίντεο.
Καλύψτε ενότητες σε θέματα μπλοκ
Από WordPress 5.8, οι συντάκτες θεμάτων θα μπορούσαν να δημιουργήσουν προσαρμοσμένα πρότυπα (όπως μεμονωμένη ανάρτηση, συγγραφέας, κατηγορία και άλλα) με μια ενότητα κορυφαίων ηρώων χρησιμοποιώντας επεξεργαστή μπλοκ εξώφυλλο και ομαδοποιούνται στα θέματά τους με ελάχιστο ή καθόλου κωδικό.
Πριν βουτήξουμε στο πώς δημιουργούνται κορυφαία μεγάλα τμήματα εξωφύλλου σε πρότυπα θεμάτων μπλοκ, ας δούμε εν συντομία τα δύο θέματα μπλοκ Είκοσι Είκοσι δύο και Wabi από τον Rich Tabor (πλήρης κριτική εδώ).
Πίσω από τα παρασκήνια, το Twenty Twenty-Two υλοποιεί μια μεγάλη κεφαλίδα από προσθέτοντας μια κρυφή εικόνα αποθηκευμένη ως μοτίβο στο header-dark-large εξαρτήματα. Ενώ, στο θέμα Wabi, το μεγάλο χρώμα φόντου της κεφαλίδας σε μια ανάρτηση υλοποιείται με χρώματα φόντου με έμφαση και ένα μπλοκ απόστασης ύψους 50 εικονοστοιχείων (γραμμές: 5-9). Τα χρώματα έμφασης διαχειρίζονται οι assets/js/accent-colors.js αρχείο.
Πολλοί άλλοι επέλεξαν να δημιουργήσουν ένα τμήμα επάνω εξωφύλλου χρησιμοποιώντας μπλοκ κάλυψης, το οποίο επέτρεπε στους χρήστες να αλλάξουν το χρώμα φόντου και να προσθέσουν μια στατική εικόνα από τη Βιβλιοθήκη πολυμέσων ή να ανεβάσουν από συσκευές πολυμέσων – χωρίς να γράψουν κανέναν κώδικα. Με αυτή την προσέγγιση, εικόνες από το ανάρτηση μπλοκ επιλεγμένων εικόνων έπρεπε να προστεθεί χειροκίνητα σε κάθε μεμονωμένη ανάρτηση, εάν θέλετε να εμφανίζεται η εικόνα της ανάρτησης ως εικόνα φόντου σε μεμονωμένες αναρτήσεις.
Μπλοκ εξωφύλλου με δυναμική εικόνα που εμφανίζεται στην ανάρτηση
Το WordPress 6.0 έκανε διαθέσιμο ένα άλλο ωραίο επιλεγμένα μπλοκ εξωφύλλου εικόνας χαρακτηριστικό, το οποίο επιτρέπει τη χρήση της επιλεγμένης εικόνας οποιασδήποτε ανάρτησης ή σελίδας ως εικόνα φόντου στο μπλοκ εξωφύλλου.
Στα ακόλουθα σύντομο βίντεο, Οι μηχανικοί της Automattic συζητούν την προσθήκη χαρακτηριστικών εικόνων για την κάλυψη μπλοκ με ένα παράδειγμα από Αρχαιο θέμα:
Το μπλοκ εικόνας, συμπεριλαμβανομένου του μπλοκ εικόνας που εμφανίζεται μετά την προβολή, μπορεί να προσαρμοστεί περαιτέρω χρησιμοποιώντας duotone χρώμα σε theme.json όπως συζητείται σε αυτό το σύντομο Συνδέοντας τις τελείες Βίντεο YouTube (Automattic's Anne McCarthy).
Χρησιμοποιήστε παραδείγματα περιπτώσεων (Wei, Λειτουργία φωτεινότητας)
Αν περιηγηθούμε στις μικρογραφίες των εικόνων στο μπλοκ καταλόγου θεμάτων, βλέπουμε ότι η πλειονότητα τους περιλαμβάνει μεγάλα τμήματα κεφαλίδας εξωφύλλου. Αν ψάξουμε στα αρχεία προτύπων τους, χρησιμοποιούν εξώφυλλα μπλοκ με στατικό φόντο εικόνας.
Μερικά θέματα που αναπτύχθηκαν πρόσφατα χρησιμοποιούν εξώφυλλα με το δυναμικό φόντο της εικόνας που εμφανίζεται στη θέση (π.χ. Archeo, Wei, Frost, Bright Mode, κ.λπ.). Μια σύντομη επισκόπηση της νέας δυνατότητας είναι διαθέσιμη στο αυτό το σύντομο βίντεο του GitHub.
Συνδυάζοντας χαρακτηριστικά δυναμικών χρωμάτων έμφασης Wabi θέμα με εξώφυλλο και μπλοκ φωτογραφιών που εμφανίζονται, ο Rich Tabor επεκτείνει περαιτέρω τη δημιουργικότητά του στο νέο του Wei θέμα (διατίθεται πλήρης κριτική εδώ) για εμφάνιση δυναμικών εικόνων εξωφύλλου από μία ανάρτηση.
Στην ανακοίνωση του Wei, Γράφει ο Rich Tabor: «Πίσω από τα παρασκήνια, το single.html Το πρότυπο χρησιμοποιεί ένα μπλοκ εξωφύλλου που αξιοποιεί την επιλεγμένη εικόνα της ανάρτησης. Στη συνέχεια, η διχρωμία εφαρμόζεται από τον συνδυασμό χρωμάτων που έχει αντιστοιχιστεί στη θέση. Έτσι, σχεδόν οποιαδήποτε εικόνα θα φαίνεται ωραία».
Αν θέλετε να εμβαθύνετε στο μπλοκ εξώφυλλου κεφαλίδας του θέματος Wei και να μάθετε πώς να δημιουργείτε το δικό σας, εδώ είναι ένα σύντομο βίντεο από Φράνκ Κλάιν (WP Development Courses) που εξηγεί βήμα-βήμα πώς δημιουργήθηκε.
Παρόμοιο με το θέμα Wei, Μπράιαν Γκάρντνερ κάνει επίσης χρήση του μπλοκ εξωφύλλου με το μπλοκ εμφανισμένων εικόνων στο πρόσφατο Φωτεινή λειτουργία θέμα για την εμφάνιση περιεχομένου που ξεχωρίζει ζωντανά χρώματα.
Ο Brian είπε στο WPTavern: «Του αρέσει περισσότερο το θέμα είναι ο τρόπος με τον οποίο χρησιμοποιείται το Cover Block μονοσελίδες. Τραβάει την επιλεγμένη εικόνα στο μπλοκ εξωφύλλου και προσφέρει επίσης προσαρμοσμένα στυλ μπλοκ για σκιές και επιλογές πλήρους ύψους. […] Αισθάνομαι ότι αυτό πραγματικά παρουσιάζει τι είναι δυνατό με το σύγχρονο WordPress.”
Για περισσότερες λεπτομέρειες, εδώ είναι demo site και πλήρης ανασκόπηση του θέματος του Brian's Bright Mode.
Σχεδιασμός σύνθετων διατάξεων με επεξεργαστή μπλοκ
Πρόσφατα, το WordPress κυκλοφόρησε ένα νέο πρόγραμμα επεξεργασίας μπλοκ που σχεδιάστηκε αρχική σελίδα προορισμού και σε έναν κατεβάστε σελίδα. Η ανακοίνωση προκάλεσε μικτές αντιδράσεις από τους αναγνώστες του, μεταξύ άλλων από Matt Mullenweg (Automattic) που σχολίασε τις 33 ημέρες που χρειάστηκαν για να σχεδιαστεί και να κυκλοφορήσει μια τόσο «απλή σελίδα». Μπορείς να βρεις επιπλέον παρασκηνιακές συζητήσεις εδώ.
Σε απάντηση, ο Jamie Marsland του Pootlepress δημιούργησε αυτό το βίντεο του YouTube όπου αναπαράγει μια σχεδόν ίδια αρχική σελίδα σε σχεδόν 20 λεπτά.
Σχολιάζοντας το βίντεο του Marsland, Γράφει η Sarah Gooding του WP Travern: «Είναι αυτό που θα μπορούσε κανείς να περιγράψει ως ισχυρός χρήστης με τον επεξεργαστή μπλοκ. Μπορεί να ανακατεύει γρήγορα σειρές, στήλες και ομάδες, προσαρμόζοντας τα περιθώρια και τα περιθώρια όπως απαιτείται, και να εκχωρήσει σε κάθε τμήμα το αντίστοιχο χρώμα για το σχέδιο. Σε αυτό το σημείο, αυτό δεν είναι κάτι που θα μπορούσαν να κάνουν οι περισσότεροι μέσοι χρήστες του WordPress.”
Αν και το πρόγραμμα επεξεργασίας μπλοκ έχει προχωρήσει πολύ, εξακολουθούν να υπάρχουν αυξανόμενα σημεία πόνου στους περισσότερους προγραμματιστές θεμάτων και στους απλούς χρήστες να δημιουργούν και να σχεδιάζουν σύνθετες διατάξεις με αυτό.
Προσθήκη βελτίωσης στα μπλοκ TT2 Gopher
Σε αυτήν την ενότητα, θα σας καθοδηγήσω στον τρόπο με τον οποίο πρόσθεσα βελτιώσεις στο Θέμα TT2 Gopher Blocks που αναφέρθηκα στο προηγούμενο άρθρο μου. Εμπνευσμένο από μπλοκ εξωφύλλων από θέματα που περιέγραψα νωρίτερα, ήθελα να προσθέσω τρία πρότυπα εξωφύλλων (συγγραφέας, κατηγορία και μεμονωμένο εξώφυλλο) στο θέμα.
Κατά την περιήγηση σε ιστότοπους, παρατηρούμε δύο τύπους κεφαλίδων εξωφύλλου. Η κεφαλίδα που παρατηρείται περισσότερο είναι το τμήμα εξωφύλλου αναμεμειγμένο με την κεφαλίδα του ιστότοπου (τίτλος τοποθεσίας και πλοήγηση στην κορυφή) στο μπλοκ εξωφύλλου (π.χ. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, κ.λπ.). Βρίσκουμε επίσης τμήμα κάλυψης κεφαλίδας που δεν συνδυάζεται με την κεφαλίδα του ιστότοπου και τοποθετείται ακριβώς από κάτω, όπως αυτό Bbc μέλλον δικτυακός τόπος. Για το θέμα μπλοκ Gopher TT2, επέλεξα το τελευταίο.
Δημιουργία μοτίβων κεφαλίδων εξωφύλλου
Αρχικά, ας δημιουργήσουμε μοτίβα κεφαλίδας εξωφύλλου για πρότυπα συγγραφέα, single και άλλα (κατηγορίες, ετικέτες) χρησιμοποιώντας μπλοκ εξωφύλλου. Στη συνέχεια θα τα μετατρέψουμε σε μοτίβα (όπως περιγράφεται εδώ προηγουμένως) και καλέστε τα αντίστοιχα μοτίβα εξωφύλλου κεφαλίδας στα πρότυπα.
Εάν είστε εξοικειωμένοι με την εργασία με το πρόγραμμα επεξεργασίας μπλοκ, σχεδιάστε την ενότητα κεφαλίδας χρησιμοποιώντας μπλοκ εξωφύλλου στο πρόγραμμα επεξεργασίας ιστότοπου και, στη συνέχεια, μετατρέψτε τον κώδικα κεφαλίδας εξωφύλλου σε μοτίβα. Ωστόσο, εάν δεν είστε εξοικειωμένοι με τον επεξεργαστή FSE, τότε ο ευκολότερος τρόπος είναι να αντιγράψετε μοτίβα από το κατάλογος μοτίβων σε μια ανάρτηση, κάντε την απαραίτητη τροποποίηση και μετατρέψτε την σε μοτίβο.
Σε μου προηγούμενο άρθρο CSS-Tricks, συζήτησα λεπτομερώς για τη δημιουργία και τη χρήση μοτίβων μπλοκ. Ακολουθεί μια σύντομη επισκόπηση της ροής εργασίας που χρησιμοποιώ για να δημιουργήσω το μοτίβο κεφαλίδας εξωφύλλου μιας ανάρτησης:
Μοτίβο κεφαλίδας εξωφύλλου μονής θέσης
Βήμα 1: Χρησιμοποιώντας τη διεπαφή FSE, ας δημιουργήσουμε ένα νέο κενό αρχείο και ας ξεκινήσουμε τη δομή του μπλοκ όπως φαίνεται στον αριστερό πίνακα.
Εναλλακτικά, αυτό θα μπορούσε να γίνει πρώτα σε μια ανάρτηση ή σελίδα και στη συνέχεια να αντιγράψετε και να επικολλήσετε τη σήμανση σε ένα αρχείο μοτίβου, αργότερα.
Βήμα 2: Στη συνέχεια, για να κρύψουμε την παραπάνω σήμανση σε ένα μοτίβο, πρώτα θα πρέπει να αντιγράψουμε τη σήμανση κώδικα και να την επικολλήσουμε σε ένα νέο /patterns/header-single-cover.php στον επεξεργαστή κώδικα μας. Θα πρέπει επίσης να προσθέσουμε την απαιτούμενη σήμανση κεφαλίδας αρχείου μοτίβου (π.χ. τίτλος, γυμνοσάλιαγκας, κατηγορίες, εισαγωγέας κ.λπ.).
Εδώ είναι ολόκληρος ο κώδικας του /patterns/header-single-cover.php αρχείο:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Βήμα 3: Για αυτό το demo, έχω χρησιμοποιήσει αυτή η εικόνα από τον κατάλογο φωτογραφιών ως εικόνα φόντου πλήρωσης και εφαρμόστηκε το Μεσάνυχτα διχρωμία. Για να χρησιμοποιήσουμε δυναμικά την επιλεγμένη εικόνα ανάρτησης, θα πρέπει να προσθέσουμε "useFeaturedImage":true στο μπλοκ εξωφύλλου αντικαθιστώντας τον παραπάνω σύνδεσμο εικόνας πλήρωσης ακριβώς πριν από το "dimRatio":50 έτσι ώστε η γραμμή 10 να μοιάζει με την ακόλουθη:
Εναλλακτικά, η εικόνα πλήρωσης θα μπορούσε επίσης να αλλάξει κάνοντας κλικ Αντικαταστήστε και επιλέγοντας Χρησιμοποιήστε την επιλεγμένη εικόνα επιλογή:
Τώρα, τα μοτίβα εξωφύλλου κεφαλίδας θα πρέπει να είναι ορατά στον πίνακα εισαγωγής μοτίβων για χρήση οπουδήποτε στα πρότυπα, τις αναρτήσεις και τις σελίδες.
Κεφαλίδες εξωφύλλου αρχείου
Εμπνευσμένο από αυτή η ανάρτηση WP Tavern και μια αναλυτική περιγραφή για τη δημιουργία μιας κεφαλίδας προτύπου συγγραφέα, ήθελα να δημιουργήσω μια παρόμοια κεφαλίδα εξωφύλλου και να προσθέσω και στο θέμα TT2 Gopher.
Αρχικά, ας δημιουργήσουμε το μοτίβο κεφαλίδας εξωφύλλου αρχείου για author.html το πρότυπο επίσης, ακολουθώντας την παραπάνω ροή εργασιών. Σε αυτήν την περίπτωση, το δημιουργώ σε μια νέα κενή σελίδα, προσθέτοντας μπλοκ (όπως φαίνεται παρακάτω στην προβολή λίστας):
Στο παρασκήνιο για το εξώφυλλο, χρησιμοποίησα την ίδια εικόνα που χρησιμοποιήθηκε στο εξώφυλλο της κεφαλίδας μιας ανάρτησης.
Επειδή θα θέλαμε να εμφανίσουμε μια σύντομη βιογραφία συγγραφέα στο μπλοκ συντάκτη, θα πρέπει επίσης να προστεθεί μια βιογραφική δήλωση στη σελίδα προφίλ χρήστη, διαφορετικά θα εμφανιστεί ένα κενό διάστημα στη διεπαφή.
Ακολουθεί ο κωδικός σήμανσης του header-author-cover, ότι θα χρησιμοποιήσουμε μοτίβο, στο επόμενο βήμα:
Published by:
Για να κρύψετε τη σήμανση σε α header-author-cover μοτίβο, θα πρέπει να προσθέσουμε την απαιτούμενη σήμανση κεφαλίδας αρχείου μοτίβου όπως περιγράφηκε προηγουμένως. Με την επεξεργασία του header-author-cover.php μοτίβο, μπορούμε να δημιουργήσουμε παρόμοια καλύμματα κεφαλίδων για ετικέτες, ταξινόμηση και άλλα προσαρμοσμένα πρότυπα.
Η header-category-cover.php μοτίβο για το δικό μου category.html Το πρότυπο είναι διαθέσιμο στο GitHub.
Δημιουργία προτύπων με εξώφυλλα κεφαλίδων
WordPress 6.0 και το πρόσφατο Γουτεμβέργιος 13.7 εκτεταμένη δημιουργία προτύπων λειτουργιών στον επεξεργαστή μπλοκ, δίνοντας έτσι τη δυνατότητα σε πολλούς χρήστες του WordPress, χωρίς βαθιά γνώση της κωδικοποίησης, να δημιουργήσουν τα προσαρμοσμένα τους πρότυπα.
Για πιο λεπτομερείς πληροφορίες και περιπτώσεις χρήσης, εδώ είναι ένα λεπτομερής σημείωση προσαρμογής από τον Justin Tadlock.
Πρόγραμμα επεξεργασίας μπλοκ επιτρέπει τη δημιουργία διαφόρων τύπων προτύπων, συμπεριλαμβανομένων των προτύπων εξωφύλλων. Ας δούμε εν συντομία πώς συνδυάζεται μπλοκ κάλυψης και ανάρτηση μπλοκ επιλεγμένων εικόνων με το νέο πρότυπο διεπαφής χρήστη διευκολύνει τη δημιουργία διαφόρων τύπων προσαρμοσμένων προτύπων εξωφύλλου, ακόμη και χωρίς ή χαμηλές δεξιότητες κωδικοποίησης.
Η δημιουργία προτύπων έχει γίνει πολύ πιο εύκολη με το Gutenberg 13.7. Πώς να δημιουργήσετε πρότυπα μπλοκ με κωδικούς και στον επεξεργαστή ιστότοπου περιγράφεται στο Εγχειρίδιο θεμάτων και το προηγούμενο άρθρο μου.
Πρότυπο συγγραφέα με μπλοκ εξωφύλλου
Επάνω (τμήμα κεφαλίδας) σήμανση του author.html Το πρότυπο φαίνεται παρακάτω (γραμμή 6):
...
...
...
... Ακολουθούν στιγμιότυπα οθόνης των κεφαλίδων εξωφύλλου για το author.html και category.html πρότυπα:
Το σύνολο Ο κώδικας και για τα δύο πρότυπα είναι διαθέσιμος στο GitHub.
Μονό στύλο με εξώφυλλο
Για να εμφανίσουμε το εξώφυλλο στην ανάρτησή μας, πρέπει να καλέσουμε το header-cover-single pattern κάτω από την ενότητα κεφαλίδας (γραμμή 3):
....
....
....Ακολουθεί μια λήψη οθόνης που δείχνει την εμπρόσθια όψη της μεμονωμένης ανάρτησης με το τμήμα του εξωφύλλου της κεφαλίδας:
Το σύνολο single-cover.html Το πρότυπο είναι διαθέσιμο στο GitHub.
Μπορείτε να βρείτε επιπλέον αναλυτικούς οδηγούς για τη δημιουργία ενός ενότητα ανάρτησης κεφαλίδας ήρωα και χρησιμοποιώντας μπλοκ εξωφύλλου φόντου με επιλεγμένη ανάρτηση on Ταβέρνα WP και Πλήρης επεξεργασία ιστότοπου ιστοσελίδα.
Εκεί το έχετε!
Χρήσιμοι πόροι
Μπλοκ εξωφύλλου με επιλεγμένη εικόνα
Blog θέσεις
Παρόλο που τα θέματα μπλοκ, γενικά, είναι λαμβάνοντας πολλές αντιδράσεις από τα μέλη της κοινότητας του WordPress, κατά τη γνώμη μου, είναι το μέλλον του WordPress, πολύ. Με τα θέματα μπλοκ, οι ερασιτέχνες συντάκτες θεμάτων, χωρίς τις βαθιές δεξιότητες κωδικοποίησης και γνώση των γλωσσών PHP και JavaScript, μπορούν τώρα να δημιουργήσουν θέματα με σύνθετες διατάξεις με τμήμα εξωφύλλου ήρωα όπως περιγράφεται σε αυτό το άρθρο σε συνδυασμό με πρότυπα και παραλλαγές στυλ.
Ως πρώιμος χρήστης του Gutenberg, δεν θα μπορούσα να είμαι πιο ενθουσιασμένος με τα νέα εργαλεία θεματοποίησης όπως π.χ δημιουργία θέματος μπλοκ plugin και άλλα που επιτρέπουν στους συντάκτες θεμάτων να επιτύχουν τα ακόλουθα απευθείας από το περιβάλλον χρήστη του προγράμματος επεξεργασίας μπλοκ χωρίς να γράφουν κανέναν κώδικα:
- (Θ) δημιουργία
- (ii) αντικατάσταση αρχείων θεμάτων και εξαγωγή
- (iii) δημιουργία κενού ή θυγατρικού θέματος και
- (iv) τροποποίηση και αποθήκευση παραλλαγής στυλ του τρέχοντος θέματος
Επιπλέον, οι πρόσφατες επαναλήψεις της προσθήκης Gutenberg επιτρέπουν την ενεργοποίηση ρευστή τυπογραφία και ευθυγραμμίσεις διάταξης και άλλα στιλιστικά στοιχεία ελέγχου χρησιμοποιώντας μόνο theme.json αρχείο χωρίς JavaScript και μια γραμμή κανόνων CSS.
Σας ευχαριστούμε που διαβάσατε και μοιραστείτε τα σχόλια και τις σκέψεις σας παρακάτω!