Πως δημιουργώ ένα child theme ή αλλιώς ένα θέμα απόγονο στο WordPress. Πλήρης οδηγός

Πως δημιουργώ ένα child theme ή αλλιώς ένα θέμα απόγονο στο WordPress. Πλήρης οδηγός

Πως δημιουργώ ένα child theme ή αλλιώς ένα θέμα απόγονο στο WordPress. Πλήρης οδηγός

Ένα από τα βασικότερα σημεία που πρέπει να καταλάβει κάποιος που ασχολείται πιο σοβαρά με το WordPress είναι η δημιουργία ενός child theme ή στα Ελληνικά θέμα απόγονο.

Είναι κουραστικό, είναι μονότονο αλλά στις περισσότερες περιπτώσεις η δημιουργία ενός child theme στο WordPress είναι μονόδρομος.

Τι είναι ένα child theme ή αλλιώς θέμα απόγονος και γιατί το χρειάζομαι

Πόσες φορές άραγε χρειάστηκε να αλλάξουμε στο footer κάτι σαν το powered by WordPress ή κάτι παρόμοιο; Πόσες φορές μετά από κάποια αναβάθμιση χάσαμε όλες τις αλλαγές μας που κάναμε στο style.css και τραβούσαμε τα μαλλιά μας; Πιστεύω ότι λίγο πολύ όλοι έχουμε έρθει σε παρόμοιες καταστάσεις και ψάχναμε λύση εκ των υστέρων. Η δημιουργία ενός  child theme έρχεται να δώσει μία οριστική λύση στα παραπάνω προβλήματα και σε ακόμα περισσότερα.

Με τη δημιουργία ενός child theme ουσιαστικά εξασφαλίζουμε ότι οποιαδήποτε αλλαγή κάνουμε στην εμφάνιση ή στη λειτουργικότητα του WordPress θα είναι για πάντα εκεί, άσχετα με τις αναβαθμίσεις που θα γίνονται στο γονικό (parent) θέμα. Ταυτόχρονα κληρονομούμε όλες τις ιδιότητες του γονέα αλλά όχι, και προσοχή εδώ, τις ρυθμίσεις που τυχόν να έχουμε κάνει μέσα από τη 'Προσαρμογή' του θέματος.

Δημιουργώντας ένα child theme, το θεωρητικό μέρος

Από παράδοση όταν δημιουργούμε ένα child theme, τον φάκελο που περιέχει τα αρχεία του θέματος τον ονομάζουμε με βάση το γονικό όνομα και δίπλα βάζουμε τη λέξη child. Για να το καταλάβουμε καλύτερα θα πάρουμε σαν παράδειγμα  το γνωστό μας θέμα Twenty Seventeen. Στο φάκελο themes (wp-content/themes), ο φάκελος που περιέχει τα αρχεία του γονικού θέματος είναι ο twentyseventeen. Εμείς θα δημιουργήσουμε ένα νέο φάκελο με όνομα twentyseventeen-child για το θέμα απόγονο όπως βλέπουμε παρακάτω:

Δημιουργώντας ένα θέμα απόγονο με το twentyseventeen

Δημιουργώντας ένα θέμα απόγονο με το twentyseventeen

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

Στο παράδειγμα μας με το twentyseventeen-child θα δημιουργήσουμε ένα αρχείο style.css το οποίο προς το παρόν είναι κενό. Για τη δημιουργία και για τη μεταφορά του αρχείο στο server μας μπορούμε να χρησιμοποιήσουμε το πολύ καλό FTP client Filezilla.

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

Source code    
/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://www.example.com
 Description:  Twenty Seventeen Child theme
 Author:       Author
 Author URI:   http://www.example.com
 Template:     twentyseventeen
 Version:      1.0.0
*/
@import url("../twentyseventeen/style.css");

αλλά μπορούμε να συμπληρώσουμε και άλλα στοιχεία όπως 'Tags', 'License' κλπ.

Ας δούμε όμως ποιές είναι οι προαιρετικές και ποιες οι υποχρεωτικές γραμμές στο παράδειγμα μας:

Οι προαιρετικές και ποιες οι υποχρεωτικές γραμμές κώδικα

Βλέπουμε στη παραπάνω εικόνα τρία χρώματα.

Ότι είναι σε πράσινο είναι προαιρετικό

Ότι είναι σε κόκκινο είναι υποχρεωτικό

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

Διαβάζοντας το style.css του θέματος απογόνου

Πως διαβάζεται όμως σε ανθρώπινη γλώσσα ο παραπάνω κώδικας τουλάχιστον όσον αφορά τα υποχρεωτικά στοιχεία;
Ας κάνουμε μία προσπάθεια να τον ερμηνεύσουμε και διαβάζουμε όπως είναι αριθμημένα:

Διαβάζοντας το css του θέματος απογόνου

  1. για να κληρονομήσεις τις ιδιότητες του γονέα σου…
  2. θα πρέπει να βγεις ένα επίπεδο πιο πάνω από αυτό που βρίσκεσαι...
  3. όπου υπάρχει ένας φάκελος 'twentyseventeen' που περιέχει ένα αρχείο το 'style.css'...
  4. και το όνομα του γονέα σου 'Template' είναι 'twentyseventeen'

Έτσι περίπου θα το διάβαζε ένας άνθρωπος!

Δημιουργώντας ένα child theme, στη πράξη

Όπως αναφέραμε παραπάνω έχουμε ήδη δημιουργήσει το φάκελο twentyseventeen-child που φιλοξενεί προς το παρόν μόνο το αρχείο style.css που είναι κενό.

Ανοίγουμε το αρχείο μας για επεξεργασία σε όποιον επεξεργαστεί έχουμε διαθέσιμο. Προτείνουμε τον Notepad++ που είναι δωρεάν και επικολλούμε το παρακάτω:

Source code    
/*
 Template:     twentyseventeen
*/
@import url("../twentyseventeen/style.css");

Δηλαδή μόνο τις υποχρεωτικές γραμμές του css που αναφέρουμε παραπάνω.

Εάν το κάνατε σωστά, που είμαι σίγουρος ότι το κάνατε, στη σελίδα ‘Θέματα’ στο διαχειριστικό του WordPress σας θα πρέπει να δούμε το παρακάτω:

Δημιουργώντας ένα child theme, στη πράξη

Δημιουργώντας ένα child theme, στη πράξη

Βλέπουμε ότι το WordPress αναγνώρισε το θέμα που δημιουργήσαμε δίπλα από το γονικό Twenty Seventeen.

Φαίνεται όμως λίγο άδειο δεν νομίζετε;

Πάμε λοιπόν να το ομορφύνουμε και να το κάνουμε πιο λειτουργικό και πιο αναγνωρίσιμο.

Σαν αρχή ας συμπληρώσουμε λίγες γραμμές ακόμα στο style.css και μην ξεχνάτε ότι μπορούμε να συμπληρώσουμε ότι θέλουμε σαν πληροφορία ανάμεσα στα σχόλια: /* Εδώ συμπληρώνουμε τις πληροφορίες που θέλουμε  */

Γράφουμε λοιπόν τα εξής στο αρχείο μας:

Source code    
Theme Name: Το δικό μου θέμαTheme URI: https://todikomouthema.comAuthor: Εγώ ο ίδιοςAuthor URI: https://todikomouthema.comDescription: Το πρώτο μου Child Theme που το έκανα ακλουθώντας τις οδηγίες από το blog του The Web AcademyVersion: 1.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTemplate: twentyseventeen
@import url("../twentyseventeen/style.css");

και σαν αποτέλεσμα θα έχουμε:

Δημιουργώντας ένα child theme, στη πράξη

Δημιουργώντας ένα child theme, στη πράξη

και στις λεπτομέρειες του θέματος βλέπουμε:

Δημιουργώντας ένα child theme, στη πράξη

Δημιουργώντας ένα child theme, στη πράξη

Όλα λειτούργησαν σωστά μέχρι τώρα και εισαγάγαμε τις πληροφορίες που θέλαμε στο style.css.

Ολοκληρώνοντας το θέμα απόγονο

Αλλά κάτι λείπει ακόμα δεν νομίζετε;

Μα τι λείπει; Λείπει η εικόνα του θέματος ή αλλιώς το screenshot.

Κάνοντας αυτό το τελευταίο βήμα ολοκληρώνω τη δημιουργία του νέου θέματος μου.

Δημιουργώ ένα αρχείο εικόνας, σε όποιον επεξεργαστή εικόνας έχω, διαστάσεων 880 x 660 pixel και το αποθηκεύω σαν screenshot.png

Για παράδειγμα δείτε παρακάτω:

Ανεβάζω το αρχείο στον ίδιο φάκελο με το stlyle.css και έχω αυτό το αποτέλεσμα στη σελίδα ‘Θέματα’:

Το πρώτο μας child theme φαίνεται τώρα ποιο ολοκληρωμένο.

Τελειώσαμε; Τα βασικά ναι.

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

Από εδώ μπορείτε να κατεβάσετε τα αρχεία του παραδείγματος μας, stlyle.css και screenshot.png για να πειραματιστείτε

Αν πιστεύετε πως μπορούμε να σας βοηθήσουμε στην ανάπτυξη κάποιου project παρακαλώ ζητήστε μας μία προσφορά.

Μπορεί επίσης να σας αρέσει...

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.