een eenvoudige manier om iFrames in je WordPress site te gebruiken
disclaimer: omdat het een rol speelt welke versie van WordPress op je site draait en welke plugins je hebt geïnstalleerd kan het zijn dat sommige elkaar tegen werken
daarom is het altijd slim om eerst een volledige backup van betreffende site te maken.
inleiding
deze ‘handleiding’ richt zich op het toepassen iFrames in WordPress – deze twee zijn niet elkaars vrienden – ze komen ook uit een andere tijd en gebruiken andere technieken
iFrames zijn een stuk ouder maar worden nog steeds toegepast voor dynamische web elementen – daarom is het ook dat je iFrames een speciale behandeling moet geven
maar eerst
check of je de laatste versie van WordPress gebruikt – dat is belangrijk omdat daarmee de laatste bugs ook zijn weggewerkt en dat kan een hoop zoekwerk schelen
grote schoonmaak
de grote schoonmaak bestaat uit het verwijderen van plugins die je lange tijd niet meer hebt gebruikt – laten staan voor later gebruik is een potentieel veiligheidsrisico
clean cache
als de veranderingen die je hebt aangebracht niet direct zichtbaar zijn op je website voorkant dan is dat vrijwel zeker een cache probleem –
een goed werkende cache versneld het laden van je website voor de bezoeker. In feite biedt je een in elkaar gedrukte website aan die alle elementen bevat maar dan zonder overbodige spaties en lege ruimten –
om die cache handmatig te vernieuwen zoek je plugin instellingen op en Leeg de Cache
er zijn een aantal cache plugins beschikbaar, waarvan enkele niet goed beveiligd en daarmee je website kwetsbaar maakt – een betrouwbare cache is Redis Object Cache van Till Krüss
advanced iframe
de eenvoudigste manier om een iFrame in WP te voegen is de plugin Advanced iFrame van Michael Dempfle
deze plugin biedt ook een blok-editor blok aan die het invoegen in de pagina eenvoudig maakt – een screenshot geeft aan hoe de instelling van het blok is; ook die is weer eenvoudig – er zijn drie parameters in te vullen en de toevoeging werkt
de url in geven zonder toevoegingen (in dit voorbeeld):
https://umap.openstreetmap.fr/nl/map/akkrum-nes-en-ommelanden_1003499
kijk maar liever niet naar de lange URL want die bevat allerlei instellingen die in de weg gaan zitten
eenmaal de korte URL ingevuld,
de breedte van het gewenste scherm – dat is even uitproberen – voor deze blogpost was 145% een goeie maat,
en de hoogte in pixels zonder px er achter
Voorbeeld blogpost is: https://blog.ferrie.audio/2023/12/cijfers-akkrum-nes/
check het resultaat
het is altijd slim om in verschillende browser even te checken om het beeld klopt met wat je voor ogen had
tot slot
maak een nieuwe backup – zodra alles werk zoals je wilt
