WordPress Child Themes - Sotiris Souflakos

Transcript

1. Παραμετροποίηση Layout σε WordPress theme χρησιμοποιώντας τις τεχνολογίες HTML / CSS και PHP
2. Στόχος της παρουσίασης • Πως χρησιμοποιώντας τις τεχνολογίες HTML / CSS και PHP παραμετροποιούμε το layout • Δεν γίνεται εκμάθηση των παραπάνω τεχνολογιών • Για την εκμάθηση των τεχνολογιών HTML / CSS και PHP υπάρχουν αναφορές και links τα οποία μπορείτε να ακολουθήσετε
3. WordPress Theme • Είναι απαραίτητο για τη δημιουργία ενός website σε WordPress • Για να χτίσουμε ένα website επιλέγουμε ένα parent theme • Ένα parent theme είναι ένα πλήρες πακέτο ως προς το WordPress • Δίνει τη δυνατότητα να αλλάξουμε ριζικά την εμφάνιση μιας σελίδας, χωρίς να επεξεργαζόμαστε κώδικα PHP ή HTML/CSS • Αυτό το πετυχαίνουν χρησιμοποιώντας κάποιον page builder (πχ Elementor, WPBakery, etc )
4. Σύνδεσμοι • https://codex.wordpress.org/Themes • https://el.wordpress.org/themes/commercial/ • https://elementor.com/ • https://codecanyon.net/item/visual-composer-page-builder-for- wordpress/242431
5. WordPress Child Theme • Χρησιμοποιείται για την παραμετροποίηση ενός parent theme • Θεωρείται ο καλύτερος τρόπος τροποποίησης του layout • Συνήθως σε έκταση είναι πολύ μικρότερο από το parent theme • Στηρίζεται πάνω στην ιδέα της επικάλυψης / override • Αρχικά κληρονομεί τη λειτουργικότητα και το styling του γονικού θέματος • Το WordPress ελέγχει τα αρχεία στο φάκελο του child theme και με αυτά επικαλύπτει τα αρχεία του γονικού θέματος • Αποτελείται από τουλάχιστον από τα αρχεία (style.css και functions.php)
6. Σύνδεσμοι • https://codex.wordpress.org/Child_Themes • https://developer.wordpress.org/themes/advanced-topics/child- themes/ • https://developer.wordpress.org/themes/basics/main-stylesheet- style-css/
7. Παράδειγμα δημιουργίας και χρήσης child theme • Χρησιμοποιήσαμε ως parent theme το Twenty Seventeen στον ιστότοπο http://northbridgeweb.eu/ • Κατασκευάσαμε ένα child theme για το parent theme • Δημιουργήσαμε το style.css και functions.php
8. style.css /* Theme Name: Twenty Seventeen Child Theme Theme URI: https://wordpress.org/themes/twentyseventeen/ Description: A child theme for use with WordPress Twenty Seventeen Theme Author: Sotiris Souflakos Author URI: https://sotiris-souflakos.com Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentyseventeen-child */
9. functions.php <?php function my_theme_enqueue_styles() { // This is 'twentyseventeen-style' for the Twenty Seventeen theme. $parent_style = 'twentyseventeen-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style’, get_stylesheet_directory_uri() . '/style.css’, array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css') /* wp_get_theme()->get('Version’) */ ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles’ );
10. Σύνδεσμοι • https://el.wordpress.org/themes/twentyseventeen/ • http://northbridgeweb.eu/ • http://northbridgeweb.eu/wp-content/themes/twentyseventeen- child/style.css • http://northbridgeweb.eu/child/ • https://developer.wordpress.org/reference/functions/wp_enqueue_s tyle/
11. Πλεονεκτήματα χρήσης child theme • Διασφαλίζουμε ότι θα διατηρηθούν οι τροποποιήσεις που κάνουμε • Mένει ανεπηρέαστο στα updates του parent theme • Επιταχύνει τον χρόνο ανάπτυξης ενός ιστότοπου • Μαθαίνουμε για την ανάπτυξη θεμάτων σε WordPress
12. Σύνδεσμοι • https://www.taniarascia.com/developing-a-wordpress-theme-from- scratch/ • Υλικό από παρουσιάσεις Τάκη Βουγιούρη σε FossComm 2016, Παν. Πειραιώς
13. Οι τεχνολογίες HTML / CSS και PHP • Το WordPress είναι ελεύθερο και ανοικτού κώδικα σύστημα διαχείρισης περιεχομένου, γραμμένο σε PHP και MySQL • Η HTML είναι η κύρια γλώσσα σήμανσης για τις ιστοσελίδες στο διαδίκτυο • Γράφεται υπό μορφή στοιχείων HTML τα οποία αποτελούνται από ετικέτες (tags) • Τα στοιχεία της HTML (html elements) είναι τα βασικά δομικά στοιχεία των ιστοσελίδων • Ένα HTML document συνθέτεται από στοιχεία HTML • Η CSS χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός HTML εγγράφου και κατ’ επέκταση των στοιχείων HTML
14. Δύο λόγια για HTML / CSS • Η HTML περιγράφει περιεχόμενο ενώ το CSS περιγράφει μορφοποίηση • Το περιεχόμενο δεν περιγράφει εμφάνιση (δεν έχει κάποια εμφάνιση από μόνο του), περιγράφει σημασία και εμφανίζεται μέσω της μορφοποίησης • Tο CSS περιγράφει το πως θα γίνει η μορφοποίηση πάνω στο περιεχόμενο • Η μορφοποίηση μέσω του CSS δείχνει το περιεχόμενο με το σωστό τρόπο
15. Η βασική δομή μιας σελίδας • Συνθέτει ένα HTML έγγραφο / document • Έχει δενδρική μορφή, δλδ μπορεί να αναπαρασταθεί ως δέντρο, http://web.simmons.edu/~grabiner/comm244/weekfour/document-tree.html <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
16. The box model • Κάθε στοιχείο html αντιπροσωπεύεται από (μπορεί να θεωρηθεί) ένα ορθογώνιο κιβώτιο • Το κιβώτιο αποτελείται από το περιεχόμενο και έχει 3 βασικές ιδιότητες, τις padding, border, και margin • Κάθε html element γίνεται render από τη μηχανή του browser σύμφωνα με αυτό το μοντέλο • Τα padding, margin, border μπορούμε να τα ελέγχουμε με CSS • Πριν αποδώσουμε style θα πρέπει να κατανοήσουμε το box model
17. Σύνδεσμοι • https://www.w3schools.com/css/css_boxmodel.asp • https://developer.mozilla.org/en- US/docs/Learn/CSS/Introduction_to_CSS/Box_model • https://developer.mozilla.org/en- US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_m odel
18. Στοιχεία HTML • Κάθε στοιχείο HTML ορίζεται από μία ετικέτα • Τα στοιχεία HTML χωρίζονται σε 2 μεγάλες κατηγορίες • Τα block level στοιχεία και τα inline level στοιχεία • Τα block level μπορούν να περιέχουν άλλα block level στοιχεία • Τα block level περιέχουν inline level στοιχεία • Τα inline level μπορούν να περιέχουν άλλα inline level στοιχεία • Τα inline level δεν μπορούν να περιέχουν block level στοιχεία • Block level στοιχεία: <div></div>, <p></p> • Inline level στοιχεία: <span></span>, <a></a>
19. Βασικά CSS • Το CSS εφαρμόζεται πάνω σε ένα HTML έγγραφο • Περιγράφει το πως θα εμφανίζονται τα στοιχεία της HTML • Αποτελείται από κανόνες της μορφής ιδιότητα: τιμή • Συνδυάζεται με την HTML σχηματίζοντας επιλογείς • Οι επιλογείς καθορίζουν σε ποια στοιχεία HTML θα εφαρμοστούν οι κανόνες CSS • Για να δώσουμε style στα HTML στοιχεία χρησιμοποιούμε τις κλάσεις / class • Μέσω των κλάσεων ομαδοποιούμε και αποδίδουμε style σε ομοειδή html στοιχεία (εφαρμόζουμε κοινό style)
20. Παράδειγμα css style .widget ul li, .widget ol li { border-bottom: 1px dotted #aaa; border-top: 1px dotted #aaa; padding: 0.5em 0; } Σημείωση: Ειδικότητα του επιλογέα
21. Χρήσιμοι κανόνες CSS για layout • padding, border, margin • font, font-family, font-size, font- weight • text-align, line-height • word-spacing, text-transform • color • background, background-color • width, height • float • display • position, top, right, bottom, left • overflow • border-radius
22. Σύνδεσμοι • https://en.wikipedia.org/wiki/HTML • https://en.wikipedia.org/wiki/Cascading_Style_Sheets • https://www.w3schools.com/tags/tag_doctype.asp • https://www.w3schools.com/html/html_css.asp • https://www.w3schools.com/css/ • http://www.htmldog.com/guides/ • HTML & CSS, design and build websites Δωρεάν σεμινάρια ανάπτυξης web εφαρμογών: • https://web-class.gr/ • http://webseminars.ee.auth.gr/
23. Η γλώσσα PHP • Δημιουργήθηκε το 1994 από τον Rasmus Lerdorf και σήμερα βρίσκεται στην έκδοση 7.2 • Είναι γλώσσα προγραμματισμού server side ανοιχτού κώδικα • Αποτελεί μία από τις πιο διαδεδομένες τεχνολογίες στο Παγκόσμιο Ιστό • Χρησιμοποιείται σήμερα σε ποσοστό 80% • Χρησιμοποιείται για τη δημιουργία σελίδων web με δυναμικό περιεχόμενο • Είναι η βασική γλώσσα ανάπτυξης του WordPress
24. Σύνδεσμοι • http://php.net/manual/en/history.php.php • http://php.net/usage.php • https://w3techs.com/ • https://el.wikipedia.org/wiki/PHP • https://en.wikipedia.org/wiki/WordPress • https://wordpress.org/about/
25. Επεξεργασία template files ενός theme • Τα themes του WordPress βρίσκονται στον κατάλογο ./wp-content/themes • Εντοπίζουμε πιο αρχείο είναι υπεύθυνο για το τμήμα που θέλουμε να παραμετροποιήσουμε • Αντιγράφουμε το αρχείο στον κατάλογο του child theme • Προσαρμόζουμε το νέο αρχείο στα μέτρα μας • Το WordPress αντί να τρέξει / χρησιμοποιήσει το αρχείο του theme, θα χρησιμοποιήσει το νέο αρχείο • Στο παράδειγμα αλλάξαμε το αρχείο ./wp-content/themes/twentyseventeen/template-parts/post/content.php που είναι υπεύθυνο για το render στη σελίδα /blog
26. Σύνδεσμοι • https://developer.wordpress.org/themes/basics/template-hierarchy/ • https://www.thewordcracker.com/en-us/twenty-seventeen- summary-excerpt/
27. Page templates του WordPress • Χρησιμοποιούνται για να αλλάξουν την εμφάνιση μίας σελίδας ή μιας ομάδας σελίδων • Αντί να χρησιμοποιήσουμε κάποιο από τα page templates του theme, κατασκευάζουμε ένα δικό μας • Tο επιλέγουμε από Pages > Add New > Attributes > Template
28. Παράδειγμα page-foo.php <?php /** * Template Name: Foo Template * * @package WordPress * @subpackage Twenty_Seventeen * @since Twenty Seventeen 1.0 */ get_header(); ?> <div class="wrap"> <h1>Hello World</h1> </div> <?php get_footer();
29. Σύνδεσμοι • https://developer.wordpress.org/themes/template-files- section/page-template-files/ • http://www.wpbeginner.com/wp-themes/how-to-create-a-custom- page-in-wordpress/