Hoe zit WordPress in elkaar

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 ﬁlters) 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 deﬁnitie in het theme Suffusion- my_custom_before_page is de naam de te deﬁnië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 speciﬁeke 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-conﬁg.php aanpassen .htaccess aanmaken/aanpassen http://www.naam.nl http://www.naam.nl http://www.naam.nl/ http://www.naam.nl subsite1 httpd conﬁg aanpassen (server afhankelijk) permalinks aanpassen wp-content/blogs.dir aanmaken

WordPress - multisites netwerk, instellingen wp-conﬁg.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 ﬁlters 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 ﬁlters, 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 mainﬁle.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, ﬁlters, 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 typograﬁe - 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>

http://www.luit.nl	189
http://www.nieuwsmarkt.nl	64
http://www.winnyburgers.nl	13
http://winnyburgers.nl	3

Hoe zit WordPress in elkaar

by Peter Luit on Jun 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 269

Statistics

Hoe zit WordPress in elkaar — Presentation Transcript