Je installeert de plugin zoals elke andere plugin:
Je download het zip-bestand naar je eigen computer, en pakt het daar uit.
Via FTP kan je vervolgens de map ‘livesig’ uploaden naar de plugin-map van je WordPress-installatie. Let op: als je in Windows rechtsklikt op het zip-bestand, en dan kiest voor ‘alles uitpakken’, wordt de map livesig uitgepakt in een map livesig.0.2.5. Het is de ‘binnenste’ map, dus die zonder het versienummer, die je moet uploaden.
Vervolgens ga je op de beheerspagina van je WordPress-blog naar ‘plugins’, en je activeert livesig.

Wanneer je nu klikt op ’settings’ (rechts bovenaan in de blauwe balk in WordPress 2.5.x), zie je in de witte balk, ongeveer in het midden ‘LiveSig’.

Indien je bent ingelogd met beheerdersrechten, kan je nu aan elke auteur van je blog een handtekening toewijzen:
In veel gevallen betekent dit, dat je in de linkse en in de rechtse kolom ‘administrator’ (admin) moet kiezen. Indien je echter gewoonlijk je artikelen schrijft vanuit een ander account, dan kies je het passende account (bijvoorbeeld de combinatie van ‘writer’ links en je eigen naam rechts.).

Vervolgens wordt je gevraagd om de exacte code in te voeren die MyLiveSig je heeft gegeven.
Hiervoor dien je nog een stap verder te gaan dan ik in mijn beschrijving aangaf: In stap 6 kies je niet voor ‘want to download this signature?’, maar voor ‘want to use this signature?’
Stap 7: Kies op de volgende pagina voor ‘Generate HTML-code’.
Stap 8: Kopieer de code in het kader onderaan volledig, en plak het in het onderste vak op de pagina voor je LiveSig-settings.

Voilà. Nu hoef je nooit meer aan je handtekening te denken, die wordt automatisch aan al je berichten toegevoegd…

In een volgende reeks van artikelen wil ik wat tipjes van de SEO-sluier oplichten, en voor bloggers met een (zelfgehoste) WordPress blog een paar mogelijkheden uitleggen om hun blog in dit opzicht te optimaliseren.
Ik ga niet tot in de finesses, en als je je commerciële site wil optimalizeren voor zoekmachines ben je hier absoluut aan het verkeerde adres, maar het is wel leuk om door een paar simpele ingrepen je site plots wel op de eerste pagina met zoekresultaten te zien verschijnen…

Een overzicht

• Pretty Permalinks
• Het verstandig gebruiken van zoekwoorden, het verzorgen van je taal en je afkortingen!
• ‘alt’-attributen bij afbeeldingen
• WordPress-plugins voor SEO

Ga jullie gang!

In mijn vorige artikelen in deze reeks, beschreef ik hoe je met behulp van MyLiveSignature een handtekening kan maken, en die handmatig in elke nieuwe post kan invoeren.

Maar als jullie ook maar een klein beetje op mij lijken, dan vergeet je na een tijd regelmatig om die handtekening onderaan je post te plaatsen. Het zou toch veel gemakkelijker zijn, als die handtekening al in het sjabloon van je blog was opgenomen?
Als je zelf een WordPress-blog host, is dat zeker mogelijk. (Wellicht ook voor andere blogplatformen maar daar heb ik geen ervaring mee.)
Je moet hiervoor wel wijzigingen durven aanbrengen in de template-bestanden van je WordPress-thema.

Sommige beheers-interfaces voor een webserver laten toe om rechtstreeks bestanden op de server aan te passen (bijvoorbeeld als je hosting service gebruikt maakt van DirectAdmin). In het andere geval moet je het bestand in kwestie eerst downloaden via ftp, het op je eigen computer aanpassen, en weer uploaden.
Maak in elk geval vooraf een kopie van het bestand, dat je als back-up bewaart voor het geval dat er toch iets mis zou gaan.

Het bestand dat we nodig hebben, heet in de meeste themes index.php of single.php. Het thema dat ik voor dit blog gebruikt, is behoorlijk complex, en daar moet je op zoek in theloop.php, maar dat is eerder zeldzaam.

In één van de genoemde bestanden zal je ergens het volgende stukje vinden (je zal dus even moeten zoeken in jouw specifieke thema):
<div class="entry">
<?php the_content(); ?>

