Alles wat wij weten over WordPress

Berichten

Dit schreef ik oorspronkelijk in maart 2015 en heb ik op 25 februari 2018 geüpdatet 

Is jouw WordPress website of WooCommerce webshop traag of heb je specifieke pagina’s op je website die traag laden? Hoe vind je dan de oorzaak? Er is namelijk een groot aantal zaken die je website kan vertragen:

  • geïnstalleerde plugins;
  • het gekozen thema;
  • je hostingprovider;
  • niet geoptimaliseerde foto’s;

In deze blog neem ik je mee in de wereld van de snelheidsoptimalisatie van een WordPress website of WooCommerce webshop. Ik noem ze beiden omdat in grote lijnen het namelijk precies dezelfde werkwijze is voor zowel een webshop als een website.

In deze blog laat ik je verder zien hoe je zelf de snelheid van je WordPress website kunt onderzoeken en de door jou gebruikte plug-ins kunt analyseren.

Onderzoek je trage WordPress website

Je kunt de snelheid van je website testen op http://www.gtmetrix.com (lees de blog over GTMetrix) en http://www.webpagetest.org/ Beide websites analyseren je complete website en je kunt in de resultaten exact zien wat de laadtijd is van alle onderdelen van je website.

Optimaliseer je afbeeldingen met GTMetrix

Download geoptimaliseerde afbeeldingen van GTMetrix.com

Hierin zijn al veel oorzaken terug te vinden, waaronder:

  • de grootste afbeeldingen die geladen worden. Verklein deze;
  • CSS stylesheets die geladen worden. Kun je ze mogelijk combineren of zijn ze helemaal overbodig?
  • JavaScripts die geladen worden aan het begin of het einde van je pagina. Je zult verbaasd zijn hoe de score van bijvoorbeeld Gtmetrix verbetert als je deze stap goed uitvoert;

Plugins om WordPress te analyseren

WordPress website traagIn deze blog gaat het uiteraard om een WordPress website of WooCommerce webshop.

WordPress kent een plugin die P3 (Plugin Performance Profiler) heet. Als je deze plugin installeert en een rapport laat genereren, kun je exact zien welke plugins de meeste laadtijd verbruiken. Dit wordt overzichtelijk weergegeven in een cirkeldiagram. Kijk eens naar de twee grootste vlakken en bedenk eens of je deze plugins echt nodig hebt om je website te laten functioneren. Of Google eens naar goede alternatieven.

Buiten P3 kun je uiteraard ook gewoon je gezonde verstand inzetten en de lijst met plugins kritisch bekijken. Ik ben ervan overtuigd dat je minimaal twee plugins vindt die je echt niet nodig hebt. Deactiveer deze dan ook direct. En niet alleen deactiveren maar ook compleet verwijderen om te voorkomen dat het en veiligheidsrisico gaat worden.

Afbeeldingen verkleinen

Een veel vergeten vertrager van WordPress websites zijn de afbeeldingen. In GTmetrix zie ik soms resultaten met een paginagrootte van meer dan 10MB. Ook in 2018 zijn dit nog enorme getallen. Je hebt al gekeken naar de grootte van je afbeeldingen? Je hebt er al een aantal verkleind en nog steeds klopt het niet?

Probeer de WordPress Plug-in Smush.it! eens. Deze comprimeert automatisch de afbeeldingen die je upload naar je website. Dit werkt alleen als je afbeelding kleiner is dan 1MB. Het is ook mogelijk, nadat je de plug-in geïnstalleerd hebt, via de mediabibliotheek achteraf je afbeeldingen te verkleinen.

Imsanity Plugin WordPress

Imsanity Plugin WordPress

Een andere goede optie is de plugin Imsanity. Hiermee voorkom je dat er enorme afbeeldingen geüpload worden. Je stelt bij de instellingen in wat de maximale afmetingen zijn die geüpload mogen worden. Op het moment dat de afbeeldingen dan groter zijn dan de ingestelde waarden worden de afbeeldingen automatisch in grootte aangepast.

Voordat je aan de slag gaat het met online optimaliseren van je afbeeldingen zijn er nog twee belangrijke stappen. De eerste is: sla je foto’s niet groter op op je computer dan benodigd op de website. Sla vanuit bijvoorbeeld Photoshop je foto’s op met een compressie van 50%.

Als laatste optimalisatiestap heb je nog de offline optimalisatietool van ImageOptim (voor Mac). Hiermee haal ik echt fantastische resultaten en dit kan je zomaar de helft van je opslagruimte en dus ook laadtijd schelen.

Als je meer wilt weten over het optimaliseren van je afbeeldingen verwijs ik je graag naar deze eerder geschreven blog.

Tips om de veiligheid te verhogen?

Je hebt de plugins opgeschoond en je afbeeldingen verkleind, maar het is nog geen tijd om achterover te gaan leunen. Tot nu toe hebben we het alleen over de snelheid van je website gehad. Maar heb je wel eens nagedacht over de beveiliging? Als je een kwalitatief goede hostingpartij hebt dan is een deel van deze mogelijkheden al standaard ingebouwd of aangepast. Een ander deel is dan niet noodzakelijk aangezien de beveiliging op serverniveau goed ingeregeld is. Toch geef ik nog graag een aantal eenvoudige tips om je veiligheid naar een hoger niveau te tillen.

  • Gebruik nooit een gebruiker met de naam ‘admin’
  • Wijzig de admin gebruikers ID
  • Verwijder de WordPress versie uit je bestanden
  • Pas de link naar je loginpagina aan
  • Wijzig de database prefix van wp_ in iets willekeurigs

Dit is maar een kleine greep uit de enorme hoeveelheid oplossingen die geboden worden. Mocht je geen goede hostingprovider hebben qua beveiliging dan kan het geen kwaad een plugin als WordFence te installeren. Maar ga er nooit vanuit dat je website hiermee 100% veilig is en niet gehackt kan worden.

Heb je nu een snelle WordPress website?

Eigenlijk is hier maar 1 antwoord mogelijk: nee. Zoals je mogelijk gezien hebt in het screenshot van GTMetrix van mijn eigen website moet ook ik weer een aantal afbeeldingen opnieuw uploaden. Je bent nooit klaar met je website. In vergelijking met een groot deel van andere WordPress gebruikers, die alleen de basisversie van WordPress geïnstalleerd hebben, ben je al een goed op weg om een snelle website te creëren.

Ook Google zal tevreden zijn met het resultaat. Hoe sneller je website laadt, hoe hoger je in hun zoekmachines zult eindigen. Dit is uiteraard geen garantie, maar een trage website, volledig geoptimaliseerd voor de zoekmachines zal minder goed presteren dan jouw snelle geoptimaliseerde website.

Een snelle website vraagt constante monitoring en aanpassingen. Een aantal zaken die in ieder geval niet gaan bijdragen aan de snelheid van je website:

  • Een budget hostingpartij. Hierbij kom ik nog regelmatig tegen dat er PHP 5.6 of nog ouder gedraaid wordt. Check bij je hostingprovider of ze in ieder geval PHP 7 ondersteunen. Dit kan je aanzienlijk snelheidswinst opleveren.
  • Geen caching geïnstalleerd. Voor meer informatie over caching verwijs ik je graag naar mijn blog hierover.
  • Teveel externe zaken die geladen worden. Denk hierbij aan Facebook, Instagram of ieder ander socialemediaprofiel dat getoond wordt. Maar denk hierbij ook aan Jetpack (het Zwitserse zakmes waar je mogelijk 1 of 2 opties van gebruikt maar dat wel veel meer laadt).
  • Verouderde plugins of thema’s. Zorg dat alles up-to-date is. Doe je dit niet dan zul je verbaasd zijn over het aantal errors in de errorlog op je server. Bedenk dat iedere error milliseconden vertraging oplevert. Los dit dus op. Of besteed het onderhoud aan je website uit.

Mocht je vragen hebben of er zelf niet helemaal uitkomen, neem dan geheel vrijblijvend contact op met ons via info@lamper-design.nl.

Dit artikel is al tijden het meest populaire artikel op mijn blog. Het origineel is gepubliceerd op 7 februari 2016. Ondertussen is er aan CSS niet veel veranderd maar wel aan de manier waarop je het kunt implementeren op je website. Daarom is dit artikel bijgewerkt naar een nieuwere versie.

—————-

WordPress websites maken gebruik van templates. Of dit nu een alleen een framework is of een compleet template met alles erop en eraan, er wordt altijd gebruik gemaakt van Cascading Style Sheets (vanaf nu CSS).

Wat is CSS? Volgens Wikipedia is dit ‘een techniek voor de vormgeving van webpagina’s’. Kort gezegd zijn het stijlbladen voor de vormgeving van je website.

Niet altijd zal de stijl van je website overeenkomen met de wensen die je hebt qua vormgeving en kleuren. Denk hierbij ook aan getoonde lettertypes, randen, positie van alle items en nog veel meer. Het zijn dus niet alleen de kleuren, maar eigenlijk alles op het gebied van styling van je website wat je aan kunt passen met CSS.

Laat de ingebouwde editor van WordPress vooral ver links liggen

De basis voor de styling van je website kun je altijd vinden in de style.css van je template. Maar maak je hier wijzigingen in dan ben je die kwijt na een update van je thema. Te vaak kom ik mensen tegen die gebruik maken van de editor van WordPress, omdat het zo makkelijk is om in de backend van je WordPress website wijzigingen te maken. Vergeet niet dat door het vergeten van een ; of iets anders je complete website geruïneerd kan worden.

Wil je graag eerst meer over CSS te weten komen? Dan kun je hier een boek over CSS bestellen (affiliate) of via deze website van W3school de basis leren kennen.

In deze blog leg ik eerst uit hoe een website opgebouwd is met behulp van HTML-codes. Vervolgens laat ik zien hoe je de juiste codes opzoekt die je moet wijzigen voor het aanpassen van je website. Als laatste laat ik nog verschillende manieren zien hoe je deze aanpassingen op een zodanige manier maakt dat deze ook bij updates van je thema deze bewaard blijven. Er zijn heel veel verschillende manieren om dit te doen, kies zelf degene die het beste bij jouw WordPress website past.

  1. Opbouw van een pagina in WordPress met CSS aanpassen
  2. Zoek classes met Google Developer Tools
  3. CSS aanpassen in WordPress
    1. Custom CSS van je thema gebruiken
    2. Child-theme gebruiken
    3. Simple Custom CSS Plugin gebruiken
    4. Customizer CSS WordPress gebruiken

1. Opbouw van een pagina in WordPress met CSS aanpassen

Vroeger werden websites gebouwd in platte HyperText Markup Language (wat is HTML). Hiermee bouwde je een statische website en zonder verstand van de gebruikte HTML codes kon je weinig aanpassen. Tegenwoordig heb je een dynamische website met het Content Management Systeem WordPress. Dit maakt gebruik van een database waar alle tekst in opgeslagen wordt en opgehaald als het nodig is. De basis van dit systeem is de programmeertaal PHP (wat is PHP) in combinatie met HTML. Dat is een erg basis uitleg maar voor nu voldoende.

Als voorbeeld heb ik gebruik gemaakt van de pagina webdesign op mijn eigen website. Alle codes die je voorbij ziet komen zijn dus van mijn eigen website.

Paginabron weergeven Chrome

