πως να φτιάξετε ένα child θέμα στο wordpress

Δεν είναι επί του παρόντος να σχολιάσουμε το αν είναι καλό, αποτελεσματικό, γρήγορο και καλογραμμένο το wordpress, αυτό που κανείς δεν μπορεί να αμφισβητήσει είναι ότι είναι πιο δημοφιλές cms, με ότι σημαίνει αυτό, τα καλά του και τα κακά του. Στα καλά του συγκαταλέγεται η ευκολία σε αναβαθμίσεις, ενώ στα κακά του, το γεγονός ότι αν οι αναβαθμίσεις γίνουν απρόσεκτα, καταστρέφουν ότι ασύμβατο βρουν μπροστά τους, με συνήθη θύματα τα θέματα με τα εύθικτα css και τ’ ανεμοδαρμένα functions.php, αν και εφόσον δεν έχουν πραγματοποιηθεί με το ενδεδειγμένο τρόπο.

Για να προχωράμε στο ψητό, τα child themes υπόσχονται έναν τρόπο να προστατεύουν τα templates από αναβαθμίσεις, να να τα λέμε όμως έξω από τα δόντια, εφόσον αυτές δεν είναι σημαντικές ή / και το template δεν είναι πολύ παλιό.

Τα child theme βρίσκονται στο δικό τους directory και κληρονομούν όλες τις ιδιότητες του μητρικού θέματος, διατηρούν κατ’ ελάχιστο το δικό τους style.css και functions.php, επιτρέποντας βασικές μεταβολές στο στυλ και το layout. Όταν η μηχανή του wordpress καλείται να ρεντάρει τη σελίδα προς εμφάνιση, επικαλείται τα αρχεία του ενεργού θέματος. Αν πρόκειται για child theme, στην απλή των περιπτώσεων, διαθέτει μόνο functions.php και style.css, συνεπώς ότι δεν βρεθεί στο child από τη μηχανή του wp, θα αναζητηθεί στο αντίστοιχο γονικό (parent). Αυτή είναι η αρχή λειτουργίας.

Περνώντας στο πιο τεχνικό μέρος, ας δούμε πως φτιάχνουμε ένα θυγατρικό θέμα. Στο φάκελο wp-content/themes, θα βρείτε τη δομή των αρχείων όλων των θεμάτων. 

Στο ίδιο επίπεδο με τα υπόλοιπα θέματα, φτιάξτε ένα φάκελο με το όνομα του γονικού και την κατάληξη -child. Αν για παράδειγμα θέλουμε να φτιάξουμε ένα θυγατρικό του twentyseventeen, φτιάχνουμε ένα φάκελο twentyseventeen-child.

Μέσα στο φάκελο, φτιάχνουμε το αρχείο style.css. Ανοίγουμε το αρχείο και επικολλούμε τα παρακάτω τροποποιώντας ανάλογα:

*/
 Theme Name: Twenty Seventeen Child
 Theme URL: http://example.com
 Description: Twenty Seventeen Child Theme
 Author: blog.grs.gr
 Author URL: http://example.com
 Template: twentyseventeen
 Version: 1.0.0
 Text Domain: twentyseventeen-child
 */ Custom CSS goes after this line

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

Προσθέστε το functions.php. Επικολλήστε τα παρακάτω και αποθηκεύστε.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
    
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Σε ότι αφορά τα νέα αρχεία, αυτά είναι όλα κι όλα για να ξεκινήσετε. Συνοψίζοντας:

  • Δημιουργία του directory  twentyseventeen-child
  • Δημιουργία του κατάλληλα τροποποιημένου twentyseventeen-child/style.css
  • Δημιουργία του κατάλληλα τροποποιημένου twentyseventeen-child/functions.php

Για περισσότερα συμβουλευτείτε https://codex.wordpress.org/Child_Themes

Τέλος, για να ενεργοποιήσετε το child, επιλέξτε θέματα, και ενεργοποιήστε το twentyseventeen-child.


Comments

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *