Stigmahost - web hosting company

Child Themes



Τα child themes στο WordPress είναι themes που κληρονομούν την λειτουργικότητα ενός άλλου theme, το οποίο αποκαλείται γονικό theme, και σας επιτρέπει να τροποποιήσετε τη λειτουργικότητα του γονικού theme ή να προσθέσετε τη δική σας λειτουργικότητα. Σε αυτό το άρθρο θα μάθετε πως να δημιουργείτε βασικά child themes και θα  εξηγήσουμε τι μπορείτε να κάνετε με ένα child theme. Για το παράδειγμα θα χρησιμοποιήσουμε το theme Twenty Ten που συνοδεύει το WordPress 3.0.

Η δημιουργία ενός child theme είναι πολύ εύκολη διαδικασία. Δημιουργήστε ένα κατάλογο, με ένα κατάλληλα διαμορφωμένο αρχείο style.css και έχετε ήδη ένα child theme! Με λίγη γνώση HTML και CSS μπορείτε να κάνετε αλλαγές στο CSS και στη δομή αυτού του βασικού child theme, με επεκτάσεις χωρίς να χρειαστεί να επεξεργαστείτε ούτε ένα αρχείο από το γονικό theme. Με αυτό τον τρόπο, όταν το γονικό theme ενημερώνεται οι αλλαγές σας παραμένουν.

Για το λόγο αυτό, τα child themes είναι ο προτεινόμενος τρόπος για να κάνετε αλλαγές σε ένα άλλο theme.

Με λίγη γνώση της PHP, των WordPress Templates και του WordPress Plugin API, μπορείτε να επεκτείνετε το child theme εικονικά σε κάθε πτυχή του parent theme και πάλι χωρίς να αλλάξετε τίποτα στο γονικό theme.

Δομή του καταλόγου