In de schermafdruk zie je verschillende cirkels. Op volgorde zie je de volgende opties die je eventueel aan kunt passen via CSS.

  1. class=”entry-footer” : dit is een class die je kunt hergebruiken. Je kunt deze class aan verschillende items op je pagina koppelen en dus eenvoudig bijvoorbeeld een lettergrootte of tekstkleur aanpassen voor je hele website.
  2. <p> : een standaard HTML code waar bijvoorbeeld een lettertype aan gekoppeld is. Wordt gebruikt voor het maken van alinea’s. Zal ook op elke website terug te vinden zijn. Is wel erg algemeen. Mocht je hier wijzigingen in maken dan zullen dus alle alinea’s die deze code gebruiken mee wijzigen.
  3. <h2> : Een koptekst item uit HTML code. Als je in de CSS code de H2 code wijzigt zal dit over de hele website wijzigen. Eventueel kun je bijvoorbeeld in je stylesheet <h2 class=”h2-optie1″> aanmaken en daarmee pas je dan alleen de gekozen items aan.

2. Zoek classes met Google Developer Tools

Stel: Je hebt een kop op een pagina die je van kleur wilt wijzigen. Hoe pak je dit aan? Hoe kom je erachter welke class je aan moet passen? Ik gebruik zelf de Google Chrome browser. Hier zit een functie ingebouwd waarmee je in de bron van je WordPress website kunt zoeken. Je hebt hier dus geen extra tools voor nodig.

Maak je gebruik van Firefox als internetbrowser? Dan heb je een toevoeging nodig die ‘Firebug’ heet. Deze werkt globaal hetzelfde als de Google Developer Tools.

Waar vind je dan die Google Chrome Developer Tools? Ik maak zelf gebruik van een Mac voor het schrijven van deze blog, zover ik heb kunnen nagaan is dit op een Windows machine hetzelfde.

  • Ga naar ‘Weergave’
  • Kies ‘Ontwikkelaar’
  • Klik op ‘Ontwikkelaarstools’
  • Onderaan je scherm zal een scherm in je browser verschijnen waar je allemaal codes en teksten ziet. En nu?

Ontwikkelaars tools Google Chrome

Dit is de eerste stap op weg naar het vinden van je classes. In dit voorbeeld zal ik laten zien hoe je de kleur van de tekst van de header ‘Website laten maken’ aanpast. Hoe ga je precies zoeken welke class je hiervoor aan moet passen?

Inspecteren met Google Chrome developers tools

Element inspecteren activeren

Linksonder in het zojuist geopende scherm onderaan je beeld vind je het icoon dat je hiernaast op de schermafdruk ziet. Klik hier maar eens op en ga vervolgens over de elementen van je pagina heen.

Klik op het element waarvan je de waardes wilt aanpassen. In mijn geval heb ik geklikt op de kop ‘website laten maken’. Aan de rechterkant van de developer console onderin je scherm verschijnen de gebruikte classes. In dit geval gaat het om een H2 kop.

Selecteer elementen met Google Chrome Developer Tools

Element selecteren

HTML Codes inspecteren met Chrome

CSS Classes

 

  • De lettergrootte wordt aangegeven met font-size:25px;
  • Text-transform: uppercase; dat wil zeggen dat de letters geforceerd hoofdletters worden.
  • Als ik de kleur van deze kop wil aanpassen dan zal ik de optie color:#ff0000 toe moeten voegen. In dit geval zou de kop dan rood weergegeven worden. 

Wil je testen of je de juiste class gevonden hebt? Voeg dan met behulp van tab na de uppercase; een nieuwe regel toe en typ daar de code die de kleur moet wijzigen: color:#ff0000; Je zult dan direct de kleur van de kop zien wijzigen naar rood. Dit is puur om te testen aangezien het verder nergens opgeslagen wordt.

Waar voeg ik de aangepaste classes in om ze permanent te maken? Dat lees je hierna in deze blog.

3. CSS aanpassen in WordPress

Zoals in het begin van de blog aangegeven zijn er verschillende mogelijkheden om custom css in je WordPress website te gebruiken. Deze opties zijn:

  1. Custom CSS van je thema gebruiken
  2. Child-Theme stylesheet
  3. Plugin Simple Custom CSS
  4. De customizer van WordPress gebruiken

3.1 Custom CSS van je thema gebruiken

Deze optie is niet in alle WordPress thema’s beschikbaar. De meeste premium thema’s bieden die optie wel. Als voorbeeld zie je hier de thema-opties van het Enfold theme.

Custom CSS optie WordPress templates

Om de kleur van de eerder genoemde H2 kop te wijzigen doe je het volgende:

Kopieer de hele code uit de developer console. Je kunt daaruit knippen en plakken:

#top h2 strong,#top h3 strong, #top h4 strong, #top h5 strong, #top h6 strong {

color: inherit;text-transform: uppercase;

font-size: 25px;

Plak de code in de Quick CSS/Custom CSS van je theme.

Voeg de code: color:#ff0000 !important; toe. Waarom de !important voor de afsluitende ; ? Dit is om eventuele andere code te overschrijven die in een andere stylesheet hetzelfde element aanstuurt.

Na het opslaan van de wijzigingen en het verversen van de webpagina zal de H2 koptekst in rood weergegeven worden.

3.2 Child-theme stylesheet gebruiken

Wat is een child-theme? Dat is wel handig om te weten voordat je er gebruik van gaat maken. Een child-theme maakt gebruik van een WordPress thema als basis maar het grote voordeel is dat als er updates zijn voor het parent-theme je deze kunt updaten zonder de gemaakte wijzigingen aan je stylesheets kwijt te raken.

Een child-theme heeft nog meer voordelen. Je kunt namelijk niet alleen de stylesheets aanpassen. In principe kun je alle thema bestanden van het parent-theme overzetten naar de child-theme. Hierbij kun je denken aan de functions.php, Woocommerce template bestanden, header.php en footer.php. Je maakt hierin wijzigingen die bewaard blijven bij een update van je thema. Anders is al je werk voor niets geweest. Er zijn thema’s die bijna maandelijks een update krijgen dus een child-theme kan je dan enorm veel tijd en frustratie besparen. Hierdoor bespaar je dus ook veel tijd op je WordPress website onderhoud.

Maar heb je altijd een child-theme nodig? Mijn mening is van niet. Mocht je een goede custom css functie in je thema hebben dan en verder geen pagina templates willen wijzigen in je WordPress website of WooCommerce webshop dan is het niet noodzakelijk. De andere kant is, als je net start met je website is mijn advies om wel een child-theme aan te maken. Wie weet wil je in de toekomst toch functies toe gaan voegen via de functions.php of besluit je de WordPress website uit te breiden met een webshop via Woocommerce dan heb je er alleen maar gemak van.

3.3 Simple Custom CSS plugin gebruiken

Vanaf WordPress versie 4.8 heb je deze plugin niet meer nodig aangezien WordPress in de customizer zelf een Custom CSS optie toegevoegd.

Deze plugin is eerder voorbij gekomen in de lijst ‘top 5 plugins januari 2016‘. Dit is echt de meest door mij gebruikte plugin. Je kunt heel snel wijzigingen maken en uittesten. Door de eerder genoemde !important te gebruiken overschrijf je alle andere opties. Je zult verbaasd staan op hoeveel plaatsen soms een H2 kop gedefinieerd is. Dus als je geen !important gebruikt heb je grote kans dat je wijziging niet doorkomt.

Als je de plugin geïnstalleerd hebt vind je deze in het menu onder Weergave en vervolgens Custom CSS. Je krijgt het onderstaande scherm te zien. Vergeet niet de tekst die er nu staat tussen /* en */ weg te halen anders zal je code niet werken.

Simple Custom CSS Plugin

Na het invoegen van de gewenste code klik je op Update Custom CSS en ben je klaar. Of toch niet helemaal?

Houd rekening met mogelijke cache plugins zoals W3 Total Cache of WP Super Cache. Maak de cache leeg en ververs daarna je website.

3.4 Custom CSS in de WordPress customizer

Zoals in het vorige punt aangehaald heeft WordPress zelf in de customizer een custom css optie toegevoegd. Je hoeft dus geen losse plugin meer te installeren. De keuze tussen deze optie of de custom css in je child-theme is eigenlijk gelijk. Beide opties blijven bewaard bij een update van je thema.

Waar vind je deze optie? Onder Weergave > Customizer > Additional CSS. Zie screenshot. Je kunt hier direct je custom css invoeren.

Custom CSS WordPress

4. Conclusie over CSS

Je kunt bijna alles aanpassen met CSS. Deze blog is slechts een stuk basis mogelijkheden. Wil je weten welke CSS Classes er allemaal zijn? Kijk dan eens hier.

Wat moet je in ieder geval niet doen?

  • Standaard editor van WordPress gebruiken
  • Direct in de stylesheet van je thema werken, tenzij je een child-theme gebruikt
  • Geen backups maken voordat je wijzigingen gaat maken in je stylesheets
  • Kijk eerst in je thema opties of je daar niet een kleur voor bijvoorbeeld een H2 kop in kunt stellen. Waarom custom css als het in je thema zit?

Verder is het soms behoorlijk zoeken voordat je de juiste class gevonden hebt. Mocht je meer over CSS willen leren dan kun je overwegen een boek te bestellen. (affiliate link)

Heb je iets aan deze blog gehad? Deel deze dan met je kennissen zodat zij mee kunnen delen. Heb je vragen of een specifiek probleem? Laat een reactie onder deze blog achter of  neem dan contact op.

Steeds meer ben ik zelf bezig met gebruikersvriendelijkheid en conversieoptimalisatie van WordPress websites. Ik durf gerust te stellen dat bij de door mij gebouwde WordPress websites de genoemde zaken boven het design staan. Dit geldt uiteraard ook zeker voor de WooCommerce webshops.

Wil dat zeggen dat ik het liefst lelijke websites oplever? Zeker niet. Maar ik zie vaak hele strakke websites waar zelfs ik moet zoeken naar het menu, een duidelijke afwijkende call to action en meer van deze zaken. Zonde!

Een website wordt eigenlijk altijd als eerste gebouwd om geld op te leveren, niet om heel mooi werkeloos op het wereldwijde web te staan.

In deze blog zal ik 11 veelgemaakte designfouten behandelen. Deze blog is een vertaling van een blog dat ik in de vakantie tegenkwam op Facebook en waar ik heel blij van werd. Daarnaast heb ik het artikel aangepast met voor mij meer relevante voorbeelden.

Als ik je alvast een tip mag geven, sla deze blogpost op bij je favorieten en loop je project eens na aan de hand van de genoemde punten. Het kost je misschien eens 1 of 2 uur, maar het resultaat zal vele malen beter worden. Het gaat niet over heel ingewikkelde zaken, ook jij kunt dit aan.

  1. Contrast in je header
  2. Formaat van je header
  3. Functionele witruimte
  4. Mobielvriendelijke website
  5. Kies passende kleuren
  6. Minimaliseer je menu
  7. Welk formaat logo heb je nodig?
  8. Wat voor kwaliteit heeft je logo?
  9. Welke kwaliteit afbeeldingen?
  10. Style jij plugins van derden?
  11. Optimaliseer de leesbaarheid

1. Slecht contrast in een slider of headerfoto

Jij hebt toch geen slider op je website? Heb je dit nog wel, dan adviseer ik je om direct dit artikel te lezen van AGconsult te lezen. Ik maak regelmatig gebruik van grote headerfoto’s in plaats van een bewegende slider. Beter 1 sterk beeld dat direct duidelijk maakt waar de betreffende pagina over gaat dan diverse foto’s in een slider. Tekst op een foto is geen enkel probleem, maar houd je dan wel aan de onderstaande basisprincipes:

  • Als de tekstkleur wit is, kies dan een donkere achtergrondkleur. Als de slidertekst zwart is, kies dan voor een lichte achtergrond.
  • Bekijk goed of het gebied waar de tekst in staat een niet te drukke achtergrond heeft. Een drukke achtergrond beïnvloedt de leesbaarheid heel erg en leidt daarnaast de aandacht af van de tekst, waardoor het doel gemist wordt.
