Imsanity plugin

Met de Imsanity WordPress plugin kun je automatisch grote afbeeldingsuploads resizen in je website of webshop. Kies de gewenste grootte en kwaliteit, en laat Imsanity de rest doen. Wanneer een gebruiker een afbeelding uploadt die groter is dan de geconfigureerde grootte, zal Imsanity deze automatisch verkleinen tot de ingestelde grootte en het origineel vervangen. De makers van de plugin zijn ook de makers van de EWWW Image Optimizer plugin.

Imsanity plugin

Imsanity biedt ook een bulk-resize functie om eerder geüploade afbeeldingen te verkleinen en schijfruimte vrij te maken. Je kunt individuele afbeeldingen resizen vanuit de lijstweergave in de Mediabibliotheek.

Imsanity

Deze gratis WordPress plugin is ideaal voor blogs die geen hoge resolutie originele afbeeldingen hoeven op te slaan en/of voor bijdragers die niet willen (of niet weten hoe) afbeeldingen te verkleinen voordat ze worden geüpload.

Wat kun je met Imsanity?

• Automatisch schalen van grote afbeeldingsuploads naar een meer “optimale” grootte.
• Bulk-resize functie om bestaande afbeeldingen te verkleinen.
• Selectief afbeeldingen resizen direct in de Mediabibliotheek (Lijstweergave).
• Mogelijkheid om maximale breedte/hoogte en JPG-kwaliteit in te stellen.
• Optioneel om BMP- en PNG-bestanden om te zetten naar JPG voor meer besparing.
• Zodra ingeschakeld, vereist Imsanity geen acties van de gebruiker.
• Gebruikt de ingebouwde afbeeldingsschalingsfuncties van WordPress.

Het optimaliseren van afbeeldingen is van belang voor de website snelheid en de laadtijd dus pak deze gratis kans!

Typekit, nu bekend als Adobe Fonts, is een betaalde dienst van Adobe waarmee je toegang krijgt tot een uitgebreide bibliotheek van hoogwaardige lettertypen. Deze lettertypen kunnen gemakkelijk worden geïntegreerd in je WordPress website om het ontwerp en de typografie te verbeteren.

Typekit gebruiken in WordPress

Met Adobe Fonts kun je kiezen uit duizenden lettertypen, waardoor je een consistente en professionele uitstraling kunt geven aan je website. Je hebt de mogelijkheid om verschillende lettertypen te gebruiken voor koppen, body-tekst, knoppen, en meer, waardoor je ontwerp uniek en aantrekkelijk wordt.

Custom Adobe Fonts (Typekit)

Adobe Fonts biedt eenvoudige integratie met WordPress. Nadat je een abonnement hebt op Adobe Fonts, kun je de gewenste lettertypen selecteren en deze via een API-sleutel in je WordPress website implementeren. Door gebruik te maken van professionele lettertypen, kun je de leesbaarheid en gebruikerservaring (UX) van je website aanzienlijk verbeteren. Goede typografie zorgt ervoor dat de inhoud van je website duidelijk en aangenaam te lezen is, wat de betrokkenheid van gebruikers kan verhogen.

Hoewel de directe impact van lettertypen op SEO beperkt is, kunnen betere leesbaarheid en een verbeterde gebruikerservaring indirect bijdragen aan lagere bounce rates en hogere tijd op de site, wat weer gunstig kan zijn voor je SEO.

Adobe Fonts in WordPress?

1. Aanmelden en selecteren: Meld je aan bij Adobe Fonts en selecteer de lettertypen die je wilt gebruiken op je website. Voeg deze lettertypen toe aan een webproject.
2. API-sleutel: Ga naar je Adobe Fonts-accountinstellingen en verkrijg de API-sleutel voor het geselecteerde webproject.
3. Plugin installeren: In WordPress kun je een plugin zoals “Adobe Fonts (Typekit)” installeren en activeren. Deze WordPress plugin maakt het eenvoudig om Adobe Fonts te integreren zonder code te hoeven schrijven.
4. Instellen van de API-sleutel: Ga naar de instellingen van de plugin in je WordPress dashboard en voer de API-sleutel in. De plugin zal dan automatisch de geselecteerde lettertypen laden.
5. Lettertypen toepassen: Gebruik de Customizer in WordPress of de instellingen van je thema om de nieuwe lettertypen toe te passen op verschillende elementen van je website, zoals koppen, paragrafen en knoppen.

