Wist je dat? Er is ‘Een levensschool voor de ziel’ verstopt in een pittoresk dorpje in Limburg. De naam? 1frissewind! Niet meer vergeten!

1frissewind is een levensschool die ruimte biedt aan de ont-wikkeling van je ziel. 
Je ziel huist niet in het verstand maar in je gevoel. Dit vraagt om het vergroten van je emotionele en spirituele intelligentie. Hoe ‘slimmer’ je wordt, hoe makkelijker je het ‘werk’ doet waarvoor je gekomen bent!

En vanaf nu is de ster van 1frissewind rijzende, want de nieuwe website heeft het levenslicht gezien! Uiteraard WordPress en het Genesis Framework. Aangevuld met de passie en een gezonde dosis eigenzinnigheid van IDLaunch en de bezieling van Kitty Vromen. Een mix met resultaat! Laat je inspireren en bezoek de website. Geloof me, het is de moeite waard!

De Login Pagina van WordPress is mooi door de eenvoud. Alleen bij velen (soms ook bij mijn klanten) is het WordPress logo op deze pagina toch een doorn in het oog. In die zin dat ze liever het eigen logo op de pagina hebben staan. We zijn trots dat we WordPress gebruiken, maar moet dat zo duidelijk zijn op de login pagina?

Nou nee. Dat hoeft niet. In deze tutorial laat ik je zien hoe gemakkelijk het is om het logo aan te passen. Maar dat is niet alles! Ik laat je ook zien hoe je heel simpel met een paar code snippets de link van de image aanpast naar je eigen homepage (en dus niet naar WordPress.org), de image title aanpast en je eigen error message maakt.

WordPress logo vervangen

Als je Google gebruikt kom je al snel een aantal wp-snippets tegen om het logo op de WordPress Login Pagina aan te passen. Hieronder de snippet die ikzelf altijd gebruik.

/**
 * Change WP Login Image
 */
add_action("login_head", "dj_login_head");
function dj_login_head() {
 echo "
 <style>
 body.login #login h1 a {
 background: url('".get_bloginfo('stylesheet_directory')."/images/logo-login.png') no-repeat center;
 margin: 0 auto;
 height: 100px;
 width: 300px;
 }
 </style>
 ";
}

Deze snippet plaats je in het functions.php bestand van de theme die je gebruikt (is er geen functions.php bestand, dan maak je er zelf eentje aan). Het enige wat je hoeft te doen, nadat je deze snippet in het functions.php bestand hebt geplaatst, is een image maken, deze opslaan onder de naam logo-login.png en uploaden naar de ./wp-content/themes/jouw-theme/images/ map. Let even op, de afmetingen van de image zijn in bovenstaande snippet gezet op een breedte van 300 pixels en een hoogte van 100 pixels. Als jouw image andere afmetingen heeft, moet je de snippet hierop aanpassen.

Link van Logo veranderen naar homepage

Je eigen logo/image prijkt als het goed is nu bovenaan het inlogveld. Dat was stap 1. Makkelijk toch? Deze stap is nog veel gemakkelijker. Je hoeft enkel onderstaande snippet in het functions.php bestand te plaatsen en je bent klaar. Jouw logo/image linkt nu door naar de homepage van je website en niet meer naar WordPress.org.

/**
 * Change WP Login Image url
 */
add_filter( 'login_headerurl', 'dj_custom_login_url' );
function dj_custom_login_url($url) {
 $url = home_url();
 return $url;
}

Title van Logo veranderen op WP login pagina

Nu plaatsen we nog onderstaande snippet er bij (in het functions.php bestand) om een eigen title mee te geven aan het logo. Deze title wordt zichtbaar als je er met je muis overheen gaat. De title die weergegeven wordt met deze snippet is de naam van je website/blog aangevuld met de omschrijving van je blog. Voor IDLaunch zou dat zijn: “IDLaunch – Big Ideas & Beautiful Websites”. Wat dat voor jouw website zal zijn, zie je in het WP dashboard onder instellingen (Site titel en Site omschrijving).

/**
 * Change WP Login Image Title
 */
add_filter('login_headertitle', 'dj_login_headertitle');
function dj_login_headertitle($output) {
 $title = get_bloginfo('name');
 $description = get_bloginfo('description');
 $output = $title .' - '. $description;
 return $output;
}

