Δημιουργία ενός child theme

Ενότητα 5: Θέματα εμφάνισης και πρόσθετα · Χρόνος ανάγνωσης: 9 λεπτά

Μαθησιακός στόχος: Μετά από αυτό το μάθημα θα μπορείτε να δημιουργήσετε ένα child theme και θα ξέρετε πότε το χρειάζεστε και πότε όχι.

Βασικές έννοιες: child theme, γονικό θέμα εμφάνισης (parent theme), Template: στο style.css, functions.php, wp_enqueue_style, αντικατάσταση προτύπου, theme.json σε ένα child, Create Block Theme

Το πρόβλημα που λύνει ένα child theme

Φανταστείτε: θέλετε η κεφαλίδα του κλασικού σας θέματος εμφάνισης να είναι λίγο διαφορετική, και γι' αυτό τροποποιείτε το header.php στον φάκελο του θέματος εμφάνισης. Λειτουργεί. Τρεις εβδομάδες αργότερα κυκλοφορεί μια ενημέρωση του θέματος εμφάνισης, την οποία αφήνετε να εγκατασταθεί αυτόματα (όπως πρέπει, μάθημα 7.2). Η ενημέρωση αντικαθιστά όλα τα αρχεία του θέματος εμφάνισης, και η τροποποίησή σας χάνεται.

Ένα child theme είναι ένα μικρό θέμα εμφάνισης που λέει: «χρησιμοποίησε όλα τα στοιχεία αυτού του άλλου θέματος εμφάνισης (το γονικό θέμα εμφάνισης, parent theme), εκτός από αυτά που έχω εγώ.» Τοποθετείτε τις τροποποιήσεις σας στο child theme. Το γονικό θέμα εμφάνισης συνεχίζετε κανονικά να το ενημερώνετε, και οι τροποποιήσεις σας παραμένουν.

Πότε ναι και πότε όχι

Χρειάζεστε ένα child theme αν θέλετε να προσαρμόσετε ή να συμπληρώσετε αρχεία ενός θέματος εμφάνισης:

• θέλετε ένα πρότυπο (σε ένα κλασικό θέμα εμφάνισης ένα αρχείο PHP, σε ένα θέμα εμφάνισης με μπλοκ ένα πρότυπο HTML) διαφορετικό·
• θέλετε δική σας CSS που είναι πολύ μεγάλη για το πεδίο CSS·
• θέλετε δικό σας κώδικα PHP που σχετίζεται με την εμφάνιση (ένα επιπλέον μέγεθος εικόνας, μια επιπλέον θέση μενού).

Δεν χρειάζεστε child theme αν:

• προσαρμόζετε ένα θέμα εμφάνισης με μπλοκ στον Eπεξεργαστή ιστότοπου: αυτές οι προσαρμογές αποθηκεύονται στη βάση δεδομένων και παραμένουν μετά από μια ενημέρωση (μάθημα 5.1)·
• προσθέτετε μόνο λίγη CSS μέσω της επιλογής Πρόσθετη CSS (στον Προσαρμογέα για ένα κλασικό θέμα εμφάνισης, ή στα Στυλ του Eπεξεργαστή ιστότοπου)·
• θέλετε να προσθέσετε μια λειτουργία που δεν έχει καμία σχέση με την εμφάνιση (μια φόρμα, μια σύνδεση). Αυτή ανήκει σε ένα πρόσθετο, ώστε να επιβιώνει από μια αλλαγή θέματος εμφάνισης.

Ένα child theme για ένα κλασικό θέμα εμφάνισης

