WORDPRESS WORKSHOP. Child Themes. Κόκκορασ Φώτησ Τμήμα Μηχανικών Πληροφορικήσ TEI Θεςςαλίασ. Τμήμα Μηχανικών Πληροφορικής ΤΕΙ Θεσσαλίας

Transcript

1 WORDPRESS Τμήμα Μηχανικών Πληροφορικής ΤΕΙ Θεσσαλίας Child Themes Κόκκορασ Φώτησ Τμήμα Μηχανικών Πληροφορικήσ TEI Θεςςαλίασ

2 WordPress themes Ζνα theme είναι ζνα ςφνολο αρχείων που παράγει τθν εμφάνιςη και τθ λειτουργικότητα ενόσ site βαςιςμζνου ςε WordPress. Γιατί themes; Διαχωριςμόσ front-end από back-end. o To back-end (το WP) αναβακμίηεται χωρίσ να "χαλάει" το front-end. o To front-end διαμορφϊνεται ανάλογα με τισ επικυμίεσ μασ χωρίσ να πειράηουμε το back-end. Μποροφμε εφκολα να δϊςουμε ςτο site το χαρακτιρα που κζλουμε, επιλζγοντασ το κατάλλθλο theme. o Υπάρχουν χιλιάδεσ themes, δωρεάν και επί πλθρωμι. 2

3 3

4 Συςτατικά και Πρότυπα Σελίδων Συςτατικά (Components) header, footer, sidebar, menu, κτλ Χρθςιμοποιοφνται για ςτθ δθμιουργία (ςφνκεςθ) πρότυπων ςελίδων (page templates) Πρότυπα Σελίδων (Page Templates) posts, post/blog page, page, search, archives, category, κτλ Χρθςιμοποιοφνται από το WordPress ανάλογα με το τι ηθτικθκε να προβλθκεί. o π.χ. αν ηθτικθκε μια page/ςελίδα τότε χρθςιμοποιείται το πρότυπο page.php Μποροφμε να επανακακορίςουμε τα παραπάνω ςε ζνα child theme ι ακόμθ και να ορίςουμε νζα templates. π.χ. να ορίςουμε ζνα μονόςτθλο page template αν δεν υπάρχει 4

5 header.php sidebar.php page.php footer.php 5

6 Το πρόβλημα Μποροφμε να τροποποιιςουμε ζνα theme πειράηοντασ: τισ CSS ρυκμίςεισ του τα επιμζρουσ ςυςτατικά που ςυνκζτουν τισ ςελίδεσ o header, footer, page templates, κτλ αλλά, ςτο πρϊτο update του theme, κα χάςουμε όλεσ τισ αλλαγζσ που ζχουμε κάνει! Η λφςη; 6

7 Child Themes Ζνα child theme είναι ζνα theme που κληρονομεί εμφάνιςθ και λειτουργικότθτα από ζνα άλλο theme (που ονομάηετε parent theme). Οφζλη Τροποποιοφμε ζνα theme χωρίσ να χάνουμε κατά το update του, τισ μεταβολζσ που ζχουμε κάνει. Μποροφμε να φτιάξουμε γρήγορα ζνα δικό μασ theme, βαςιηόμενοι ςε ζνα άλλο theme! Μακαίνουμε τα ενδότερα του WordPress ςε.μικρότερεσ δόςεισ. 7

8 Πώσ φτιάχνουμε Child Theme; 1/5 Πρζπει να ζχουμε εγκατεςτθμζνο το parent theme! δεν είναι απαραίτθτο να είναι ενεργό Στον φάκελο των themes (wp-content/themes): φτιάχνουμε ζνα φάκελο για τα αρχεία του child theme o Πρόταςη: δϊςτε το όνομα του parrent theme με κατάλθξθ '-child' o λατινικοφσ χαρακτιρεσ, χωρίσ κενά φτιάχνουμε ζνα αρχείο styles.css o για να τροποποιιςουμε τθν εμφάνιςθ φτιάχνουμε ζνα αρχείο functions.php o για να τροποποιιςουμε τθν λειτουργικότθτα 8

