WordPress iDEAL plugin

Het is alweer bijna een jaar geleden dat we bij Pronamic begonnen met de ontwikkeling van de WordPress iDEAL plugin. Inmiddels begint de plugin steeds meer vorm te krijgen en ontdekken steeds meer WordPress gebruikers de kracht van deze plugin. De plugin is inmiddels meer dan 3.000+ keer gedownload:

WordPress iDEAL plugin wordt gemiddeld 40 keer per dag gedownload

Doordat de plugin steeds meer wordt gebruikt wordt de plugin ook steeds beter. Bijna wekelijks verbeteren en optimaliseren we functionaliteiten. Ook zorgen we er voor dat de WordPress iDEAL plugin steeds meer plugins uitbreid met de iDEAL betaalmethode. Zo zijn we beginnen met Gravity Forms en is deze lijst inmiddels al flink gegroeid:

One WordPress iDEAL plugin to rule them allHet idee hiervan is dat we één goede iDEAL plugin voor WordPress ontwikkelen: “One WordPress iDEAL plugin to rule them all”. Met name voor WordPress ontwikkelaars is het erg prettig dat ze gebruik kunnen maken van één stabiele iDEAL plugin. Daarnaast is het denk ik prettig dat de WordPress iDEAL plugin door een betrouwbare Nederlandse partij (Pronamic) is ontwikkeld en wordt onderhouden.

Omdat de Pronamic iDEAL plugin ontwikkelingen flink doorgaan en de plugin steeds beter en stabieler wordt hebben we de WordPress iDEAL website gelanceerd. Op deze website zullen we proberen om informatie over problemen, updates en andere iDEAL gerelateerde informatie te plaatsen. In het eerste bericht “Pronamic iDEAL versie beta-0.9.4” is in het kort te lezen wat er zoal is verbeterd in deze versie.

WordPress oude URL’s doorverwijzen naar nieuwe URL’s

In het bericht “WordPress oude URL’s vervangen met nieuwe URL’s” beschreef ik dat het slim is om bij het overzetten van berichten naar WordPress het handig is om de oude / originele URL ook bij het nieuwe WordPress bericht op te slaan in een extra veld. Aan de hand daarvan kun je na het overzetten eenvoudig interne links bijwerken. Daarnaast kun je ook eenvoudig een overzicht creëren van alle oude en nieuwe URL’s zodat je oude URL’s kunt doorverwijzen naar de nieuwe URL’s met een HTTP 301 redirect.

Voor het doorverwijzen van oude URL’s naar nieuwe URL’s binnen WordPress kan de Redirection plugin gebruikt worden. Als je met deze plugin werkt en bij elk WordPress bericht ook de oude URL hebt opgeslagen in een extra (meta) veld kun je met een eenvoudige database query de redirects toevoegen aan de Redirection plugin. Hieronder zie je een query waarmee dit gerealiseerd kan worden:

INSERT
	INTO wp_redirection_items (
		url ,
		group_id ,
		action_type ,
		action_code ,
		action_data ,
		match_type
	)
	SELECT
		REPLACE(meta.meta_value, 'http://www.domeinnaam.nl', '') AS url ,
		3 AS group_id ,
		'url' AS action_type ,
		'301' AS action_code ,
		post.guid AS action_data ,
		'url' AS match_type
	FROM
		wp_posts AS post
			RIGHT JOIN
		wp_postmeta AS meta
			ON
				post.ID = meta.post_id
					AND
				meta.meta_key = 'legacy_url'
			WHERE
				post.guid != '';

Let wel op dat je de meta key waarin de oude URL staat opgeslagen wijzigt naar je eigen naamgeving. Uiteraard zal ook de domeinnaam in bovenstaande query aangepast moeten worden naar je eigen domeinnaam. Ik plaats de items overigens in een specifieke daarvoor aangemaakt Redirection group, hiervoor geef ik ‘group_id’ de waarde ’3′.

