Δημιουργία 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 στην πάνω αριστερή γωνία της αρχικής σελίδας μου.

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

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

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

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

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

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

 

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

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

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

 

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

/*
Theme Name: Hueman
Theme URI: http://alxmedia.se/themes/hueman/
Version: 1.4.1
Description: <a href="http://alxmedia.se/themes/hueman/">Hueman</a> is a responsive 100% high resolution theme for blogs and magazines. Unique toggle sidebars give a great browsing and reading experience on both tablet and mobile. The feature list is long: Unlimited topbar, header, footer and accent colors, unlimited widget areas, 0-2 sidebars to the left or right that can be uniquely specified for each page or post, 300px / 220px fixed width sidebars, 0-4 footer widget columns, almost zero layout images, related posts and post nav, featured story or slider, 10 post formats, good SEO, 3 flexible custom widgets, localisation support, social links, logo upload and many more useful admin panel features.
Author: Alexander Agnarson
Author URI: http://alxmedia.se
Tags: light, one-column, two-columns, three-columns, right-sidebar, left-sidebar, fluid-layout, fixed-layout, custom-colors, custom-menu, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready

	Copyright: (c) 2013 Alexander "Alx" Agnarson
	License: GNU General Public License v3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

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

 

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

/*
template: hueman
*/

@import url("../hueman/style.css");

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

 

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

 

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

/*
template: hueman
*/

@import url("../hueman/style.css");

.s1 .sidebar-top,
.s1 .sidebar-toggle { background: #AAAAAA; border-radius: 20px;}

 

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