Δημιουργήστε ένα Child Theme για WordPress

8 Αυγ, 2017 | Web Design

updated 31.08.21 από τον Π. Μουτσιούνα

To WordPress είναι αναμφίβολα το πιο δημοφιλές σύστημα διαχείρισης περιεχομένου, παγκοσμίως αυτή τη στιγμή. Βασικό χαρακτηριστικό για αυτή του την επιτυχία είναι ο open source χαρακτήρας του, η ευκολία χρήσης και η τεράστια κοινότητα υποστήριξης που παράγει συνεχώς νέα πρόσθετα, ενημερώσεις καθώς και προσθέτει νέες δυνατότητες που καλύπτουν οποιεσδήποτε ανάγκες.

Προφανώς μία τόσο δημοφιλής πλατφόρμα έχει και κάποια μειονεκτήματα πχ ζητήματα ασφαλείας, περιορισμένες δυνατότητες στη διαχείριση χρηστών, κλπ. (Για περισσότερα σχετικά με αυτό το θέμα δείτε το άρθρο «Ποιο είναι το καλύτερο CMS;»). Όπως αναφέρθηκε και παραπάνω το WordPress υποστηρίζεται από χιλιάδες χρήστες.

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

Τι συμβαίνει σε περίπτωση που επιθυμούμε να δώσουμε τη δική μας πινελιά στο design της ιστοσελίδας μας;

To theme που έχω επιλέξει για την ιστοσελίδα μου δεν υποστηρίζει τις αλλαγές που έχω στο μυαλό μου

Σε αυτή την περίπτωση θα πρέπει να πάμε στη λύση της δημιουργίας ενός Child theme. Ας αναφέρουμε τα πλεονεκτήματα:

  • Μεγαλύτερος έλεγχος στο design της σελίδας μας
  • Είναι ο βέλτιστος τρόπος για να παρέμβουμε στον κώδικα του theme που έχουμε επιλέξει χωρίς να αποκλείουμε τα updates
  • Δυνατότητα να προσθέσουμε έξτρα λειτουργικότητα στην ιστοσελίδα μας
  • Είναι το καλύτερο σημείο εκκίνησης για όσους επιθυμούν να μπουν στο χώρο του theme development

Πρέπει να σημειώσουμε εδώ ότι βασικές γνώσεις PHP και CSS είναι απαραίτητες για να προχωρήσει κάποιος σε αυτό το βήμα. Επίσης, σε περίπτωση που δεν δουλεύετε σε τοπικό περιβάλλον είναι απαραίτητη η πρόσβαση μέσω FTP στον server σας.

Ας ξεκινήσουμε λοιπόν

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

Βλέπουμε ότι για κάθε theme αντιστοιχεί και ένας φάκελος. Αυτό που πρέπει να κάνουμε είναι να δημιουργήσουμε έναν νέο με ονομασία “twentyseventeen-child”. Για να θεωρηθεί ένα theme λειτουργικό απαιτούνται 2 αρχεία. Το functions.php και το style.css. Δημιουργήστε αυτά τα αρχεία και αφήστε τα προς το παρόν κενά.

Σε αυτό το στάδιο πρέπει να πάμε πίσω στο γονικό theme και να πάρουμε ορισμένες πληροφορίες από το αντίστοιχο αρχείο style.css. Aς δούμε τα περιεχόμενα του με έναν επεξεργαστή κειμένου:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Μπορείτε να προσέξετε ότι οι πρώτες 15 γραμμές του αρχείου ακολουθούν ένα συγκεκριμένο format. Παρέχουν χρήσιμες πληροφορίες όπως το όνομα του theme, του δημιουργού, τα χαρακτηριστικά του, την έκδοση του κλπ. Κάτι αντίστοιχο θα πρέπει να υλοποιηθεί και στο style.css του Child Theme. Για τη δημιουργία του child theme απαιτούνται τουλάχιστον 2 καταχωρήσεις: Template και Theme Name. Μπορούμε να καταχωρήσουμε και παραπάνω στοιχεία όπως το όνομα του δημιουργού, τη διεύθυνση του theme, την έκδοση κλπ.

/*
 Theme Name: Twenty Seventeen Child
 Template: twentyseventeen
*/

@import url('../twentyseventeen/style.css');

Όπως φαίνεται παραπάνω δηλώνουμε το όνομα του theme και το template που επιθυμούμε να κληρονομήσει (εδώ ορίζεται το όνομα του φακέλου του γονικού θέματος). Επίσης, με την επόμενη εντολή, εισάγουμε όλα τα στυλ που έχουν οριστεί στο γονικό theme. Πηγαίνοντας λοιπόν πίσω στη διαχείριση, στα themes και ανανεώνοντας τη σελίδα θα δούμε ότι πλέον είναι διαθέσιμο και το νέο theme. To μόνο που μένει είναι να το ενεργοποιήσουμε.

Ο λόγος που δημιουργήσαμε το functions.php είναι για να προσθέσουμε τη διαδικασία wp_enqueue_style(). Η διαδικασία αυτή βοηθά το child theme να κληρονομήσει με ασφάλεια το style του parent theme.

Προσθέτουμε τον κώδικα που ακολουθεί στην αρχή του functions.php αρχείου μας και είμαστε έτοιμοι! Διαθέτουμε πλέον ένα πιστό αντίγραφο του parent theme, το οποίο μπορούμε να τροποποιήσουμε με ασφάλεια και το οποίο θα υπερισχύσει από το γονικό θέμα, από άποψη ιεραρχίας.

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

Πρόσθετες λειτουργίες

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

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

Πηγαίνουμε στο style.css του child theme και κάνουμε στυλιστικές αλλαγές που μπορεί να μας εξυπηρετούν.

Κάποιες ιδέες για αλλαγές:

  1. Αλλαγή header της σελίδας
    • Αλλαγή μεγέθους
    • Αλλαγή γραμματοσειράς
    • Αλλαγή πλήθους επιλογών του τυχόντος μενού που μπορεί να χρησιμοποιείται
    • Αλλαγή χρώματος
    • Προσθήκη animation
    • Μορφοποίηση κουμπιού που θα μας επιστρέφει στην αρχική σελίδα
  2. Αλλαγή στοιχείων κυρίου μέρους της ιστοσελίδας
    • Αύξηση/μείωση περιθωρίων σελίδας (paddings, margins κτλ.)
    • Αλλαγή γραμματοσειράς
  3. Αλλαγή footer της σελίδας
    • Αλλαγή μεγέθους
    • Προσθήκη στοιχείων επικοινωνίας

Προσέχουμε ώστε οι αλλαγές που κάνουμε να μην επηρεάζουν την προσαρμογή της σελίδας σε φορητές συσκευές (responsiveness).

Επίλογος

Σήμερα μάθαμε πόσο σημαντικό είναι να δημιουργήσουμε ένα child theme για το wordpress theme μας. Είδαμε πώς να το δημιουργήσουμε και πήραμε κάποιες ιδέες για το τι μπορούμε να κάνουμε με αυτό.

Δείτε περισσότερα σχετικά με τη δημιουργία Child Theme για WordPress στον επίσημο ιστότοπο του WordPress: Child Themes.


Πηγές

https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

https://blog.hubspot.com/website/wordpress-create-child-theme