Je kunt een geordende lijst (ol) in HTML eenvoudig laten starten vanaf een ander nummer dan 1 door gebruik te maken van de start attributen in HTML of de counter-reset eigenschap in CSS. Hieronder leg ik beide methoden uit.

Methode 1: OL via HTML aanpassen

In HTML kun je het start attribuut gebruiken om het startnummer van een geordende lijst te specificeren:

<ol start="5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Deze code zorgt ervoor dat de lijst begint bij nummer 5.

Methode 2: CSS counter-reset list

In CSS kun je de counter-reset eigenschap gebruiken om een lijst op een ander nummer te laten beginnen. Dit doe je door de counter voor de geordende lijst opnieuw in te stellen. Hier is een voorbeeld:

<ol class="custom-start">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

En deze CSS heb je nodig in je stylesheet.

.custom-start {
counter-reset: list-counter 4; /* 4 betekent dat de lijst zal beginnen bij 5 */
}

.custom-start li {
counter-increment: list-counter;
}

.custom-start li::before {
content: counter(list-counter) ". ";
}

In deze CSS-code

• counter-reset: list-counter 4; – Hiermee reset je de teller voor de lijst en start je deze bij 4. Omdat de teller vóór het eerste item wordt geïncrementeerd, zal het eerste item 5 zijn.
• counter-increment: list-counter; – Dit zorgt ervoor dat de teller voor elk item in de lijst wordt verhoogd.
• content: counter(list-counter) “. “; – Hiermee voeg je de tellerwaarde toe vóór elk lijstitem, gevolgd door een punt en een spatie.

Je kunt het startnummer van een geordende lijst in HTML eenvoudig aanpassen door het start attribuut te gebruiken. Voor meer geavanceerde styling en flexibiliteit kun je de counter-reset eigenschap in CSS gebruiken. Beide methoden geven je de mogelijkheid om je lijsten precies zo te nummeren als je wilt.

First Contentful Paint (FCP) is een verouderde metriek die werd gebruikt om de prestaties van een WordPress website te meten, specifiek hoe snel de eerste visuele inhoud wordt weergegeven aan de gebruiker. Deze metriek meet de tijd vanaf het moment dat een gebruiker een URL intypt of op een link klikt, tot het moment dat de eerste inhoud – zoals tekst, afbeeldingen, of non-white canvas – zichtbaar wordt op het scherm.

Belang van FCP

FCP is essentieel omdat het een vroege indicatie geeft van de laadsnelheid van een website. Een snelle FCP zorgt ervoor dat gebruikers meteen iets te zien krijgen, wat helpt om de perceptie van snelheid te verbeteren en kan bijdragen aan een betere gebruikerservaring. Als de FCP langzaam is, kan dit leiden tot een hogere bounce rate, omdat gebruikers mogelijk vertrekken voordat de pagina volledig is geladen.

Hoe werd FCP Gemeten?

FCP wordt gemeten in milliseconden (ms) en wordt vastgelegd door web performance tools zoals Google PageSpeed Insights, Lighthouse, en andere analyseplatforms. Deze tools geven je inzicht in hoe snel de eerste inhoud van je pagina verschijnt en bieden aanbevelingen om de laadtijd te verbeteren.

Wat beïnvloedt FCP?

Verschillende factoren kunnen de FCP van een website beïnvloeden, waaronder:

1. Serverrespons tijd: Een snelle serverrespons draagt bij aan een snellere FCP.
2. Renderen van JavaScript en CSS: Complexe of grote JavaScript- en CSS-bestanden kunnen de tijd vertragen die nodig is om de eerste inhoud te renderen.
3. Netwerk condities: Slechte netwerkverbindingen kunnen de tijd verlengen die nodig is om de inhoud naar de browser te verzenden.
4. Resource prioritering: Het correct prioriteren van kritieke bronnen (zoals stijlen en scripts) kan de FCP verbeteren door ervoor te zorgen dat de belangrijkste inhoud eerst wordt geladen.

