Presentatie WordPress Theme Frameworks WordCamp NL 2010

3,080 views
3,019 views

Published on

Presentatie over WordPress Theme Frameworks van WordCamp NL 2010

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,080
On SlideShare
0
From Embeds
0
Number of Embeds
511
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Presentatie WordPress Theme Frameworks WordCamp NL 2010

  1. 1. WordPress Theme Frameworks WordCamp NL 2010 Remkus de Vries | @DeFries
  2. 2. Remkus de Vries @DeFries ForSite Media http://www.forsitemedia.nl WordPress Dimensie http://wpdimensie.nl Moderator / Admin http://nl.wordpress.org
  3. 3. Waarom ontwerpen met Theme Frameworks?
  4. 4. Waarom ontwerpen met Theme Frameworks? Matt Mullenweg: “ Child themes are the only way you should build your WordPress site on top of a framework”
  5. 5. Wat is een WordPress Theme Framework? Vorm en functionaliteit zouden met betrekking tot Webdesign gescheiden moeten zijn Waarom?
  6. 6. Waarom een WordPress Theme Framework? <ul><li>WordPress ontwikkelt zich door </li></ul><ul><ul><li>Veiligheid verbeterd </li></ul></ul><ul><ul><li>Functionaliteiten worden toegevoegd </li></ul></ul><ul><li>SEO verbeteringen door te voeren </li></ul><ul><li>Stabiliteit van het design </li></ul>
  7. 7. Maar wat is een WordPress Theme Framework dan eigenlijk? <ul><li>Een Framework zorgt er voor dat je site werkt </li></ul><ul><ul><li>SEO </li></ul></ul><ul><ul><li>Layout opties </li></ul></ul><ul><ul><li>Plugins werken </li></ul></ul><ul><ul><li>Cross-browser werkende CSS (in basis) </li></ul></ul><ul><ul><li>Hooks en filters bieden ruimte voor extra functionaliteiten </li></ul></ul><ul><ul><li>Best practice </li></ul></ul><ul><li>Child Theme zorgt voor design </li></ul>
  8. 8. Child Themes to the rescue! <ul><li>Een Child Theme is een theme wat zorgt voor: </li></ul><ul><li>de kleuren </li></ul><ul><li>de indeling, de layout </li></ul><ul><li>lettertypes </li></ul><ul><li>extra functionaliteiten </li></ul>
  9. 9. Hoe maak ik een Child Theme <ul><li>Installeer je Theme Framework (activeren niet nodig) </li></ul><ul><li>Maak een folder aan in /wp-content/themes/ met naam nieuwe theme </li></ul><ul><li>Maak een style.css bestand aan in de map </li></ul><ul><li>Eventueel ook een functions.php </li></ul>
  10. 10. Child Theme stylesheet <ul><li>Dit heeft je style.css nodig om als Child Theme te werken: </li></ul><ul><li>/* </li></ul><ul><li>Theme Name: WordPress Dimensie </li></ul><ul><li>Theme URL: http://wpdimensie.nl </li></ul><ul><li>Description: Theme for WordPress Dimensie </li></ul><ul><li>Author: Remkus de Vries </li></ul><ul><li>Author URI: http://www.forsitemedia.nl </li></ul><ul><li>Version: 1.3 </li></ul><ul><li>Template: genesis </li></ul><ul><li>*/ </li></ul>
  11. 11. van Genesis Framework
  12. 12. naar Genesis Child Theme
  13. 13. naar Genesis Child Theme
  14. 14. naar Genesis Child Theme
  15. 15. Of van Hybrid..
  16. 16. naar een Hybrid Child Theme
  17. 17. naar een Hybrid Child Theme
  18. 18. Of van Thematic…
  19. 19. naar een Thematic Child Theme
  20. 20. naar een Thematic Child Theme
  21. 21. WordPress Theme Frameworks <ul><li>Genesis van StudioPress </li></ul><ul><ul><li>Brian Gardner, Nathan Rice </li></ul></ul><ul><ul><li>www.studiopress.com </li></ul></ul><ul><li>Hybrid van ThemeHybrid </li></ul><ul><ul><li>Justin Tadlock </li></ul></ul><ul><ul><li>www.themehybrid.com </li></ul></ul><ul><li>Thematic </li></ul><ul><ul><li>Ian Stewart, Chris Goßmann </li></ul></ul><ul><ul><li>www.themeshaper.com/thematic </li></ul></ul>
  22. 22. Wat heb ik nodig om een Child Theme te maken? <ul><li>Functions.php die werkt met actions, hooks en filters </li></ul><ul><li>CSS </li></ul>
  23. 23. Hooks, Actions & Filters <ul><li>Wat zijn Hooks? </li></ul><ul><ul><li>voor gedefinieerde plekken vanuit je Framework die je kunt benutten om acties aan te te voegen </li></ul></ul><ul><li>Wat zijn Actions? </li></ul><ul><ul><li>dit kunnen in principe alle soorten functions zijn die je in je Child Theme functions.php definieerd </li></ul></ul><ul><li>Wat zijn Filters </li></ul><ul><ul><li>Framework gedefinieerde actions waarvan je de output kunt manipuleren </li></ul></ul>
  24. 24. Hooks <ul><li>genesis_before This hook executes immediately after the opening tag in the document source. </li></ul><ul><li>genesis_after_loop This hook executes immediately after all loop blocks. Therefore, this hook falls outside the loop, and cannot execute functions that require loop template tags or variables. </li></ul><ul><li>genesis_before_header This hook executes immediately before the header (outside the #header div). </li></ul>
  25. 25. Actions & Filters <ul><li>// Search Button </li></ul><ul><li>add_filter('genesis_search_button_text', 'custom_search_button_text'); </li></ul><ul><li>function custom_search_button_text($text) { </li></ul><ul><li>return esc_attr('Go'); </li></ul><ul><li>} </li></ul><ul><li>// Relocate the Breadcrumbs </li></ul><ul><li>// Breadcrumbs after Header </li></ul><ul><li>remove_action('genesis_before_loop', 'genesis_do_breadcrumbs'); </li></ul><ul><li>add_action('genesis_before_content_sidebar_wrap', 'genesis_do_breadcrumbs'); </li></ul><ul><li>//Changing the output on the Post Info to showing only the date </li></ul><ul><li>add_filter('genesis_post_info', 'post_info_filter'); </li></ul><ul><li>function post_info_filter($post_info) { </li></ul><ul><li>if (!is_page()) { </li></ul><ul><li>$post_info = '[post_date] [post_edit]'; </li></ul><ul><li>return $post_info; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  26. 26. CSS <ul><li>Per Framework afhankelijk </li></ul><ul><ul><li>Child Theme style.css statements ‘overschrijven’ statements uit de Frameworks </li></ul></ul><ul><ul><li>Child Theme style.css is volledig gedefinieert en heeft enkel aanpassingen nodig </li></ul></ul><ul><ul><li>CSS specificity is je vriend </li></ul></ul>
  27. 27. Resumerend <ul><li>Framework + Child Theme = veiliger </li></ul><ul><li>Code is cleaner en beter (goed voor SEO) </li></ul><ul><li>Plugin compatibility wordt beter me om gegaan </li></ul><ul><li>Design is zo aangepast, code blijft hetzelfde </li></ul><ul><li>Frameworks voegen nieuwe WordPress functionaliteiten automatisch toe </li></ul>
  28. 28. do_action(‘answer_questions’, $questions); Ofwel, vragen? roept u maar 
  29. 29. Bedankt! Presentatie komt beschikbaar op http://wordcampnl.org/2010 , de volledige uitleg op http://www.forsitemedia.nl/blog
  30. 30. Remkus de Vries @DeFries ForSite Media http://www.forsitemedia.nl WordPress Dimensie http://wpdimensie.nl Moderator / Admin http://nl.wordpress.org

×