Mocht je overigens hulp nodig hebben met het overzetten van berichten, pagina’s of andere content naar WordPress dan kun je contact opnemen met Pronamic. We hebben erg veel ervaring met het overzetten van content naar WordPress. We hebben al veel grotere maatwerk websites succesvol omgezet naar WordPress.

WordPress oude URL’s vervangen met nieuwe URL’s

Bij Pronamic ontwikkel ik WordPress websites en zetten we regelmatige bestaande websites om naar WordPress. Hierbij komt het vaak voor dat er bestaande berichten omgezet moeten worden naar WordPress. Met allerlei handige tools zoals bijvoorbeeld OutWit en de vele WordPress importeer plugins gaat dit vaak relatief eenvoudig.

Bij het importeren van berichten van een website naar een nieuwe WordPress website is het vaak erg handig om de bron URL op te slaan bij het nieuwe WordPress bericht. De extra velden functionaliteit bij WordPress berichten zijn hier zeer geschikt voor. Zodra de content is omgezet is het vaak noodzakelijk om interne koppeling bij te werken. Daarnaast is het vaak gewenst om oude URL’s netjes om te leiden (HTTP 303 redirect) naar de nieuwe URL’s.

Doordat de oude en nieuwe URL’s netjes zijn weggeschreven in de WordPress database kan dit met een aantal slimme MySQL queries gerealiseerd worden. De volgende query zal een lijst met queries genereren die de inhoud van alle WordPress berichten en pagina’s doorzoekt en oude URL’s vervangt met de nieuwe WordPress URL’s:

SELECT
	CONCAT(
		'UPDATE wp_posts SET post_content = REPLACE(post_content, ' ,
		QUOTE(meta.meta_value) , ', ' ,
		QUOTE(post.guid) , ');'
	)
FROM
	wp_posts AS post
		RIGHT JOIN
	wp_postmeta AS meta
		ON
			post.ID = meta.post_id
				AND
			meta.meta_key = 'legacy_url'
WHERE
	post.guid != '';

De output van bovenstaande query zijn nieuwe queries welke uiteraard uitgevoerd moeten worden. Het komt soms voor dat de interne links relatief zijn aan de berichten zelf. Dit maakt het vervangen van de oude URL’s in veel gevallen veel complexer. Als de URL’s relatief zijn aan de domeinnaam dan is waarschijnlijk interessant om eerst de volgende query uit te voeren:

UPDATE wp_posts SET post_content = REPLACE(post_content, 'href="/', 'href="http://www.domeinnaam.nl/');

In andere gevallen zullen er slimme queries uitgevoerd moeten worden, zoals bijvoorbeeld:

UPDATE wp_posts SET post_content = REPLACE(post_content, 'href="../../../nieuws/', 'href="http://www.domeinnaam.nl/nieuws/');

Daarnaast kan met de volgende query een overzicht gemaakt worden van alle oude en nieuwe URL’s. Dit overzicht kan vervolgens geïmporteerd worden naar de Redirection plugin waarmee eenvoudig omleidingen zijn te beheren.

SELECT
	REPLACE(meta.meta_value, 'http://www.domeinnaam.nl', '') AS source ,
	post.guid AS target ,
	0 as hits
FROM
	wp_posts AS post
		RIGHT JOIN
	wp_postmeta AS meta
		ON
			post.ID = meta.post_id
				AND
			meta.meta_key = 'legacy_url'
WHERE
	post.guid != '';

WordPress menu met geluid

Onlangs kreeg ik de vraag hoe je een geluidsfragment kunt afspelen zodra je over een WordPress menu item heen gaat met je muis. Op internet is veel informatie te vinden over hoe je een geluidsfragment kunt afspelen, maar hoe integreer je deze netjes in een WordPress thema? In dit bericht beschrijf ik kort een mogelijk oplossing.

Allereerst is het handig om een map ‘audio’ aan te maken binnen je WordPress thema map. Binnen deze map kun je alle gerelateerde audio bestanden plaatsen die je wilt afspelen zodra men met de muis over een menu item gaat. Vervolgens voegen we aan het WordPress functions.php bestand een aantal functies toe:

/**
 * Menu audio
 *
 * @return array
 */
function prefix_menu_audio() {
	$dir = get_stylesheet_directory_uri();

	return array(
		'beep' => array($dir . '/audio/beep.mp3', $dir . '/audio/beep.ogg') ,
		'end' => array($dir . '/audio/end.mp3', $dir . '/audio/end.ogg')
	);
}

In bovenstaand code fragment worden 2 audio fragmenten gedefinieerd in 2 verschillende formaten, namelijk MP3 en OGG. Om deze audio fragmenten te kunnen afspelen moeten ze worden toegevoegd aan de HTML van de website. Dit kunnen we realiseren met behulp van de volgende functie:

/**
 * Menu beep HTML
 */
function prefix_menu_audio_html() {
	$html = '';

	$audio = prefix_menu_audio();

	foreach($audio as $id => $sources) {
		$html .= sprintf('<audio id="%s">', esc_attr($id));
		foreach($sources as $source) {
			$html .= sprintf('<source src="%s" />', esc_attr($source));
		}
		$html .= '</audio>';
	}

	echo $html;
}

add_action('wp_footer', 'prefix_menu_audio_html');

Met behulp van bovenstaande functie wordt er voor gezorgd dat de gedefinieerde audio fragmenten in een nette HTML5 formaat in de footer van de WordPress website worden geplaatst. Vervolgens kunnen we met behulp van een aantal regels code JavaScript / jQuery deze audio fragmenten afspelen. Om dit te realiseren maken we maken een JavaScript bestand menu-audio.js aan in de WordPress thema map.

jQuery(document).ready(function($) {
	$(".menu a").mouseenter(function() {
		$("#beep").trigger("play");
	});
});

Dit bestand kan met behulp van de volgende functie worden toegevoegd aan de WordPress website zodat deze wordt uitgevoerd:

/**
 * Menu beeps enqueue scripts
 */
function prefix_enqueue_scripts_menu_audio() {
	wp_enqueue_script(
		'menu-audio' ,
		get_stylesheet_directory_uri() . '/menu-audio.js' ,
		array('jquery')
	);
}

add_action('wp_enqueue_scripts', 'prefix_enqueue_scripts_menu_audio');

In dit voorbeeld wordt slecht 1 audio fragment afgespeeld voor alle menu items. Met een beetje WordPress en jQuery kennis is dit natuurlijk eenvoudig uit te breiden.

Update: Voor het gemak heb ik een kant en klare WordPress menu audio oplossing klaar gezet, welke uitgepakt kan worden in je thema map en geactiveerd kan worden door include 'menu-audio/menu-audio.php'; in je thema’s functions.php bestand te plaatsen.

WordPress Google Conversion shortcode

Om Google Conversion doelen bij te houden moet je soms op bepaalde pagina’s een zogenaamde Google Conversion code plaatsen. Binnen WordPress installatie kan het toevoegen van dergelijke codes soms lastig zijn. Daarom heb ik een eenvoudig WordPress shortcode gemaakt waarmee je eenvoudig een Google Conversion code kunt toevoegen aan je WordPress pagina’s.

/**
 * Google Conversion Code
 */