Ένα child  theme βρίσκετε στον δικό του κατάλογο στον κατάλογο /wp-content/themes. Το ακόλουθο σχήμα δείχνει τη θέση ενός child theme μαζί με το γονικό του theme (Twenty Ten) σε μια τυπική δομή καταλόγου στο WordPress.

  • public_html
    • wp-content
      • themes (Ο κατάλογος με τα themes)
        • twentyten (O κατάλογος με το γονικό theme του παραδείγματος (Twenty Ten)
        • twentyten-child

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

  • style.css (απαραίτητο)
  • functions.php (προαιρετικό)
  • Αρχεία του template (προαιρετικό)
  • Άλλα αρχεία (προαιρετικό)

Ας δούμε τώρα πως λειτουργούν όλα αυτά.

Το υποχρεωτικό αρχείο style.css

Το αρχείο style.css είναι το μοναδικό υποχρεωτικό αρχείο για ένα child theme. Το αρχείο αυτό τροφοδοτεί το WordPress με όλες τις απαραίτητες πληροφορίες μέσω της επικεφαλίδας του που το ενημερώνει πως είναι child theme, καθώς επίσης αντικαθιστά και το περιεχόμενο του γονικού style.css.

Όπως συμβαίνει με κάθε WordPress theme, η επικεφαλίδα θα πρέπει να είναι στην αρχή του αρχείου, με τη μόνη διαφορά είναι πως η γραμμή Template: είναι απαραίτητη, ώστε να γνωρίζει το WordPress από ποιο theme κληρονομεί το child theme.

Εδώ είναι ένα παράδειγμα επικεφαλίδας πληροφοριών του child theme στο αρχείο style.css:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http: //example.com/
Description:    Child theme του theme Twenty Eleven
Author:         Το όνομα σας πάει εδώ
Author URI:     http: //example.com/about/
Template:       twentyeleven
Version:        0.1.0
*/

Μια γρήγορη επεξήγηση για κάθε γραμμή:

  • Theme Name: (απαραίτητο) Το όνομα του child theme
  • Them URI: (προαιρετικό) Η ιστοσελίδα για το child theme
  • Description: (προαιρετικό) Τι είναι αυτό το theme. Πχ. Το πρώτο μου child them
  • Author: (προαιρετικό) Το όνομα του συγγραφέα
  • Author URI: (προαιρετικό) Η ιστοσελίδα του συγγραφέα
  • Template: (απαραίτητο) το όνομα του καταλόγου του γονικού theme. Είναι ευαίσθητο στα πεζά και τα κεφαλαία γράμματα.
    • Σημείωση: Κάθε φορά που αλλάζετε αυτή την τιμή, θα πρέπει να αλλάζετε theme και μετά να ενεργοποιείτε ξανά το child theme.
  • Version: (προαιρετικό) η έκδοση του child theme. Πχ. 0.1, 1.0, κοκ

Ότι ακολουθεί μετά το */ συμπεριφέρεται ως κανονικό CSS. Σε αυτό το τμήμα είναι που βάζετε όλους τους ρόλους μορφοποίησης που θέλετε να χρησιμοποιήσει το WordPress.

Να θυμάστε πως τα φύλλα στυλ του child theme αντικαθιστούν τα φύλλα στυλ του γονικού theme. (Τα φύλλα στυλ του γονέα δεν φορτώνονται καθόλου από το WordPress). Έτσι αν θέλετε απλά να κάνετε μερικές αλλαγές στο γονικό theme, παρά να γράψετε ένα νέο stylesheet από την αρχή, θα πρέπει να εισάγετε ρητά το stylesheet του γονέα και μετά να κάνετε τις αλλαγές σας. Το ακόλουθο παράδειγμα θα σας δείξει πως να χρησιμοποιήσετε την @import για αυτό το σκοπό.

Παράδειγμα βασικού Child theme

Το γονικό theme για αυτό το παράδειγμα είναι το Twenty Eleven. Μας αρέσουν όλα σε αυτό το theme εκτός από το χρώμα του τίτλου της ιστοσελίδας, τον οποίο θέλουμε από μαύρο να τον κάνουμε πράσινο. Με τη βοήθεια των child themes όλα γίνονται σε τρία απλά βήματα:

  1. Δημιουργήστε ένα νέο κατάλογο στον κατάλογο /wp-content/themes και ονομάστε τον twentyeleven-child ή όπως αλλιώς θέλετε.
  2. Δημιουργείστε το αρχείο style.css μέσα στον νέο κατάλογο και γράψτε τον κώδικα που ακολουθεί.
  3. Πηγαίνετε στο Πίνακας ελέγχου > Εμφάνιση και ενεργοποιήστε το νέο σας theme (το Twenty Ten Child)
/*
Theme Name: Twenty Ten Child
Description: Child theme for the twentyeleven theme
Author: Το όνομα σας εδώ
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
#site-title a {
    color: #009900;
}

Εδώ θα δούμε τι κάνει ο παραπάνω κώδικας:

  1. /* ανοίγει την επικεφαλίδα πληροφοριών για το child theme
  2. Theme Name: ορίζει το όνομα του child theme
  3. Description: περιγράφει τι κάνει το theme. (είναι προαιρετικό και μπορεί να παραβλεφθεί)
  4. Author: ορίζει το όνομα του συγγραφέα (είναι προαιρετικό και μπορεί να παραβλεφθεί)
  5. Template: Ορίζει τον γονέα του child theme
  6. */ κλείνει την επικεφαλίδα πληροφοριών για το child theme
  7. Το @import εισάγει το style-sheet του γονικού theme
  8. Το #site-title a αλλάζει το χρώμα του τίτλου της ιστοσελίδας σε πράσινο

Σημείωση για το @import

Δεν θα πρέπει να υπάρχει άλλος κανόνας css πριν από το @import. Αν έχετε άλλους κανόνες πριν από το @import θα ακυρωθεί και το style-sheet του γονικού theme δεν θα φορτωθεί.

Σημείωση για την υποστήριξη RTL

Για να υποστηρίξετε τις γλώσσες που είναι γραμμένες από δεξιά προς τα αριστερά, βάλτε το αρχείο rtl.css στο child theme σας

/*
Theme Name: Twenty Ten Child
Template: twentyeleven
*/
@import url("../twentyeleven/rtl.css");

Το WordPress θα φορτώσει αυτόματα το αρχείο rtl.css μόνο στην περίπτωση που είναι is_rtl(). Ακόμα και αν το γονικό theme δεν έχει αρχείο rtl.css σας συνιστούμε να βάλετε το αρχείο rtl.css στο theme σας.

Σημείωση για το Twenty Eleven και για τη χρήση του σκούρου theme ή τη χρήση τις επιλογής χρώματος συνδέσμων

Το σκούρο theme του twenty eleven καθώς επίσης και η επιλογή χρώματος για τους συνδέσμους φορτώνονται μετά το child theme, και αυτό έχει σαν αποτέλεσμα μερικές αλλαγές στο χρώμα να μην εμφανίζονται αφού φορτώνονται νωρίτερα.

Δεν υπάρχει λόγος να πραγματοποιήσετε αλλαγές στο σκούρο stylesheet ή να κάνετε αλλαγές στο γονικό theme, αφού μπορούμε να το διορθώσουμε αλλάζοντας την προτεραιότητα στα χρώματα μας. Μπορούμε να το κάνουμε αυτό με το !important.

Σε αυτό το παράδειγμα θα αλλάξουμε το χρώμα του τίτλου της ιστοσελίδας, και το αρνητικό χρώμα για το hover.

/*
Theme Name: Twenty Eleven Child
Description: Child theme for the Twenty Eleven theme
Author: Το όνομα σας
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
/* Αυτό θα αλλάξει το χρώμα τίτλου ακόμα και στο σκούρο theme */
#site-title a {
    color: #009900 !important;
}
/* Αυτό θα αλλάξει το χρώμα των συνδέσμων */
#site-title a:focus,
#site-title a:hover,
#site-title a:active {
    color: #009900 !important;
}

