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

WordPress

Deel 1: de basis

door Peter Luit

Website - pagina’s

pagi

na’s

bestemd voor ‘statische’ informatie- naast elkaar

Weblog - artikelen (posts, blogs)

nieuwste

oudstetij

dlijn

art

ikel

en

bestemd voor ‘dynamische’ informatie- onder elkaar

WordPress - artikelen/pagina’s

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

WordPress kent beide typen content

WordPress - menustructuur (vanaf 3.0)

1 2 3

2a

2b

- externe links- artikelen- pagina’s- categoriën(*)- tags(*)nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

* categoriën en tags alleen van toepassingen op artikelen

WordPress - sidebars, extra gebieden

**

nieuwste

oudstepa

gina

’s

tijdl

ijn a

rtik

elen

1 2 3

2a

2b

*

**

*

*

* mogelijkheden afhankelijk per thema

WordPress - widgets

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

1 2 3

2a

2b

- widgets zijn afzonderlijke stukjes in sidebars- een widget kan de resultaten weergeven van bijvoorbeeld een plugin

WordPress - header/footer

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

1 2 3

2a

2b

header en footer grootte/positie

WordPress - plug-ins

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

WP core

pluginplugin

plugin

plugin

1 2 3

2a

2b

toegevoegde functies, bijvoorbeeldcontactformulier, social media icons,teller aantal keren gelezen artikel

plugin

theme

WordPress - themes

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

WP core

pluginplugin

plugin

plugin

plugin

1 2 3

2a

2b

- themes zijn bepalend voor de gehele user interface- gratis en betaalde versies- extreem grote verschillen in functionaliteit

WordPress

Deel 2: architectuur

door Peter Luit

WordPress - Architectuur

pagina’s

tijdlijn (blogs)

titel

body

media

titel

body

media

categorie tags commentaren(*)

commentaren(*)

content metadata

content metadata

‘vast’

‘tijdlijn’

* optioneel

WordPress - Menu

menu item

