To WordPress είναι αναμφίβολα το πιο δημοφιλές σύστημα διαχείρισης περιεχομένου, παγκοσμίως αυτή τη στιγμή. Βασικό χαρακτηριστικό για αυτή του την επιτυχία είναι ο open source χαρακτήρας του, η ευκολία χρήσης και η τεράστια κοινότητα υποστήριξης που παράγει συνεχώς νέα πρόσθετα, ενημερώσεις καθώς και προσθέτει νέες δυνατότητες που καλύπτουν οποιαδήποτε ανάγκη. Στο κείμενο αυτό θα δούμε αναλυτικά τη διαδικασία για τη δημιουργία ενός Child Theme για WordPress.
Μία τόσο δημοφιλής πλατφόρμα είναι λογικό να έχει και κάποια μειονεκτήματα, όπως ζητήματα ασφαλείας, περιορισμένες δυνατότητες στη διαχείριση χρηστών, κλπ. (Για περισσότερα σχετικά με αυτό το θέμα δείτε το άρθρο «Ποιο είναι το καλύτερο CMS;»). Δεν παύει όμως αυτή η πλατφόρμα να αποτελεί μια εξαιρετική βάση για να ξεκινήσει κανείς.
Βασικό στοιχείο που έκανε το WordPress τόσο επιτυχημένο είναι ότι μπορούμε να κάνουμε σχεδόν τα πάντα με αυτό. Ό,τι και να θέλουμε να κάνουμε θα βρεθεί ένας τρόπος να παραμετροποιήσουμε τη λειτουργία του. Είτε μέσω κάποιου προσθέτου, είτε με custom τρόπο και δημιουργία κώδικα. Επίσης, πολύ εύκολα με τη χρήση ενός θέματος (theme) – δωρεάν ή μη μπορούμε πολύ γρήγορα να αλλάξουμε την εμφάνιση και την αρχιτεκτονική του site μας. Το πρόβλημα όμως με αυτή την τακτική είναι ότι η ιστοσελίδα μας καταλήγει να θυμίζει εμφανισιακά δεκάδες ή εκατοντάδες άλλες.
Τι συμβαίνει σε περίπτωση που επιθυμούμε να δώσουμε τη δική μας πινελιά στο design της ιστοσελίδας μας;
To theme που έχω επιλέξει για την ιστοσελίδα μου δεν υποστηρίζει τις αλλαγές που έχω στο μυαλό μου
Σε αυτή την περίπτωση προκειμένου να κάνουμε τις επιθυμητές αλλαγές θα πρέπει να πάμε στη λύση της δημιουργίας ενός Child theme. Ας αναφέρουμε τα πλεονεκτήματα:
- Μεγαλύτερος έλεγχος στο design της σελίδας μας
- Είναι ο βέλτιστος τρόπος για να παρέμβουμε στον κώδικα του theme που έχουμε επιλέξει χωρίς να αποκλείουμε τα updates
- Ευκολία να πειραματιστούμε χωρίς να προκαλέσουμε κάποια βλάβη στο parent theme
- Δυνατότητα να προσθέσουμε έξτρα λειτουργικότητα στην ιστοσελίδα μας
- Είναι το καλύτερο σημείο εκκίνησης για όσους επιθυμούν να μπουν στο χώρο του theme development
Πρέπει να σημειώσουμε εδώ ότι βασικές γνώσεις PHP και CSS είναι απαραίτητες για να προχωρήσει κάποιος σε αυτό το βήμα. Επίσης, σε περίπτωση που δεν δουλεύετε σε τοπικό περιβάλλον είναι απαραίτητη η πρόσβαση μέσω FTP στον server σας.
Σε αυτό το παράδειγμα θα φτιάξουμε ένα child theme για το θέμα Twenty Twenty-Two που έρχεται με το WordPress τη στιγμή που γράφεται αυτό το κείμενο. To πρώτο που έχουμε να κάνουμε είναι να μεταβούμε στον root φάκελο της ιστοσελίδας μας και μετέπειτα στον wp-content/themes/. Σε περίπτωση που η ιστοσελίδα μας είναι ήδη live μπαίνουμε μέσω FTP αλλιώς αν εργαζόμαστε τοπικά απλώς μεταβαίνουμε στον κατάλληλο φάκελο.
Για κάθε theme αντιστοιχεί και ένας φάκελος. Αυτό που πρέπει να κάνουμε είναι να δημιουργήσουμε ένα νέο φάκελο με ονομασία “twentytwentytwo-child”. Για να θεωρηθεί ένα theme λειτουργικό απαιτούνται 2 αρχεία. Το functions.php και το style.css. Δημιουργήστε αυτά τα αρχεία εντός του φακέλου που δημιουργήσατε και αφήστε τα προς το παρόν κενά.
Σε αυτό το σημείο πρέπει να πάμε πίσω στο γονικό theme και να πάρουμε ορισμένες πληροφορίες από το αντίστοιχο αρχείο style.css. Aς δούμε τα περιεχόμενα του με έναν επεξεργαστή κειμένου:
/*
Theme Name: Twenty Twenty-Two
Theme URI: https://github.com/wordpress/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Full Site Editing features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments
Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/
Προσέξτε ότι οι πρώτες γραμμές του αρχείου ακολουθούν ένα συγκεκριμένο format. Παρέχουν χρήσιμες πληροφορίες όπως το όνομα του theme, του δημιουργού, τα χαρακτηριστικά του, την έκδοσή του κλπ. Κάτι αντίστοιχο θα πρέπει να υλοποιηθεί και στο style.css του Child Theme. Για τη δημιουργία του child theme απαιτούνται τουλάχιστον 2 καταχωρήσεις: Theme Name και Template. Εδώ πρέπει να δηλώσουμε το όνομα του theme και το template που επιθυμούμε να κληρονομήσει (εδώ ορίζεται το όνομα του φακέλου του γονικού θέματος).
/*
Theme Name: Twenty Twenty-Two Child
Template: twentytwentytwo
*/
@import url('../twentytwentytwo/style.css');
Mε την εντολή @import, γίνεται η εισαγωγή των στυλιστικών επιλογών που έχουν οριστεί στο γονικό theme.
Πηγαίνοντας στον πίνακα ελέγχου του WordPress στο Appearance>Themes (ή στο Εμφάνιση>Θέματα) θα δούμε ότι πλέον είναι διαθέσιμο και το νέο theme που δημιουργήσαμε. To μόνο που μένει είναι να το ενεργοποιήσουμε.
Το αρχείο functions.php που δημιουργήσαμε μας δίνει τη δυνατότητα να αλλάξουμε τη λειτουργικότητα του site προσθέτωντας κώδικα PHP και συναρτήσεις του WordPress. Μία από αυτές τις συναρτήσεις είναι η wp_enqueue_style(). Η συνάρτηση αυτή φορτώνει πρώτα τα styles του parent theme και έπειτα το style.css που βάλαμε στο child theme.
Προσθέτουμε τον κώδικα που ακολουθεί στην αρχή του functions.php αρχείου μας και είμαστε έτοιμοι! Διαθέτουμε πλέον ένα πιστό αντίγραφο του parent theme, το οποίο μπορούμε να τροποποιήσουμε με ασφάλεια και το οποίο θα υπερισχύει ιεραρχικά από το γονικό θέμα. Αυτό πρακτικά σημαίνει ότι μπορούμε να κάνουμε update στο θέμα μας δίχως φόβο να χάσουμε τις αλλαγές που έχουμε περάσει στο child theme και δεν επηρεάζονται. Αυτός είναι και ένα από τους βασικούς λόγους που χρησιμοποιούμε child themes.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
Αφού πλέον έχουμε δημιουργήσει το child theme μας, ήρθε η ώρα να το τροποποιήσουμε. Στη συνέχεια ακολουθούν τρόποι με τους οποίους μπορούμε να εμπλουτίσουμε το νέο μας θέμα.
Κάποιες ιδέες για αλλαγές:
- Αλλαγή header της σελίδας
- Αλλαγή μεγέθους
- Αλλαγή χρώματος
- Δημιουργία sticky header κτλ
- Αλλαγή στοιχείων κυρίου μέρους της ιστοσελίδας
- Αυξομείωση περιθωρίων σελίδας (paddings, margins κτλ.)
- Αλλαγή γραμματοσειράς
- Αλλαγή διάταξης της πληροφορίας
- Αλλαγή footer της σελίδας
- Προσθήκη χρήσιμων συνδέσμων ή navigation bar
- Προσθήκη στοιχείων επικοινωνίας και social media
Μπορείτε να δοκιμάσετε τον παρακάτω κώδικα για να βεβαιωθείτε ότι έχει ενεργοποιηθεί σωστά το child theme
/*
Theme Name: Twenty Twenty-Two Child
Template: twentytwentytwo
*/
@import url('../twentytwentytwo/style.css');
header{
height: 700px; /* θα κάνει το header μεγαλύτερο*/
}
h1{
color: red; /*θα αλλάξει χρώμα στο τίτλο*/
}
TIP: Προσέχουμε ώστε οι αλλαγές που κάνουμε να μην επηρεάζουν την προσαρμογή της σελίδας σε φορητές συσκευές (responsiveness). Δηλαδή, με απλά λόγια πρέπει οι αλλαγές που κάνουμε να μη σπάσουν τη σελίδα όπως εμφανίζεται σε κινητά και tablet συσκευές.
Σήμερα μάθαμε πόσο σημαντικό είναι να δημιουργήσουμε ένα child theme για το wordpress theme μας. Είδαμε πώς να το φτιάξουμε και πήραμε κάποιες ιδέες για το τι μπορούμε να κάνουμε με αυτό.
Δείτε περισσότερα σχετικά με τη δημιουργία Child Theme για WordPress στον επίσημο ιστότοπο του WordPress: Child Themes.
[updated 11.03.22 από τον Π. Μουτσιούνα & Β. Γαβριηλίδη]
Πηγές