Τώρα τα χρώματα με το !important δεν θα αλλάξουν ούτε με το σκούρο theme ούτε με την επιλογή χρώματος για τους συνδέσμους.

Χρήση του functions.php

Ανόμοια με το style.css, το αρχείο functions.php ενός child theme δεν αντικαθιστά το περιεχόμενο του functions.php στο γονικό theme. Αντίθετα, το αρχείο functions.php φορτώνεται και αυτό (ποιο συγκεκριμένα, το functions.php του child theme φορτώνετε πριν από το functions.php του γονικού theme).

Κατά αυτό τον τρόπο, το αρχείο functions.php του child theme παρέχει μια έξυπνη μέθοδο, χωρίς προβλήματα για τροποποίηση της λειτουργικότητας του γονικού theme. Ας υποθέσουμε πως θέλετε να προσθέσετε μια συνάρτηση στο theme σας. Ο ποιο γρήγορος τρόπος είναι να ανοίξετε το functions.php του theme σας και να γράψετε τη συνάρτηση σας εκεί. Όμως αυτός δεν είναι έξυπνος τρόπος, γιατί την επομένη φορά που θα ενημερωθεί το theme αυτό η συνάρτηση σας θα χαθεί. Αλλά υπάρχει ένας εναλλακτικός τρόπος που είναι ποιο έξυπνος: μπορείτε να δημιουργήσετε ένα child theme και ένα αρχείο function.php μέσα σε αυτό και έτσι μπορείτε να προσθέσετε τη συνάρτηση σας μέσα σε αυτό το αρχείο. Η συνάρτηση σας θα λειτουργεί ακριβώς όπως τη θέλετε μέσα από αυτό το αρχείο, με το πλεονέκτημα ότι δεν θα επηρεαστεί από μελλοντικές ενημερώσεις του γονικού theme.

Η δομή του αρχείο functions.php είναι απλή. Τα μόνα που χρειάζεται είναι μια ετικέτα έναρξης κώδικα php στην αρχή του αρχείου, μια ετικέτα τερματισμού κώδικα php στο τέλος του αρχείου και ο κώδικας σας ανάμεσα στις ετικέτες. Μέσα σε αυτό το αρχείο μπορείτε να έχετε όσες συναρτήσεις θέλετε. Το παράδειγμα που ακολουθεί παρουσιάζει ένα στοιχειώδες αρχείο functions.php που κάνει ένα απλό πράγμα: προσθέτει ένα εικονίδιο favicon στο στοιχείο head των σελίδων HTML.

<?php
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action('wp_head', 'favicon_link');
?>

ΣΥΜΒΟΥΛΗ ΓΙΑ THEME DEVELOPERS: Το γεγονός ότι το functions.php του child theme φορτώνεται πρώτο σημαίνει πως μπορείτε να κάνετε της συναρτήσεις του theme σας pluggable. Αυτό σημαίνει πως θα μπορούν να αντικατασταθούν από τα child themes του δικού σας theme απλά δηλώνοντας της συναρτήσεις σας μέσα σε συνθήκες:

if(!function_exists('theme_special_nav'))
{
    function theme_special_nav()
    {
        //  Do something.
    }
}