Tekst contrast slider WordPress

Voorbeeld hoog contrast tekst headerfoto WordPress website

Naast een achtergrond achter je tekst kun je ook overwegen om een schaduw toe te voegen aan de tekst, bij sommige afbeeldingen is dit voldoende om de leesbaarheid te verbeteren.

2. Te grote headerfoto’s

Regelmatig kom ik websites tegen waar direct op de homepage een enorme headerfoto getoond wordt. Waarom? Vaak kun je toe met de helft van een foto; het is een sfeerbeeld. Je drukt de tekst naar beneden en waarschijnlijk ook je call-to-action. Niet doen dus.

Te grote slider WordPress

Grote headerfoto op je WordPress website?

Als je een fotograaf bent kan ik mij voorstellen dat je een grote foto wilt tonen op de homepage. Zorg er dan in ieder geval voor dat het voor mensen duidelijk is dat er onder de foto meer te zien is. Veel thema’s bieden de mogelijkheid om een pijl naar beneden te tonen. Is deze niet aanwezig, denk dan eens aan een schuine lijn waardoor er al een klein deel van de pagina te zien is zonder te scrollen.

De ideale hoogte voor een header die ik gebruik is rond de 500 pixels hoog. Soms iets meer omdat de foto daarom vraagt, liever nog minder als het kan. Zorg dat je website ook visueel in balans is met het gebruik van foto’s en tekst.

3. Te veel of te weinig witruimte

Witruimte in een website-ontwerp kun je gebruiken tussen widgets, tekstblokken, afbeeldingen of ieder ander deel van je website. Het geeft rust en een overzichtelijk beeld voor de gebruikers van je website.

Nog te vaak kom ik websites tegen waar op een verkeerde manier gebruik gemaakt wordt van de witruimte. Of de witruimte is veel te groot of alles staat op elkaar geduwd. Denk hier heel goed over na, zoek de balans tussen een goed design en gebruikersgemak. Vaak zul je zelf met CSS aan de slag moeten om de witruimte goed af te stellen. Wil je hier meer over weten, ik heb een handleiding voor het aanpassen van CSS geschreven.

Padding en margin WordPress

Padding / margin rond je elementen

Veel thema’s maken gebruik van een pagebuilder, hier kun je negen van de tien keer ook de padding en margin instellen voor gebruikte blokken op je website.

Ik ga niet in op alle details van mogelijkheden, maar geef je een aantal praktische voorbeelden.

  • Vaak worden er kleine witruimtes gebruikt door designers. Geef de content ruimte om het voor je bezoekers rustiger en dus overzichtelijker te maken.
  • Geef de relatie tussen verschillende elementen aan met ruimte. De titel van een widget bijvoorbeeld, kun je rustig vrij dicht op de content van de widget plaatsen, net als de datum van een blog die je geschreven hebt. De header van een pagina mag wat meer ruimte hebben onderaan richting de content, deze twee elementen staan los van elkaar.
  • Belangrijkste tip: Wees consistent met ruimte. Iedere rij op je website die gelijk aan elkaar is zal dezelfde witruimte rondom moeten hebben.

Consistentie zal balans in je website brengen en de focus van een bezoeker leggen op datgene wat telt: jouw unieke content.

4. Geen mobielvriendelijke website

Ook voor de mobiele versie van je website geldt het bovenstaande qua witruimte. Vaak zul je deze nog apart in moeten stellen, de witruimte op een desktop is vaak echt anders dan op een mobiel apparaat. Hierop zijn nog wel een aantal aanvullingen die je hieronder op een rij vint:

  • Touch-vriendelijk design. Op een mobiele telefoon of tablet zijn je vingers het aangewezen apparaat om door de website te bladeren. Pas je pagina’s hier dus ook op aan. Zorg dat je buttons niet kleiner zijn dan 50px. Zorg ook voor voldoende tussenruimte tussen de elementen om te voorkomen dat gebruikers van je website misklikken op het verkeerde element. Hiermee voorkom je enorm veel frustratie en afhakende bezoekers.
  • Optimaliseer je afbeeldingen voor optimale snelheid. Niet iedereen die jouw website bezoekt beschikt over een glasvezelverbinding, sterker nog: de meesten niet zelfs. Zorg daarnaast ook voor een snelle mobiele website om afhakers te voorkomen.
  • Test je website op verschillende mobiele apparaten. Je kunt je schermgrootte aanpassen op de desktop-pc, maar beter is nog om echt te testen op verschillende apparaten. Mocht je niet alle apparaten hebben dan kun je nog kijken naar een tool als browserstack. Dit is voor een kleine test gratis, wil je meer dan zul je een abonnement moeten nemen.

Google heeft een eigen mobile friendly test, een gratis tool om te checken of jouw website geschikt is voor mobiel.

MedicPress thema op mobiel

Een voorbeeld van een mobielvriendelijk thema

5. Kleurgebruik dat niet bij elkaar past

De juiste kleurcombinatie kiezen is een lastig ding. Als je er gevoel voor hebt dan kun je dit waarschijnlijk wel. Anders zijn er handige tools die je hier zeker bij kunnen helpen.

Hieronder vind je een voorbeeld:

De meeste WordPress thema’s  kennen een primaire en een secundaire kleur. Als je het logo van Shell hebt, dan is de keuze niet moeilijk. Primaire kleur is rood en de secundaire kleur die je gebruikt is geel. Rood gebruik je als de primaire kleur voor je call-to-actions. Geel is een secundaire kleur die je vooral gebruikt als achtergrond of voor ondersteunende elementen.

Shell logo

Als je logo van Starbucks is dan heb je alleen een primaire kleur. De secundaire kleur zul je er dan zelf bij moeten zoeken.

Starbucks logo

Een optie is om het groen van de primaire kleur ook als secundaire kleur te gebruiken. Hiermee schep je echter verwarring voor je bezoekers, dus dit is zeker niet aan te raden.

Als je geen designer bent en je vindt het lastig om kleurencombinaties te zoeken, dan kan ik je deze tool van harte aanbevelen, Coolors. Dit is een simple tool om de perfecte kleurencombinatie te zoeken.

Ga naar de website en voer de eerste kleur in met de hexadecimale kleurcode. Vergrendel deze kleur en klik op de spatiebalk.

https://coolors.co/

Zoals je ziet veranderen alle kleuren behalve degene die jij vastgezet hebt. Wil je nog een keer wisselen dan druk je weer op spatiebalk. Wil je 1 kleur vastzetten klik dan op het slotje.

6. Minimaliseer je website-navigatie

Structureer je website-navigatie in een leesbare logische volgorde. Plaats minder belangrijke zaken in dropdown-items of plaats ze in de topbar of footer. Zorg dat je navigatie logisch en hiërarchisch is en zorg dat alle levels die gelijk zijn dezelfde prioriteit kennen.

Als voorbeeld, de algemene voorwaarden en disclaimer zijn minder belangrijk dan je belangrijkste call-to-action. Hierdoor kunnen ze dus eigenlijk nooit op hetzelfde level staan binnen je website. Vaak zet ik de algemene voorwaarden in de footer en de belangrijkste call-to-action met een opvallende kleur in de topbar of het hoofdmenu als er geen topbar gebruikt wordt.

Houd je hoofdmenu opgeruimd, streef naar maximaal vijf of zes items.

Main menu WordPress

Een duidelijk menu?

7. Logo te groot

Bij minimaal de helft van de projecten die ik opstart krijg ik te horen: “Ik wil graag mijn logo groter hebben”. Ik kom dan altijdmet de wedervraag: “Waarom wil je jouw logo zo groot maken?” Je bent geen Shell, Ikea of welke bekende onderneming dan ook, een klant zal jouw logo niet herkennen en komt ook zeker niet om jouw prachtige logo te bekijken.

Upload je logo op de aanbevolen maat voor jouw thema. Dat is de beste tip die ik je kan geven op dit gebied. Je logo is slechts onderdeel van je website, net als alle andere onderdelen.

Als je mij niet gelooft, kijk dan eens naar een aantal bekende merken op het internet en je zult zien dat 99% van hen een logo heeft dat precies groot genoeg is om herkenbaar te zijn, meer niet. De gebruiker moet weten welk merk achter de website staat, maar de service, aanbiedingen en overige content zijn belangrijker dan het logo.

8. Lage kwaliteit logo

Het gebeurt mij regelmatig dat ik een logo aangeleverd krijg in een Word document. Regelmatig wordt ook ik nog verrast. Een logo uit Word kan ik wel op een website verwerken maar de kwaliteit zal absoluut niet op orde zijn.

Afhankelijk van het logo zul je een bestandsformaat moeten kiezen. De start van een logo is altijd een vector, in een vector-formaat als .pdf, .ai, .svg of .eps. Gebruik een programma als Adobe Illustrator om hiervan een passende PNG- of JPG-afbeelding voor op je website van te maken. Vergeet ook niet om deze op het formaat te maken waarop deze op de website geladen wordt, om onnodige laadtijd te voorkomen.

Logo formaten

Als je het logo niet als vector in je bezit hebt, investeer dan in een grafisch vormgever die dit voor jou kan doen. Je zult hier nu of later veel profijt van hebben als je het logo waar dan ook wilt gebruiken, denk bijvoorbeeld aan promotiemateriaal en dergelijke.

9. Slechte kwaliteit afbeeldingen

Het wordt steeds beter, steeds vaker zie ik professionele beelden op websites. Eerder was dit vooral een ondergeschoven kindje en werden er vaak heel erg standaard stockfoto’s gebruikt.

Vergeet niet dat afbeeldingen een grote impact hebben op je bezoekers. Zeker in een webshop kan een authentieke afbeelding het verschil maken tussen een conversie of niet.

Als je geen hoogstaande kwaliteit afbeeldingen beschikbaar hebt zou je ze kunnen zoeken op een site als Shutterstock. Er zijn ook gratis alternatieven, maar mijn ervaring is dat de kwaliteit van deze foto’s echt niet kan wedijveren met de betaalde versies. Ja het kost geld, maar hoeveel is een conversie je waard? Steek hier tijd in, er zijn echt beelden die je niet op iedere website van een collega tegenkomt.

Standaard stock foto

Een overduidelijke stockfoto die jouw concurrent waarschijnlijk ook gebruikt.

10. Niet stylen van plugins van derden

Ik maak vaak gebruik van de Gravity Forms plugin. En het kost mij tijd om deze ook in de huisstijl te brengen van de website en de verzend-buttons als duidelijk call-to-actions in dezelfde stijl als de andere buttons te maken.

Regelmatig kom ik websites tegen die gebruik maken van andere plugins dan degene die bij het thema horen. En hiervoor is dan niet de moeite genomen (of de kennis ontbreekt) om deze ook in de huisstijl te brengen. Zonde, een overduidelijk gemiste kans. Het kost je misschien tien minuten om de styling over te nemen en geeft een zoveel professioneler uiterlijk aan je website.

11. Slechte leesbaarheid

Een belangrijke claim van websitemakers is dat typografie 95% van het design is, dus besteed ook hier tijd aan.

