Ενότητα 5 · 5.1
Θέματα εμφάνισης: θέματα με μπλοκ και κλασικά θέματα
Ενότητα 5: Θέματα εμφάνισης και πρόσθετα · Χρόνος ανάγνωσης: 9 λεπτά
Μαθησιακός στόχος: Μετά από αυτό το μάθημα θα μπορείτε να εξηγήσετε τη διαφορά ανάμεσα σε θέματα εμφάνισης με μπλοκ και κλασικά θέματα εμφάνισης, και να επιλέξετε ένα θέμα με σύνεση.
Βασικές έννοιες: θέμα εμφάνισης, ιεραρχία προτύπων (template hierarchy), θέμα εμφάνισης με μπλοκ, πρότυπο (template), τμήμα προτύπου (template part), theme.json, Eπεξεργαστής ιστότοπου, κλασικό θέμα εμφάνισης, πρότυπα PHP, Προσαρμογέας (Customizer), μικροεφαρμογές (widgets), εργαλείο δημιουργίας σελίδων (page builder), lock-in, φάκελος θέματος
Τι κάνει ένα θέμα εμφάνισης
Ένα θέμα εμφάνισης καθορίζει πώς φαίνεται ο ιστότοπός σας και πώς είναι δομημένες οι σελίδες: η κεφαλίδα με το λογότυπο και το menu, το πλάτος του περιεχομένου, οι γραμματοσειρές και τα χρώματα, το υποσέλιδο, πώς φαίνεται μια λίστα άρθρων ή ένα αποτέλεσμα αναζήτησης. Το ίδιο το περιεχόμενο (τα κείμενά σας, οι σελίδες, οι εικόνες) βρίσκεται στη βάση δεδομένων και παραμένει εκεί ακόμα και αν αλλάξετε θέμα εμφάνισης.
Κάθε θέμα εμφάνισης βρίσκεται σε δικό του φάκελο μέσα στο wp-content/themes/, για παράδειγμα wp-content/themes/twentytwentyfive/. Σε αυτόν τον φάκελο υπάρχει πάντα ένα αρχείο style.css με μια κεφαλίδα στην αρχή που περιγράφει το θέμα εμφάνισης (όνομα, έκδοση, δημιουργός). Αυτό θα το δείτε ξανά στο μάθημα 5.2.
Από το WordPress 5.9 (αρχές 2022) υπάρχουν δύο είδη θεμάτων εμφάνισης και λειτουργούν πραγματικά διαφορετικά.
Κλασικά θέματα εμφάνισης
Ένα κλασικό θέμα εμφάνισης αποτελείται από αρχεία PHP: header.php, footer.php, single.php, page.php, index.php, και ούτω καθεξής. Ποιο αρχείο χρησιμοποιείται για ποια σελίδα καθορίζεται από την ιεραρχία προτύπων (μάθημα 1.2). Οι προσαρμογές γίνονται:
- στον Προσαρμογέα (Εμφάνιση > Προσαρμογέας): λογότυπο, χρώματα, επιλογές που προσφέρει το θέμα εμφάνισης·
- με μικροεφαρμογές (Εμφάνιση > Μικροεφαρμογές): μπλοκ στην πλαϊνή στήλη ή στο υποσέλιδο·
- με μενού (Εμφάνιση > Μενού, μάθημα 4.3)·
- στον κώδικα, με ένα θυγατρικό θέμα (child theme) (μάθημα 5.2).
Πολλά γνωστά θέματα εμφάνισης είναι (ακόμα) κλασικά ή υβριδικά. Λειτουργούν πολύ καλά και υποστηρίζονται ακόμα για χρόνια.
Θέματα εμφάνισης με μπλοκ
Ένα θέμα εμφάνισης με μπλοκ είναι δομημένο από τα ίδια μπλοκ με το περιεχόμενό σας. Το θέμα εμφάνισης διαθέτει:
- πρότυπα (templates) ως αρχεία HTML με μπλοκ, στον φάκελο
templates/:index.html,single.html,page.html,404.html· - τμήματα προτύπου (template parts) στον φάκελο
parts/:header.html,footer.html· - ένα αρχείο theme.json με τις ρυθμίσεις στυλ: παλέτα χρωμάτων, γραμματοσειρές, μεγέθη γραμματοσειράς, πλάτος περιεχομένου, απόσταση ανάμεσα σε μπλοκ.
Ένα μικρό απόσπασμα του theme.json:
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
{ "slug": "accent", "color": "#e8a33d", "name": "Accent" }
]
},
"layout": { "contentSize": "720px", "wideSize": "1200px" }
}
}Οι προσαρμογές γίνονται στον Eπεξεργαστή ιστότοπου (Εμφάνιση > Διορθωτής): επεξεργάζεστε την κεφαλίδα, το υποσέλιδο και τα πρότυπα με μπλοκ, και στα Στυλ επιλέγετε χρώματα, γραμματοσειρές και αποστάσεις για ολόκληρο τον ιστότοπο.
Μια σημαντική διαφορά που πρέπει να γνωρίζετε: ό,τι προσαρμόζετε στον Eπεξεργαστή ιστότοπου αποθηκεύεται στη βάση δεδομένων, όχι στα αρχεία του θέματος εμφάνισης. Μια ενημέρωση του θέματος εμφάνισης επομένως δεν αντικαθιστά τις προσαρμογές σας. Αυτό σημαίνει όμως και: ένα προσαρμοσμένο πρότυπο στη βάση δεδομένων έχει προτεραιότητα έναντι του προτύπου στο θέμα εμφάνισης. Αν ο δημιουργός κυκλοφορήσει ένα βελτιωμένο πρότυπο, δεν θα το δείτε όσο υπάρχει η δική σας προσαρμοσμένη έκδοση. Στον Eπεξεργαστή ιστότοπου μπορείτε να «επαναφέρετε» ένα πρότυπο στην έκδοση του θέματος εμφάνισης.
Εργαλεία δημιουργίας σελίδων
Ένα εργαλείο δημιουργίας σελίδων (page builder, όπως το Elementor, το Divi ή το WPBakery) είναι ένα πρόσθετο ή θέμα εμφάνισης με δικό του επεξεργαστή στον οποίο σύρετε και σχεδιάζετε σελίδες. Είναι δημοφιλή επειδή προσφέρουν πολλές δυνατότητες χωρίς κώδικα. Να γνωρίζετε τα μειονεκτήματα:
- Lock-in (δέσμευση): η μορφοποίηση αποθηκεύεται σε δική του μορφή (συχνά shortcodes ή δικά του δεδομένα στο
wp_postmeta). Αν απενεργοποιήσετε το εργαλείο, συχνά παραμένει στις σελίδες σας ένα χάος από κώδικες. Η αλλαγή σε άλλο εργαλείο σημαίνει συνήθως πλήρη ανακατασκευή. - Πιο βαρύ: πολλά εργαλεία φορτώνουν επιπλέον scripts και stylesheets σε κάθε σελίδα. Αυτό μπορεί να κάνει τον ιστότοπό σας πιο αργό (ενότητα 6).
- Ακόμα ένα στοιχείο για παρακολούθηση, με δικές του ενημερώσεις και δικά του κενά ασφαλείας.
Ένα εργαλείο δημιουργίας σελίδων δεν είναι λανθασμένη επιλογή, αλλά να το επιλέξετε συνειδητά. Για πολλούς ιστότοπους αυτό που θέλετε μπορεί να γίνει και με ένα θέμα εμφάνισης με μπλοκ και πρότυπα (patterns).
Επιλογή θέματος εμφάνισης
Σε τι να δώσετε προσοχή, με αυτή τη σειρά:
- Προέλευση: ο κατάλογος θεμάτων του wordpress.org (ελεγμένος από εθελοντές) ή ένας γνωστός δημιουργός με δικό του ιστότοπο. Ποτέ ένα «δωρεάν» αντίγραφο ενός επί πληρωμή θέματος εμφάνισης από έναν ιστότοπο λήψης αρχείων: συχνά περιέχει κερκόπορτα (backdoor) (μάθημα 5.3).
- Συντήρηση: πότε ενημερώθηκε για τελευταία φορά το θέμα εμφάνισης; Ένα θέμα εμφάνισης χωρίς ενημερώσεις τον τελευταίο χρόνο αποτελεί κίνδυνο.
- Μπλοκ ή κλασικό: ταιριάζει με τον τρόπο που θέλετε να εργάζεστε; Ένα θέμα εμφάνισης με μπλοκ αν θέλετε να μπορείτε να κάνετε προσαρμογές στον Eπεξεργαστή ιστότοπου, ένα κλασικό θέμα εμφάνισης αν θέλετε να συνεχίσετε έναν υπάρχοντα ιστότοπο με τον ίδιο τρόπο.
- Τι περιλαμβάνει: ένα θέμα εμφάνισης που «μπορεί τα πάντα» (slider, portfolio, φόρμα επικοινωνίας, SEO) δεσμεύει τις λειτουργίες σας στο θέμα εμφάνισης. Αν αλλάξετε αργότερα, τις χάνετε. Οι λειτουργίες ανήκουν σε πρόσθετα, η εμφάνιση στο θέμα εμφάνισης.
- Προσβασιμότητα και ταχύτητα: στον κατάλογο θεμάτων του wordpress.org μπορείτε να φιλτράρετε με το χαρακτηριστικό «Accessibility Ready». Δείτε την επίδειξη (demo) του θέματος εμφάνισης στο PageSpeed Insights (μάθημα 6.1).
- Γλώσσα: είναι το θέμα εμφάνισης μεταφρασμένο στα ελληνικά, ή μπορείτε να προσαρμόσετε τα κείμενα μόνοι σας;
Αλλαγή θέματος εμφάνισης
Κατά την αλλαγή θέματος εμφάνισης το περιεχόμενό σας παραμένει, αλλά όλα όσα το περιβάλλουν αλλάζουν. Μην το κάνετε ποτέ απλώς έτσι στον ζωντανό σας ιστότοπο:
- Δοκιμάστε πρώτα το νέο θέμα εμφάνισης με τη Ζωντανή Προεπισκόπηση (στο Εμφάνιση > Θέματα), ή καλύτερα σε περιβάλλον δοκιμών (staging) (μάθημα 8.3).
- Ελέγξτε στη συνέχεια τα μενού (μάθημα 4.3), τις μικροεφαρμογές, το λογότυπο, την αρχική σελίδα και τους τύπους άρθρων που παρείχε το παλιό θέμα εμφάνισης (μάθημα 4.2).
- Shortcodes του παλιού θέματος εμφάνισης εμφανίζονται ως απλό κείμενο (
[slider id="3"]) στις σελίδες σας.
Σύνοψη
- Ένα θέμα εμφάνισης καθορίζει την εμφάνιση και τη δομή· το περιεχόμενο βρίσκεται ξεχωριστά στη βάση δεδομένων.
- Τα κλασικά θέματα εμφάνισης είναι πρότυπα PHP, προσαρμόζονται με τον Προσαρμογέα, τις μικροεφαρμογές και τα μενού.
- Τα θέματα εμφάνισης με μπλοκ είναι δομημένα από μπλοκ και το theme.json, και προσαρμόζονται στον Eπεξεργαστή ιστότοπου· αυτές οι προσαρμογές αποθηκεύονται στη βάση δεδομένων.
- Τα εργαλεία δημιουργίας σελίδων προσφέρουν πολλά, αλλά σας δεσμεύουν και μπορούν να κάνουν τον ιστότοπό σας πιο βαρύ.
- Επιλέξτε ένα θέμα εμφάνισης με βάση την προέλευση, τη συντήρηση και την απλότητα· οι λειτουργίες ανήκουν σε πρόσθετα, όχι στο θέμα εμφάνισης.
Κουίζ
Άσκηση
Άσκηση A5.1: Ποιο θέμα εμφάνισης χρησιμοποιεί ο ιστότοπός σας; Αναζητήστε στον πηγαίο κώδικα της αρχικής σας σελίδας (Ctrl+U) τη συμβολοσειρά /wp-content/themes/ και συμπληρώστε το όνομα του φακέλου θέματος εμφάνισης που εμφανίζεται πιο συχνά. Αν χρησιμοποιείτε θυγατρικό θέμα (child theme) (μάθημα 5.2), συμπληρώστε τον φάκελο του θυγατρικού θέματος και αυτόν του γονικού θέματος. Συμπληρώστε επίσης αν πρόκειται για θέμα εμφάνισης με μπλοκ ή κλασικό θέμα εμφάνισης, και πώς το διαπιστώσατε. Το πρόγραμμα διαβάζει την αρχική σελίδα και το style.css του αναφερόμενου θέματος εμφάνισης και τα συγκρίνει.
Περαιτέρω ανάγνωση
Για την εργασία μέσα στο ίδιο το WordPress δεν έχουμε ακόμα δικά μας άρθρα· η επίσημη τεκμηρίωση του WordPress είναι εκτενής.
- Τι είναι ένα θέμα εμφάνισης; (developer.wordpress.org, στα αγγλικά): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
- Θέματα εμφάνισης στο wordpress.org: https://wordpress.org/themes/
- Site-editor (wordpress.org, στα αγγλικά): https://wordpress.org/documentation/article/site-editor/
- theme.json (developer.wordpress.org, στα αγγλικά): https://developer.wordpress.org/themes/global-settings-and-styles/