De eerste regel betekent eigenlijk: ‘hier begint het onderdeel dat we de klasse ‘entry’ geven (en dat dus de stijlkenmerken heeft die voor die klasse gedefinieerd zijn in je stijlblad (CSS, Cascading Style Sheet).’
De tweede regel geeft de server de opdracht om aan de browser de inhoud van het bericht door te sturen.

Je wil dat je handtekening na de inhoud van het bericht wordt geplaatst, dus hier moet je aan de slag.
Je voegt hier op de eerstvolgende regel het volgende toe:
<div class="signature">
<img src="http://example.com/images/signature.gif" alt="handtekening" />
</div>

En dat zegt:
‘hier begint het onderdeel dat ik de klasse ’signature’ meegeef, en waarvoor ik de stijlkenmerken heb gedefinieerd/zal definiëren in mijn CSS.’
In dat onderdeel moet de afbeelding geplaatst worden die je vindt op de volgende locatie (en je verandert natuurlijk http://example.com/images/signature.gif in het juiste adres van je handtekening. Deze tekening krijgt als alternatieve beschrijving (’alt‘) ’signature’ mee. (Dit betekent in elk geval dat mensen die je blog lezen door middel van bijvoorbeeld een brailleregel ipv op een scherm, tenminste weten wat ze ‘missen’ doordat ze niet kunnen zien. Zij, maar ook zoekrobotten, zullen je er dankbaar voor zijn.)
Hier eindigt het laatst gestarte onderdeel (dat ik dus de klasse ’signature’ heb gegeven).

Zelf heb ik gekozen om mijn handtekening enkel te laten verschijnen op de pagina met de ’single post’, en niet op de voorpagina van mijn blog. Ik vind het wat gek staan, als op één pagina wel zeven keer mijn handtekening verschijnt.
Daarom heb ik in plaats van het bovenstaande, gekozen voor een op het eerste gezicht iets ingewikkelder versie. In plaats van de code hierboven, voeg je het volgende toe:
<?php if (is_single())
{
echo '<div class="signature">
<img src="http://example.com/images/signature.gif" alt="" />
</div>';
} ?>

Je zegt hiermee:
Indien de browser een pagina zal weergeven waarop slechts de enkelvoudige post verschijnt
laat dan zien (echo):(alles wat ik hierboven al beschreef)
(…)
en hier eindigt alles wat er nog moet gebeuren bij die enkelvoudige post.

Ai, als ik het zo allemaal bekijk, kan ik me voorstellen dat dit er behoorlijk ingewikkeld uitziet voor iemand die nog nooit met html gewerkt heeft, en (dus zeker) php alleen maar kent van horen zeggen.
Dit stukje is dus van een iets ander kaliber dan de vorige, maar als je een beetje durft, probeer het dan toch eens uit… (Maar: maak altijd een back-up, mocht er dan iets fout gaan, dan kan je altijd je back-up terugzetten.)

19 mei - aanvulling: Ik heb zojuist een beschrijving gepubliceerd van een WordPress-plugin die automatisch je handtekening aan al je berichten toevoegd.

In een vorig bericht vertelde ik, hoe je met behulp van MyLiveSignature een handtekening kan maken om onder je blogberichtjes te plaatsen.

Je handtekening wordt dus een afbeelding, die je onder elk van je berichten kan plaatsen, net zoals je dat met andere afbeeldingen doet: Je kan de afbeelding die je op het einde van de procedure van MyLiveSignature hebt gedownload naar je eigen computer, weer uploaden naar de server waar je blog is gehost, en die afbeelding vervolgens onder elk van je blogberichtjes invoeren.

Soms wil je echter dat je handtekening andere stijlkenmerken heeft dan je gewone afbeeldingen. Je wil bijvoorbeeld niet dat je handtekening een kader heeft, terwijl jouw blogthema daarin wel voorziet.

OK, in plaats van in je visuele opmaakveld te blijven zitten, klik je op de tab ‘html’ (WordPress 2.5), of ‘html bewerken’ (voor Blogger), en je scrollt helemaal omlaag tot aan de plaats waar je de code voor je handtekening terug vind. Die moet er in zijn simpelste vorm ongeveer uitzien als volgt:
<img src="http://www.mijnblog.com/images/handtekening.png" />

Dit kan je lezen als volgt:
<img : Hier begint de informatie over een afbeelding (image).
src="http://www.mijnblog.com/images/handtekening.png" : Die afbeelding moet door de browser op deze plek opgehaald worden.
/>: hier eindigt de informatie over de afbeelding.
(Wellicht is er hier al bijkomende informatie toegevoegd: bijvoorbeeld alt="...", waarmee een ‘alternatieve beschrijving’ van de afbeelding wordt gegeven voor gebruik in browser die geen afbeeldingen kunnen tonen, zoals bv brailleregels. Of height="..." en width="...", waarmee aan de browser al verteld wordt hoeveel plaats hij moet vrijhouden voor de afbeelding, zodat je bv op een pagina met heel veel foto’s niet telkens de tekstblokken ziet verspringen als de bijhorende foto’s maar traag worden binnengehaald.)

De informatie die we op dit ogenblik nog in die ‘tag’ willen opnemen zijn stijlkenmerken.

Stijl: mijn handtekening hoeft geen kader

Het meest voorkomende probleem is, dat je standaard blogthema voorziet dat er een mooi kadertje rond je foto’s staat. Je moet dan een klein stukje stijl-informatie toevoegen in de img-tag. Dat doe je door
style="border:none;"
in de tag te plaatsen. Dit stukje code plaats je ergens achter de riedel met href="...", en in elk geval voor /&gr;. Elk onderdeel heeft hier belang, een aanhalingsteken vergeten of een lettertje mistypt, en de computer snapt echt niet meer wat je bedoelt. De verschillende stukjes informatie (zoals alt, style, height en width) mogen in een willekeurige volgorde staan.

De img-tag gaat er dus als volgt uitzien:
<img src="http://www.mijnblog.com/images/handtekening.png" style="border:none;" />

Het zou me voor vandaag te ver leiden, als ik alle mogelijke stijlkenmerken hier behandelde. Maar heb je vragen in dit verband, dat wil zeggen: is er aan de ‘afwerking’ van je handtekening iets dat niet helemaal is zoals jij het wil, plaats in het reactieluik dan een link naar je pagina-met-handtekening, en geef aan wat je verandert wil zien. Ik wil dan bekijken wat daarin eventueel mogelijk is (maar ik ben echt geen CSS-goeroe, dus alle problemen oplossen kan ik allicht niet!)

Nu zijn we zover, dat we een stukje code (een ’snippet’) hebben aangemaakt, dat we ergens in een tekstbestandje kunnen bewaren en dat we elke keer als we onze handtekening kunnen toevoegen, weer onderaan (de html-versie van) ons blogberichtje kunnen plakken.
Maar voor wie echt de uitdaging aan wil gaan, bekijk ik volgende keer op welke wijze je dat stukje code al in de basisbestanden van je blog kan invoeren, zodat je die handeling niet elke keer opnieuw moet uitvoeren.
Dit is al iets uitdagender, en helaas niet mogelijk voor Blogger en WordPress.com, en hoogstwaarschijnlijk ook niet voor skynet-blogs en dergelijke. Een kluifje dus voor mensen met een zelfgehoste WordPress-blog.

19 mei - aanvulling: Ik heb zojuist een beschrijving gepubliceerd van een WordPress-plugin die automatisch je handtekening aan al je berichten toevoegd.

Naar aanleiding van een bericht in mijn Kruidenklets vroeg Els me wat uitleg over het toevoegen van een handtekening aan een blogbericht.
Ik maak er meteen een reeks van.
Ik start vandaag met het aanmaken van een handtekening. Volgende berichten gaan over het toevoegen van de handtekening aan je bericht.

Een ‘handtekening’ maken

Een handtekening aanmaken om je blogberichtjes te personaliseren kan je met behulp van een foto-bewerkingsprogramma, maar als je vaardigheden op dat vlak nog niet groot zijn, is MyLiveSignature een goed alternatief.

Je gaat als volgt te werk:
1. Op de homepage van de site aangekomen krijg je onderaan de mogelijkheid om verder te gaan zonder registratie (proceed), om je te registreren (register), of om in te loggen (login) wanneer je je al eerder hebt geregistreerd.
Voorlopig hebben we de mogelijkheden die registratie biedt niet nodig, dus we gaan gewoon verder met ‘proceed’.

2. Op de volgende pagina kiezen we voor de eerste keuze-mogelijkheid: ‘Create signature’, maak een handtekening.

3. Op de pagina waar je vervolgens terecht komt, heb je opnieuw twee keuzemogelijkheden, en we kiezen opnieuw de bovenste: we gaan een handtekening maken met behulp van de Wizard die deze site voorziet. (De tweede mogelijkheid gaat uit van je eigen ingescande handtekening).

De handtekeningen-wizard

Stap 1: voer in het eerste veld de naam in waarvoor je een handtekening wil, en typ in het tweede veld exact de cijfers over die je in het ‘Kaptcha’-veld vind. Hiermee wordt vermeden dat robots gebruik maken van de site.

Stap 2: Kies een lettertype. In totaal zijn er 12 pagina’s met elk tien verschillende lettertypes. Neem de tijd om uit die 120 lettertypes er één te kiezen dat je leuk vind, dat bij de stijl van je blog past, of dat je eigen handschrift zo sterk mogelijk benadert.
De keuze wordt vergemakkelijkt doordat je telkens al kan zien hoe je uiteindelijke handtekening er zal uitzien. Om naar een volgende bladzijde met voorbeelden te gaan klik je bovenaan op de lichtblauwe knoppen waarin de volgnummers van de fonts staan.
Als je een geschikt lettertype hebt gevonden, klik je op het bolletje boven het ‘handschrift’ van jouw keuze, en dan onderaan op de bladzijde op ‘next step’.
Inderdaad, je handtekening nog steeds niet af, er moeten nog een aantal details worden bekeken.

Stap 3: Klik op het bolletje boven de tekstgrootte die het best bij je handtekening past, en vervolgens onderaan op ‘next step’.

Stap 4: Kies een kleur: er zijn een aantal grijstinten en een aantal ‘basiskleuren’ voorhanden. (Een tip: kleur #5, zuiver zwart, komt in de meeste gevallen een tikkeltje te hard over. Kies liever voor een donkere grijstint.)
‘Next step’ onderaan de bladzijde…

Stap 5 Kies een hellingshoek. Een kleine tekortkoming hier vind ik, dat je enkel een helling naar links kan kiezen, maar laat ons niet muggenziften… Klik opnieuw op het bolletje boven de gekozen hellingshoek en dan op ‘next step’.

Stap 6 Eigenlijk is je handtekening klaar. Ik kies vervolgens voor ‘Want to download this signature?’, want ik wil de handtekening op mijn eigen computer/server hebben, en die niet telkens vanaf deze site moeten downloaden. Ik klik dus op die tekst, en op de volgende pagina kan ik rechtsklikken op de afbeelding, en in het contextmenu (het menu dat verschijnt bij rechtsklikken) kies ik voor ‘afbeelding opslaan als…’. Vervolgens bepaal je waar op je computer je de handtekening opslaat, en geef je ze eventueel een andere naam.

Je hebt nu een png-afbeelding (portable network grafic) van je handtekening op een transparante achtergrond.

Je kan nu vervolgens deze handtekening als een gewone afbeelding onderaan je blogpost invoeren.
In een volgend bericht zal ik uitleggen wat je moet doen indien je blog-thema voorziet dat er rond elk van je afbeeldingen een kader komt, of als je handtekening aan de verkeerde kant wordt uitgelijnd (als het rechts komt te staan als het links moet komen of omgekeerd).
Tenslotte beschrijf ik hoe je je handtekening standaard kan laten toevoegen aan elk bericht (indien je een zelf-gehoste WordPress blog hebt…)

19 mei - aanvulling: Ik heb zojuist een beschrijving gepubliceerd van een WordPress-plugin die automatisch je handtekening aan al je berichten toevoegd.

Maar geef toe, als ik in een blogje over kruiden en planten te veel over CSS en HTML en blog-platformen en plugins ga zagen, dan schrik ik een flink deel van mijn lezers - die eigenlijk alleen maar ‘Kruidenklets‘ willen horen - heel erg af.
Dus heb ik een nieuw blogje aangemaakt.

Onderwerpen voor de nabije toekomst:
- Op vraag van Els: Hoe voeg ik een handtekening toe aan mijn postjes?
- Wat is SEO en hoe pas ik dat toe? (en daar zal ik wel een hele reeks aan kunnen wijden)
- Welke plugins zijn interessant voor een zelf-gehoste WordPress-blog, en wat doen ze? (weer een reeks dus)
- Wat is het verschil tussen ‘categories’ (rubrieken) en ‘tags’ (’keywords’)?

Dit blogje heeft voorlopig nog een hele basale lay-out, en ik denk dat het voor de meeste (WordPress)-bloggers geen geheim is hoe ze een ander thema installeren, maar misschien is het wel een idee om stap-voor-stap uit te leggen hoe je een Nederlandse ‘language file’ installeert….

(Andere onderwerpen zijn welkom in de comment-sectie!)