Zorg voor een goede leesbaarheid. Houd globaal rekening met de volgende punten:

  • Iedere regel is maximaal 60-80 karakters inclusief spaties.
  • Geef tekst genoeg ruimte.
  • Gebruik geen te lichte tekstkleur. Iedere kleur lichter dan #777777  heeft een negatieve invloed op de leesbaarheid.
  • Gebruik niet te kleine lettertypes. Het kleinste wat ik adviseer te gebruiken is 14 pixels. Ik adviseer mijn klanten 16px of 18px te gebruiken.
  • Wees voorzichtig met het gebruik van custom fonts. Sommige lettertypes zijn gemaakt voor koppen en niet geschikt voor paragrafen. Andere lettertypes zijn gemaakt voor print en niet voor het web. Bedenk daarom goed waarom je een specifiek lettertype wilt gebruiken en wijk alleen af van de standaard webfonts als je hier overtuigd van bent.
  • Gebruik de juiste uitlijning. In 95% van de gevallen is links uitlijnen gewoon de beste optie. In de overige 5% kun je gebruik maken van centreren.

Rechts uitlijnen en uitvullen zijn in mijn ogen absoluut niet aan te raden.

Conclusie

Ga bij het volgende project dat je bouwt eens door bovenstaande lijst heen en probeer alle kleine problemen op te lossen. Het kost je hooguit twee uur, je eigen gevoel zal beter zijn en je klant nog meer tevreden.

Bij deze wil ik graag Jaka Šmid bedanken voor de inspiratie in zijn originele artikel en zijn toestemming om dit artikel als bron te gebruiken voor het schrijven van deze blog.

Heb je vaak problemen met je WordPress website? Sommige problemen zijn heel eenvoudig op te lossen of nog beter, eenvoudig te voorkomen. Want of je nu een simpele blog hebt met een aantal bezoekers per dag of een drukbezochte website met duizenden bezoekers per dag, een niet goed werkende of website die offline is, dat is heel vervelend. Het kost je klanten en dus ook omzet. Zonde van je harde werk. Lees hier vijf veel voorkomende problemen en hoe je deze voorkomt of oplost.

Als je website problemen geeft adviseer ik je eerst twee dingen:

  1. Kijk in de error log van je server. Vaak vind je hier al direct waar de oorzaak van het probleem ligt. Is het een plugin of je thema? Grote kans dat je hier foutmeldingen ziet die je kunt herleiden naar de bron van je probleem.
  2. Zet error reporting aan in je WP-config.php bestand en laat de errors tonen op je beeldscherm. Voeg hiervoor onderstaande twee regels toe aan je WP-config.php bestand dat in de root van je FTP-mappen staat. Meestal staat de eerste regel er al met een waarde false. Deze kun je dus aanpassen en de tweede regel toevoegen.

define(‘WP_DEBUG’, true);
define( ‘WP_DEBUG_DISPLAY’, true );

  1. Error 500 interval server error
  2. Afbeeldingen en tekst op Facebook kloppen niet
  3. Updates van plugins en thema mislukken
  4. Onderhoudsmodus WordPress website
  5. Hoe verberg ik items die ik niet wil zien?
  6. Conclusie

1. Error 500 interval server error

Dit is een veelvoorkomend probleem in WordPress. Dit gebeurt heel vaak het na het updaten van een plug-in of thema. Als je in de error log kijkt die in de intro beschreven is, staat er eigenlijk altijd waar het probleem vandaan komt. Als je een plugin ziet of een thema dat errors geeft, probeer dan via FTP de map van de plugin of het gebruikte thema te hernoemen. Mocht je hier niet wijzer uit worden dan kun je de volgende twee dingen proberen:

  1. Hernoem de hele plugins-map en kijk of je website weer online komt
  2. Hernoem de map van het thema wat je actief hebt staan

Mijn ervaring is dat met bovenstaande tips het probleem eigenlijk altijd opgelost kan worden.

Als laatste wil ik nog meegeven, bekijk de PHP-versie die op je server draait. De nieuwste versie is PHP7, hier zijn nog niet alle thema’s en plugins op voorbereid. Deze werken wel met versie 5.6. Kijk dus in de instellingen van je server welke PHP-versie actief is en pas deze zo nodig aan.

2. Afbeeldingen en tekst op Facebook kloppen niet

Je hebt een passende uitgelichte afbeelding bij je blog of pagina geplaatst en een omschrijving en paginatitel ingevuld in de Yoast plugin. Je deelt je bericht op Facebook, maar helaas worden de door jou ingevoerde foto’s en teksten niet getoond. Dan is het tijd voor de Facebook Debugger.

Heel vervelend dat je blogs die je geschreven hebt en direct wilt posten eerst nog aan moet bieden bij Facebook, maar je wilt je bezoekers toch triggeren met de juiste tekst en afbeelding? Wen jezelf aan zodra je een blog publiceert om deze door de Facebook Debugger te halen.

Wil je alles weten? Lees dan deze eerder gepubliceerde blog.

3. Updates van plugins en thema mislukken

Deze vraag komt regelmatig voorbij in de Facebookgroep over WordPress. Ben jij al lid van deze groep waar je gratis advies kunt krijgen bij al je vragen over WordPress?

“Ik wil mijn plugins of thema updaten maar deze mislukken om onbekende reden”. Ook in dit geval zou ik je weer als eerste adviseren om in te loggen in je hostingpanel van je hostingprovider. De meest voorkomende redenen voor deze melding zijn de volgende:

  1. Opslagruimte vol
  2. Rechten op de mappen niet correct ingesteld
  3. Licentie niet goed ingevoerd bij betaalde plugins

Daarnaast is het uiteraard ook mogelijk dat de automatische updatefunctie om onbekende reden niet goed werkt. Wat je dan nog kunt proberen is om de plugin- of themamap direct via FTP te uploaden. Maak wel altijd eerst een back-up van je oude mappen!

4. Onderhoudsmodus WordPress website

Je houdt netjes je website up-t0-date of je hebt een onderhoudscontract afgesloten. Na het updaten van je plugins lijkt het alsof de updates klaar zijn. Je gaat terug naar de homepage van je website maar je krijgt deze niet te zien. Wat zie je dan wel? Een wit scherm met daarin de tekst ‘Tijdelijk niet beschikbaar vanwege gepland onderhoud’. De schrik slaat om je hart. Wat moet je nu?

Onderhoudsmodus WordPress

De oplossing is simpeler dan je denkt. Soms helpt heel even wachten, als je een grote plugin bijwerkt kan het iets langer duren. Maar de meest simpele oplossing is via FTP inloggen op je hostingpakket en het .maintenance bestand verwijderen. Als je deze verwijderd zal je website direct weer online zijn. Weer een probleem minder.

5. Hoe verberg ik items die ik niet wil zien?

Het is niet echt een probleem. Tenminste, geen probleem waardoor je website niet goed functioneert. Maar het kan voor een website-eigenaar best een probleem zijn. Hoe verberg ik bepaalde items op mijn website? De vraag is vaak “hoe verwijder ik ze?”

Hiervoor is meestal kennis van PHP nodig als het niet te vinden is in je thema-opties. Een tussenweg is het onzichtbaar maken met CSS. Je moet er wel rekening mee houden als je dit doet, dat het item alsnog geladen zal worden dus invloed heeft op de snelheid van je website. Het is echt niet zo dat als je een bepaalde regel of kop verbergt, dat dit direct ervoor zorgt dat je website zichtbaar trager laadt, maar het is wel goed om in je achterhoofd te houden.

Stel je wilt een paginatitel verbergen die in een gekleurd vak bovenaan je pagina staat. Ik zie deze vraag best vaak. Nog wel een opmerking vooraf, het is niet slim in het kader van je vindbaarheid om de paginatitel te verbergen omdat dit in de meeste thema’s de enige H1 kop op je pagina is. En deze wordt meegenomen door Google bij het beoordelen van je website. Toch zijn er mensen die hem weg willen hebben.

Welke stappen moet je globaal hiervoor volgen?

  • Open in Google Chrome de Developer Console via Weergave > Ontwikkelaar > JavaScriptconsole
  • Klik linksboven in het net geopende vak op het vierkant met het pijltje rechts onderin, de selector
  • Selecteer het element dat je wilt verbergen
  • Bekijk aan de rechterkant welke CSS-klasse daarbij hoort
  • Voeg deze toe in de Custom CSS van je thema of een plugin als bijvoorbeeld Simple Custom CSS. Eventueel aangevuld met een !important om de standaard CSS te overrulen.

Conclusie

Dagelijks help ik mensen met hele uiteenlopende problemen. Wat mij opvalt is dat dit heel vaak te maken heeft met niet goed afgestelde hosting of niet geüpdatete websites. Zorg dus altijd dat je website bijgewerkt is, niet alleen als er problemen ontstaan.

Zorg daarnaast dat je weet hoe je hostingpanel in elkaar zit. Weet waar je de php-instellingen kunt vinden, waar je errorlog te vinden is en hoe je een back-up terug kunt zetten. Het is aan te raden dit te leren op het moment dat je website nog functioneert. Stress van een niet werkende website en dan dit soort zaken uitzoeken werken niet bevorderlijk voor je humeur en je functioneren (bij de meeste mensen).

Heb je hulp nodig? Meld je aan voor de Facebookgroep en deel je kennis en ervaring met andere WordPress website ontwerpers.

Tot nog toe ben ik altijd zelf aan het woord in mijn blogs. Dit zou ik ook nog heel lang vol kunnen houden, aangezien er heel veel te schrijven is over WordPress en alles wat daar omheen te doen is. Toch heb ik ervoor gekozen om in de komende tijd ook regelmatig interviews met klanten of partners van Lamper Design te publiceren, juist om ook andere inzichten in de online wereld te geven. Het zal dus niet alleen gaan over WordPress, maar juist om zaken die hiermee te maken hebben en vaak onderbelicht worden.

Saskia van KlaarbergenDe aftrap wordt verzorgd door Saskia van Klaarbergen. Zij is de oprichter van het zeer succesvolle travelblog KidsErOpUit.nl, speciaal gericht op uitjes met kinderen in Nederland en Europa. Regelmatig lees ik haar blogs of die van haar collega’s en gebruik de tips die hier gegeven worden.  Zij vertelt je graag over haar ervaring met WordPress, Lamper Design en bloggen in het algemeen.

Wie is Saskia van Klaarbergen?

Een bezige bij! Er zijn te veel leuke dingen om te doen en ik wil uit het leven halen wat er in zit. Ik ben dus altijd ergens mee bezig. Mijn hoofd zit vol met ideeën waarvan ik maar een fractie kan uitvoeren. Ik ben continu keuzes aan het maken. Ook al zit het soms tegen in het leven, ik probeer te genieten van de mooie dingen. Het liefst samen met mijn gezin.

Kidseropuit Blog

Wat doe je in het dagelijks leven?

Veel. Ik ben moeder van de twee leukste kinderen die er zijn, werk bij een gemeente als wijkmanager, blog op KidsErOpUit en ben bezig met het opzetten van Blog in Bedrijf. 

Hoe ken je Lamper Design?

Via de WordPress Durf te vragen-groep op Facebook. Het viel me op dat Kees daar vaak en snel reageerde. Met een duidelijk en compleet antwoord als de vraag helder is. Maar ook weleens heel direct reageert als mensen om hulp vragen en daarna niets met de adviezen willen doen. Dat spreekt me aan.

Bloginbedrijf WordPress websiteWat heeft Lamper Design voor je gedaan?

Voor KidsErOpUit had ik een hele waslijst van allemaal kleine dingen die ik aangepast wilde hebben. Een deel daarvan had ik misschien best zelf kunnen uitzoeken, maar het ontbreekt me aan tijd en zin om daar uren mee bezig te zijn. Andere acties kon ik zelf echt niet uitvoeren. Kees heeft mijn hele actielijstje opgepakt en heeft heel systematisch de aanpassingen gedaan. Daarna heeft hij KidsErOpUit voor mij naar een andere host overgezet, waardoor de website een stuk sneller is geworden. 