Eigen error message op WP Login Pagina

Het laatste wat we nu nog gaan aanpassen is de error message die men ziet op de Login Pagina. Waarom zou je deze willen aanpassen? Een belangrijke reden is al genoeg: je geeft eventuele potentiële hackers minder informatie door een meer algemene error message terug te geven.

Stel dat iemand het admin account probeert te hacken en een aantal usernames uitprobeert (er vanuit gaande dat het zichtbare account op jouw website niet het admin account is). Als deze persoon dan een username gebruikt die bestaat, maar met een verkeerd wachtwoord, krijgt hij deze melding te zien.

Mislukt: Het opgegeven wachtwoord voor de gebruikersnaam XXX is onjuist. Wachtwoord vergeten?

Hij of zij weet dus dat het bingo is op het item username. Nu enkel nog het wachtwoord.

Om dat te voorkomen, gebruik ik onderstaande snippet. Dit geeft een algemene error message terug, die niet prijsgeeft of iemand een bestaande username of wachtwoord gebruikt.

/**
 * Change WP Login Error Message
 */
add_filter( 'login_errors' , 'login_error_message' );
function login_error_message ($error) {
 //check if that's the error you are looking for
 $pos = strpos ( $error, 'incorrect' );
 if ( $pos === false ) {
 //its the right error so you can overwrite it
 $error = __('Oops. De informatie die je hebt opgegeven, is niet correct!', 'childtheme');
 }
 return $error;
}

De error message die wordt teruggegeven met deze snippet is overigens:

Oops. De informatie die je hebt opgegeven, is niet correct!”

Als je deze wilt wijzigen dan pas je deze zin aan in de snippet.

Alle snippets op een rij

Nog even alle snippets op een rij die je in een keer in het functions.php bestand van je theme kan plaatsen.

/**
 * Change WP Login Image
 */
add_action("login_head", "dj_login_head");
function dj_login_head() {
 echo "
 <style>
 body.login #login h1 a {
 background: url('".get_bloginfo('stylesheet_directory')."/images/logo-login.png') no-repeat center;
 margin: 0 auto;
 height: 214px;
 width: 200px;
 }
 </style>
 ";
}
/**
 * Change WP Login Image url
 */
add_filter( 'login_headerurl', 'dj_custom_login_url' );
function dj_custom_login_url($url) {
 $url = home_url();
 return $url;
}
/**
 * Change WP Login Image Title
 */
add_filter('login_headertitle', 'dj_login_headertitle');
function dj_login_headertitle($output) {
 $title = get_bloginfo('name');
 $description = get_bloginfo('description');
 $output = $title .' - '. $description;
 return $output;
}
/**
 * Change WP Login Error Message
 */
add_filter( 'login_errors' , 'login_error_message' );
function login_error_message ($error) {
 //check if that's the error you are looking for
 $pos = strpos ( $error, 'incorrect' );
 if ( $pos === false ) {
 //its the right error so you can overwrite it
 $error = __('Oops. De informatie die je hebt opgegeven, is niet correct!', 'childtheme');
 }
 return $error;
}

In veel WordPress themes en phpBB stijlen wordt gebruik gemaakt van afgeronde hoeken. De website waar je nu naar kijkt – IDLaunch – doet dat bijvoorbeeld ook. De sidebars zijn aan de bovenkant niet hoekig (90 graden), maar afgerond.

Ik merk vaak dat velen niet weten hoe dat werkt. De eerste gedachte gaat uit naar het gebruik van images. Voor Photoshop freaks een fluitje van een cent, maar voor anderen uren zweten en prullen om dat hoekje perfect rond te krijgen. En dan nog een heel gedoe om de image in je design te krijgen op de plaats waar jij wilt op de manier zoals jij had bedacht.

NIET DOEN!

Al een hele lang tijd geeft CSS (cascading style sheet) de mogelijkheid om afgeronde hoeken te maken zonder daarvoor een image te maken. En met de komst van IE9 doet Microsoft eindelijk ook mee. Hoe gaat dat in zijn werk? Hieronder een voorbeeld op basis van de sidebars van IDLaunch.

.widget-area h4 {
 background-color: #dce2e7;
 border-bottom: 1px solid #ddd;
 font-size: 12px;
 padding: 5px 5px 5px 10px;
 text-transform: uppercase;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}

