WordPress Greek Community - Workshop @ TEI Thessaly - Child Themes - Fotis Kokkoras

Transcript

1. WORDPRESS WORKSHOP 11/07/2015 @ Τμήμα Μηχανικών Πληροφορικής – ΤΕΙ Θεσσαλίας 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 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
3. 3 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
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 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
5. 5 header.php sidebar.php footer.php page.php Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
6. Το πρόβλημα Μποροφμε να τροποποιιςουμε ζνα theme πειράηοντασ:  τισ CSS ρυκμίςεισ του  τα επιμζρουσ ςυςτατικά που ςυνκζτουν τισ ςελίδεσ o header, footer, page templates, κτλ …αλλά, ςτο πρϊτο update του theme, κα χάςουμε όλεσ τισ αλλαγζσ που ζχουμε κάνει! Η λφςη; 6 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
7. Child Themes Ζνα child theme είναι ζνα theme που κληρονομεί εμφάνιςθ και λειτουργικότθτα από ζνα άλλο theme (που ονομάηετε parent theme).  https://codex.wordpress.org/Child_Themes Οφζλη  Τροποποιοφμε ζνα theme χωρίσ να χάνουμε κατά το update του, τισ μεταβολζσ που ζχουμε κάνει.  Μποροφμε να φτιάξουμε γρήγορα ζνα δικό μασ theme, βαςιηόμενοι ςε ζνα άλλο theme!  Μακαίνουμε τα ενδότερα του WordPress ςε ….μικρότερεσ δόςεισ. 7 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
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 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
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: http://www.gnu.org/licenses/gpl-2.0.html Tags: keywords που χαρακτθρίηουν το theme βάςθ χρώματοσ, αν είναι ςκουρόχρωμο ι ανοιχτόχρωμο, πόςεσ ςτιλεσ ζχει, αν είναι responsive, κτλ. (δείτε tags ςε άλλα themes και κα καταλάβετε). Text Domain: χρθςιμοποιείται ςε τυχόν μετάφραςθ του child theme */  Μετά ακολουκοφν οι CSS κανόνεσ του child theme!  π.χ. h1 { font-size: 2.1em; color: #123456; } 9 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
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 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
11. Πώσ φτιάχνουμε Child Theme; 4/5 Παράδειγμα ενςωμάτωςθσ GoogleFont ςτο header του parent theme: add_action( 'wp_head', 'googlefonts_link' ); function googlefonts_link() { echo '<link href="http://fonts.googleapis.com/css? family=Open+Sans&subset=greek" rel="stylesheet" type="text/css">' . "\n"; } Δεν είναι ο μοναδικόσ τρόποσ για να γίνει το παραπάνω! Είναι όμωσ ο καλφτεροσ!  Δείτε και το επόμενο slide…. 11 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
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 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
13. Περιςςότερα… Child Themes  https://codex.wordpress.org/Child_Themes Theme Customization Tutorial  http://www.presscoders.com/wordpress-theme- customization-guide/ Theme Development  https://codex.wordpress.org/Theme_Development  Δείτε τθν ενότθτα Template Files List για μια ςφντομθ περιγραφι του τι-είναι-τι ςτα αρχεία ενόσ theme. 13 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 11/07/2015
14. WordPress Greek Community Facebook https://www.facebook.com/groups/WordPressGreekCommunity/  Web  http://www.wpgc.gr/  http://wpgreece.org/  Twitter  https://twitter.com/wordpressgrcomm/  WordPress on-line Documentation  https://codex.wordpress.org/ 11/07/2015 Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ 14
15. WORDPRESS WORKSHOP 11/07/2015 @ Τμήμα Μηχανικών Πληροφορικής – ΤΕΙ Θεσσαλίας Ευχαριςτώ για την προςοχή ςασ! Κόκκορασ Φώτησ, Τμιμα Μθχανικϊν Πλθροφορικισ, TEI Θεςςαλίασ Ερωτήςεισ;