Hoe zit WordPress in elkaar
Upcoming SlideShare
Loading in...5
×
 

Hoe zit WordPress in elkaar

on

  • 6,023 views

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.

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.

Statistics

Views

Total Views
6,023
Views on SlideShare
5,164
Embed Views
859

Actions

Likes
2
Downloads
19
Comments
0

7 Embeds 859

http://www.luit.nl 405
http://www.toolsvoorondernemers.nl 260
http://www.winnyburgers.nl 103
http://www.nieuwsmarkt.nl 73
http://winnyburgers.nl 9
http://gltt.smartschool.be 8
https://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hoe zit WordPress in elkaar Hoe zit WordPress in elkaar Presentation Transcript

  • 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 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
  • WordPressDeel 1: de basisdoor Peter Luit
  • Website - pagina’s bestemd voor ‘statische’ informatie - naast elkaar pagina’s
  • Weblog - artikelen (posts, blogs) bestemd voor ‘dynamische’ informatie - onder elkaar nieuwste tijdlijn artikelen oudste
  • WordPress - artikelen/pagina’s WordPress kent beide typen content nieuwste tijdlijn artikelen pagina’s oudste
  • 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
  • WordPress - sidebars, extra gebieden 1 2 3 * mogelijkheden 2a afhankelijk per thema 2b * nieuwste * tijdlijn artikelen pagina’s * * * * oudste *
  • 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
  • WordPress - header/footer 1 2 3 2a 2b nieuwste tijdlijn artikelen pagina’s oudste header en footer grootte/positie
  • 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
  • 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
  • WordPressDeel 2: architectuurdoor Peter Luit
  • WordPress - Architectuur ‘vast’ content metadata pagina’s titel commentaren(*) body media ‘tijdlijn’ content metadata tijdlijn (blogs) titel categorie tags commentaren(*) body media* optioneel
  • WordPress - Menu menu item leeg (#) URL pagina(‘s) post(s) categorie(ën) tag(s)
  • 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
  • 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)
  • 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
  • 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
  • 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
  • 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
  • WordPressDeel 3: hooks(*)door Peter Luit* zie tevens hoofdstuk 6: plugins
  • 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
  • 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
  • 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
  • WordPressDeel 4: custom post typesdoor Peter Luit
  • WordPress - custom post types, voorbeeld voorbeeld binnen het theme PlatformPro: 3 naast elkaar staande boxes op bijvoorbeeld de homepage
  • WordPress - custom post types, op luit.nl features boxes carousel
  • 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
  • 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’ ......
  • 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>
  • WordPressDeel 5: multisites en permalinksdoor Peter Luit
  • 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
  • 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
  • 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
  • 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
  • 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
  • WordPress - multisites netwerk, permalinks http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1
  • 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)
  • WordPressDeel 6: pluginsdoor Peter Luit
  • 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
  • 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 */
  • 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)
  • WordPressDeel 7: CSS, de basisdoor Peter Luit
  • 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
  • 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.
  • 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");
  • 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>