9 Πώσ φτιάχνουμε Child Theme; 2/5 Στο style.css φτιάχνουμε τθν ταυτότητα του child theme: /* Theme Name: το όνομα του child theme URI: το URL ςτο οποίο μπορεί κάποιοσ να βρει το child theme Description: περιγραφι του theme Author: ςυςτινεται το username του δθμιουργοφ ςτο wordpress.org Author URI: θ ιςτοςελίδα του δθμιουργοφ Template: το folder name του parent theme Version: αρικμόσ ζκδοςθσ του child theme License: GNU General Public License v2 or later License URI: Tags: keywords που χαρακτθρίηουν το theme βάςθ χρώματοσ, αν είναι ςκουρόχρωμο ι ανοιχτόχρωμο, πόςεσ ςτιλεσ ζχει, αν είναι responsive, κτλ. (δείτε tags ςε άλλα themes και κα καταλάβετε). Text Domain: χρθςιμοποιείται ςε τυχόν μετάφραςθ του child theme */ Μετά ακολουκοφν οι CSS κανόνεσ του child theme! π.χ. h1 { font-size: 2.1em; color: #123456; } 9

10 Πώσ φτιάχνουμε Child Theme; 3/5 Στο functions.php ενςωματϊνουμε (enqueue) τα stylesheets του parent theme. Διαφορετικά κα ιςχφει μόνο το style.css του child theme! <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }?> Άλλα που κάνουμε ςτο functions.php: ενςωμάτωςθ scripts από το parent theme διαχείριςθ ςυςτατικϊν του theme (header, sidebars, κτλ) οριςμόσ ςυναρτιςεων που χρειάηεται το child theme οριςμόσ options menu για παραμετροποίθςθ του child theme 10

11 Πώσ φτιάχνουμε Child Theme; 4/5 Παράδειγμα ενςωμάτωςθσ GoogleFont ςτο header του parent theme: add_action( 'wp_head', 'googlefonts_link' ); function googlefonts_link() { echo '<link href=" family=open+sans&subset=greek" rel="stylesheet" type="text/css">'. "\n"; } Δεν είναι ο μοναδικόσ τρόποσ για να γίνει το παραπάνω! Είναι όμωσ ο καλφτεροσ! Δείτε και το επόμενο slide. 11

12 Πώσ φτιάχνουμε Child Theme; 5/5 Τα προθγοφμενα, είναι το ελάχιςτο για child theme. Επιπρόςθετα: Μποροφμε να επανακαθορίςουμε οποιοδιποτε από τα αρχεία του parent theme, απλά ξανα-ορίηοντάσ το. o Αν π.χ. κζλουμε ζνα διαφορετικό header για το child theme μασ, μποροφμε να αντιγράψουμε ςτο φάκελο του child theme το αρχείο header.php από το parent theme, και να το τροποποιιςουμε. Προφανϊσ γνϊςθ του WordPress API βοθκάει! Το functions.php του parent theme είναι το μόνο αρχείο που δεν υποςκελίηεται από ομϊνυμο file του child theme. 12

13 Περιςςότερα Child Themes Theme Customization Tutorial Theme Development Δείτε τθν ενότθτα Template Files List για μια ςφντομθ περιγραφι του τι-είναι-τι ςτα αρχεία ενόσ theme. 13

14 WordPress Greek Community Facebook Web Twitter WordPress on-line Documentation 14

15 WORDPRESS Τμήμα Μηχανικών Πληροφορικής ΤΕΙ Θεσσαλίας Ευχαριςτώ για την προςοχή ςασ! Ερωτήςεισ; Κόκκορασ Φώτησ, Τμιμα Μθχανικϊν Πλθροφορικισ, TEI Θεςςαλίασ