function prefix_shortcode_google_conversion_code($atts) {
	extract(shortcode_atts(array(
		'id' => null ,
		'language' => 'en' ,
		'format' => 3 ,
		'color' => '666666' ,
		'label' => '' ,
		'value' => 0 ,
	), $atts));

	$crlf = "\r\n";

	$noScriptImageUrl = sprintf('http://www.googleadservices.com/pagead/conversion/%d/', $id);
	$noScriptImageUrl = add_query_arg(array(
		'label' => $label ,
		'guid' => 'ON' ,
		'script' => 0
	), $noScriptImageUrl);

	$output = '';

	$output .= '<!-- Google Code for Bezoekers Pagina Douchegoten Remarketing List -->' . $crlf;
	$output .= '<script type="text/javascript">' . $crlf;
	$output .= '/* <![CDATA[ */' . $crlf;
	$output .= sprintf('var google_conversion_id = %d;', $id) . $crlf;
	$output .= sprintf('var google_conversion_language = "%s";', $language) . $crlf;
	$output .= sprintf('var google_conversion_format = "%s";', $format) . $crlf;
	$output .= sprintf('var google_conversion_color = "%s";', $color) . $crlf;
	$output .= sprintf('var google_conversion_label = "%s";', $label) . $crlf;
	$output .= sprintf('var google_conversion_value = %d;', $value) . $crlf;
	$output .= '/* ]]> */' . $crlf;
	$output .= '</script>' . $crlf;

	$output .= '<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">' . $crlf;
	$output .= '</script>' . $crlf;

	$output .= '<noscript>' . $crlf;
	$output .= '<div style="display:inline;">' . $crlf;
	$output .= sprintf('<img height="1" width="1" style="border-style:none;" alt="" src="%s"/>', esc_attr($noScriptImageUrl)) . $crlf;
	$output .= '</div>' . $crlf;
	$output .= '</noscript>' . $crlf;

	return $output;
}

add_shortcode('google_conversion_code', 'prefix_shortcode_google_conversion_code');

Deze shortcode is met name interessant zijn in combinatie met WordPress webwinkel plugins zoals WooCommerce of Jigoshop. Om de shortcode ook op de product categorieën te kunnen gebruiken zullen de shortcodes ook toegepast moeten worden op de product categorieën beschrijvingen.

/**
 * Add shortcode support to term description
 */
function prefix_term_description($description) {
	if(is_archive()) {
		$description = do_shortcode($description);
	}

	return $description;
}

add_filter('term_description', 'prefix_term_description');

iDEAL voor Shopp 1.2

Op woensdag 6 juli 2011 werd door de ontwikkelaars van de Shopp plugin versie 1.2 aangekondigd. Er werd een indrukwekkende lijst aan verbeterpunten en nieuwe functionaliteiten genoemd. Ik had gehoopt dat na deze aankondiging binnen een aantal weken Shopp 1.2 gelanceerd zou worden. Helaas heeft dit iets meer tijd gekost, maar lijkt Shopp 1.2 er nu toch aan te komen.

Het team achter Shopp heeft blijkbaar toch erg veel moeite moeten doen om de nieuwe versie zo in te richten dat gebruikers probleemloos kunnen overstappen van Shopp 1.1 naar versie 1.2. Met de grote lijst aan nieuwe verbeteringen en nieuwe functionaliteit kan ik me goed voorstellen dat dit een erg lastig klus is (of was). Eind december 2011 werd gelukkig de eerste release candidate van Shopp 1.2 beschikbaar gesteld.

Dit betekende voor Pronamic werk aan de winkel om de Pronamic iDEAL plugin te testen in combinatie met Shopp 1.2. De nieuwe Shopp plugin is uitgerust met een compleet nieuw systeem voor het afhandelen van bestellingen en betalingen. Hierdoor moesten er ook een aantal aanpassingen worden gedaan aan de Pronamic iDEAL plugin.

Door de code van een plugin te bekijken is vaak wel te zien hoe bepaalde functionaliteiten werken. In het geval van Shopp 1.2 was het echter lastig te overzien hoe en wanneer functies werden aangeroepen. Daarom heb ik een stroomdiagram gemaakt waarin te zien is welke functies en actie worden aangeroepen na het plaatsen van een bestelling.

Download ODF tekening

Aan de hand van dit diagram hebben we de Pronamic iDEAL plugin bijgewerkt en werkt deze sinds vandaag ook in combinatie met Shopp 1.2. Alle Shopp gebruikers die werken met de Pronamic iDEAL plugin kunnen straks zonder problemen updaten naar versie 1.2.

WooCommerce provincie veld verwijderen