Κατά αυτό τον τρόπο, ένα child theme μπορεί να αντικαταστήσει συναρτήσεις του γονικού theme, απλά κάνοντας και πάλη τη δήλωση της συνάρτησης.

Αναφορά / Εισαγωγή αρχείων στο child theme

Όταν πρέπει να συμπεριλάβετε αρχεία που είναι μέσα στο child theme σας θα χρησιμοποιείτε τη συνάρτηση get_stylesheet_directory(). Επειδή το γονικό style.css αντικαθιστάτε από το style.css του child theme, και το style.css είναι στον κεντρικό κατάλογο του child theme, η συνάρτηση get_stylesheet_directory() επιστρέφει τον κεντρικό κατάλογο του child theme σας.

Ακολουθεί ένα παράδειγμα με τη συνάρτηση require_once, που δείχνει πως να χρησιμοποιήσετε τη συνάρτηση get_stylesheet_directory() για να ενσωματώσετε ένα αρχείο στο theme σας

require_once( get_stylesheet_directory(). '/my_included_file.php' );

Χρήση Post Formats

Ένα child theme κληρονομεί τα post formats όπως αυτά έχουν δηλωθεί στο γονικό theme. Αλλά όταν δημιουργείτε ένα child theme, αν χρησιμοποιήσετε τη συνάρτηση συνάρτηση add_theme_support(‘post-formats’) αυτή θα αντικαταστήσει τα post formats όπως αυτά δηλώθηκαν στο γονικό theme και δεν θα τα προσθέσει.

Αρχεία Template

Τα αρχεία των templates, συμπεριφέρονται όπως και το αρχείο style.css. Αντικαθιστούν τα templates στο γονικό theme. Ένα child theme μπορεί να αντικαταστήσει όποιο template του γονικού theme θέλει απλά δημιουργώντας ένα αρχείο με το ίδιο όνομα. (ΣΗΜΕΊΩΣΗ: το αρχείο index.php μπορεί να αντικατασταθεί μόνο μετά την έκδοση 3.0)

Και πάλι, αυτό το χαρακτηριστικό του WordPress σας επιτρέπει να τροποποιήσετε τα templates του γονικού theme χωρίς πραγματικά να τα επεξεργαστείτε, και έτσι οι αλλαγές σας παραμένουν ανέπαφες όταν το γονικό theme ενημερώνετε.

Ακολουθούν μερικά παραδείγματα για τα οποία ίσως θέλετε να χρησιμοποιήσετε αρχεία template σε ένα child theme:

  • Για να προσθέσετε ένα template που δεν το παρέχει το γονικό theme (πχ. ένα template για το sitemap της ιστοσελίδας σας, για σελίδα μιας στήλης, κ.α.)
  • Για να βάλετε ένα ποιο συγκεκριμένο template (δείτε ιεραρχία Template) από αυτά που χρησιμοποιεί το γονικό theme (πχ. tag.php για να το χρησιμοποιείτε με τις ετικέτες ταξινόμησης αντί για το γενικής χρήσης archives.php)
  • Για να αντικαταστήσετε ένα template από το γονικό theme (πχ. να δημιουργήσετε το δικό σας home.php και να αντικαταστήσετε το home.php στο γονικό theme)

Άλλα αρχεία

Εκτός από τα style.css, functions.php και τα αρχεία template όπως είναι τα index.php και home.php, ένα child theme μπορεί να χρησιμοποιήσει κάθε τύπο αρχείου, εφ’ όσον αυτό το αρχείο έχει συνδεθεί με το child theme σωστά.
Πηγή: WordPress Codex

Κατηγορίες Themes | Από τον Web Design Blog

4 Σχόλια

Κανάλι σχολίων

εργασία από το σπίτι

17 Νοεμβρίου 2011 | 11:48 | Σχόλιο |

Πολύ καλή δουλειά. Συγχαρητήρια


V.Alexopoulos

22 Μαΐου 2012 | 13:59 | Σχόλιο |

Πάρα πολύ καλό άρθρο!


Vicky

22 Μαΐου 2012 | 14:01 | Σχόλιο |

Με βοήθησες πάρα πολύ! Σ’ευχαριστώ!


ΓΙΑΝΝΗΣ ΔΙΒΡΑΜΗΣ

20 Απριλίου 2015 | 15:39 | Σχόλιο |

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

Ευχαριστώ πολύ



Ετικέτες που επιτρέπονται: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 

^
Top
CSS Design Awards