In dit stukje CSS regelen de laatste 6 regels de afgeronde hoeken. Ik zie je denken: 6 regels en ze lijken allemaal op elkaar? Klopt. Helaas luisteren de browsers (IE, Firefox, Chrome, Safari, Opera etc.) niet naar dezelfde commando’s. Daardoor zijn deze zes regels vereist om het gewenste resultaat te verkrijgen.

Hieronder een tabel met de toelichting op alle mogelijkheden.

 
De CSS3 elementen werken perfect in IE9 (let op, niet in de eerdere versies van IE!), de Mozilla elementen werken in Firefox en andere aan Mozilla verwante browsers, de WebKit varianten bewijzen hun waarde in Safari en Chrome (ook op de iPad en iPhone). Je moet ze dus allemaal gebruiken om er zeker van te zijn dat jouw website goed wordt weergegeven in de verschillende browsers!

Nog even terug naar de gegeven code. Je ziet dat ik de border-top-left en border-top-right varianten gebruik. Deze zorgen dus voor de afgeronde hoeken aan de bovenzijde van de sidebar/widget (het grijze gedeelte).

Ben je er nu? Nog niet helemaal. Je moet nog een aspect regelen: aangeven dat jouw code geschikt is voor IE9. Dat doe je door de volgende code toe te voegen aan je header.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

In phpBB voeg je dit stukje toe in het ./styles/jouw-stijl/template/overall_header.html bestand. In WordPress (Genesis Framework) kan je dit heel gemakkelijk toevoegen door onderstaande code toe te voegen aan het functions.php bestand welke je vindt in de theme folder (./wp-content/themes/jouw-theme/).

/**
 * Add IE=9 META tag to the header
 */
add_action('genesis_meta', 'dj_meta_ie_compability');
function dj_meta_ie_compability () {
	echo '<meta http-equiv="X-UA-Compatible" content="IE=9" />
';
}

Wil je meer weten over dit onderwerp, kijk dan ook eens op deze website:
- http://www.the-art-of-web.com/css/border-radius/

Cached stylesheets; een zegen, maar ook een vloek. Bedenk maar eens, hoe vaak heb jij een ‘hard refresh’ gegeven op jouw website nadat je iets had veranderd in de stylesheet? Je weet wel … even een harde return om de aanpassingen zichtbaar te krijgen op je website. Even de cache legen …

Bedenk dan ook het volgende: NIET iedereen doet dat! Iedereen in de zin van bezoekers van jouw website. Zij zien de veranderingen dus (wellicht) niet en in het meest rampzalige scenario zien ze een afzichtelijke website. Niet de bedoeling toch?

Eigenlijk is dit euvel heel simpel te voorkomen. Dat doe je door een versie beheer op je stylesheet te zetten. Dit zorgt er voor dat als je aanpassingen hebt gedaan in de stylesheet, de nieuwe versie zeker te weten geladen wordt. Met als resultaat: de website zoals jij wil dat anderen deze zien!

Hoe doe je dat? Heel simpel. Je voegt onderstaande code toe aan je functions.php bestand welke je vindt in de theme folder (./wp-content/themes/jouw-theme/). Heb je iets aangepast in je stylesheet, dan verhoog je het versie nummer in het stukje code; in dit geval 1.0.0.1 naar 1.0.0.2. Daarmee stuur je het signaal door dat er een nieuwe stylesheet te laden is. Uiteraard is het handig als je de versienummers in het functions.php bestand hetzelfde houdt als in het stylesheet.css bestand; al hoeft dat niet.

/**
* Load Version Stylesheet
*
* @uses wp_enqueue_style()
* @author David Jansen
* @link: http://idlaunch.nl/2012/02/06/wordpress/gebruik-versie-beheer-stylesheet-in-wordpress/
*
*/
remove_action('genesis_meta', 'genesis_load_stylesheet');
add_action('genesis_meta', 'dj_load_stylesheet');

function dj_load_stylesheet() {

wp_enqueue_style( 'my-style', get_bloginfo('stylesheet_url'), array(), '1.0.0.1', 'screen' );

}

De afgelopen maand laait de discussie weer op over hoe je spamregistraties moet tegen gaan in phpBB. Niet zo gek, want 2012 lijkt een run van spamregistraties vanuit landen als Rusland, Roemenië en de Oekraïne ingeluid te hebben.