WooCommere is een nieuwe, maar nu al erg populaire, webwinkel plugin voor WordPress. De plugin is inmiddels al rond de 18.000+ keer gedownload. Ook in Nederland lijkt WooCommerce terrein te winnen. Dit bleek al op het ideeën platform van WooThemes, waar de iDEAL betaalmethode meer dan 250 stemmen kreeg. Hier hebben we bij Pronamic op ingespeeld door de Pronamic iDEAL plugin uit te rusten met de iDEAL betaalmethode voor WooCommerce.

Inmiddels zijn we een aantal weken verder en zijn we bij Pronamic druk bezig met de implementatie van een aantal WooCommerce webwinkels. Doordat het een vrij nieuwe plugin is is altijd even uitzoeken wat er mee mogelijk is en wat de beperkingen zijn. Het verwijderen, toevoegen en/of aanpassen van velden in het afrekenen formulier blijkt in ieder geval heel eenvoudig te gaan. Voor Nederlandse webwinkeliers is het “provincie” veld in veel gevallen niet interessant. Met behulp van onderstaande code is deze eenvoudig te verbergen.

function prefix_woocommerce_billing_fields($fields) {
	if(isset($fields['billing_state'])) {
		$fields['billing_state']['class'][] = 'hidden';
		$fields['billing_state']['required'] = false;
	}

	return $fields;
}

add_filter('woocommerce_billing_fields', 'prefix_woocommerce_billing_fields');

Vervolgens kan met behulp van CSS het veld verborgen worden:

.form-row.hidden {
	visibility: hidden;
}

Met behulp van deze code wordt het veld overigens niet volledig verwijderd, maar enkel onzichtbaar gemaakt. Je kunt uiteraard het veld ook volledig verwijderen, maar dan zul je waarschijnlijk ook de andere velden moeten aanpassen om de opmaak van het formulier netjes te houden.

iDEAL blijft populairste betaalmethode

Volgens de Thuiswinkel Markt Monitor is en blijft iDEAL in 2011 de populairste betaalmethode. Het blijkt dat 52,08% van de gebruikers iDEAL als laatste heeft gebruikt om online af te rekenen. In onderstaande grafiek is een overzicht te zien van welke betaalmethode het vaakst is gebruikt bij de laatste aankopen:

Aangezien iDEAL erg populair ben ik bij Pronamic ook regelmatig bezig met het opzetten van iDEAL koppeling. Zo hebben we vrij recent de iDEAL plugin voor WordPress gelanceerd. Met behulp van deze plugin breiden we andere WordPress plugins uit met de iDEAL betaalmethode.

Inmiddels hebben we er voor gezorgd dat men eenvoudig via Gravity Forms, een populaire formulieren plugin voor WprdPress, eenvoudig iDEAL betalingen kan aanbieden. Daarnaast hebben we vorige week voor de nieuwe webwinkel plugin WooCommerce een koppeling met iDEAL gelanceerd.

Als je hulp nodig hebt met het toevoegen van iDEAL aan je WordPress website dan kun je hiervoor altijd contact opnemen met Pronamic. Ook voor op maat gemaakte koppelingen met iDEAL ben je bij Pronamic op het juiste adres!

WordPress network update probleem

Bij het updaten van een WordPress network (multisite) installatie liep ik tegen problemen aan bij het geautomatiseerd updaten van WordPress. Bij het uitvoeren van een update kreeg ik de volgende foutmelding:

Destination directory for file streaming does not exist or is not writable.

De doel map voor het streamen van bestanden bestaat niet of is niet schrijfbaar.

Deze foutmelding werd binnen het bestand class-http.php gecreëerd doordat de te downloaden bestanden niet konden worden opgeslagen.

Dit probleem heb ik uiteindelijk tijdelijk kunnen oplossen door de wp-content map tijdelijk schrijfrechten te geven (chmod 777) zoals ook in een WordPress forum topic werd vermeld.

Hoe werkt het WordPress update systeem?