De website van Blog in Bedrijf had ik op heel korte termijn nodig. Kees heeft de basis neergezet en daarna heb ik ‘m zelf gevuld met de content. Dit jaar ga ik deze website verder uitbreiden. 

Wat vind je sterke punten van Lamper Design?

Kees is snel, accuraat en denkt mee. Als ik iets bedenk dan weet hij hoe het in WordPress uitgevoerd kan worden en denkt mee hoe het nog beter kan. Ook is hij nooit te beroerd om op de meest rare tijdstippen mee te kijken of problemen op te lossen. Het contact gaat snel via de mail of als het handiger is via Skype.

Wat kan er verbeterd worden?

Geen idee. Misschien een mooie uitdaging: alle plug-ins van WordPress kennen ;-).

Wat zou je in de toekomst willen bereiken?

Ik wil graag met plezier blijven bloggen op KidsErOpUit en andere mensen helpen met bloggen en social media via Blog in Bedrijf.

Wat staat er op je verlanglijstje voor je website?

Op dit moment ben ik tevreden met hoe de websites nu zijn. Voor KidsErOpUit ben ik bezig met het vullen van de Google Maps-kaart zodat de blogs straks ook op die manier te vinden zijn. Het is een flinke klus, maar het lijkt me erg handig voor onze lezers.

Blog van KidsErOpUit

Wat inspireert je om te bloggen?

Met KidsErOpUit heb ik een missie. Ik wil andere ouders inspireren om er op uit te gaan met hun kinderen. Laten zien dat musea ook leuk zijn met kinderen, dat je prima met ze kan wandelen. Of om op vakantie eens te kiezen voor een kleinere camping zonder animatie of een citytrip. Als wij dat soort dingen doen met de kinderen, krijg ik direct zin om te bloggen. Het is dan helemaal leuk als mensen reageren en laten weten dat ze er ook heen willen. Daar doe ik het voor en daar krijg ik energie van. Ik wil dan zo snel mogelijk weer op pad om nieuwe ervaringen op te doen en daarover te bloggen.

Tip(s) voor mensen die willen gaan bloggen?

Bedenk vooraf waarom je wil gaan bloggen. Gewoon voor de fun of heb je er ook een zakelijk doel mee? Kies een onderwerp dat dichtbij je staat en waar je veel over kan vertellen. Maak een groslijst met onderwerpen en begin met schrijven. Kies daarbij voor een regelmaat van publiceren die je ook echt kan volhouden. Zet dus niet alles in een keer online, maar verspreid je blogs over een periode. 

Conclusie van Kees

Het is voor mij erg leuk om met enthousiaste klanten als Saskia te werken, aangezien zij zelf de basis van WordPress beheerst en ik haar daarin kan adviseren en aanvullen waar nodig. Ik hoop dan ook nog lang het website onderhoud aan KidsErOpUit te mogen verzorgen. Wat in het interview al naar voren gekomen is, maar zeker een onderdeel is van het succes van KidsErOpUit, dat is de supersnelle WordPress hosting. Lamper Design verzorgt ook de hosting en e-mailafhandeling voor Saskia zodat zij zich daar geen zorgen over hoeft te maken en de website ondanks de duizenden bezoekers stabiel blijft draaien.

Wil je meer weten over de hosting die wij aanbieden? Neem dan gerust contact op.

Heb jij je wel eens afgevraagd hoe je jouw WordPress website aanmeldt bij Google en heb je daar naar gezocht? Grote kans dat je de naam van Google Search Console tegengekomen bent tijdens je zoektocht. Proficiat, dan is er niets mis met je zoekkwaliteiten. Google Search Console is een onmisbare tool voor het vindbaar maken van je website. 

Tot een jaar geleden heette deze gratis tool van Google nog Google Webmaster Tools. Maar nu is deze gewijzigd in Google Search Console. Wat kun je met de console? Waarom zou je deze moeten gebruiken? Er zijn enorm veel functies aanwezig. Er zijn eigenlijk maar drie functies die ik standaard gebruik. Daar wil ik het in deze blog dan ook bij laten om het overzichtelijk te houden. Mogelijk komt er later een vervolg op deze blog die nog dieper erop in zal gaan.

Wat zijn de drie belangrijkste functies van Google Search Console?

  1. Website aanmelden
  2. Sitemaps aanmelden
  3. Monitoren 404 errors
  4. Conclusie en tips

Daarnaast heb je de mogelijkheid om te bekijken hoe je website geïndexeerd wordt, welke zoekwoorden gebruikt worden om op je website te komen en nog veel meer.

1. Website aanmelden bij Google

1.1 WordPress website koppelen

Vaak genoeg krijg ik de vraag “Waarom moet ik mijn website aanmelden, gaat dit niet vanzelf?” Het antwoord daarop is dubbel. Ja, het gaat vanzelf. En nee, het gaat niet vanzelf. Daar wil je vast meer uitleg over hebben.

Stel: je hebt een oude HTML website vervangen voor een prachtige WordPress website. Je zet deze live en gaat zitten wachten tot de Google robots een keer langskomen om je nieuwe creatie te bewonderen. En ja, dit gaat gebeuren. Maar dit kan weken tot zelfs maanden duren. En hadden we niet besproken dat jij erg trots bent op het behaalde resultaat? Dus jij wilt helemaal niet zo lang wachten. En daar komt dus de Search Console om de hoek kijken. Dit is een fantastisch hulpmiddel dat je helpt. En het mooiste is dat het nog gratis is ook.

In het geval hierboven was er al sprake van een bestaande domeinnaam dus daarin is het van belang Google te laten weten dat er een nieuwe layout en mogelijk nieuwe content is. Maar hoe zit het dan met nieuw geregistreerde domeinen? Google weet nog niet eens van het bestaan van jouw website af. Hoogste tijd voor actie dus.

  • Log als eerste in met je account dat je mogelijk al hebt bij Google. Zijn er mensen die geen Google Analytics gebruiken? Niet doorvertellen, snel een account aanmaken en deze aan je website koppelen. Deze schat aan informatie wil je echt niet missen.
  • Na het inloggen begin je met het aanmelden van je domein. Als dit klaar is en je hebt je domein geverifieerd via bijvoorbeeld de Yoast plugin kun je beginnen met het versnellen van het aanmeldproces van jouw website in de Google zoekmachines.
  • Kies ervoor om je site aan te melden bij de Google Index. Daarna zul je de vraag krijgen of je alleen de huidige link aan wilt melden of ook alle onderliggende links. Zeker de eerste keer is mijn advies om alles te kiezen.

1.2 Stappenplan voor aanmelding van je website bij Google Search Console

Property toevoegen Google Search Console

Na het inloggen op bij Google Search Console klik je op de button ‘een property toevoegen’

URL toevoegen aan Google Search Console

Voer de URL van je website in zoals op het voorbeeld staat.

Verificatie Google Search Console

Nu moet je de aangemaakte property koppelen met jouw website. Hiervoor kun je gebruik maken van een bestaande Google Analytics property die gekoppeld is aan je website of je koppelt via de Yoast plugin, zoals hierboven aangegeven. Hoe maak je die koppeling? Ga eerst van Aanbevolen methode naar het tabblad Alternatieve methoden. Kopieer daar de volledige regel onder HTML Tag. Deze begint met <meta name=”google-site-verification” content………….>. HTML Tag Google Search ConsoleKopieer deze regel en ga daarna naar je WordPress website

  • Log in op je WordPress website
  • Ga in het dashboard naar SEO > Algemeen > Webmastertools
  • Plak de gekopieerde <meta name etc…> naast het vak van Google Search Console
  • Klik op Wijzigingen Opslaan

HTML Tag WordPress Search console

Het is ook mogelijk als je nog geen account bij Google Search Console aangemaakt hebt om op de tekst te klikken. Dan wordt er direct een nieuw venster geopend met het inlogscherm.

In het bovenstaande scherm zie je ook Alexa verificatie ID, Bing Webmaster Tools en Yandex-webmastertools staan. Doorloop ook deze aanmeldingen om de vindbaarheid van je website in de zoekmachines te optimaliseren.

De laatste stap in het verificatieproces is nu weer in Google Search Console. Als je dit succesvol doorloopt krijg je het onderstaande scherm te zien:

Gefeliciteerd Google Search Console1.3 Website laten crawlen door Google

In de vorige stap heb je de website gekoppeld en geverifieerd. Nu gaan we Google een extra zetje geven om je website zo snel mogelijk te indexeren. Als eerste ga je weer naar Google Search Console. Aan de linkerkant klik je op Crawlen en vervolgens kies je voor Fetchen als Google.Fetchen als Google

Website ophalen Google Search Console

  • De URL van je website staat ingevuld.
  • Klik op ophalen. 
  • Klik op ‘indienen bij index’

Indienen bij index Google

Na het indienen krijg je een melding dat het succesvol gelukt is.

Ingediend bij Google Index

Houd er wel rekening mee dat je deze aanmelding in totaal maar tien keer per maand kunt uitvoeren. Het goede nieuws is dat je hier in principe als website-eigenaar maar één keer gebruik van maakt. Dit geldt alleen in de opstartfase van jouw domein. Als webdesigner die veel nieuwe websites lanceert zul je wel regelmatig hier tegenaan lopen.

2. Sitemaps aanmelden

Sitemaps. Wat zijn dat eigenlijk? Een sitemap is een plattegrond van je website waar alle inhoud in een tabel weergegeven wordt. Hoe je een sitemap maakt? Daar zijn verschillende oplossingen voor. De makkelijkste optie is om de Yoast plugin te installeren. Hier zit standaard een goede sitemap-optie in. Als deze ingevoerd is dan kun je de sitemaps bekijken via jedomeinnaam.nl/sitemap_index.xml. Er zijn nog meer alternatieve plugins die dezelfde functionaliteit toevoegen maar in deze blog beperk ik mij tot de Yoast plugin.

XML Sitemaps YoastWat is de meerwaarde van een sitemap voor de vindbaarheid van je website? Er zijn in ieder geval twee voordelen.

  • Bezoekers van je website hebben een duidelijk overzicht. Zij kunnen de sitemap gebruiken om overzichtelijk de structuur van je website te bekijken.
  • Met een sitemap geef je ook aan hoe de structuur van je website in elkaar zit bij de zoekmachines. Hierdoor zal je website sneller en beter geïndexeerd worden

Maar hoe meld je jouw sitemap aan bij Google Search Console? Volg de onderstaande stappen en je hebt weer een punt minder op je to-dolist.

  • Log als eerste weer in bij Search Console
  • Ga naar Crawlen
  • Ga naar Sitemaps
  • Kies voor Sitemap toevoegen

Sitemaps WordPress website toevoegen

In de popup zie je de URL van je website. Hierachter vul je in: sitemap_index.xml .

Sitemap indienen

Klik op ‘Verzenden’ en vernieuw de pagina. Je zult zien dat de sitemap verschijnt in het overzicht en de status komt op ‘in behandeling’. Het duurt ongeveer 24 uur voordat de status op ingediend staat.

Sitemap Index ingediend

3. Monitoren 404 errors

Als je website ouder wordt dan zullen er pagina’s en posts bij komen en verdwijnen. Ook zul je wijzigingen in je URL’s maken. Hoe ondervang jij dit? In de blog over de WordPress plugins van maart 2016 beschreef ik de beste manier om een redirect te maken zonder plugin.

Maar hoe weet jij dan welke pagina’s er niet gevonden worden? Ook dit kun je opzoeken in de Google Search Console. Waar vind je ze? Lees snel verder.

404 monitoren WordPress