Voorbeeld

Stel je voor dat een gebruiker je website bezoekt en de pagina laadt. FCP wordt gemeten vanaf het moment dat de gebruiker de pagina begint te laden tot het moment dat de eerste zichtbare inhoud (zoals een koptekst of een afbeelding) wordt weergegeven. Dit betekent dat zelfs als de volledige pagina nog niet is geladen, de gebruiker al een deel van de inhoud kan zien en mogelijk begint te interageren met de site.

Verbeteren van FCP

First Contentful Paint was een cruciale metriek voor het meten van de gebruikerservaring op je website. Door aandacht te besteden aan FCP en deze te optimaliseren, kun je ervoor zorgen dat je website snel en responsief is, wat leidt tot hogere tevredenheid en betrokkenheid van je gebruikers. Voor gedetailleerde informatie en tips over het verbeteren van FCP, kun je gebruik maken van tools zoals Google PageSpeed Insights.

Sinds maart 2024 is de FCP vervangen voor de INP metric in Googles Core Web Vitals.

Wat is de public_html folder?

De `public_html` folder is een belangrijk onderdeel van de structuur van een hosting webserver en speelt een belangrijke rol in het hosten van een WordPress website.

De `public_html` folder, soms ook wel de root directory genoemd, is de hoofdmap op de server waarin alle bestanden en mappen van je website worden opgeslagen. Deze map bevindt zich zoals gezegd op de webserver en is toegankelijk voor het publiek via het internet. Wanneer iemand je domeinnaam intypt in hun browser, worden de bestanden in de `public_html` folder geladen en weergegeven.

Functies van de public_html folder

1. Hoofdmap voor website bestanden
   Alle bestanden en mappen die je wilt dat publiek toegankelijk zijn via je website, moeten in de `public_html` folder geplaatst worden. Dit zijn de HTML-bestanden, afbeeldingen, CSS-stijlen, JavaScript-bestanden, en meer.
2. Domeintoewijzing
   De `public_html` folder is direct gekoppeld aan je domeinnaam. Wanneer een gebruiker je website bezoekt, zoekt de webserver automatisch naar de bestanden in deze map om weer te geven. Tenzij in je controlepaneel aangegeven is dat de private_html gebruikt moet worden als je een SSL-certificaat gebruikt.
3. Toegankelijkheid
   Alleen bestanden binnen de `public_html` folder en submappen daarvan zijn toegankelijk via een webbrowser. Bestanden buiten deze map zijn niet direct toegankelijk voor bezoekers, wat bijdraagt aan de beveiliging van je website.

Bestanden en mappen in de public_html folder

• index.html of index.php
  Dit is meestal het startpunt van je website. Wanneer een bezoeker je domeinnaam intypt zonder een specifiek pad, zal de webserver proberen deze bestanden te laden als de hoofdpagina van je site.
• Submappen
  Je kunt submappen maken binnen de `public_html` folder om je websitebestanden te organiseren. Bijvoorbeeld, je kunt een map genaamd `images` hebben voor al je afbeeldingsbestanden of een map `css` voor je stylesheets.
• .htaccess
  Dit is een configuratiebestand waarmee je verschillende serverinstellingen kunt beheren, zoals URL-omleidingen, beveiligingsinstellingen en meer.

Toegang tot de public_html folder

Toegang tot de `public_html` folder kan op verschillende manieren:

1. Via FTP/SFTP
   Gebruik een FTP-client zoals FileZilla om verbinding te maken met je server en navigeer naar de `public_html` folder om bestanden te uploaden, downloaden of bewerken.
2. Via een webhosting control panel
   Veel hostingproviders bieden een bestandsbeheerder binnen hun controlepaneel (zoals cPanel, Plesk, of DirectAdmin) waarmee je direct toegang hebt tot de `public_html` folder.