WordPress is uitgerust met een zeer eenvoudig en krachtig update systeem. Dankzij dit systeem kunnen WordPress gebruikers eenvoudig WordPress, plugins en thema’s eenvoudig updaten. Ik als ontwikkelaar was erg benieuwd naar deze opzet van dit systeem. Ik ben daarom de WordPress code ingedoken om de werking van dit systeem te onderzoeken.

Het WordPress update systeem maakt gebruik van een API die op WordPress.org staat. Dankzij deze API is eenvoudig informatie op te vragen over WordPress, plugins en thema’s. Elke WordPress installatie informeert om de 12 uren of er updates beschikbaar zijn via de WordPress.org API. De WordPress.org API kun je benaderen via de volgende URL: http://api.wordpress.org/

Als je de WordPress broncode doorzoekt op deze URL zul je een tiental bestanden vinden waarin hier gebruik van gemaakt wordt. In het bestand wp-includes\update.php is te zien op welke wijze WordPress controleert of er nieuwe versies zijn van WordPress, plugins of thema’s. Ik zal hieronder met enkele code fragmenten laten zien hoe gecontroleerd wordt of er thema update beschikbaar is.

WordPress zal in eerste instantie informatie over de geïnstalleerde WordPress thema’s opvragen met behulp van de get_themes() functie. Vervolgens zal deze informatie met behulp van HTTP POST verzoek worden verstuurd naar de WordPress.org API. Hiervoor wordt gebruik gemaakt van de wp_remote_post() functie die onderdeel is van de WordPress HTTP API. De WordPress.org API zal vervolgens aangeven of er updates beschikbaar zijn voor de geïnstalleerde thema’s.

In onderstaande code fragment is globaal te zien hoe een dergelijk verzoek wordt opgebouwd en uitgevoerd:

$themes = array(
	'twentyten' => array(
		'Name' => 'Twenty Ten' ,
		'Version' => '1.0'
	) ,
	'platform' => array(
		'Name' => 'Platform' ,
		'Version' => '1.0'
	) ,
	'delicate' => array(
		'Name' => 'Delicate' ,
		'Version' => '1.0'
	)
);

$args = array(
	'body' => array('themes' => serialize($themes))
);

$response = wp_remote_post('http://api.wordpress.org/themes/update-check/1.0/', $args);

if(is_wp_error($response)) {
	exit('Sorry, something went wrong.');
}

if(200 != $response['response']['code']) {
	exit('Sorry, something went wrong.');
}

$result = unserialize($response['body']);

Als alles goed gaat dan zal de variabele $result informatie over thema’s bevatten waar updates voor beschikbaar zijn. Hieronder zie je een voorbeeld dump van de $result variabele:

array(3) {
	["twentyten"]=>
	array(3) {
		["new_version"]=>
		string(3) "1.1"
		["url"]=>
		string(44) "http://wordpress.org/extend/themes/twentyten"
		["package"]=>
		string(61) "http://wordpress.org/extend/themes/download/twentyten.1.1.zip"
	}
	["platform"]=>
	array(3) {
		["new_version"]=>
		string(5) "1.3.1"
		["url"]=>
		string(43) "http://wordpress.org/extend/themes/platform"
		["package"]=>
		string(62) "http://wordpress.org/extend/themes/download/platform.1.3.1.zip"
	}
	["delicate"]=>
	array(3) {
		["new_version"]=>
		string(5) "3.4.3"
		["url"]=>
		string(43) "http://wordpress.org/extend/themes/delicate"
		["package"]=>
		string(62) "http://wordpress.org/extend/themes/download/delicate.3.4.3.zip"
	}
}

De WordPress.org API geeft dus aan welke versie nu beschikbaar is en waar deze te vinden is. WordPress zal vervolgens met behulp van de Transient API het updaten van de thema’s kenbaar maken aan de WordPress beheerders. De beheerder krijgen daardoor een melding te zien dat er updates beschikbaar zijn. Zodra de beheerder de update uitvoert zal de package URL gedownload worden en de thema bestanden vervangen worden. Hiervoor gebruikt WordPress onder andere de  Theme_Upgrader PHP klasse.