leeg (#)

URL

pagina(‘s)

post(s)

categorie(ën)

tag(s)

WordPress - Themes kiezen

heel eenvoudig

- geen of zeer beperkteinstellingen mogelijk- vaste indeling- beperkte sidebars- doorgaans gratis

basis

- instellingen mogelijk- variabele indeling- heel vaak gratis- eigen CSS editeren binnentheme mogelijk- exporteren instellingen somsmogelijk

geavanceerd

- heel veel instellingen mogelijk, vaak export- vaak betaald- geschikt voormaken van child themes- kennis CSS wenselijk

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

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

WP core

parenttheme

plugin pluginplugin plugin plugin

childtheme1 2 3

2a

2b

- child themes gebruiken instellingen vanuit parent- update van parent voorkomt overschrijven instellingen in child

WordPress - parent- en childthemes

parenttheme

childtheme

basis CSS

aanvullende CSS

basis PHP

aanvullende PHP

‘haalt basis op uit parent’@import url("../theme/style.css");

css kennis nodig

vormgeving(*) functionaliteit

bijvoorbeeld:- functions.php- header.php- footer.phpetc.

php kennis nodig

* 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

WordPress

Deel 3: hooks(*)

door Peter Luit* zie tevens hoofdstuk 6: plugins

WordPress - hooks (actions en filters)

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

WP core

parenttheme

plugins

childtheme

hooks

1 2 3

2a

2b

- 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 {

}

voor/na header

voor/na siderbar(s) #

voor/na pagina #

voor/na footer

waar

- per thema verschillend- php kennis nodig- plaats in functions.php in child theme

wat je wilt doen

WordPress - hooks, voorbeeld

add_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 slidedeck gegevens moeten worden ingevoerd

- te plaatsen in functions.php in child theme

WordPress

Deel 4: custom post types

door 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

posts

pages

events

WP standaard voorbeelden

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

add_action ‘init’ naam

function name {

}

- plaats in functions.php in child theme* zoals ‘add’, ‘edit’, ‘search’, ‘view’ ......

labels

weergave

registreer

WP functies(*), inclusief de displaynaam

wat gaat de gebruiker zien in Admin?

vaststellen van de functie

uitvoeren na opstarten wordpress

WordPress - custom post types, de weergave

single.php

maak een copy

bijv. single-event.php

<h1 class="entry-title"><?php the_title(); ?></h1>

<h1 class="entry-title">Event: <?php the_title(); ?></h1>

zoek naar:

verander in bijvoorbeeld:

plaats in child theme

basis om content weer te geven

WordPress

Deel 5: multisites en permalinks

door Peter Luit

WordPress - multisites netwerk

http://www.naam.nl

één website

http://www.naam.nl

via subdirectories

http://www.naam.nl

via subdomeinen

http://www.naam.nlhttp://www.naam.nlhttp://www.naam.nl/

subsite1

http://www.naam.nlhttp://www.naam.nlhttp://subsite1.naam.nl

- eigen look&feel- eigen menu- eigen content

WordPress - multisites netwerk, instellingen

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

wp-config.php

.htaccess

wp-content/blogs.dir

aanpassen

aanmaken/aanpassen

aanmaken

httpd config aanpassen (server afhankelijk)

permalinks aanpassen

WordPress - multisites netwerk, instellingen

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

wp-config.php

define('WP_ALLOW_MULTISITE', true); -- plaats dit net voor /* That's all, stop editing! Happy blogging. */:

aanpassen

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

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

.htaccessaanpassen, tevenspermalinks aanpassen

RewriteEngine OnRewriteBase /RewriteRule ^index\.php$ - [L]

# uploaded filesRewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]

# add a trailing slash to /wp-adminRewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]RewriteCond %{REQUEST_FILENAME} -dRewriteRule ^ - [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

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

httpd config

<Directory "/Library/WebServer/Documents/naamhoofddomein"> AllowOverride All <IfModule mod_dav.c> DAV Off </IfModule> Options All -Includes -ExecCGI +MultiViews -Indexes</Directory>

webserver opnieuw starten

onderstaande instellingen verschillen per server, zowel de lokatie als de naammaar meestal zijn het de zogenaamde httpd config files in de server map

WordPress - multisites netwerk, permalinks

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

WordPress - multisites netwerk, serversettings

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

wp-content

maak directory ‘blogs-dir’ in wp-content aan met chmod beschrijfbaar (755)

WordPress

Deel 6: plugins

door Peter Luit

WordPress - plugins, de basis

zijn de functies die op een bepaald moment worden

uitgevoerd, aan de hand van een bepaalde gebeurtenis of

handeling

actions

zijn de buffers die content ‘bewaren’ totdat het naar de

database of de browser wordt gestuurd

filters

hookintocore

http://adambrown.info/p/wp_hooks/version/3.1

- de basis van WordPress vele tientallen actions en filters,waarmee plugins gebouwd kunnen worden, hooks zorgenervoor dat ze ‘ingehaakt worden in de core van WordPress

add_filter ( 'hook_name', 'your_filter', [priority], [accepted_args] );add_action ( 'publish_post', 'email_friends' );

WordPress - plugins, de opzet

wordpress home

wp-content

plugins

mainfile.php(css)(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

*/

header van de basis van de plugin (voorbeeld)

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)

WordPress

Deel 7: CSS, de basis

door Peter Luit

WordPress - CSS, de basis

nieuwste

oudste

pagi

na’s

tijdl

ijn a

rtik

elen

WP core

parenttheme

plugin pluginplugin plugin plugin

childtheme1 2 3

2a

2b

- child themes gebruiken instellingen vanuit parent- update van parent voorkomt overschrijven instellingen in child

WordPress - CSS, de basis

childtheme

typografie

plaats van elementen

muisacties

CSS

- type, stijl, grootte, kleur, plaats

- margin, padding etc.

- hover, visited etc.

parenttheme

- child neemt basis over uit parent

- zelf editeren in ‘style.css’ in childtheme

- soms biedt parent theme demogelijkheid CSS instellingen in een‘eigen’ editor screen toe te passen

WordPress - CSS, theorie

/*Theme Name: LuitDescription: Child Theme gebaseerd op Suffusion, bewerkt door Peter LuitTheme URI: http://www.naam.nlDescription: Child theme for the Suffussion theme Author: Peter LuitAuthor URI: http://www.luit.nlTemplate: suffusionTags: buddypressVersion: 1.0*/@import url("../suffusion/style.css");@import url("../suffusion/skins/light-theme-orange/skin.css");

Basis in childtheme:

WordPress - CSS, theorie

body { margin-right: 15px;}

margin-right geldt voor allesna de HTML <body> tag

.karakter { font-weight: bold;}

geldt alleen bij:<DIV class=‘karakter’>

weergave</DIV>

#extra { background-color: #FF0000;}

geldt alleen bij:<DIV class=‘karakter’ ID=‘extra’>

weergave</DIV>

CSS HTML resultaat

weergave

weergave

15 pixels naar rechts