Your SlideShare is downloading. ×
0
WordPress: ‘onder de motorkap’door Peter Luit
Voor wie bedoeld• gewone gebruikers van WordPress websites, die  • het admin gedeelte globaal kennen om pagina’s en artike...
WordPressDeel 1: de basisdoor Peter Luit
Website - pagina’s               bestemd voor ‘statische’ informatie                        - naast elkaar                ...
Weblog - artikelen (posts, blogs)               bestemd voor ‘dynamische’ informatie                         - onder elkaa...
WordPress - artikelen/pagina’s              WordPress kent beide typen content                   nieuwste                 ...
WordPress - menustructuur (vanaf 3.0)                               1                        2    3              - externe...
WordPress - sidebars, extra gebieden                  1                        2        3                                 ...
WordPress - widgets                                  1                        2    3                                      ...
WordPress - header/footer                   1                        2    3                                            2a ...
WordPress - plug-ins                                                       1               2      3toegevoegde functies, b...
WordPress - themes                                                            1               2      3                    ...
WordPressDeel 2: architectuurdoor Peter Luit
WordPress - Architectuur    ‘vast’             content    metadata      pagina’s                          titel   commenta...
WordPress - Menu               menu item                             leeg (#)                               URL           ...
WordPress - Themes kiezen   heel eenvoudig                    basis                       geavanceerd- geen of zeer beperk...
WordPress - Themes kiezen (paar voorbeelden)• Gratis: Twenty Eleven (standaard WordPress theme, relatief eenvoudig, maar  ...
WordPress - Frameworks• In veel gevallen een verwarrende term voor:  • Een al dan niet uitgebreid parent theme, waarmee ch...
WordPress - parent- en childthemes                                                           1               2      3     ...
WordPress - parent- en childthemes                                vormgeving(*)            functionaliteit        childthe...
WordPress - parent- en childthemes• Child themes: maak ze niet te complex  • Het doel: Child themes bevatten eigen ‘settin...
WordPressDeel 3: hooks(*)door Peter Luit* zie tevens hoofdstuk 6: plugins
WordPress - hooks (actions en filters)                                              1               2      3               ...
WordPress - hooks, de basis                         add_action                   waar   naam nieuwe functie               ...
WordPress - hooks, voorbeeldadd_action(suffusion_before_begin_content, my_custom_before_page);function my_custom_before_pa...
WordPressDeel 4: custom post typesdoor Peter Luit
WordPress - custom post types, voorbeeld voorbeeld binnen het theme PlatformPro: 3 naast elkaar staande boxes op bijvoorbe...
WordPress - custom post types, op luit.nl                                            features                             ...
WordPress - custom post types, de soorten           WP standaard                            voorbeelden                 po...
WordPress - custom post types, de techniek                                                              uitvoeren na opsta...
WordPress - custom post types, de weergave             single.php          basis om content weer te geven          maak ee...
WordPressDeel 5: multisites en permalinksdoor Peter Luit
WordPress - multisites netwerk   één website        via subdirectories          via subdomeinen http://www.naam.nl      ht...
WordPress - multisites netwerk, instellingen                                  wp-config.php        aanpassen               ...
WordPress - multisites netwerk, instellingen                                                        wp-config.php          ...
WordPress - multisites netwerk, instellingen                                                         .htaccess            ...
WordPress - multisites netwerk, serversettings                                                    httpd config       http:/...
WordPress - multisites netwerk, permalinks     http://www.naam.nl       http://www.naam.nl      http://www.naam.nl/       ...
WordPress - multisites netwerk, serversettings                                     wp-content      http://www.naam.nl     ...
WordPressDeel 6: pluginsdoor Peter Luit
WordPress - plugins, de basis                    actions                                                          filters  ...
WordPress - plugins, de opzet     wordpress home                                          wp-content                      ...
WordPress - plugins, de kennis- WordPress structuur (opzet van de kern, actions, filters, hooks)- HTML (algemene basiskenni...
WordPressDeel 7: CSS, de basisdoor Peter Luit
WordPress - CSS, de basis                                                           1               2      3          chil...
WordPress - CSS, de basis                                        - soms biedt parent theme de         parenttheme         ...
WordPress - CSS, theorie                                Basis in childtheme:       /*       Theme Name: Luit       Descrip...
WordPress - CSS, theorieCSS                               HTML                                resultaatbody {             ...
Upcoming SlideShare
Loading in...5
×

Hoe zit WordPress in elkaar

5,702

Published on

Hoe zit WordPress in elkaar, eenvoudige uitkeg van de basis van de WordPress architectuur tot en met hooks (actions, filters), parent- en child themes, CSS en plugins.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,702
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Hoe zit WordPress in elkaar"

  1. 1. WordPress: ‘onder de motorkap’door Peter Luit
  2. 2. Voor wie bedoeld• gewone gebruikers van WordPress websites, die • het admin gedeelte globaal kennen om pagina’s en artikelen te maken • media elementen kunnen plaatsen bij een pagina of artikel • kunnen omgaan met categorieën en tags binnen berichten • weten wat plugins aan functies kunnen toevoegen • weten wat een thema is • globaal de menustructuur kennen
  3. 3. WordPressDeel 1: de basisdoor Peter Luit
  4. 4. Website - pagina’s bestemd voor ‘statische’ informatie - naast elkaar pagina’s
  5. 5. Weblog - artikelen (posts, blogs) bestemd voor ‘dynamische’ informatie - onder elkaar nieuwste tijdlijn artikelen oudste
  6. 6. WordPress - artikelen/pagina’s WordPress kent beide typen content nieuwste tijdlijn artikelen pagina’s oudste
  7. 7. WordPress - menustructuur (vanaf 3.0) 1 2 3 - externe links 2a 2b - artikelen - pagina’s - categoriën(*) nieuwste - tags(*) tijdlijn artikelen pagina’s oudste * categoriën en tags alleen van toepassingen op artikelen
  8. 8. WordPress - sidebars, extra gebieden 1 2 3 * mogelijkheden 2a afhankelijk per thema 2b * nieuwste * tijdlijn artikelen pagina’s * * * * oudste *
  9. 9. WordPress - widgets 1 2 3 2a 2b nieuwste tijdlijn artikelen pagina’s oudste- widgets zijn afzonderlijke stukjes in sidebars- een widget kan de resultaten weergeven van bijvoorbeeld een plugin
  10. 10. WordPress - header/footer 1 2 3 2a 2b nieuwste tijdlijn artikelen pagina’s oudste header en footer grootte/positie
  11. 11. WordPress - plug-ins 1 2 3toegevoegde functies, bijvoorbeeld 2acontactformulier, social media icons, 2bteller aantal keren gelezen artikel nieuwste tijdlijn artikelen pagina’s plugin plugin plugin plugin plugin oudste WP core
  12. 12. WordPress - themes 1 2 3 2a theme 2b nieuwste tijdlijn artikelen pagina’s plugin plugin plugin plugin plugin oudste WP core- themes zijn bepalend voor de gehele user interface- gratis en betaalde versies- extreem grote verschillen in functionaliteit
  13. 13. WordPressDeel 2: architectuurdoor Peter Luit
  14. 14. WordPress - Architectuur ‘vast’ content metadata pagina’s titel commentaren(*) body media ‘tijdlijn’ content metadata tijdlijn (blogs) titel categorie tags commentaren(*) body media* optioneel
  15. 15. WordPress - Menu menu item leeg (#) URL pagina(‘s) post(s) categorie(ën) tag(s)
  16. 16. WordPress - Themes kiezen heel eenvoudig basis geavanceerd- geen of zeer beperkte - instellingen mogelijk - heel veel instellingeninstellingen mogelijk - variabele indeling mogelijk, vaak export- vaste indeling - heel vaak gratis - vaak betaald- beperkte sidebars - eigen CSS editeren binnen - geschikt voor- doorgaans gratis theme mogelijk maken van child themes - exporteren instellingen soms - kennis CSS wenselijk mogelijk
  17. 17. WordPress - Themes kiezen (paar voorbeelden)• Gratis: Twenty Eleven (standaard WordPress theme, relatief eenvoudig, maar prima voor een eerste start)• Gratis: Atahualpa (chaotische HTML code, maar wel uitgebreid, export settings)• Gratis: Suffusion (keurig theme, ‘blokjes’ gericht, moderne technieken)• Betaald: PlatformPro (custom post types in de vormgeving, geschikt voor child themes, CSS)• Betaald: BizzFolio (zakelijke vormgeving, ook interne CSS mogelijkheden)• Betaald: Genesis (echt bedoeld als ‘ontwikkeltool’ voor child themes)
  18. 18. WordPress - Frameworks• In veel gevallen een verwarrende term voor: • Een al dan niet uitgebreid parent theme, waarmee child themes gemaakt kunnen worden, vaak zeer gestructureerde documentatie • Genesis, Hybrid, Thematic etc. • Maar ook Atahualpa zegt een framework te zijn..... • Een aparte ontwikkel omgeving voor het maken van parent themes (is dus zelf niet een theme!) • Hybrid Core • Artisteer
  19. 19. WordPress - parent- en childthemes 1 2 3 childtheme 2a 2b nieuwste parenttheme tijdlijn artikelen pagina’s plugin plugin plugin plugin plugin oudste WP core - child themes gebruiken instellingen vanuit parent - update van parent voorkomt overschrijven instellingen in child
  20. 20. WordPress - parent- en childthemes vormgeving(*) functionaliteit childtheme aanvullende CSS aanvullende PHP ‘haalt basis op uit parent’ bijvoorbeeld: @import url("../theme/ - functions.php style.css"); - header.php - footer.php css kennis nodig etc. php kennis nodig parenttheme basis CSS basis PHP * zie voor CSS deel 7
  21. 21. WordPress - parent- en childthemes• Child themes: maak ze niet te complex • Het doel: Child themes bevatten eigen ‘settings’, die bouwen op de basis van het parent theme • Het Parent theme kan dan onafhankelijk van het Child theme worden ge- update bij de komst van nieuwe versies • Het Child theme kan dan zonder wijzigingen blijven bestaan • Te complexe Child themes zouden ‘moeilijkheden’ kunnen gaan ondervinden bij updates van hun Parent theme
  22. 22. WordPressDeel 3: hooks(*)door Peter Luit* zie tevens hoofdstuk 6: plugins
  23. 23. WordPress - hooks (actions en filters) 1 2 3 2a childtheme 2b nieuwste parenttheme hooks tijdlijn artikelen pagina’s plugins WP core oudste- before en after zijn de primaireeigenschappen van de lokatie ofgebeurtenis waar/wanneer eenhook (ingehaakte functie) uitgevoerdwordt
  24. 24. WordPress - hooks, de basis add_action waar naam nieuwe functie function name { wat je wilt doen } waar voor/na header voor/na siderbar(s) #- per thema verschillend- php kennis nodig voor/na pagina #- plaats in functions.php in child theme voor/na footer
  25. 25. WordPress - hooks, voorbeeldadd_action(suffusion_before_begin_content, my_custom_before_page);function my_custom_before_page() { if(is_page( mijn-home )) { slidedeck( 146, array( width => 100%, height => 225px ) ); } }- suffusion_before_begin_content is een lokatie definitie in het theme Suffusion- my_custom_before_page is de naam de te definiëren functie- function is het begin van de nieuw te maken functie- de functie zet een slidedeck slideshow (is een plugin) alleen op de pagina ‘mijn-home’- slidedeck( 146, array( width => 100%, height => 225px ) ); is het format waarin slidedeckgegevens moeten worden ingevoerd- te plaatsen in functions.php in child theme
  26. 26. WordPressDeel 4: custom post typesdoor Peter Luit
  27. 27. WordPress - custom post types, voorbeeld voorbeeld binnen het theme PlatformPro: 3 naast elkaar staande boxes op bijvoorbeeld de homepage
  28. 28. WordPress - custom post types, op luit.nl features boxes carousel
  29. 29. WordPress - custom post types, de soorten WP standaard voorbeelden posts events pages boekenlijst vakantiebestemmingen - moderne themes bouwen specifieke custom post types in (bijv. PlatformPro) - er zijn diverse plug-ins om custom post types interactief te kunnen maken
  30. 30. WordPress - custom post types, de techniek uitvoeren na opstarten wordpress add_action ‘init’ naam function name { labels WP functies(*), inclusief de displaynaam weergave wat gaat de gebruiker zien in Admin? registreer vaststellen van de functie } - plaats in functions.php in child theme * zoals ‘add’, ‘edit’, ‘search’, ‘view’ ......
  31. 31. WordPress - custom post types, de weergave single.php basis om content weer te geven maak een copy bijv. single-event.php plaats in child theme zoek naar: <h1 class="entry-title"><?php the_title(); ?></h1> verander in bijvoorbeeld: <h1 class="entry-title">Event: <?php the_title(); ?></h1>
  32. 32. WordPressDeel 5: multisites en permalinksdoor Peter Luit
  33. 33. WordPress - multisites netwerk één website via subdirectories via subdomeinen http://www.naam.nl http://www.naam.nl http://www.naam.nl http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl http://www.naam.nl http://subsite1.naam.nl subsite1 - eigen look&feel - eigen menu - eigen content
  34. 34. WordPress - multisites netwerk, instellingen wp-config.php aanpassen .htaccess aanmaken/aanpassen http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1 httpd config aanpassen (server afhankelijk) permalinks aanpassen wp-content/blogs.dir aanmaken
  35. 35. WordPress - multisites netwerk, instellingen wp-config.php aanpassen http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1 define(WP_ALLOW_MULTISITE, true); -- plaats dit net voor /* Thats all, stop editing! Happy blogging. */: opnieuw inloggen, daarna de volgende regels onder de bovenstaande regel: define( MULTISITE, true ); define( SUBDOMAIN_INSTALL, false ); $base = /; define( DOMAIN_CURRENT_SITE, www.naam.nl ); define( PATH_CURRENT_SITE, / ); define( SITE_ID_CURRENT_SITE, 1 ); define( BLOG_ID_CURRENT_SITE, 1 ); en dan .htaccess aanmaken of aanpassen
  36. 36. WordPress - multisites netwerk, instellingen .htaccess aanpassen, tevens permalinks aanpassen http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1 RewriteEngine On RewriteBase / RewriteRule ^index.php$ - [L] # uploaded files RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L] # add a trailing slash to /wp-admin RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L] RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] RewriteRule ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*) $1 [L] RewriteRule ^[_0-9a-zA-Z-]+/(.*.php)$ $1 [L] RewriteRule . index.php [L] opnieuw inloggen
  37. 37. WordPress - multisites netwerk, serversettings httpd config http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1 onderstaande instellingen verschillen per server, zowel de lokatie als de naam maar meestal zijn het de zogenaamde httpd config files in de server map <Directory "/Library/WebServer/Documents/naamhoofddomein"> AllowOverride All <IfModule mod_dav.c> DAV Off </IfModule> Options All -Includes -ExecCGI +MultiViews -Indexes </Directory> webserver opnieuw starten
  38. 38. WordPress - multisites netwerk, permalinks http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1
  39. 39. WordPress - multisites netwerk, serversettings wp-content http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1 maak directory ‘blogs-dir’ in wp-content aan met chmod beschrijfbaar (755)
  40. 40. WordPressDeel 6: pluginsdoor Peter Luit
  41. 41. WordPress - plugins, de basis actions filters zijn de functies die op een zijn de buffers die content bepaald moment worden ‘bewaren’ totdat het naar de uitgevoerd, aan de hand van database of de browser wordt een bepaalde gebeurtenis of gestuurd handeling add_action ( publish_post, email_friends ); add_filter ( hook_name, your_filter, [priority], [accepted_args] ); hook into core - de basis van WordPress vele tientallen actions en filters, waarmee plugins gebouwd kunnen worden, hooks zorgen ervoor dat ze ‘ingehaakt worden in de core van WordPress http://adambrown.info/p/wp_hooks/version/3.1
  42. 42. WordPress - plugins, de opzet wordpress home wp-content plugins mainfile.php (css) header van de basis van de plugin (voorbeeld) (js) (php) <?php /* Plugin Name: Platform - Nav Colors Plugin URI: http://www.pagelines.com/ Description: An example plugin showing how easy it is to extend the PageLines settings. Version: 0.1 Author: PageLines Author URI: http://www.pagelines.com */
  43. 43. WordPress - plugins, de kennis- WordPress structuur (opzet van de kern, actions, filters, hooks)- HTML (algemene basiskennis)- PHP (scripttaal voor koppeling tussen databasetaken en HTML)- SQL (maken van, schrijven en lezen uit tabellen)- CSS (algemene vormgeving)- JavaScript (clientzijde interactieve/animatie achtige functies)
  44. 44. WordPressDeel 7: CSS, de basisdoor Peter Luit
  45. 45. WordPress - CSS, de basis 1 2 3 childtheme 2a 2b nieuwste parenttheme tijdlijn artikelen pagina’s plugin plugin plugin plugin plugin oudste WP core - child themes gebruiken instellingen vanuit parent - update van parent voorkomt overschrijven instellingen in child
  46. 46. WordPress - CSS, de basis - soms biedt parent theme de parenttheme mogelijkheid CSS instellingen in een ‘eigen’ editor screen toe te passen childtheme - child neemt basis over uit parent CSS - zelf editeren in ‘style.css’ in childtheme typografie - type, stijl, grootte, kleur, plaats plaats van elementen - margin, padding etc. muisacties - hover, visited etc.
  47. 47. WordPress - CSS, theorie Basis in childtheme: /* Theme Name: Luit Description: Child Theme gebaseerd op Suffusion, bewerkt door Peter Luit Theme URI: http://www.naam.nl Description: Child theme for the Suffussion theme Author: Peter Luit Author URI: http://www.luit.nl Template: suffusion Tags: buddypress Version: 1.0 */ @import url("../suffusion/style.css"); @import url("../suffusion/skins/light-theme-orange/skin.css");
  48. 48. WordPress - CSS, theorieCSS HTML resultaatbody { margin-right geldt voor alles 15 pixels naar margin-right: 15px; na de HTML <body> tag rechts}.karakter { geldt alleen bij: weergave font-weight: bold; <DIV class=‘karakter’>} weergave </DIV>#extra { geldt alleen bij: background-color: #FF0000; <DIV class=‘karakter’ ID=‘extra’> weergave} weergave </DIV>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×