Ένα child theme είναι ένας φάκελος μέσα στο wp-content/themes/ με τουλάχιστον ένα αρχείο: το style.css. Ας υποθέσουμε ότι το γονικό θέμα εμφάνισής σας βρίσκεται στο wp-content/themes/hoofdthema/. Δημιουργήστε τότε έναν φάκελο wp-content/themes/hoofdthema-child/ με αυτό το style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Προσαρμογές για το example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Το δικό σας CSS ακολουθεί παρακάτω. */
.site-header { border-bottom: 3px solid #e8a33d; }

Η πιο σημαντική γραμμή είναι η Template:. Εκεί αναγράφεται το όνομα του φακέλου του γονικού θέματος εμφάνισης (όχι το όνομα που βλέπετε στον Πίνακα Ελέγχου). Αν αυτό δεν είναι ακριβές (κεφαλαία γράμματα, παύλες), το WordPress αναφέρει στο Εμφάνιση > Θέματα ότι λείπει το γονικό θέμα εμφάνισης.

Επιπλέον, δημιουργείτε ένα functions.php για να φορτώνονται τα stylesheets. Ο σωστός τρόπος:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Το αν το γονικό θέμα εμφάνισης φορτώνει μόνο του το δικό του stylesheet διαφέρει ανά θέμα εμφάνισης. Δείτε την τεκμηρίωση του γονικού σας θέματος εμφάνισης· ορισμένα ζητούν επίσης στο child να φορτώνετε το stylesheet του parent με το get_template_directory_uri() . '/style.css'. Αν ο ιστότοπός σας μετά την ενεργοποίηση εμφανίζεται χωρίς μορφοποίηση, τότε το stylesheet του parent δεν φορτώνεται.

Αν θέλετε να προσαρμόσετε ένα πρότυπο, αντιγράψτε εκείνο το συγκεκριμένο αρχείο (για παράδειγμα το header.php) από το parent στο child σας και προσαρμόστε το αντίγραφο. Το WordPress κοιτάζει πρώτα στο child, έπειτα στο parent. Μην αντιγράφετε όλα τα αρχεία: τότε δεν θα λαμβάνετε πλέον τις βελτιώσεις του parent.

Το functions.php του child δεν αντικαθιστά εκείνο του parent, αλλά φορτώνεται πριν από αυτό. Και τα δύο εκτελούνται.

Ένα child theme για ένα θέμα εμφάνισης με μπλοκ

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

• style.css με την ίδια κεφαλίδα και το ίδιο Template:·
• theme.json: αυτό συγχωνεύεται με εκείνο του parent, οπότε βάζετε μέσα μόνο ό,τι θέλετε να αλλάξετε (για παράδειγμα την παλέτα χρωμάτων)·
• προαιρετικά πρότυπα στα templates/ και parts/ που αντικαθιστούν εκείνα του parent.

Ένα functions.php σε ένα θέμα εμφάνισης με μπλοκ συχνά δεν χρειάζεται, επειδή το WordPress φορτώνει μόνο του τα στυλ από το theme.json.

Υπάρχει ένα επίσημο πρόσθετο, το Create Block Theme, το οποίο δημιουργεί για εσάς ένα child theme μέσα από τον Eπεξεργαστή ιστότοπου, συμπεριλαμβανομένων των προσαρμογών σας στη βάση δεδομένων. Χρήσιμο αν έχετε προσαρμόσει ένα θέμα εμφάνισης με μπλοκ και θέλετε να καταγράψετε αυτές τις προσαρμογές σε αρχεία (για παράδειγμα για να τις μεταφέρετε σε άλλον ιστότοπο).

Έτσι το εγκαθιστάτε στον ιστότοπό σας

1. Δημιουργήστε τον φάκελο και τα αρχεία στον δικό σας υπολογιστή και ελέγξτε τον φάκελο του γονικού θέματος εμφάνισης.
2. Ανεβάστε τον φάκελο στο wp-content/themes/ με το File Manager ή μέσω SFTP. Ή συμπιέστε τον φάκελο σε zip και ανεβάστε τον στο Εμφάνιση > Θέματα > Προσθήκη νέου θέματος > Μεταφόρτωση Θέματος.
3. Μεταβείτε στο Εμφάνιση > Θέματα. Το child theme σας βρίσκεται εκεί. Ενεργοποιήστε το.
4. Ελέγξτε τον ιστότοπό σας: τα μενού και τα widgets ενδέχεται να χρειαστεί να συνδεθούν ξανά κατά την αλλαγή σε ένα child· οι ρυθμίσεις του Προσαρμογέα ισχύουν ανά θέμα εμφάνισης, οπότε τις ξαναρυθμίζετε ή τις εξάγετε με ένα πρόσθετο.
5. Το γονικό θέμα εμφάνισης πρέπει να παραμείνει εγκατεστημένο. Μην το διαγράψετε· το child δεν λειτουργεί χωρίς αυτό.

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

Σύνοψη

• Ένα child theme διατηρεί τις προσαρμογές σας στα αρχεία του θέματος εμφάνισης εκτός του γονικού θέματος εμφάνισης, ώστε οι ενημερώσεις να μην τις αντικαθιστούν.
• Δεν το χρειάζεστε για προσαρμογές στον Eπεξεργαστή ιστότοπου ή για λίγη Πρόσθετη CSS· οι λειτουργίες ανήκουν σε ένα πρόσθετο.
• Ελάχιστα απαιτούμενα: ένας φάκελος με style.css στο οποίο το Template: αναφέρει ακριβώς τον φάκελο του γονικού θέματος εμφάνισης.
• Αντιγράψτε μόνο τα πρότυπα που πραγματικά προσαρμόζετε· το functions.php του child λειτουργεί παράλληλα με εκείνο του parent.
• Το γονικό θέμα εμφάνισης παραμένει εγκατεστημένο και συνεχίζει να ενημερώνεται.

Κουίζ

Άσκηση

Άσκηση A5.2: Ελέγξτε το child theme σας. Δημιουργήστε ένα child theme για το θέμα εμφάνισής σας, στον δοκιμαστικό σας ιστότοπο ή σε περιβάλλον δοκιμών (staging) (μάθημα 8.3), και ενεργοποιήστε το. Συμπληρώστε τη διεύθυνση του ιστότοπου και το όνομα του φακέλου του child theme. Το πρόγραμμα ζητά το wp-content/themes/<φάκελος>/style.css και ελέγχει: το αρχείο υπάρχει, περιέχει ένα Theme Name: και ένα Template:, το style.css του parent σε εκείνον τον φάκελο υπάρχει επίσης, και η αρχική σελίδα παραπέμπει στο child theme (δηλαδή είναι ενεργό).

Άσκηση D5.2: Τι προσαρμόσατε και γιατί; Σημειώστε ποια αρχεία υπάρχουν στο child theme σας, τι προσαρμόσατε σε κάθε αρχείο και γιατί αυτό δεν μπορούσε να γίνει στον Eπεξεργαστή ιστότοπου, στην Πρόσθετη CSS ή σε ένα πρόσθετο. Επιβεβαιώστε ότι το γονικό θέμα εμφάνισης παραμένει εγκατεστημένο και έχει αυτόματες ενημερώσεις.

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

Αυτά τα άρθρα περιγράφουν τα βήματα στους πίνακες ελέγχου του WebOké· σε άλλους πίνακες ελέγχου λειτουργούν με παρόμοιο τρόπο.

• Εγχειρίδιο DirectAdmin 11.1: Άνοιγμα της Διαχείρισης αρχείων: οι φάκελοι στο πακέτο σας
• Εγχειρίδιο DirectAdmin 11.2: Αρχεία: μεταφόρτωση και λήψη
• Εγχειρίδιο DirectAdmin 11.7: Σύνδεση με το FileZilla (FTP, FTPS και SFTP)
• Child themes (developer.wordpress.org, Αγγλικά): https://developer.wordpress.org/themes/advanced-topics/child-themes/