Δημιουργία child theme σε WordPress

Σημείωση: Το παρόν άρθρο αφορά την self-hosted έκδοση του WordPress (WordPress.org). Δέν έχω ασχοληθεί καθόλου με τη δωρεάν έκδοση (WordPress.com) και δέν ξέρω αν τα παρακάτω μπορούν να εφαρμοστούν σε αυτή.

Themes και Child Themes

Υπάρχουν πάνω απο 2500 θέματα (themes) για το WordPress, απλά, μονόχρωμα, πολύχρωμα, κίτς και elegant. Όποιο θέμα όμως και να επιλέξουμε, το πιό πιθανό είναι οτι θα χρειαστεί να κάνουμε κάποιες τροποποιήσεις για να το φέρουμε στα μέτρα μας.

Οι τροποποιήσεις συνήθως αφορούν αλλαγές στα αρχεία .css, αλλά και στα αρχεία .php του θέματος.

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

Γι αυτό το λόγο, αν θέλουμε να κάνουμε αλλαγές, δημιουργούμε ένα child theme. Το “παδί” κληρονομεί όλα τα χαρακτηριστικά του “γονέα”. Στην πιό απλή του μορφή δηλαδή, ένα child theme είναι πανομοιότυπο με το αρχικό. Απο κεί και πέρα, στο child theme βάζουμε μόνο τις γραμμές κώδικα που θέλουμε να αλλάξουμε. Οι αλλαγές αυτές θα παραμείνουν ακόμα και αν ο γονέας ενημερωθεί με καινούρια έκδοση.

Για να γίνει πιό κατανοητό, θα δείξω στην πράξη πώς γίνεται αυτό.

Έστω οτι θέλω να αλλάξω το τμήμα που γράφει Follow στην πάνω αριστερή γωνία της αρχικής σελίδας μου.

follow_old

Ανοίγω τη σελίδα με το Firefox, κάνω δεξί κλίκ πάνω στην περιοχή που με ενδιαφέρει και επιλέγω Inspect Element. Αυτό θα ανοίξει ένα πλαίσιο στο κάτω μέρος οπου δείχνει τις σχετικές γραμμές του αρχείου style.css

element_inspection

Η πρώτη αλλαγή που θέλω να κάνω είναι το χρώμα, το οποίο απο #3B8DBD θα το κάνω #AAAAAA (το αποτέλεσμα είναι κάτι σε γκρί). Επιπλέον θέλω να κάνω το πλαίσιο απο τετράγωνο σε στρογγυλεμένο, γι αυτό απο κάτω προσθέτω τη γραμή border-radius: 20px;

element_inspection_2

Το αποτέλεσμα είναι κάπως έτσι:

follow_new

Αυτές τις αλλαγές βέβαια τις βλέπω μόνο εγώ και την επόμενη φορά που θα ανοίξω τη σελίδα θα έχουν χαθεί. Οπότε πάμε να τις κάνουμε μόνιμες με τη χρήση ενός child theme.

Αυτό που χρειαζόμαστε είναι πρόσβαση στα αρχεία του website, είτε μέσω FTP (προτείνεται) είτε μέσω κάποιου web control panel (C-panel, Plesk ή οτιδήποτε χρησιμοποιεί ο provider μας) Εγώ θα χρησιμοποιήσω πρόσβαση FTP και γι αυτό θα χρησιμοποιήσω το Filezilla.

Τα αρχεία των θεμάτων βρίσκονται στο φάκελο /httpdocs/wp-content/themes/ οπού το κάθε θέμα βρίσκεται σε ξεχωριστό φάκελο

 

wordpress theme folder

WordPress theme folder

Όπως φαίνεται απο την παραπάνω εικόνα, στο site μου έχω εγκατεστημένα τα θέματα hueman, twentyfourteen, twentythirteen και twentytwelve.

Το ίδιο μπορούμε να δούμε και απο τον πίνακα ελέγχου (dashboard) του WordPress στο Appearance-Themes, οπου επιπλέον φαίνεται πως το θέμα Hueman είναι το ενεργό θέμα που χρησιμοποιείται:

wordpress themes

Φτιάχνουμε με το Filezilla ένα καινούριο φάκελο μέσα στο /httpdocs/wp-content/themes/ και του δίνουμε το όνομα που θα έχει το child theme. Εγώ το ονόμασα hueman-child. Καλό είναι να αποφύγουμε κενα, αριθμούς και περίεργους χαρακτήρες. Μπαίνουμε στο φάκελο που μόλις φτιάξαμε και φτιάχνουμε ένα νέο αρχείο με όνομα style.css

 

child theme folder

Το επόμενο βήμα είναι να γράψουμε τον απαραίτητο κώδικα στο style.css ωστε να γίνει η σύνδεση με το γονέα. Πρίν απο αυτό όμως, ας δούμε πώς είναι το αντίστοιχο αρχείο στο γονέα. Σε όλα τα θέματα του WordPress, τα αρχεία style.css έχουν στην κεφαλίδα κάποιες γραμμές σχολίων. Το παρακάτω είναι απο το θέμα Hueman:

Τα παραπάνω είναι σχόλια, δηλαδή δέν επηρεάζουν τον κώδικα CSS,  παρόλα αυτά το WordPress τα χρησιμοποιεί για να τα βάλει στην περιγραφή του θέματος στο Appearance-Themes του dashboard. Μπορούμε και στο style.css του child theme να βάλουμε κάτι αντίστοιχο αλλά δέν είναι απαραίτητο. Αυτό που είναι όμως απολύτως απαραίτητο είναι να βάλουμε σαν σχόλιο την γραμμή Template: hueman. Αυτό ουσιαστικά δείχνει ποιός είναι ο γονέας και στις πιό παλιές εκδόσεις WordPress δέν ήταν απαραίτητο. Επίσης το hueman αναφέρεται στο όνομα του φακέλου οπου βρίσκεται ο γονέας και όχι στο theme name και πρέπει να βάλουμε το φάκελο με το σωστό capitalization.

 

Ο κώδικας του style.css θα δείχνει στην πιό απλή μορφή του έτσι:

Αυτό που κάνει η εντολή @import είναι να “κληρονομήσει” το style.css του γονέα. Οπότε αν τώρα σώσουμε το αρχείο και πάμε στο Appearance-Themes θα δούμε και το child theme που μόλις φτιάξαμε.

themes

 

Η εικόνα είναι κενή (πρέπει να μπεί ένα αρχείο screenshot.png στο φάκελο) και επειδή στα σχόλια δέν ορίσαμε Theme Name, βάζει αυτόματα σαν όνομα το όνομα του φακέλου. Παρόλα αυτά είναι πλήρως λειτουργικό, και αν το ενεργοποιήσουμε το site θα είναι ακριβώς όπως ήταν πρίν, καθώς ακόμα δέν έχει κάποιες αλλαγές.

 

Οπότε πάμε και ανοίγουμε πάλι το style.css του child theme και προσθέτουμε και τις αλλαγές:

 

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

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *