Δημιουργία custom theme from scratch! Γιατί και πώς φτιάχνω το δικό μου WordPress theme. [Workshop] - Αρχιμήδης Μερτζάνος

WordCamp Athens 2019

Είναι γεγονός πώς το WordPress έχει κατακτήσει το Web. Αυτό οφείλεται σε πολλούς παράγοντες. Ένας από αυτούς είναι η δυνατότητα που δίνει να δημιουργήσει κάποιος το δικό του WordPress και με τον τρόπο αυτό να ντύσει την ιδέα του, ή του πελάτη του. Βέβαια τη στιγμή που γράφεται αυτό το κείμενο ίσως να υπάρχουν και πάνω από 50.000 WordPress themes τα οποία είναι διαθέσιμα είτε δωρεάν είτε με πληρωμή. Οπότε γιατί να φτιάξετε το δικό σας theme ; Πώς θα το κάνετε; Αυτά τα δύο θα απαντηθούν στο Workshop αυτό.
Είναι βέβαιο πώς όταν κάποιος γνωρίζει τα βασικά του theme development μπορεί πολύ πιο γρήγορα να προτείνει και να βρεί λύσεις σε κάποιο ενδεχόμενο request κάποιου πελάτη.
Μπορεί πολύ πιο εύκολα να επεκτείνει ένα WordPress theme , ή να φτιάξει theme βασισμένο αποκλειστικά στις δικές του ανάγκες. Κακά τα ψέμματα γνωρίζει το κώδικα που γράφει.
Σε αυτό το workshop θα δούμε τα εξής:

Βασικά αρχεία δημιουργίας WordPress Theme
Βασική δομή του φακέλου αρχείων του WordPress theme.
Αρχείο functions.php
Χρήση CSS στο theme μας.
Χρήση get_header(), get_footer().
Εξέταση του template hierarchy του WordPress
Εκμάθηση custom queries , για παράδειγμα custom WP Query. Με ποιο τρόπο μπορείτε να δείχνετε τα posts – και όχι μόνο – που θέλετε στο σημείο που θέλετε.
Post Types. Τι είναι , που χρησιμοποιουνται.
Στο τέλος του Workshop θα σας δωθεί και πλήρης πρόσβαση στο theme το οποίο θα υπάρχει διαθέσιμο στο Github.

Σε ποιους απευθύνεται:
WordPress developers που θέλουν πραγματικά να μάθουν πώς μπορούν να φτιάξουν τα δικά τους themes που θα τους λύνουν τα χέρια σε όλα τα projects. Αυτοί οι οποίοι έχουν βαρεθεί να ψωνίζουν έτοιμα themes και εκτός από τη λειτουργικότητα να «παντρεύονται» και τα όρια που θέτουν αυτά. Developers που θέλουν να ασχοληθούν με το theme authoring.

Transcript

1. CUSTOM WORDPRESS THEME FROM SCRATCH WordCamp 2019 – Athens - 18/5/2019 ARCHIMIDIS MERTZANOS Lead WordPress Engineer @ Hellenic Technologies
2. Η παρουσίαση αυτή αποτελεί το θεωρητικό κομμάτι για την κατασκευή ενός WordPress theme from scratch. Περιέχονται κάποιες θεωρητικές σημειώσεις. ΚΑΛΗΜΕΡΑ ΣΑΣ!!
3. Custom WordPress theme from scratch Archimidis Mertzanos 3 WORDPRESS THEMES Αυτή τη στιγμή υπάρχουν πάνω από 70.000 WordPress themes διαθέσιμα. ….Και γιατί να φτιάξω το δικό μου;; Που μπορεί να βοηθήσει; Σε τι χρησιμεύει;
4. Custom WordPress theme from scratch Archimidis Mertzanos 4 Το theming στο WordPress είναι κάτι πολύ βασικό. Γνωρίζοντας τη δημιουργία του καταλαβαίνετε πολύ περισσότερα για τη λειτουργία του WordPress. ΚΑΤΑΝΟΗΣΗ ΛΕΙΤΟΥΡΓΙΑΣ Ένα δικό σας θέμα μπορείτε να το χρησιμοποιείτε πολύ πιο εύκολα και να το χειρίζεστε επίσης. Το πιο σημαντικό είναι πώς το «δένετε» στις ανάγκες του πελάτη σας. ΕΥΚΟΛΙΑ ΧΡΗΣΗΣ Αυτό είναι πολύ σημαντικό. Αλήθεια έχετε δοκιμάσει να κάνετε update σε theme που είναι παλιό, ή outdated; ΔΕΝ ΒΑΣΙΖΕΣΤΕ ΣΕ ΚΑΤΙ ΞΕΝΟ ΠΛΕΟΝΕΚΤΗΜΑΤΑ CUSTOM WORDPRESS THEME Μπορείτε να το επεκτείνετε πολύ εύκολα. ΕΥΚΟΛΗ ΕΠΕΚΤΑΣΗ Μπορείτε να βγάλετε λεφτά και short term αλλά και long term. ΟΙΚΟΝΟΜΙΚΟ ΟΦΕΛΟΣ
5. Custom WordPress theme from scratch Archimidis Mertzanos 5 TA ΔΥΟ ΒΑΣΙΚΑ ΑΡΧΕΙΑ ΕΝOΣ WORDPRESS THEME Δύο είναι τα βασικά αρχεία ενός WordPress theme. • index.php • style.css
6. Custom WordPress theme from scratch Archimidis Mertzanos 6 STYLE.CSS Βασικό αρχείο που είναι αναγκαίο στο theme, περιέχει κάποια πολύ βασικά στοιχεία αλλά και το theme styling. 1. Όνομα theme 2. Έκδοση 3. Περιγραφή 4. Εκδότης 5. Text Domain 6. URI 7. Άδεια 8. URI Αδείας 9. Tags https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
7. Custom WordPress theme from scratch Archimidis Mertzanos 7 INDEX.PHP Υποχρεωτικό αρχείο που είναι αναγκαίο στο theme. Σε περίπτωση που δεν έχει οριστεί αλλιώς εμφανίζει την αρχική σελίδα.
8. Custom WordPress theme from scratch Archimidis Mertzanos 8 https://codex.wordpress.org/Functions_File_Explained FUNCTIONS.PHP Βασικό αρχείο που είναι στο οποίο γράφουμε theme related functions αλλά και functions τα οποία ενεργοποιούν/αλλάζουν core function όπως navigation menus, widget areas κλπ. 1. Λειτουργεί μόνο για το συγκεκριμένο theme. 2. Δεν χρειάζεται κάποια συγκεκριμένο header 3. Μπορούμε να έχουμε πολλά αρχεία με functions μέσα που να συνδέονται με αυτό.
9. Custom WordPress theme from scratch Archimidis Mertzanos 9 SINGLE.PHP Αρχείο template που εμφανίζει το single post αλλά και posts από άλλα custom post types. PAGE.PHP Αρχείο template που εμφανίζει τα single pages. https://developer.wordpress.org/themes/basics/template-files/ ARCHIVE.PHP Αρχείο template που εμφανίζει τα single pages.
10. Custom WordPress theme from scratch Archimidis Mertzanos 10 PARTIAL TEMPLATES https://developer.wordpress.org/themes/basics/template-files/ 1. header.php 2. footer.php 3. sidebar.php 4. Μέσω get_template_part μπορούμε να φέρουμε όποιο template part θέλουμε. Είναι “κομμάτια” από templates που τα χρησιμοποιούμε στα σημεία που θέλουμε εμείς. Για όλα τα βασικά αρχεία δείτε τον παρακάτω σύνδεσμο.
11. Custom WordPress theme from scratch Archimidis Mertzanos 11 CSS/JS Για να ανεβάσουμε τα δικά μας css/js το κάνουμε μέσω κάποιων functions τα οποία τα δηλώνουμε στo functions.php Περισσότερα στον σύνδεσμο: Για να βρίσκουμε το path ενός CSS αρχείου χρησιμοποιούμε WordPress function όπως • get_template_directory_uri() https://developer.wordpress.org/reference/functions/wp_enqueue_script/
12. Custom WordPress theme from scratch Archimidis Mertzanos 12 TEMPLATE HIERARCHY Είναι από τα πιο σημαντικά πράγματα που πρέπει να μάθετε για να είστε ακριβείς στο WordPress theming. Εξηγεί τι «δείχνει» κάθε template file στο WordPress. https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png
13. Custom WordPress theme from scratch Archimidis Mertzanos 13 ΠΑΡΑΔΕΙΓΜΑΤΑ TEMPLATE HIERARCHY 1. single.php - Το single post αλλά και όλα τα single custom post types. 2. single-book.php – To single template για το post type με slug «book» 3. single-book-the-alchemist.php – Το single template για το post type book με slug «the-alchemist» 4. singular.php – Fallback το οποίο είναι single template και για posts και για pages. 5. category-horror-books.php – Archive template για την κατηγορία horror.
14. Custom WordPress theme from scratch Archimidis Mertzanos 14 WORDPRESS LOOP Η καρδιά του WordPress , ο τρόπος με τον οποίο το WordPress φέρνει τα δεδομένα στο κάθε ένα template file που θέλουμε. if( have_posts()): while(have_posts()): the_post(); // html code ,είναι το κομμάτι που εμφανιζει πχ το Post , κάποιο element endwhile; endif; Το παραπάνω φέρνει το content αναλόγως του tpl. Για παράδειγμα αν το χρησιμοποιήσουμε στο page.php θα φέρνει τον τίτλο, το content και ό,τι άλλο έχουμε ορίσει πχ custom fields, featured image κλπ.
15. Custom WordPress theme from scratch Archimidis Mertzanos 15 CUSTOM WORDPRESS LOOP - 1 https://codex.wordpress.org/Class_Reference/WP_Query Είναι custom loop με τα δεδομένα που του δίνουμε εμείς. Παράδειγμα: Θέλουμε 10 posts από ένα συγκεκριμένο author που να μην ανήκουν σε συγκεκριμένες κατηγορίες . $args = array( ‘post_type’ => ’post’, ’post__not_in’ =>array(4,5,6), ‘author’ => 12, ‘posts_per_page’=> 10 ); $custom = new WP_Query( $args );
16. Custom WordPress theme from scratch Archimidis Mertzanos 16 CUSTOM WORDPRESS LOOP 2 https://codex.wordpress.org/Class_Reference/WP_Query $custom = new WP_Query( $args ); If ($custom->have_posts()): while($custom->have_posts()): $custom->the_post(); // code endwhile; endif; wp_reset_postdata(); /*SOS ! Αυτό πρέπει οπωσδήποτε να υπάρχει!*/
17. Custom WordPress theme from scratch Archimidis Mertzanos 17 ΑΣ ΞΕΚΙΝΗΣΕΙ Ο ΚΩΔΙΚΑΣ... https://github.com/ArchimidisM Και θα σας δοθούν οδηγίες για να ξεκινήσουμε. Το θεωρητικό κομμάτι τελειώνει κάπου εδω. Πάμε να γράψουμε κώδικα γιατί γι αυτό ήρθαμε!