Met WordPress kun je pagina’s bouwen en content creëren zonder ooit zelf een HTML-bestand te hoeven uploaden, omdat de WordPress-core verschillende soorten ingebouwde content types bevat. Daarnaast heeft het WordPress-thema dat je gebruikt waarschijnlijk ook een aantal pagina-sjablonen die je meteen kunt gebruiken om een unieke website te maken.
Daarbovenop zijn er nog zat plugins voor het maken van WordPress landingspagina’s die je kunt gebruiken om een op maat gemaakte landingspagina te maken voor bezoekers die vanaf zoekresultaten, e-mailcampagnes, of zelfs social media op je site belanden.
Kortom, er is eigenlijk weinig noodzaak om zelf HTML-bestanden te uploaden naar WordPress, want alles wat je nodig hebt voor je website staat al voor je klaar. Desalniettemin kunnen er redenen zijn waarom je graag wilt weten hoe je toch een HTML-bestand uploadt naar WordPress, wat verder gaat dan het uploaden van een sjabloon voor een nieuw ontwerp.
Wat is een HTML-bestand?
HTML staat voor Hypertext Markup Language en is ontwikkeld door Tim Berners-Lee in 1990. Kort gezegd is HTML de code die gebruikt wordt om elektronische documenten op het internet te maken, ook wel bekend als webpagina’s. Het is zelfs zo dat elke pagina’s die je op internet ziet, gemaakt is met HTML-code.
De HTML-code op de pagina’s van je website zorgt ervoor dat de tekst en afbeeldingen van je content er op de juiste manier uitzien.
Zonder HTML zouden webbrowsers niet weten hoe ze de structuur van je website aan je bezoekers zouden moeten weergeven. Maar met de goede HTML-code – de basis van je webpagina’s – en een beetje CSS-code voor het toevoegen van wat ontwerpelementen, ziet je website er perfect uit voor bezoekers.
Wat is een HTML-sjabloon?
Nu weet je dat HTML de code is die voor de structuur van individuele webpagina’s zorgt.
Maar wat is een HTML-sjabloon?
Een HTML-sjabloon is een van tevoren ontworpen set van HTML-bestanden die dingen bevatten zoals tekst, afbeeldingen, en ondersteunende bestanden voor lettertypen en JavaScript. Anders gezegd is een HTML-sjabloon een vooraf gemaakt pakketje met HTML-code die je makkelijk naar je website kunt uploaden en meteen gebruiken.
Wanneer je een HTML-sjabloon gebruikt op je WordPress-website, kun je eenvoudig dit bestand uploaden, en vervolgens de tekst en afbeeldingen toevoegen die je wilt laten zien.
Het is belangrijk om te onthouden dat HTML-sjablonen iets anders zijn dan WordPress-thema’s:
- WordPress- thema’s: alhoewel jij de tekst en afbeeldingen toevoegt aan je thema, zorgt het thema voor het uiterlijk van je hele website. Veel veranderingen aan elementen binnen je thema zijn globaal, oftewel van toepassing op je gehele website.
- HTML-sjablonen: dit zijn onafhankelijke zip-bestanden die je individueel uploadt naar je website. Ze beïnvloeden alleen het uiterlijk van een enkele individuele webpagina binnen je website. In andere woorden, veranderingen die je maakt aan een HTML-sjabloon dat je al geüpload hebt, hebben alleen impact op die ene pagina.
Er zijn helaas nog veel mensen die niet het verschil kennen tussen thema’s en HTML-sjablonen, en die de termen “thema”(theme) en “sjabloon”(template) door elkaar gebruiken.
Waarom het nodig kan zijn om een HTML-bestand naar WordPress te uploaden
Er zijn een paar specifieke redenen waarom je wellicht een HTML-bestand wilt uploaden naar je WordPress-website:
- Je hebt een favoriet: als je een goed HTML-sjabloon gebruikte op een oude website en je het ook op een nieuwe website wilt gebruiken, wil je wellicht liever het sjabloon uploaden naar je nieuwe pagina dan weer helemaal opnieuw te moeten beginnen. Dit bespaart je een hoop tijd en zorgt ervoor dat de websites er identiek uitzien.
- Je wilt een aangepaste lay-out van een pagina: als je huidige WordPress-thema een bepaalde lay-out niet ondersteunt, kun je een HTML-bestand met het gewenste ontwerp uploaden en waar nodig aanpassen.
Als laatste kan het nodig zijn om je WordPress-website te verifiëren bij de Google Search Console, en wil je dat op de aanbevolen manier doen, waarbij je een Google HTML-verificatiebestand moet uploaden.
De manier waarop je website wordt weergegeven binnen zoekmachines, en zeker een grote zoals Google, speelt een grote rol in hoe succesvol je zult zijn als website-eigenaar.
Dat is dan ook de reden dat tools zoals Google Search Console bestaan. Met de Google Search Console krijg je de garantie dat Google je website zal indexeren en ranken in relevante zoekresultaten, met de hoop dat je misschien zelfs op de eerste pagina verschijnt.
Google Search Console geeft je ook informatie over je huidige SERPs (search engine result pages, de pagina’s met zoekresultaten) zodat je je SEO verder kunt optimaliseren, en nog meer mensen kunt laten doorklikken naar je website.
Het probleem is dat om Google Search Console te kunnen gebruiken, je je WordPress-website moet verifiëren. Het geval is dat één van de beste manieren om dit te doen is door het uploaden van een Google HTML-verificatiebestand.
Na dit alles, laten we nu eens kijken naar de verschillende manieren om een HTML-bestand te uploaden naar WordPress.
1. Methode: Zo upload je een HTML-bestand naar WordPress in het WordPress dashboard
De eerste methode voor het uploaden van een HTML-bestand naar WordPress die we zullen bespreken gaat via het WordPress-dashboard.
Je hebt alleen maar de back-end van je website en een HTML-sjabloon nodig om dit te doen, omdat je het bestand direct uploadt via een artikel, pagina of de mediabibliotheek.
Om een HTML-bestand direct via een artikel of pagina te uploaden, voeg je een Bestand-blok toe in de Gutenberg Editor. Daarna klik je op Uploaden om het bestand te uploaden.
Zo ziet het eruit wanneer je Gutenberg uitgeschakeld hebt en je de Classic Editor gebruikt. Klik gewoon op Media toevoegen en daarna op Uploaden om je HTML-bestand te uploaden.
Kies het HTML-bestand dat je wilt uploaden en klik daarna op Selecteren. Door dit te doen wordt de link naar het bestand toegevoegd aan het artikel of de pagina en wordt het bestand automatisch opgeslagen in je Media Library.
Je kunt het uploaden van je HTML-bestand naar een artikel of pagina ook overslaan en meteen uploaden naar je Media Library. Klik op Mediabibliotheek in het WordPress-dashboard, dan op Nieuwe toevoegen en zoek het HTML-bestand waar je het hebt opgeslagen (bijvoorbeeld je eigen computer, harde schijf of externe opslag)
Onthoud dat je wellicht een foutmelding krijgt wanneer je je HTML-bestand toevoegt via Gutenberg. Dit zou er zo uitzien:
Klik hier voor gedetailleerde instructies om de foutmelding ‘Sorry, dit bestandstype is uit veiligheidsoverwegingen niet toegestaan’ op te lossen.
2. Methode: Zo upload je een HTML-bestand naar WordPress door middel van een FTP-client
Het uploaden van HTML-bestanden via je WordPress-dashboard is de meeste eenvoudige methode. Maar voor grote sjablonen bestaande uit meerdere bestanden, is het beter om een FTP-client te gebruiken, bijvoorbeeld FileZilla.
Het gebruik van een FTP-client is ook erg handig wanneer je eerst lokaal op een test-site wilt werken voordat je de veranderingen implementeert op je live website. Dit voorkomt onnodige downtime op je live website als er iets misgaat.
Om te beginnen, maak altijd eerst een back-up van je website omdat je nooit zeker weet wat het HTML-bestand zou kunnen doen wanneer je het upload naar je website.
Daarna open je je FTP-client.
Nu moet je verbinding maken met je webhost account door je FTP-gegevens in te vullen. Deze informatie vind je meestal in het account van je webhosting. Als je het niet kunt vinden, neem dan even contact op met je host en dan zullen zij je helpen.
Als je de hosting van Kinsta gebruikt, log je eerst in op je MyKinsta account en klik je vervolgens op Websites in het dashboard, en vervolgens op Info om de benodigde gegevens te vinden.
Als je dit gedaan hebt, zul je je gegevens zien onder SFTP/SSH. Je hebt je gebruikersnaam, wachtwoord en poort nodig.
Dit is de informatie die je bij FileZilla moet invoeren:
- Host: de domeinnaam van je website, voorafgegaan door “sftp://”. Dus bijvoorbeeld: sftp://www.mijnsite.nl.
- Username: gebruikersnaam gevonden in je MyKinsta dashboard
- Password: wachtwoord vanuit je MyKinsta dashboard.
- Port: de poort die je gevonden hebt in je MyKinsta dashboard.
En zo ziet het er dan uit bovenaan het FileZilla-scherm:
Nadat je je gegevens hebt ingevoerd, klik je op Quickconnect.
Nu is het tijd om het HTML-bestand van je computer te uploaden naar WordPress. Begin door aan de rechterkant naar de root-map van je website te gaan (waar de wp-content map en wp-config.php bestand en dergelijke zich bevinden).
Ga vervolgens in de linkerkant naar het HTML-bestand dat je hebt opgeslagen. Als je dat gevonden hebt, klik je erop met de rechtermuisknop en selecteer je Upload om het aan je website toe te voegen. Volg deze korte tutorial om alle verborgen bestanden in Filezilla te zien.
Je zult vervolgens zien dat het bestand succesvol is geüpload naar WordPress. Om te controleren dat het zichtbaar is op je website, voer je de URL van je website in in je browser, waarbij je de naam van het HTML-bestand aan het eind toevoegt. Bijvoorbeeld, www.mijnwebsite.nl/html-bestand.
Als je dit doet, word je doorverwezen naar de nieuwe webpagina die je hebt gemaakt met het HTML-bestand.
3. Methode: Zo upload je een HTML-bestand naar WordPress door middel van cPanel
De laatste methode die we bespreken is met behulp van cPanel en de File Manager om een HTML-bestand te uploaden naar WordPress.
Begin door in te loggen in je hosting-profiel bij cPanel en naar je File Manager te gaan.
Als je in de File Manager bent heb je twee opties:
- Create a New Folder: maak een nieuwe map aan in de root-map van je website waarnaar je je HTML-bestand kunt uploaden.
- Upload to Root Folder Directly: in plaats van het aanmaken van een nieuwe submap, upload je het HTML-bestand direct naar de root-map van je WordPress-website. Als dat is wat je wilt, pak dan eerst het HTML-bestand uit waar je het hebt opgeslagen, verander de html map naar iets nieuws, pak het bestand weer in en upload het daarna naar WordPress. Als je dit niet doet zal het HTML-sjabloon je huidige thuispagina van je website overschrijven.
In dit voorbeeld maken we een nieuwe map aan, aangezien er wat extra stappen zijn die je dan moet maken.
Het maken van een nieuwe map en uploaden van een HTML-bestand naar WordPress
Ga eerst naar de root-map van je website (waar de wp-content map en wp-config.php bestand en dergelijke zich bevinden). Klik daarna op New Folder.
Geef je nieuwe map een naam, en klik op Create New Folder.
Dubbelklik op de map die je net hebt gemaakt, en klik op Upload om je HTML-bestand te selecteren.
Als je dit gedaan hebt, zul je je ingepakte HTML-bestand in de map zien.
Nu moet je je HTML-bestand uitpakken door erop te klikken met de rechtermuisknop en Extract te selecteren.
Wanneer je een pop-up krijgt, klik je op Extract Files om het proces af te ronden. Wanneer het HTML-bestand is uitgepakt, zul je alle verschillende bestanden zien die bij het sjabloon horen. Dit betekent dus dat je dingen zult zien als CSS, lettertype-bestanden, afbeeldingen en JavaScript.
Nu moet je alleen nog controleren dat het HTML-sjabloon en de bijbehorende bestanden zijn geüpload naar je website door de URL van je website in te typen in je browser en de naam van de nieuwe map aan het einde toe te voegen.
Als je nu een 404-fout krijgt, geen zorgen. Dit is een vrij normale fout bij WordPress en kun je makkelijk oplossen.
Als je server geen redirect ondersteunt en het index.php bestand wordt niet verwezen wanneer je de URL in je browser invoert, dan zul je een 404-fout zien na het uploaden van je HTML-bestanden.
Dit los je op door binnen de File Manager naar je .htaccess-bestand te gaan en erop te dubbelklikken. Voeg vervolgens de volgende code toe en sla je veranderingen op:
RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]Deze code verwijst naar je index.php-bestand zodat het geladen wordt in je browser.
Samenvatting
WordPress is het meest gebruikte Content Management Systeem, omdat het een website-eigenaar de flexibiliteit geeft om unieke website te maken, die zich onderscheiden. Dat het mogelijk is om een HTML-bestand te uploaden naar WordPress op één van de hierboven beschreven manieren laat weer eens zien hoe WordPress luistert naar de behoeften van website-eigenaren en ze de vrijheid geeft om een websites aan te passen zoals zij dat willen.
Daarnaast is het voor jou een goede vaardigheid om te weten hoe je een HTML-bestand kunt uploaden naar WordPress, mocht het ooit nodig zijn.