Onderaan de pagina kun je bekijken welke URL’s niet gevonden zijn. Deze kun je dus vervolgens redirecten naar de juiste pagina. Hoe maak je deze redirects? De voorkeur is om dit te doen met regels in je .htaccess  bestand. Dit ziet er ongeveer zo uit:

Redirect 301 /oudepagina.html http://jewebsite.nl/nieuweurl

Mocht je de bovenstaande methode lastig vinden dan kun je gebruik maken van bijvoorbeeld de WordPress plugin Redirection. Vergeet niet na het aanmaken van de redirects de status te corrigeren in de Google Search Console naar gecorrigeerd.

4. Conclusie en tip

Als deze methode je totaal onbekend was klinkt het misschien redelijk ingewikkeld om je website aan te melden bij Google. Dit valt echt mee. Als je het stappenplan volgt kan er niets misgaan. Nog een laatste tip. Zijn jouw Social Media pagina’s zoals Facebook, Instagram, Google+ of Youtube kanaal geïndexeerd door Google? Test het door in Google in te toetsen:

site:https://socialmediaurl 

Verschijnen er geen resultaten in de zoekmachine? Hoog tijd om je URL aan te melden bij Google. Dit kan handmatig via deze link: http://www.google.nl/intl/nl/add_url.html.

Neem in ieder geval het monitoren van je 404 errors mee in het onderhoudsplan van je WordPress website. Heb je aanvullingen of tips voor andere lezers? Laat ze gerust achter in een reactie onder deze blog.

Sinds de update van de veel gebruikte WordPress plugin Contact Form 7 naar versie 4.4 zie ik op diverse plaatsen vragen over validatiefoutmeldingen die mensen krijgen. Deze meldingen krijgen ze niet alleen bij nieuwe formulieren maar ook bij bestaande, werkende formulieren.

Misconfiguration Contact Form 7

Ook ik zag op de websites die ik onderhoud bij allen de validatiefoutmeldingen terugkomen. Maar na testen bleken de formulieren wel gewoon te werken.

Wil je direct aan de slag met 18 tips voor Contact Form 7? Lees dan onze blog.

Wat heeft de maker van Contact Form 7 veranderd en vooral waarom?

Over the past few months, we found a lot of users had mistakes in their contact form configuration that were causing serious troubles, including mail delivery failure.

To reduce this problem, Contact Form 7 4.4 has introduced Configuration Validator. With this tool, you can validate your contact form configurations and detect errors.

Het blijkt dat er een validatiefunctie toegevoegd is door de maker gezien het groeiende aantal klachten over niet of slecht werkende contactformulieren en ook het feit dat steeds meer formulieren door providers als spam gezien worden. En dat is voor niemand wenselijk.

Contact Form 7 update naar 4.4

Contact Form 7 geüpdatet naar versie 4.4

Wat zijn de fouten die je te zien kunt krijgen? En hoe los je ze op? Vooraf geef ik al direct aan dat het formulier ondanks de validatiefouten nog steeds zal werken. Maar fouten zijn er om opgelost te worden.

Validate Configuration Contact Form 7 WordPress pluginDe validatie is vooral ingebouwd om gebruikers te waarschuwen dat hun formulier mogelijk niet aan de geldende regels voldoet en daarom eerder als spam gemarkeerd zal worden. Erg vervelend als je diverse leads mist omdat je contactformulier in je spamfolder zit en je mist dat.

De oplossingen die hieronder gegeven worden voor verschillende fouten bestaan allemaal uit twee gedeelten. Een formulier gedeelte en een e-mail gedeelte.

Welke fouten worden gemeld door de Contact Form 7 validator?

Valideren contact form 7

This field has syntax errors

Probleem

Belangrijk om te weten is dat als je een formulier verstuurd vanaf je WordPress website dit eigenlijk gewoon een e-mailbericht is. Alleen verzend je deze vanuit WordPress via PHP op je webserver.

De Naar: Van: Onderwerp: en Toegevoegde Header bestanden zoals CC of BCC in de e-mail sectie in de instellingen van Contact Form 7 zijn normale e-mail velden.

Net als elk willekeurig e-mailbericht hebben deze velden een geldige invoer nodig. Doe je dit niet dan zal het formulier niet aankomen op de bestemming, net als je e-mailbericht.

Oplossing

FORM sectie

Je naam (verplicht)
[text* your-name]

Je E-mailadres (verplicht)
[email* your-email]

Onderwerp
[text your-subject]

Je bericht
[textarea your-message] [submit “Verzend”]

Mail sectie

Aan: [your name] <[your email]>
(gebruik de juiste syntax)

From: geldig-e-mailadres@jouwdomein.nl
(moet een geldig e-mailadres zijn)

Onderwerp: Naam website – [your subject] (Voeg extra informatie toe zodat je er zeker van bent dat als een gebruikers niet invult je toch een geldige Onderwerpregel hebt)

This email address does not belong to the same domain as the site

Probleem

Een e-mailadres gebruiken in het Van: veld wat niet hetzelfde domein heeft als de website waar het formulier op geïnstalleerd is dat is vragen om problemen. Grote kans dat je formulier inzending als spam gezien zal worden.

Mocht het wel werken dan zal je webhostingbedrijf dit moeten toestaan en de meesten hebben dit afgesloten om te voorkomen dat er spam verstuurd zal worden via hun servers.

Daarnaast, al staat jouw webhoster dit toe, andere mailservers kunnen je bericht als spam zien.

Als je bijvoorbeeld wordpress@jedomein.nl gebruikt in het Van: veld dan is er niets aan de hand.

Oplossing

Formulier sectie

Je naam (verplicht)
[text* your-name]

Je E-mailadres (verplicht)
[email* your-email]

Onderwerp (verplicht)
[text* your-subject]

Je bericht
[textarea your-message] [submit “Verzend”]

Mail sectie

Naar: willekeurig-e-mailadres@jedomein.nl
(Gebruik een geldig e-mailadres)

Van: willekeurig-e-mailadres@jedomein.nl
(Gebruik een geldig e-mailadres gelijk aan de server waar je formulier op staat)

Onderwerp: [your subject] (Door het onderwerp verplicht te maken voorkom je dat een formulier zonder onderwerp ingestuurd kan worden)

Aanvullende kopteksten: Antwoord-naar: [your name] <[your email]>

This field can be empty depending on user input

Probleem

Net als een normaal e-mailbericht heeft ook een formulier een geldig Naar: Van: en Onderwerp: veld nodig.

Contact Form 7 error

Als je een mail tag gebruikt in een van deze velden kan dit problemen opleveren als een gebruiker geen waarde ingeef. Er kan dan geprobeerd worden een e-mail te versturen met een leeg verplicht veld en dat gaat Contact Form 7 niet verzenden.

Als je dit probleem niet oplost krijgen je formulier gebruikers de melding dat het bericht niet verzonden kan worden. De oorzaak hiervoor is dat het onderwerp niet ingevuld is.

Als het veld niet verplicht is in jouw formulier krijgen bezoekers geen foutmelding te zien en dus ook geen advies hoe het probleem op te lossen.

Oplossing

Formulier sectie

<p>Je naam<br />
[text your-name] </p>

<p>Je e-mailadres (verplicht)<br />
[email* your-email] </p>

<p>Onderwerp (verplicht)<br />
[text* your-subject] </p>

<p>Je bericht<br />
[textarea your-message] </p>

<p>[submit “Verzend”]</p>

Mail sectie

Naar: [your name] <[your email]>
([your email] is verplicht veld om te zorgen dat Naar: adres niet leeg is)

Van: [your name] <willekeurig-e-mailadres@jedomein.nl>
(het toevoegen van [your name] geeft de mogelijkheid te zoeken op naam en filters in te stellen)

Onderwerp: [your subject] (het verplicht maken van het onderwerp heeft het voordeel dat er geen mails zonder onderwerp verstuurd kunnen worden)

Selectable Recipient with Pipes Error

Probleem

Gebruik maken van keuzemenu’s met pipes is een makkelijke manier om een formulier naar verschillende e-mailadressen te versturen zonder deze zichtbaar te tonen in het formulier. Deze techniek voegt verborgen e-mailadressen toe aan Contact Form 7 drop-down lijsten.

Maar als een gebruiker geen waarde uit de lijst selecteert dan probeer je dus een e-mailbericht te versturen zonder Naar: e-mailadres.

De formulier gebruiker zal een ‘Verzenden mislukt enz.’ melding te zien krijgen en geen idee hebben wat er mis gegaan is.

De oplossing is eenvoudig. Maakt het selecteer veld wat het verborgen e-mailadres bevat verplicht door een sterretje toe te voegen op de volgende manier- [select* … ].

Oplossing
Formulier sectie

[select* your-recipient “Kees|info@lamper-design.nl”
“Offerte|offerte@lamper-design.nl”
“Boekhouding|mail@boekhouding.nl”]

Mail sectie

Naar: [your-recipient] (het select veld verplicht maken geeft in ieder geval een waarde in het Aan: veld)

Vragen?

Als je nog steeds vragen over de Contact Form 7 Configuration Validator hebt kun je het beste op het forum van Contact Form 7 kijken en daar je vraag stellen.

Heeft deze blog je geholpen om je foutmeldingen te laten verdwijnen? Laat het weten in een reactie onder de blog!

Dagelijks komen er nieuwe plugins beschikbaar voor het open-source Content Management Systeem van WordPress.Het grootste deel van de plugins is ontwikkeld door enthousiaste gebruikers die zelf kunnen programmeren. Hiermee kunnen ze het systeem volledig naar hun wensen inrichten. Ook zijn er heel veel bedrijven die commerciële plugins maken. Maar wat zijn de beste plugins? Dit is vooral afhankelijk van wat voor type website je hebt. Je begrijpt dat voor een blog over je leven andere plugins handig zijn dan voor een zakelijke website. Maar wat zijn dan de beste WordPress plugins in januari 2016? Mijn mening lees je verderop in deze blog.

De plugins worden geschreven in de programmeertaal PHP. Hier is enige kennis van nodig om je eigen plugin te kunnen schrijven. Maar voorlopig kun je vaak een heel eind komen door simpelweg een plugin te zoeken en te installeren. Er zijn plugins die je nog moet configureren, er zijn ook plugins die out-of-the-box werken zonder configuratie.

Vanaf januari 2016 ga ik maandelijks een vijftal plugins beschrijven die Lamper Design regelmatig gebruikt.

WordPress plugins januari 2016

  1. WordFence beveiliging
  2. Clef 2-factor authentication
  3. Black Studio TinyMCE Widget
  4. Yoast SEO
  5. DNUI (Delete not used images)

Dit zijn de vijf plugins die ik deze maand bespreek. Het lijstje is nog veel langer. Schrijf je dus in voor de nieuwsbrief en mis geen enkele blog!

Ken je alle genoemde plugins? Wat is jouw absolute nummer 1 die volgende maand niet mag ontbreken op de lijst? Laat een reactie achter en wie weet lees je er al snel meer over.

1. Wordfence beveiligingsplugin

Wereldwijd draait meer dan 25% van alle websites op het immens populaire Content Management Systeem WordPress. Dit verklaart ook direct waarom het een populair systeem bij hackers is. En hoe vervelend is het als je website gehackt wordt? Heb je een persoonlijk blog dan is het leed nog wel te overzien. Maar wat als je een goedlopende webshop hebt waar je van leeft? Dan is het probleem toch een stuk groter! Hoe zorg je dat hackers geen kans krijgen? Dat is een lastige vraag. Er zijn diverse manieren om je website dicht te timmeren. Onder andere de plugin Wordfence. Een kleine greep uit de mogelijkheden van deze plugin:

  • WordFence wordpress pluginsaantal inlogpogingen beperken tot een x-aantal;
  • pogingen om in te loggen met niet bestaande gebruikersnamen direct blokkeren;
  • alle niet-vertrouwde crawlers direct blokkeren;
  • monitoren waar je verkeer vandaan komt en eventueel direct op basis van een ip-adres een blokkade maken;
  • WordPress- en themabestanden controleren of deze nog origineel zijn.