Meerdere eigenaren klagen steen en been over het dagelijks moeten verwijderen van tientallen nep-accounts. Op phpBB.nl en phpBB.com barsten de anti-spam topics uit hun voegen. Iedereen wil weten wat te doen om te voorkomen dat jouw forum ten prooi valt aan vervelende en zeer ongewenste reclame berichten (spam) en/of slapende leden (die je niet vertrouwd).

Laat ik duidelijk zijn. Ik heb ook niet alle wijsheid in pacht. En velen zullen het met mij oneens zijn. Toch ben ik er van overtuigd dat phpBB genoeg in zich heeft om spammers te weren zonder extra actie te hoeven ondernemen. Een extra anti-spam modificatie installeren is dus mijn inziens niet nodig.

Maar wat dan wel?

Gebruik de Vraag en Antwoord Captcha

phpBB geeft de mogelijkheid om verschillende captcha’s te gebruiken. De enige die echt goed werkt is de Vraag en Antwoord Captcha (Q&A op zijn Engels, V&A in het Nederlands). Deze werkt ontzettend simpel en is zeer effectief. Je stelt de Captcha in door in te loggen op het beheerderspaneel van phpBB, TAB algemeen en dan aan de linkerzijde onder forumconfiguratie de link ‘spambotpreventie aan te klikken. Scroll naar beneden totdat je hetzelfde onderdeel hebt bereikt als de image hieronder.

Selecteer de V&A captcha waarna het scherm zich automatisch vernieuwd. Klik nu op Configureren. Dat brengt je in een scherm waarin je een vraag kan toevoegen. Klik op de button ‘toevoegen’.

Nu gaat het er om dat je een goede vraag bedenkt. Tuurlijk! Denk er alleen niet al te lang en te moeilijk over na. De vraag kan namelijk heel gemakkelijk zijn en toch heel efficiënt. Ik gebruik bijvoorbeeld altijd vragen op de wijze zoals het voorbeeld hieronder.

Of stel een vraag als “typ in KtlOi4@ in het veld hiernaast”. Het is helemaal niet zo moeilijk. Houdt maar als regel aan: elke vraag waar je het antwoord op niet kan vinden via Google, is oké!

Is dat het? Ja. Dit zal veelal de meeste spamregistraties tegenhouden.

Geeft het bovenstaande jou nog een onbevredigend gevoel? Kan je het niet weerstaan om toch de code van phpBB in te duiken? Wees dan verstandig en doe het volgende: blok de UTC-12 registraties. De meeste spambots gebruiken namelijk deze tijdszone. Nee, wees niet bang. Je blokt er werkelijk waar geen enkel mens mee. Hoe dat kan? Lees er meer over op Wikipedia.

UTC-12 registraties houd je op deze wijze tegen.

#
#-----[ OPEN ]------------------------------------------
#
includes/ucp/ucp_register.php

#
#-----[ FIND ]------------------------------------------
#

$data = array(
'username'         => utf8_normalize_nfc(request_var('username', '', true)),
'new_password'      => request_var('new_password', '', true),
'password_confirm'   => request_var('password_confirm', '', true),
'email'            => strtolower(request_var('email', '')),
'email_confirm'      => strtolower(request_var('email_confirm', '')),
'lang'            => basename(request_var('lang', $user->lang_name)),
'tz'            => request_var('tz', (float) $timezone),
);

#
#----[ AFTER, ADD ]------------------------------------------
#

if ($data['tz'] == -12)
{
$message = $user->lang['ACCOUNT_INACTIVE'];
$message = $message . '<br /><br />' . sprintf($user->lang['RETURN_INDEX'], '<a href="' . append_sid("{$phpbb_root_path}index.$phpEx") . '">', '</a>');
trigger_error($message);
}

#
#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------
#
# EoM

Ik hoop dat deze blogpost je weer wat handvatten heeft gegeven over hoe om te gaan met spamregistraties in phpBB. En dat je weer wat rustiger en lekkerder kan slapen. Want laten we wel zijn, ze komen altijd s’nachts