3. Via SSH
   Voor geavanceerde gebruikers is het mogelijk om via SSH (Secure Shell) toegang te krijgen tot de server en de `public_html` folder te beheren met commando’s.

Door te begrijpen hoe deze public_html folder werkt en hoe je er toegang tot kunt krijgen, kun je effectief je website beheren en onderhouden.

De developer tools in de Safari browser van Apple zijn handige hulpmiddelen voor bijvoorbeeld een WordPress agency om websites of WordPress webshops te inspecteren, debuggen en optimaliseren. De developer tools staan standaard niet ingeschakeld, in dit artikel leggen we je uit hoe je ze inschakelt.

Safari developer tools inschakelen

1. Safari browser openen:
   open de safari-browser op je mac.
2. Safari voorkeuren openen:
   klik op `safari` in de menubalk bovenaan het scherm. selecteer `voorkeuren…` in het dropdown-menu. dit opent het voorkeurenvenster.
3. Geavanceerde instellingen openen:
   in het voorkeurenvenster, klik op het tabblad `geavanceerd`.
4. Ontwikkel menu inschakelen:
   onderaan het tabblad geavanceerd, vind je de optie `toon ontwikkel-menu in menubalk`. vink dit selectievakje aan.

Wil je de developer tools in Safari gaan gebruiken? Sluit het voorkeurenvenster. je zult nu een nieuw menu-item genaamd `ontwikkel` in de menubalk zien. Klik op `ontwikkel` in de menubalk. selecteer `toon webinspector` (of gebruik de sneltoets `option + command + i`) om de developer tools te openen.

Developer tools in Safari

Als webdesigner zijn de developer tools in iedere browser een onmisbare uitbreiding. Wat kun je er onder andere mee?

• html en css inspecteren en bewerken: bekijk en bewerk de structuur en stijl van webpagina’s in real-time.
• javascript debuggen: fouten opsporen en oplossen met de ingebouwde debugger.
• netwerkactiviteit analyseren: bekijken hoe en wanneer bronnen worden geladen.
• prestaties profileren: optimalisaties uitvoeren door de prestaties van de website te analyseren.
• opslag en cookies beheren: local storage, session storage en cookies bekijken en beheren.

De File Manager in DirectAdmin is een webgebaseerde interface die je in staat stelt om bestanden en mappen op je webserver te beheren. Dit betekent dat je toegang hebt tot alle bestanden en mappen van je website zonder dat je een FTP-client of andere externe software nodig hebt.

Functies van de DirectAdmin File Manager

Met de File Manager in DirectAdmin kun je eenvoudig bestanden van je lokale computer naar de server uploaden en vice versa, wat handig is voor het toevoegen van nieuwe website bestanden of het downloaden van back-ups. Je kunt tekstbestanden zoals HTML, CSS, en PHP direct op de server bewerken met de ingebouwde editor, zonder de bestanden te hoeven downloaden en opnieuw te uploaden.

Ook kun je nieuwe bestanden en mappen aanmaken om je website georganiseerd te houden, en bestanden en mappen eenvoudig verplaatsen, kopiëren of verwijderen om de juiste structuur te behouden en ongewenste bestanden op te ruimen.

Daarnaast kun je de lees-, schrijf- en uitvoerrechten van bestanden en mappen aanpassen, wat belangrijk is voor de beveiliging van je WordPress website en ervoor zorgt dat alleen geautoriseerde gebruikers toegang hebben tot bepaalde bestanden.

File Manager in DirectAdmin uitleg

1. Inloggen op DirectAdmin:
   • Ga naar de inlogpagina van DirectAdmin en voer je gebruikersnaam en wachtwoord in om toegang te krijgen tot het controlepaneel.
2. Navigeren naar de File Manager:
   • In het hoofdmenu van DirectAdmin, zoek je naar het gedeelte Account Manager en klik je op File Manager. Dit opent de webgebaseerde interface voor bestandsbeheer.
