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

Transcript

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

   View Slide

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
   

   View Slide

3. 3
   Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ
   11/07/2015
   

   View Slide

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
   

   View Slide

5. 5
   header.php
   sidebar.php
   footer.php
   page.php
   Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ
   11/07/2015
   

   View Slide

6. Το πρόβλημα
   Μποροφμε να τροποποιιςουμε ζνα theme
   πειράηοντασ:
    τισ CSS ρυκμίςεισ του
    τα επιμζρουσ ςυςτατικά που ςυνκζτουν τισ ςελίδεσ
   o header, footer, page templates, κτλ
   …αλλά, ςτο πρϊτο update του theme, κα χάςουμε
   όλεσ τισ αλλαγζσ που ζχουμε κάνει!
   Η λφςη;
   6
   Fotis Kokkoras - 1o WordPress Workshop @ TEI Θεςςαλίασ
   11/07/2015
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Πώσ φτιάχνουμε Child Theme; 3/5
     Στο functions.php ενςωματϊνουμε (enqueue) τα
    stylesheets του parent theme.
     Διαφορετικά κα ιςχφει μόνο το style.css του child theme!
    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
    

    View Slide

11. Πώσ φτιάχνουμε Child Theme; 4/5
    Παράδειγμα ενςωμάτωςθσ GoogleFont ςτο header
    του parent theme:
    add_action( 'wp_head', 'googlefonts_link' );
    function googlefonts_link() {
    echo '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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide