Πώς φτιάχνω child theme για το WordPress site μου;

Θες να παραμετροποιήσεις το θέμα που χρησιμοποιείς στο WordPress site σου, χωρίς να γίνεται rewrite μετά από κάθε update; Τότε η δημιουργία ενός Child Theme θα σου λύσει τα χέρια!

Τι είναι το Child Theme;

Τα Child Themes είναι θέματα του Wordpress, τα οποία κληρονομούν τις λειτουργίες και την αισθητική ενός πρωτεύοντος γονικού θέματος που είναι εγκαταστημένο στον ιστότοπό μας.

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

Για παράδειγμα, εάν θέλουμε να προσθέσουμε ένα κομμάτι κώδικα στο αρχείο functions.php, όταν θα χρειαστεί να ενημερώσουμε (update) το γονικό θέμα - ενέργεια που συστήνεται ανεπιφύλακτα για λόγους ασφάλειας - όλες αυτές οι παραμετροποιήσεις θα διαγραφούν και θα γίνουν rewrite από τα νέα ενημερωμένα αρχεία του θέματος, γεγονός που δεν το θέλουμε.

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

Πώς δημιουργώ Child Theme;

1ος τρόπος: Χειροκίνητη δημιουργία μέσω κώδικα

Αρχικά, κάνουμε εγκατάσταση και ενεργοποίηση το θέμα που επιθυμούμε να είναι το γονικό. Στα παρακάτω βήματα χρησιμοποιούμε το Twenty Fifteen, για οποιοδήποτε άλλο Theme, θα χρειαστεί και η αντίστοιχη παραμετροποίηση των οδηγιών.

Μετά, κατευθυνόμαστε στον φάκελο /wp-content/themes/ στην εγκατάσταση του WordPress, και δημιουργούμε έναν νέο φάκελο, για το Child Theme μας.

Έπειτα, μέσα σε αυτόν τον φάκελο θα δημιουργήσουμε δύο αρχεία, το style.css και το functions.php .

Αρχίζοντας με την δημιουργία του αρχείου style.css, προσθέτουμε τα παρακάτω σχόλια:

/*
Theme Name:   Twenty Fifteen Theme - IP.GR
Theme URI:    https://www.ip.gr/
Description:  Twenty Fifteen - Child theme
Author:       IP.GR
Author URI:   https://www.ip.gr
Template:     twentyfifteen
Version:      1.0.0
Text Domain:  twentyfifteenchild
*/

Συνεχίζοντας, δημιουργούμε το αρχείο functions.php και προσθέτουμε τον παρακάτω κώδικα:

<?php

  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
  function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style',
     get_stylesheet_uri(),
     array( 'parenthandle' ),
     ()->get( 'Version' ) // Αυτό λειτουργεί μόνο εάν έχει δηλωθεί η έκδοση του θέματος στο header του style.
    );
}

Ωστόσο, σε περίπτωση που το γονικό θέμα φορτώνει το stylesheet του μέσω κάποιας συνάρτησης get_stylesheet, όπως της get_stylesheet_directory() και get_stylesheet_directory_uri(), τότε το child theme θα πρέπει να φορτώσει αντίστοιχα το stylesheet και του ίδιου αλλά και του γονικού θέματος.

Αυτό γίνεται εφικτό με τον παρακάτω τρόπο:

<?php

  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
  function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style';  // Το συγκεκριμένο είναι 'twentyfifteen-style' για το θέμα Twenty Fifteen.
    $theme = wp_get_theme();
    wp_enqueue_style($parenthandle,
     get_template_directory_uri() . '/style.css',
     array(),  // Εάν ο κώδικας του γονικού θέματος έχει κάποιο dependency, αντίγραψέ το εδώ.
     $theme->parent()->get( 'Version' ) // Αυτό λειτουργεί μόνο εάν έχει δηλωθεί η έκδοση του θέματος στο header του style.
    );
   wp_enqueue_style( 'child-style',
     get_stylesheet_uri(),
     array( $parenthandle ),
     $theme->get( 'Version' ) // Αυτό λειτουργεί μόνο εάν έχει δηλωθεί η έκδοση του θέματος στο header του style.
    );
}

Αφού έχουν γίνει όλα τα παραπάνω σωστά, συνδεόμαστε στο διαχειριστικό περιβάλλον του WordPress και από την πλευρική στήλη κατευθυνόμαστε στο Appearence > Themes και κάνουμε Activate το Child Theme.

Για λεπτομερείς οδηγίες μπορείτε να διαβάσετε το επίσημο documentation του WordPress εδώ: https://developer.wordpress.org/themes/advanced-topics/child-themes/

2ος τρόπος: Δημιουργία μέσω χρήσης plugin

Υπάρχουν αρκετά plugins μέσω των οποίων μπορούμε να δημιουργήσουμε ένα Child Theme. Ωστόσο, για το συγκεκριμένο άρθρο θα χρησιμοποιήσουμε το Child Theme Configurator.

1. Πρώτα εγκαθιστούμε το εκάστοτε plugin που επιλέξαμε.

2. Έπειτα κατευθυνόμαστε στον πίνακα ελέγχου του, μέσω του Tools > Child Themes.

3. Στο πρώτο βήμα παραμετροποίησης, αφήνουμε την προεπιλεγμένη επιλογή “CREATE a new Child Theme”.

4. Στο δεύτερο βήμα, επιλέγουμε ποιο θέμα θέλουμε να οριστεί ως γονικό (στο παράδειγμά μας αυτό είναι το Twenty Twenty-Four). Αμέσως μετά, πατάμε το κουμπί “Analyze”, το οποίο θα πυροδοτήσει έναν έλεγχο στο γονικό θέμα διαπιστώνοντας εάν είναι κατάλληλο για δημιουργία child theme.

5. Αφού περάσει τους αντίστοιχους ελέγχους, στο πεδίο 4 συμπληρώνουμε το όνομα του Directory μέσα στο οποίο θα βρίσκονται τα αρχεία του Child Theme.

6. Στα βήματα 5 και 6, αφήνουμε τις προεπιλεγμένες ρυθμίσεις.

7. Πατάμε το κουμπί “Click to Edit Child Theme Attributes”, εάν επιθυμούμε να αλλάξουμε τα στοιχεία του θέματος (Όνομα, Δημιουργός, Website κλπ.).

8. Τέλος, πατάμε το “Create New Child Theme” για να δημιουργηθούν τα αρχεία functions.php και style.css αντίστοιχα.

Αφού έχουν γίνει όλα τα παραπάνω σωστά, συνδεόμαστε στο διαχειριστικό περιβάλλον του WordPress και από την πλευρική στήλη κατευθυνόμαστε στο Appearence > Themes και κάνουμε Activate το Child Theme μας.

---

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