Avonden, nachten, dagen kan je je blind staren op de cijfertjes. Hoeveel unieke bezoekers trekt mijn website nu eigenlijk? Welke pagina is het meest populair? Uit welke landen komen mijn bezoekers voornamelijk? Welk besturingssysteem is favoriet onder mijn bezoekers? Je kan het zo gek niet bedenken of je haalt het uit de website statistieken.

Maar hoe installeer je Google Analytics nu eigenlijk? Voor veel mensen klinkt dat als een ingewikkelde aangelegenheid waarvoor je allerlei kennis van programmeren nodig hebt. In dit bericht laat ik zien dat dit dus absoluut niet zo is.

Stap 1: Activeer Google Analytics

Om Google Analytics te kunnen gebruiken, moet je je daarvoor eerst aanmelden. Dat kan je doen op deze pagina: http://www.google.com/intl/nl/analytics/. Je klikt op Google Analytics gebruiken wat je brengt op een inlogpagina.

Als je al een Google Account hebt (bijvoorbeeld voor GMail of Google Agenda) ben je snel klaar. Je vult dan je mailadres en wachtwoord van dit account in. Heb je nog geen Google Account, dan zal je deze eerst moeten aanmaken (link: registreren nieuw Google Account).

Stap 2: Voeg een website toe in Google Analytics

In Google Analytics voeg je vervolgens een website toe. Google noemt dat zo mooi ‘Een nieuwe property’.