3. Bestanden en mappen beheren:
   • Bestanden uploaden: Klik op de knop Upload files. Selecteer de bestanden die je wilt uploaden vanaf je computer en bevestig je keuze.
   • Bestanden bewerken: Navigeer naar het bestand dat je wilt bewerken, klik op het bestand en selecteer de optie edit. Voer je wijzigingen door en sla het bestand op.
   • Nieuwe mappen/bibliotheken aanmaken: Klik op create directory, geef de nieuwe map een naam en klik op create.
   • Bestanden verplaatsen/Kopiëren: Selecteer het bestand of de map, klik op move/copy, en kies de doelmap waar je het item naartoe wilt verplaatsen of kopiëren.
   • Bestanden verwijderen: Selecteer het bestand of de map die je wilt verwijderen en klik op de delete knop. Bevestig de verwijdering.
4. Bestandsrechten aanpassen:
   • Klik met de rechtermuisknop op het bestand of de map waarvoor je de rechten wilt wijzigen en selecteer change permissions. Pas de rechten aan zoals nodig en sla de wijzigingen op.

De File Manager in DirectAdmin is een handig hulpmiddel voor het beheren van de bestanden en mappen van je WordPress website. Het biedt een eenvoudige interface waarmee je bestanden kunt uploaden, bewerken, organiseren en beveiligen. Of je nu een ervaren WordPress agency bent of een website eigenaar die zijn eigen website wil beheren, de File Manager maakt het proces eenvoudig en efficiënt.

Een footer is het onderste gedeelte van een WordPress website dat meestal op elke pagina terugkomt. In een WordPress website dient de footer verschillende belangrijke functies en kan deze worden aangepast om zowel informatief als functioneel te zijn.

Functies van een footer in WordPress

Waar kun je een footer voor inzetten? Wij geven je een aantal opties die we zelf vaak inzetten in onze WordPress projecten.

Informatieve inhoud: De footer bevat vaak in ieder geval informatie zoals contactgegevens, openingstijden, en links naar belangrijke pagina’s zoals de privacybeleid, algemene voorwaarden, en een sitemap.

Navigatie en SEO: Veel websites gebruiken de footer als een extra navigatiegebied. Hier kunnen bezoekers snel toegang krijgen tot belangrijke secties van de site zonder terug naar het hoofdmenu te hoeven scrollen. Dit zijn vaak ook belangrijke interne links in je SEO structuur van je website.

Social media links: Footers zijn populaire plekken om links naar sociale media profielen toe te voegen. Dit helpt om je online aanwezigheid te vergroten en bezoekers te verbinden met je sociale kanalen.

Nieuwsbrief aanmeldingen: Veel bedrijven plaatsen een aanmeldingsformulier voor hun nieuwsbrief in de footer, zodat bezoekers gemakkelijk kunnen inschrijven voor updates en aanbiedingen in bijvoorbeeld ActiveCampaign of Mailerlite.

Copyright informatie: De footer bevat vaak copyrightinformatie om de auteursrechten van de website-eigenaar te beschermen. Deze vind je vaak helemaal onderaan.

Footer aanpassen WordPress

WordPress biedt verschillende manieren om de footer van je website aan te passen. We hebben de vier meest gebruikte voor je op een rijtje gezet.

1. Via de Customizer:
   • Ga naar je WordPress dashboard.
   • Navigeer naar Weergave > Customizer.
   • Zoek naar de optie voor de Footer. Hier kun je vaak tekst, widgets, en andere inhoud toevoegen en aanpassen.
2. Widgets Gebruiken:
   • Ga naar Weergave > Widgets.
   • Voeg widgets toe aan de voettekstsecties. Widgets kunnen verschillende soorten inhoud bevatten zoals tekst, recente berichten, categorieën, en meer.
3. Thema Opties:
   • Sommige thema’s, zoals het populaire Avada thema of Elementor, hebben specifieke instellingen voor de footer in hun thema-opties. Hier kun je vaak de lay-out, kleuren, en inhoud aanpassen.
4. Custom Code:
   • Voor meer geavanceerde aanpassingen kun je de footer aanpassen via het thema’s footer.php bestand. Dit vereist enige kennis van HTML, CSS en mogelijk PHP.