Presentatie WordPress Theme Frameworks WordCamp NL 2010

  • View
    3.303

  • Download
    0

Embed Size (px)

DESCRIPTION

Presentatie over WordPress Theme Frameworks van WordCamp NL 2010

Text of Presentatie WordPress Theme Frameworks WordCamp NL 2010

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