WordFence installeren kan direct vanuit WordPress. Standaard staat er al veel ingesteld. Er zijn een aantal instellingen die ik je adviseer te wijzigen/aan te passen:

  1. eigen ip-adres toevoegen als veilig, om te voorkomen dat je niet meer in kunt loggen. Dit kun je doen onder de instellingen bij Whitelisted IP addresses that bypass all rules;
  2. het geheugen dat gereserveerd is voor een scan verlagen van 256mb naar 128mb. Dit is meer dan voldoende;
  3. login security options aanpassen. Hiermee stel ik bijvoorbeeld in na hoeveel mislukte inlogpogingen iemand uitgesloten wordt.
    WordFence Geheugen instellen

    Wordfence geheugen instellen

WordFence WordPress security plugin

Wordfence Login Security Options

De Wordfence plugin is te vinden op: https://nl.wordpress.org/plugins/wordfence/. Mocht je problemen met je database hebben dan is deze blog misschien iets voor jou.

2. Clef 2-factor login

Cleff 2-factor pluginNet als Wordfence is Clef een beveiligingsplugin. Maar dan wel een hele andere. Met clef kun je namelijk inloggen op je WordPress website zonder gebruik te maken van een gebruikersnaam en wachtwoord. Het is een zogenaamde 2-factor security plugin.

Twee factoren, bijvoorbeeld kennis en bezit, zijn uiteraard veel betrouwbaarder dan 1 factor. Naast kennis van naam en wachtwoord, voor authenticatie heeft de hacker alsnog jouw smartphone nodig om in te breken via de login.

Nadat je de plugin ingesteld hebt scan je een soort QR-code op je beeldscherm met behulp van je smartphone of tablet met Clef-app. Bekijk de video met de uitleg van Clef zelf.

  • Per gebruikersrol heb je de mogelijkheid om Clef aan- of uit te zetten;
  • bij installatie van de plugin krijg je een escape-url. Hiermee kun je altijd inloggen mocht de 2-factor om onbekende reden niet meer werken;
  • mocht je gebruik maken van meerdere websites dan is deze plugin nog eens extra aan te raden. Als je eenmaal inlogt bij de eerste website kun je bij de resterende websites waar jouw Clef account aan gekoppeld is automatisch inloggen.

De Clef plugin is te downloaden via: https://nl.wordpress.org/plugins/wpclef/

3. Black Studio TinyMCE Widget

Blackstudio TinyMCS WidgetAls je een WordPress-gebruiker bent dan ben je vast bekend met widgets. En dan ken je ook vast het probleem dat de standaard tekstwidget van WordPress geen opmaakmogelijkheden kent. Je kunt dit oplossen door gebruik te maken van HTML opmaak, maar dit is soms best wel omslachtig.

WYSIWYG widgets WordPressOm die reden maak ik gebruik van de Black Studio TinyMCE widget plugin. Hiermee krijg je de WYSIWYG-editor ook in je widgets tot je beschikking! De WYSIWYG-editor is wat je ziet als je een nieuwe pagina of post aanmaakt in WordPress. Je krijgt de mogelijkheid om de tekstopmaak, tekstkleur, lettertype en dergelijk zelf te kiezen. Visual Editor WordPress

Je moet hiervoor wel een aparte widget toevoegen, deze heet de visuele bewerker. Dus niet de standaard tekstwidget. De widget kun je zo vaak hergebruiken als je wilt, net als de meeste widgets in WordPress.

4. Yoast SEO

Yoast SEO PluginDe plugin die bijna iedere WordPress-gebruiker kent. Vraag je aan iemand hoe hij/zij de zoekmachineoptimalisatie voor de website geregeld heeft dan is de kans groot dan je als reactie krijgt: ” Ik had een groen bolletje in Yoast!” Herkenbaar? Dan heb ik goed nieuws voor je. Als je overtuigd bent dat een groen bolletje je meteen een hoge notering in Google geeft dan kun je beter niet verder lezen. Ik moet je teleurstellen.

Er zijn diverse voorbeelden te noemen van websites waar heel duidelijk te zien is dat er gewerkt is voor ‘het groene bolletje’. Je kunt dit vooral zien aan het onnatuurlijk gebruik van bepaalde zoektermen. Let maar eens op als je komende dagen rondsurft over het internet. En ga deze pagina’s eens opzoeken in Google? Het zal je verbazen, deze staan echt niet hoger dan een pagina die een oranje bolletje scoort. Gelukkig kijkt Google naar heel veel meer factoren dan alleen de optimalisatie van je website met Yoast.

Yoast SEO Plugin voor Social MediaYoast SEO bolletjeDe conclusie is dus: de Yoast plugin is een geweldig hulpmiddel! En het zou niet slim zijn om de geboden kansen te laten liggen. Maar staar je niet blind op het groene bolletje. Schrijf je teksten voor je bezoekers en optimaliseer je pagina’s voor je bezoekers. Er zijn namelijk al teveel websites die gemaakt zijn voor Google waardoor ze voor de mens totaal onlogisch en onleesbaar zijn geworden.

5. DNUI (Delete not used images)

Als een website langere tijd bestaat en je wijzigt regelmatig content dan kan de opslagruimte op de server aardig oplopen. Je probeert zoveel mogelijk de afbeeldingen te verwijderen die je niet meer nodig hebt maar 100% garantie hierop is niet te krijgen. Deze plugin zoekt in je database of een afbeelding gekoppeld is en toont deze als dit niet het geval is. Je kunt de afbeelding dan verwijderen uit de uploads folder.

Nadat de plugin geïnstalleerd is kun je via Instellingen > DNUI naar het zoekscherm. Er zijn nog diverse opties die je in kunt stellen. De belangrijkste optie vind ik deze:

DNUI plugin WordPress

hiermee voorkom je dat je per ongeluk afbeeldingen verwijdert die gebruikt worden in je blog. Dat lijkt mij wel het laatste wat je wilt.

Waarschuwing: Maak vooraf een backup van je uploads mappen en van je database. Weg is ook echt weg namelijk. 

DNUI delete unused images

De plugin spreekt verder voor zich. Er zijn drie tabbladen. De eerder genoemde instellingen maak je op het tabblad ‘option’. De daadwerkelijke scan maak je -je verwacht het niet- op het tabblad scan database. Als je even wacht verschijnt er een lijst met bestanden. Dit zijn de bestanden die wel op je server staan maar niet gebruikt worden. Onnodige opslagruimte dus.

  • Klik op het tabblad ‘Scan database’. Als je even wacht verschijnt er een lijst met bestanden;
  • selecteer de afbeeldingen die je wilt verwijderen;
  • Klik op ‘Delete all selected’.

Alle niet gebruikte afbeeldingen zullen verwijderd worden uit je mediabibliotheek en van de server. De ruimte die je hiermee wint kan behoorlijk veel zijn. Zoals je kunt zien in de bovenstaande screenshot staan veel afbeeldingen in diverse afmetingen op de server. Hier wordt er vaak maar 1 of 2 van gebruikt. Zonde van de ruimte dus.

Dit zijn de plugins voor januari. Heb je er iets aan gehad? Zaten er plugins tussen die jij ook gebruikt of juist nieuwe die je wilt gaan gebruiken? Laat het weten in een reactie hier onder.

Heb je een vraag of kom je er zelf niet uit? Neem dan direct contact op.

 

Zoeken en vervangen in een WordPress database

Er zijn verschillende redenen mogelijk waarom je moet zoeken en vervangen in een WordPress database. De belangrijkste reden is dat er iets gewijzigd is in de interne linkstructuur van je website. Dit kan ontstaan door:

  1. Het verhuizen van je website vanaf een ander domein
  2. Het verhuizen van je website vanaf een subdomein
  3. Het verhuizen van je website vanuit een subfolder naar de root van je mappenstructuur

Je hebt voor de verhuizing alle bestanden op je FTP server verhuisd en vervolgens ook de database geëxporteerd vanaf de oude locatie en geïmporteerd op de nieuwe locatie. Vervolgens ga je naar je website maar je krijgt al direct een foutmelding. Hoe kan dit?

De database is de basis van je WordPress website. Hierin worden alle links en koppelingen opgeslagen die ervoor zorgen dat de website eruit ziet zoals je dit instelt. Maar dit werkt dus niet meer als je website url gewijzigd is. Hoe los je dit op? Je moet dus alle url’s in je database vervangen.

Stel, je hebt de website gebouwd in een subfolder zodat je huidige WordPress website nog live bleef tot de nieuwe website klaar was. Nu staan er in je database dus diverse verwijzingen naar http://jewebsite.nl/subfolder. En daar zit dus het probleem! Je afbeeldingen zijn niet meer te vinden in de /subfolder maar in de root van je FTP, /. Ditzelfde verhaal geldt dus voor het verhuizen vanaf een ander domein. Je website is niet meer te vinden op http://jeoudewebsite.nl maar op http://jenieuwewebsite.nl. Je zult alle verouderde verwijzingen in je database dus moeten zoeken en vervangen voor de juiste url’s.

Controleren van je database

Hoe kom je er achter wat er dan ingesteld staat in je database? Als het goed is heb je via de provider toegang tot phpmyadmin. Dit is het beheersysteem van je database. De inloggegevens kun je terugvinden in de mails die je van je provider gekregen hebt bij het afsluiten van een contract of in het control panel van de provider.

PhpmyadminAls je ingelogd bent in phpmyadmin, ga je naar de wp_options. WP_ is de standaard prefix van WordPress, hopelijk is deze bij jou gewijzigd. Dit is namelijk een groot veiligheidsrisico. Wil je weten hoe je dit eenvoudig kunt wijzigen, neem dan gerust contact met mij op.

In de options tabel zie je de siteurl en home staan. Waarschijnlijk staat hier de waarde achter van je oude locatie. Die moet dus gewijzigd worden.

Dit is de meest voor de hand liggende locatie om te controleren maar er zullen door de hele database verwijzingen aanwezig zijn naar de oude locatie die opgezocht en vervangen moeten worden.

Je zou de hele database door kunnen bladeren en handmatig alles wijzigen. Maar gelukkig is dat niet nodig. Er zijn diverse tools voor geschreven, ik maak altijd gebruik van de tool Search-Replace-DB. Deze gaat volledig buiten WordPress om en hiermee behaal ik absoluut de beste resultaten.

Search Replace DB Tool

De tool is te downloaden vanaf https://interconnectit.com/products/search-and-replace-for-wordpress-databases/. Het is, zoals de makers het zelf omschrijven, een database search en replace script in PHP. Ok, je hebt de zip gedownload, maar wat dan?FTP root database WordPress

  1. Pak het zip bestand lokaal uit op je pc of mac
  2. Search-Replace-DB-master is de naam van de map. Verander deze direct in search om het jezelf later gemakkelijker te maken
  3. Upload de hele map met een FTP programma zoals bijvoorbeeld Filezilla naar de root van je server. Dus direct in de map public_html
  4. Ga op de nieuwe locatie van je website naar http://jewebsite.nl/search/index.php
  5. Je bent klaar om te zoeken en vervangen!

Zoeken en vervangen in de database

Zoals je gelezen hebt ga je naar http://jewebsite.nl/search/index.php. Je krijgt dat het onderstaande scherm:

Search / Replace WordPress Database