Onder Propertynaam geef je de naam op van bijvoorbeeld jouw website of project. Bij de url van de website kan je kiezen welk protocol je wilt gebruiken (http:// of https://). Als laatste stel je de tijdszone in. Klik op Property maken.

Nu kom je in een volgend scherm waar je jouw Property ziet staan. Klik er op. Dat brengt je weer in onderstaand scherm.

Onder het kopje Trackingcode vind je vervolgens de code waar het allemaal om gaat. Ik ga in dit bericht overigens niet in op alle instellingen en mogelijkheden van Google Anaytics, dat zou een beetje te veel zijn. Ik laat enkel zien hoe je Google Analytics geïnstalleerd krijgt in WordPress.

Kies vervolgens wat je bij wilt houden. Denk hier even goed over na, want de trackingcode wordt uiteraard aangepast als je de keuze wijzigt. Vervolgens selecteer je de code onder punt 2 “Deze code op uw site plakken”.

Trackingcode in WordPress activeren

Er zijn legio WordPress plugins gemaakt voor Google Analytics. Vergeet ze! Je hebt ze helemaal niet nodig. De trackingcode voeg je als volgt toe.

Open het dashboard van WordPress, ga naar de Genesis “Thema instellingen” sectie en scroll naar beneden totdat je bent aangekomen bij Header en Footer Scripts. Bij het vakje onder “Voer scripts/code in die je wil gebruiken voor wp_head():” geef je de trackingcode van Google Analytics op.

En dat is alles! Google analytics is nu geïnstalleerd op jouw WordPress website. En daarmee toont het Genesis Framework weer eens zijn voordelen!

Gebruik je het Genesis Framework niet?

Wat nu als je geen gebruik maakt van het Genesis Framework (shame on you!)? Tja, dan is het iets wat ingewikkelder omdat je de laatste simpele stap (de toevoeging van de trackingcode) niet kan uitvoeren. Een plugin zou dan een optie voor je kunnen zijn. De meest gebruikte plugin daarvoor is van Joost de Valk: Google Analytics for WordPress.

Wil je geen plugin gebruiken (mijn filosofie is altijd dat je geen plugin moet gebruiken als het niet noodzakelijk is), dan kan je onderstaande code toevoegen aan het functions.php bestand welke je vindt in de theme folder van jouw WordPress website.

// Voeg Google Analytics toe
add_action('wp_header', 'ga');
function ga() {
    // Plak hier de Google Analytics trackingscode
}

Nieuw Front-End design

Het Genesis Theme zelf is in deze versie onder handen genomen. Is het nu een flitsend en oogverblindend design geworden? Nou, nee. Maar dat is ook niet nodig aangezien je het Genesis Theme zelf nooit zal gebruiken voor je website (toch?).

De nieuwe versie biedt wel weer veel extra mogelijkheden voor webdesigners (zoals ik) om child themes te maken. En weet je wat nu echt mooi is aan deze nieuwe Genesis Theme versie.

This modern new look takes a step into the realm of responsive design, adjusting to fit whatever device on which you happen to be viewing the site, including smart phones and tablet computers.

Moet ik nog meer zeggen

SEO, it’s big business!

SEO (search engine optimalisation), je kan er tegenwoordig niet meer om heen. Zijn het niet de bedrijven die er grof geld mee verdienen, dan zijn het de gebruikers van internet zelf (website eigenaren) wel die het presenteren als een onmisbaar element in de internet strategie.

De roep om SEO is dus sterk en het nieuwe Genesis Framework komt ook hierin weer tegemoet. Waren er al meerdere SEO settings ingebouwd, nu zijn deze uitgebreid met extra mogelijkheden voor de archiefpagina’s (categorieën, tags etc.). You are in the lead!

Wat is het menu vandaag?

Hier krijg ik nu een grote glimlach van op mijn gezicht! Hoe frustrerend was het wel niet om primaire of secondaire navigatie menu’s uit te schakelen? Uit te schakelen in die zin, dat gebruikers van de Child Theme deze setting simpelweg niet konden zien.

Gelukkig is hier werk van gemaakt! Je kan nu heel simpel door wat code toe te voegen aan de functions.php file menu’s uitschakelen! Een punt wat ik meteen zal oppakken voor mijn Genesis Child Themes!

Wil je het gehele navigatie menu blok uitschakelen? Gebruik dan deze code.

remove_theme_support( 'genesis-menus' );

Wil je bijvoorbeeld enkel het secondaire navigatiemenu verwijderen (en dat wilde ik heel graag heel vaak!), dan doe je dat nu als volgt.

add_theme_support( 'genesis-menus', array( 'primary' => 'Primary Navigation Menu' ) );

Spelen met kleuren

Toevallig ben ik momenteel bezig met een opdracht voor een website waarvoor ik een Child Theme heb gemaakt die meerdere kleurenversies kent. De eigenaar kan zo heel gemakkelijk het uiterlijk van de website aanpassen.

Om dat voor elkaar te krijgen was wat programmeer werk nodig. Nu wordt het je veel makkelijker gemaakt! Met een simpele code regel in de functions.php activeer je het kleurenblok in de Genesis Theme settings pagina. I love it!

add_theme_support( 'genesis-style-selector', array( 'theme-blue' => 'Blue', 'theme-green' => 'Green', 'theme-orange' => 'Orange', 'theme-red' => 'Red' ) );

Code is Poetry

Coding standards, leesbaarheid, toelichtingen (comments); elementen waar een programmeur oog voor moet hebben. En dat hebben ze opgepakt! ‘Normale’ gebruikers van het Genesis Framework lopen hier niet warm van, maar geloof me: ik wel! Het geeft voor webdesigners/developers alle ruimte om de code te doorgronden en er verder mee te spelen. Let’s play!

Thanks to Gary Jones, Genesis 1.8 is chock-full of inline documentation.

Was dat alles?

Het Genesis Framework v1.8 heeft nog meer ‘Goodies in the bag’! Geïnteresseerd in de volledige changelog? Zoek niet langer, deze staat hier!

Geïnteresseerd geraakt in het Genesis Framework? Aarzel niet, neem contact met me op en verken wat de mogelijkheden zijn voor jouw WordPress website!

Op de website van IDLaunch maak ik gebruik van een Wordle als introductie op de blogpagina. In deze Wordle zijn allerlei woorden opgenomen waarover ik zo nu en dan schrijf. Zo krijgt de bezoeker in één oogopslag te zien wat er te vinden is. Net zoals met de WordPress tag cloud.

Velen van jullie vragen zich af hoe de Wordle is gemaakt en hoe je deze plaatst op een WordPress pagina zoals ik heb gedaan. Hieronder een kleine tutorial, zodat je zelf ook in staat bent om het voor elkaar te krijgen. Let wel, dit is een tutorial voor WordPress in combinatie met Genesis Framework!

Een Wordle maken

Een Wordle maken is helemaal niet zo moeilijk. Je hebt er zelf helemaal geen bijzondere software voor nodig aangezien er een zeer handige online tool is: http://www.wordle.net/

Op deze website kan je allerlei verschillende Wordles maken. Klik op de link ‘Create your own’. Dat brengt je op de volgende pagina waar je gevraagd wordt om woorden op te geven voor je Wordle. Zie hieronder het screenshot van mijn voorbeeld in deze blog.

Zoals je ziet heb ik bepaalde woorden vaker ingevuld dan anderen. De regel is: hoe vaker je een woord opgeeft, hoe groter dat woord zal worden ten opzichte van de andere woorden die je ook hebt opgegeven. In mijn voorbeeld zal IDLaunch en Blog (beiden komen 5 keer voor) de grootste woorden worden in mijn Wordle. De woorden die maar één keer zijn opgegeven, zullen het kleinste zijn.

Wanneer je alle woorden hebt opgegeven klik je op ‘Go’. Daar is je Wordle! Schrik niet. De Wordle kan er afgrijselijk uitzien wat betreft kleuren en lettertype. Daar kan je gelukkig mee spelen. In mijn geval heb ik de settings als volgt ingesteld:

• Font: Vigo
• Layout: Straighter Edges en Mostly Horizontal
• Color: Ghostly with a little variation

Dat geeft onderstaand resultaat.

Vervolgens klik je op ‘Print’ en sla je de Wordle op als .pdf bestand. Ik heb vervolgens de Wordle van .pdf naar .png omgezet via Photoshop. Mocht je dat programma niet hebben, dan zijn er vast en zeker alternatieven. Even googlelen

De Wordle is klaar! Nu de volgende stap: integreren in WordPress.

Wordle in WordPress pagina plaatsen

De Wordle op de website van IDLaunch staat bovenaan de blogpagina. Deze heb ik er dus ingezet, voordat de blogberichten worden uitgespuugd op het scherm. Hoe doe je dat?

Hiervoor gebruik je een functie. Deze functie voeg je toe in het functions.php bestand dat je vindt in de theme folder van jouw website. Zie je geen functions.php bestand (lijkt me sterk, maar stel) dan maak je er zelf eentje.

Voeg in het functions.php bestand de volgende code toe:

// Add a Wordle before the Post Title at the Blog Template Page ** David Jansen @ http://idlaunch.nl
function idlaunch_add_wordle () {
 if ( is_page( '289') ) {
 echo '<div class="wordle"><img src="http://idlaunch.nl/wp-content/themes/IDLaunchNL/images/wordle_idlaunch.png" /></div>';
 }
}
add_action('genesis_before_content', 'idlaunch_add_wordle');

Verander in deze code het getal ’289′ voor jouw eigen pagina ID van de blogpagina. Deze ID vind je door in het dashboard van WordPress, onder de sectie ‘pagina’s te kijken welk getal staat achter “post=” bij de blogpagina (klik bewerken pagina en kijk in de browserbalk).

Vervolgens vervang je in de code de link van de image (van de Wordle) met de link die voor jou van toepassing is.

<img src="http://idlaunch.nl/wp-content/themes/IDLaunchNL/images/wordle_idlaunch.png" />

Verder kan je uiteraard ook nog een specifieke vormgeving meegeven aan de Wordle via de ‘wordle’ class in de stylesheet van jouw theme. Bijvoorbeeld een border.

.wordle {
border: 2px solid #000;
padding: 3px;
}

Ik hoop dat jullie er uit komen met deze tutorial! Good luck!

“WordPress 3.3.1 is now available. This maintenance release fixes 15 issues with WordPress 3.3, as well as a fix for a cross-site scripting vulnerability that affected version 3.3. Thanks to Joshua H., Hoang T., Stefan Zimmerman, Chris K. and the Go Daddy security team for responsibly disclosing the bug to our security team.”

Kortom, zo spoedig mogelijk updaten is het credo! Denk er aan, maak eerst een volledige back-up van je bestanden én database voordat je daaraan begint!

In the mean time zijn de nieuwe bijgewerkte stijlen hier op IDLaunch te downloaden. Hieronder vind je de download pakketjes. Alle pakketjes zijn .zip bestanden waarin je het volledige style pakket zult aantreffen.

Upload de stijl naar de style map op je server en activeer de stijl in het beheerderspaneel van phpBB onder de tab ‘Stijlen’. In een handomdraai kan jij dus ook genieten van deze mooie kwalitatieve gratis phpBB3 stijlen!

Have fun!

IDLaunch Black

IDLaunch Blue

IDLaunch Fresh

Sinterklaas