Bij search for vul je bijvoorbeeld in: http://jeoudewebsite.nl. Mocht je van een subfolder naar de root verhuisd zijn dan kun je ook alleen instellen /oudemap/.

Bij replace with vul je in http://jenieuwewebsite.nl. In het geval van een subfolder kun je deze dus leeg laten. Je wilt namelijk de verwijzing naar de subfolder helemaal verwijderen.

Dry of Live run

Je hebt nu alles ingevoerd en bent klaar om de zoek en vervang actie in te zetten. Heb je een goede backup van je database? Dat is uiteraard heel belangrijk voor het geval dat er iets mis gaat. Maar ik ging er eigenlijk van uit dat je die al gemaakt had voordat je überhaupt iets met de database ging doen.

Dry or live runIk kies altijd eerst voor de optie ‘dry run’. Hiermee simuleert de tool je wijzigingen en kun je bekijken hoeveel wijzigingen er gemaakt worden. Eventueel kun je die wijzigingen ook aanklikken en bekijken wat er daadwerkelijk gewijzigd zal gaan worden.

Ben je overtuigt? Dan is het tijd voor een ‘live run’!

Job done

In principe ben je nu klaar. Tijd om je website te testen dus! Alle verwijzingen kloppen nu dus alle afbeeldingen en teksten zouden zichtbaar moeten zijn. Is dit niet het geval? Misschien heb je iets aan deze blog over veel voorkomende WordPress problemen.

Vergeet niet om de eerder gekopieerde map search weer te verwijderen. Dit wordt ook aangegeven na de live run. Het is van belang om de veiligheid van je webserver niet in gevaar te brengen! Want dit is voor hackers een makkelijk ingang naar je database. En in de database kun je bijvoorbeeld een user aanmaken en dan heb je echt een groot probleem.

Website voorzien van SSL

Google heeft aangegeven dat SSL in 2016 steeds meer een belangrijke rankingfactor gaat worden. En aangezien je niet achter wilt blijven heb je dus een SSL certificaat aangeschaft. Maar om het certificaat te laten functioneren moeten alle verwijzingen in je database naar https:// verwijzen in plaats van http://.

De tool is ook perfect bruikbaar om in een keer alle verwijzingen aan te passen. Wil je weten welke verwijzingen het SSL certificaat blokkeren? Test je website met https://whynopadlock.com 

Kom je er niet uit of heb je hulp nodig? Neem dan direct contact op.

Een website bouwen, daar is al veel over verteld en geschreven. Maar hoe onderhoud je een WordPress website? Is het handig om dit zelf te doen of heb je daar de WordPress specialist voor nodig? Wat heb je nodig om de WordPress website te onderhouden? Allemaal vragen waar je over na moet denken als je website klaar is. In deze blog licht ik toe wat er nodig is voor het reguliere onderhoud aan je website en waar je op moet letten als je ervoor kiest om dit onderhoud zelf te gaan doen. Zodat mocht het misgaan, je altijd terug kunt naar de situatie voordat je aan het website onderhoud begon!

Stappenplan WordPress website onderhoud

  • Handmatig volledige backup maken
  • Backup logs controleren
  • WordPress Core updaten
  • WordPress plug-ins updaten
  • WordPress thema’s updaten
  • Functionaliteit testen
  • Google Search Console 404 errors controleren
  • Redirects aanmaken

Website update WordPressDenk jij dat het updaten van je website eenvoudig is? En dat dit alleen bestaat uit het drukken op de ‘update’ knop bij genoemde items? Dan heb je het grondig mis! En is het dus erg goed dat je dit stappenplan eens rustig doorneemt. Ik zal elke stap uit het complete stappenplan apart beschrijven. Ik zal de stappen beschrijven aan de hand van de plug-ins die ik zelf gebruik. Het kan dus dat voor jouw website de handelingen iets anders zijn.

Vind je alle bovenstaande stappen teveel? Lees dan hoe wij jou compleet kunnen ontzorgen met onze website onderhoud service.

Handmatig volledige backup maken

Maar mijn webdesigner heeft ingesteld dat er elke nacht een backup gemaakt word. Dus dan hoef ik toch niet direct weer een backup te maken? Dat klopt. Het is ook een extra zekerheid. Mogelijk heb jij (of een andere beheerder) van de site voordat je begon aan het onderhoud wat teksten gewijzigd. Of een afbeelding gewijzigd. En waarom zou je niet die paar minuten extra nemen? Safety first lijkt mij.

Ik maak voor mijn websites gebruik van de backup plug-in Updraft. Deze maakt automatisch of handmatig een backup naar Dropbox. Het is voor mij een kwestie van de instellingen van Updraft Plus openen en vervolgens klikken op ‘nu backup maken’. Heel even geduld en ik kan veilig starten met het bijwerken van mijn website.Backup WordPress website maken

Backup logs controleren

In de vorige stap heb je een backup gemaakt. Belangrijk is dat deze backup geslaagd is! Kijk daarom naar de error logs van je backup plug-in of deze geen fouten aan geven. Mochten er geen cruciale fouten instaan dan kun je weer door naar de volgende stap. Er is dus onderscheid in:

  • Waarschuwingen, kun je bekijken en vaak negeren.
  • Kritische fouten, deze moet je oplossen voordat je verder gaat! Vaak zal dit te maken hebben met de opslagruimte die vol is of compressiefouten. Dit betekend dus dat je geen goede backup hebt mocht het updaten mis gaan.

WordPress Core updaten

Wat is de WordPress core? Dat zijn alle bestanden van WordPress die nodig zijn om je website te laten functioneren. Er zijn verschillende soorten updates. Er zijn veiligheidsupdates, deze worden als je hier niets aan gewijzigd hebt automatisch geïnstalleerd. Je installatie kan dan geüpdatet zijn van bijvoorbeeld versie 4.3.1 naar 4.3.2. Het laatste cijfer in de reeks is dus van toepassing op de veiligheid.

Soorten WordPress updates:

  • Veiligheidsupdates, worden automatisch geïnstalleerd tenzij in je wp-config.php bestand deze regel opgenomen is:  define( ‘AUTOMATIC_UPDATER_DISABLED’, true ); Bijvoorbeeld van versie 4.2.3. naar 4.2.4.
  • Core updates, worden niet automatisch geïnstalleerd tenzij je provider dit doet. Bijvoorbeeld van versie 4.3.x naar versie 4.4.0.

WordPress versiesRecent in 2015 was er een update naar WordPress 4.4. Hiervoor is interactie van de hostingpartij of van de website-eigenaar nodig. Dit gaat dus niet automatisch. Als je een managed WordPress hosting partij hebt dan zal deze ook die updates voor je verzorgen nadat deze getest zijn. Nog een extra reden naast de snelheid om over te stappen dus!

Waarom zou je eerst de core updaten voordat je de plug-ins update? Dit gaat overigens alleen op als er ook daadwerkelijk een core update is! De nieuwe plug-in versies zijn geschreven voor de nieuwe WordPress versie. Dus is het beter om eerst te zorgen dat je deze nieuwste WordPress versie ook installeert voordat je de plug-ins update.

WordPress plug-ins updaten

Er zijn veel vaker updates voor verschillende plug-ins. Als je inlogt in de backend van je website zul je regelmatig een getal zien naast de plug-ins optie in je menu. Dit betekend dat er 1 of meerdere updates zijn voor de door jou gebruikte plug-ins. Ook inactieve plug-ins geven aan wanneer er een update is. Maar in principe hoef je geen inactieve plug-ins op je website te hebben! Als je ze niet gebruikt kun je ze namelijk ook verwijderen. Dit scheelt weer opslagcapaciteit en je database word niet onnodig groot. Hoe groter je database namelijk is, hoe trager je website zal reageren.

Het is mogelijk om alle plug-ins die een update nodig hebben allemaal tegelijk te updaten. Mijn advies is om dit niet te doen. Mochten er problemen ontstaan dankzij een update dan weet je direct aan welke plug-in het ligt en kun je deze met behulp van bijvoorbeeld WP Rollback plug-in weer terugdraaien.

WordPress thema updaten

Meteen nog een tip als je overweegt een nieuw thema te installeren. Kijk wanneer de laatste update uitgebracht is door de themamaker. WordPress veranderd namelijk regelmatig bepaalde functies, als je thema niet geüpdatet word gaat dit op den duur problemen opleveren. Zie het als een mens. Je word ouder, je lichaam veranderd niet alleen, je wordt ook ouder en wijzer. Zo werkt het met WordPress ook. Word je thema dus nooit geüpdatet dan zul je uiteindelijk problemen krijgen. Hoe update je dan je thema? En hoe kun je controleren of er updates zijn? Dit is per thema verschillend. In ieder geval kun je in de backend van je WordPress installatie zien of er updates beschikbaar zijn. Houd hiermee dus rekening bij het website onderhoud.

Bij veel thema’s moet je een API koppeling maken om te kunnen controleren of er updates zijn. Dit is het geval bij veel thema’s die je aanschaft via bijvoorbeeld de bekende thema marktplaats Themeforest.net.

Wijzigingen aan je originele thema niet gemaakt in een speciale plug-in of met een child-theme ben je kwijt bij een update van je thema.

Belangrijk om rekening mee te houden bij een update van je thema is om te weten wat je aangepast hebt aan je thema na de installatie. Er zijn verschillende opties die je gewijzigd kunt hebben.

  • Alleen CSS wijzigingen. Heb je deze wijzigingen gemaakt aan de originele stylesheet die bij het thema hoort? Die ben je kwijt als je het thema update! Dit kun je voorkomen door gebruik te maken van een child-theme of een plug-in zoals bijvoorbeeld ‘simple custom css
  • Wijzigingen in de function.php bijvoorbeeld of de footer.php. Dit zijn originele themabestanden. Deze wijzigingen ben je ook kwijt als je het thema update. Mocht je geen child-theme hebben dan is dit het moment om deze alsnog aan te maken. Voordat je het thema update welteverstaan.

Functionaliteit testen

Heb je al het bovenstaande zonder problemen doorlopen? Dan is het nu tijd om te testen of alles nog werkt. Regelmatig maak ik mee dat een bepaalde plug-in geüpdatet word en dat er daarna bepaalde functies niet meer werken. Of dat het scherm van je website opeens volstaat met foutmeldingen in verband met incompatibiliteit van plug-ins en thema. Het testen is dus een belangrijke stap. En beperk je hierbij uiteraard niet alleen tot de homepage.

Google Search ConsoleGoogle Search Console 404 errors controleren

Nadat je alles geüpdatet hebt is het tijd om in te loggen bij Google Search Console. Hierin kun je zien of er mogelijk pagina’s of berichten zijn die van naam gewijzigd zijn en hierdoor via de oude links niet meer te bereiken zijn. Voor alle aangetroffen errors moet je een redirect aanmaken naar de nieuwe pagina. Vervolgens meld je in de Search Console deze 404 error als opgelost.

Conclusie over website onderhoud

Het onderhoud van een website is dus meer dan alleen het drukken op de update knop. Dit kost je regelmatig een deel van je tijd. Zou je die tijd niet beter kunnen besteden aan het runnen van je bedrijf? Al eens nagedacht over het inhuren van Lamper Design voor het onderhoud aan je website? Geen zorgen meer over veiligheid en altijd een up-to-date draaiende website.

Regelmatig maak ik mee dat complete websites offline gaan door het updaten van een plug-in. Ook websites die qua stijl gereset zijn naar het originele thema. Het inhuren van iemand om dit weer te herstellen kost vaak meer dan een maandelijks bedrag voor het onderhoud aan je WordPress website. Wil je meer weten over het onderhoud aan je website? Neem dan direct contact op en laat je vrijblijvend informeren.

Portfolio Items