Er zijn verschillende redenen te bedenken waarom je HTML naar WordPress wil uploaden en converteren. Het kan zijn dat je een oude, statische HTML site wil converteren en deze wil uitvoeren op het Content Management System WordPress. Ook bestaat de kans dat je alleen maar een plek nodig hebt om een HTML bestand op te slaan of te delen, iets waar WordPress in beide gevallen geschikt voor is.
Wisselen van HTML naar WordPress kan onproductief of zelfs intimiderend aanvoelen. Gelukkig zijn wij hier om je door het proces te begeleiden en ervoor te zorgen dat je alles leert wat nodig is om HTML bestanden te converteren en deze conversie zelf uit te voeren.
HTML is een simpele markup-taal en WordPress, hoewel het een krachtig platform is boordevol features, is relatief eenvoudig en intuïtief. Het converteren van HTML naar WordPress zou dan ook redelijk eenvoudig moeten gaan.
Blijf lezen om meer te weten te komen over de basisprincipes achter het converteren van HTML naar WordPress, samen met mogelijke scenario’s waarin je een dergelijke stap zou kunnen overwegen.
Voornaamste redenen om HTML te uploaden of om te zetten naar WordPress
Als je je afvraagt waarom je überhaupt zou overwegen om HTML naar WordPress te uploaden of converteren, is het goed om eens de volgende praktijkvoorbeelden te bekijken.
- Een oude HTML website converteren zodat deze op het WordPress systeem kan draaien. Misschien ben je wel helemaal verknocht aan het design of heb je geen zin om alles opnieuw te (laten) ontwerpen. Dit is belangrijk voor het behouden van het imago van je merk.
- Een enkele HTML webpagina of blogpost converteren en deze publiceren op je huidige WordPress site. Dit is vooral handig als je huidige thema niet over een custom pagina-indeling beschikt die jij wil.
- Een template voor een HTML website veranderen in een thema-indeling die op WordPress kan worden geïnstalleerd.
- Een HTML verificatiebestand uploaden om te bewijzen aan een zoekmachine of andere dienst dat je eigenaar bent van een website.
- Een HTML bestand opslaan op je site voor later gebruik.
- Je kan een link naar het bestand genereren om het te delen of zodat gebruikers kunnen downloaden naar hun eigen computers.
- Een HTML designcomponent genereren op een WordPress pagina of bericht, zoals een custom auteursbox of een e-mail aanmeldingsformulier.
- Je WordPress thema matchen met het design van een HTML website die je online hebt gevonden maar waar je geen toegang tot hebt.
Zoals je kan zien, zijn er veel redenen te bedenken waarom je een HTML bestand wil toevoegen aan WordPress en hangt het allemaal van je doel af. Het proces verschilt dus ook enorm. Het kan heel simpel zijn, zoals het uploaden van een HTML bestand naar een WordPress blogpost of pagina. Andere keren kan het in een langdurig proces uitmonden waarbij het converteren van een HTML website resulteert in het converteren van tientallen bestanden en kleinere taken, zoals het verhuizen van de content van je website, naast de HTML zelf.
In deze gids over het converteren en uploaden van HTML naar WordPress beginnen we bij de basics, namelijk het uploaden van een HTML bestand naar WordPress. Vervolgens gaan we in op de meer diepgaande vereisten voor het dupliceren of converteren van volledige HTML websites zodat ze functioneren op het WordPress systeem.
Ten slotte bespreken we de voor- en nadelen van geautomatiseerde HTML converters en welke tools je hiervoor kan gebruiken.
Lees verder om aan de slag te gaan met je eerste HTML-naar-WordPress upload of conversie!
Zo upload je een HTML bestand naar WordPress
De eerste stap in het leren van hoe je een HTML bestand omzet in een WordPress pagina of volledige website, is door te kijken hoe het uploadproces van HTML bestanden precies werkt.
Ga naar deze handleiding voor een diepgaande analyse van het uploaden van een HTML bestand naar WordPress.
We geven je hieronder een korte samenvatting van dat proces om ervoor te zorgen dat je op de goede weg bent om vervolgens verder te gaan naar de andere stappen die je verderop in dit artikel vindt.
Er zijn drie methodes om een HTML bestand naar WordPress te uploaden:
- Via het WordPress dashboard.
- Met een FTP client.
- Met behulp van cPanel.
Het uploaden van een HTML naar je WordPress dashboard wordt gedaan in de Mediabibliotheek. In de onderstaande tutorials behandelen we een aantal routes die je hiervoor kan nemen, voor nu is het goed om in je achterhoofd te houden dat het uploaden van een bestand via het WordPress dashboard kan worden gedaan op een pagina, bericht of rechtstreeks via de Mediabibliotheek.
Een FTP client (zoals FileZilla) linkt naar de live bestanden op je WordPress site en naar de bestanden op je computer. Hiermee kan je dus lokale bestanden overbrengen naar de bestanden van de gehoste site, zolang je bent ingelogd op de FTP client met de inloggegevens van je SFTP hosting.
Ten slotte biedt cPanel toegang tot een online bestandsmanager. Deze werkt net als een FTP client, waarmee je controle hebt over dezelfde bestanden. Het belangrijkste verschil is dat cPanel een online webapplicatie is, waardoor je je bestanden moet uploaden naar cPanel in plaats van dat je ze rechtstreeks in een FTP client van je lokale omgeving naar een live site overbrengt.
Elke methode heeft zijn voor- en nadelen. Kinsta’s Managed WordPress Hosting biedt geen cPanel, dus als je kleinere HTML bestanden wil opslaan of delen, dan is het uploaden via het WordPress dashboard de beste optie.
Als je op basis van een statische HTML website een geheel nieuwe website wil maken, dan is het gebruik van een FTP/SFTP client de goede keuze. De reden hiervoor is dat een FTP/SFTP client je een ongelooflijke hoeveelheid controle over de bestanden van je website geeft en je in staat stelt om alles rechtstreeks van je computer over te schrijven, van mediabestanden tot HTML mappen.
Zo voeg je HTML code toe aan een WordPress pagina of bericht
Er zijn een paar methodes om een HTML bestand rechtstreeks te uploaden naar een WordPress bericht of pagina. De eerste is het daadwerkelijk uploaden van een HTML zip of TXT bestand als een media-element. Deze methode is vergelijkbaar met het uploaden van een afbeelding naar de mediabeheerder, behalve dat je het via een bericht of pagina doet, en het een HTML bestand is in plaats van een afbeelding.
De reden waarom je dit zou doen is zodat mensen een link hebben waarmee ze het HTML bestand kunnen downloaden of als je het bestand zelf in de back-end van je site wil kunnen gebruiken.
Een andere mogelijkheid is om een HTML blok in een bericht of pagina te plakken om zo je eigen design-elementen toe te voegen. Je kunt bijvoorbeeld een eigen ontworpen aanmeldingsformulier invoegen met de hulp van HTML.
Beide methoden hebben verschillende doelen en processen om het uiteindelijke resultaat te bereiken.
Volg deze stappen om een HTML bestand toe te voegen aan een bericht of pagina.
Ga naar Pagina’s > Alle pagina’s in het WordPress dashboard. Wanneer je met een nieuwe pagina wil beginnen, ga dan naar Pagina’s > Nieuwe toevoegen.
Selecteer de pagina waar je het HTML bestand wil toevoegen. Je kunt ook op Nieuwe toevoegen klikken als je een nieuwe pagina wil aanmaken.
De stappen zijn praktisch hetzelfde wanneer je HTML bestanden aan een WordPress bericht wil toevoegen. We leggen je hier uit hoe je dit kunt doen voor een WordPress pagina maar wanneer je een HTML bestand aan een bericht wil toevoegen, ga dan naar Berichten > Alle berichten of Berichten > Nieuwe toevoegen.
De volgende stappen zijn afhankelijk van of je Gutenberg Block Editor of de Classic WordPress Editor gebruikt.
In het geval van Gutenberg kun je de knop met het + teken aanklikken om naar een nieuw visueel blok te zoeken. Zoek naar het Bestand blok door dit in het zoekveld in te typen of browse door de lijst met opties.
Selecteer het Bestand blok om het in het bericht of de pagina te plaatsen.
Tip: Als je Classic WordPress Editor gebruikt, dan hoef je alleen op Media toevoegen te klikken om je HTML bestand toe te voegen. Zo creëer je een link naar je bestand die gebruikers van je website op het front-end gedeelte kunnen downloaden.
In het geval van het Gutenberg blok, zou de Bestand module een Upload knop moeten tonen. Klik op Upload en selecteer het benodigde HTML bestand op je computer. Deze zijn over het algemeen opgeslagen als TXT bestanden, collecties van TXT bestanden in een map, of als Zip bestand.
Wanneer het bestand is toegevoegd aan de website, is deze zichtbaar in de vorm van een link. Elke bezoeker van jouw website kan nu op deze link, in de pagina of het bericht, klikken om het HTML bestand te zien of zelfs te downloaden op hun eigen computer.
Daarnaast wordt het bestand opgeslagen in jouw eigen mediabibliotheek. Wanneer je de URL van het bestand nodig hebt, kun je deze op elk gewenst moment opzoeken en ergens anders plaatsen. Je kunt WordPress eventueel ook gebruiken als opslag voor het bestand.
Wanneer je het bestand alleen wilt opslaan in WordPress en niet als beschikbare link voor gebruikers, dan kun je de gecreëerde link gewoon verwijderen in het bericht of de pagina.
Het is mogelijk dat je een foutmelding krijgt waarin staat dat het type bestand om veiligheidsredenen niet is toegestaan. Dit komt redelijk vaak voor, bekijk deze handleiding om de foutmelding te verwijderen en de meeste bestandstypen toe te staan in de mediabibliotheek van WordPress. Over het algemeen moet je hiervoor het wp-config.php bestand aanpassen of een plugin gebruiken om de foutmelding te elimineren.
Voeg HTML code toe aan het ontwerp van jouw pagina of bericht
Zoals we al eerder vermeldden: de kans bestaat dat je een HTML bestand aan een pagina of bericht toe wil voegen om deze van een eenvoudig ontwerp te voorzien.
De vorige methode is vooral geschikt voor het opslaan van HTML bestanden in WordPress en om een link toe te voegen zodat gebruikers een bestand kunnen downloaden.
Dit is een handige oplossing, aangezien je de mogelijkheid hebt om te kopiëren en te plakken of om je eigen HTML code aan te maken voor bijvoorbeeld formulieren, referenties, banners en meer.
Ga naar de desbetreffende pagina of het bericht en selecteer het deel waaraan je HTML code wil linken.
Klik op het + teken om de mogelijke blokken te bekijken. Vind het Aangepaste HTML blok door de zoekfunctie te gebruiken of blader door de lijst met opties.
Selecteer het Aangepaste HTML blok om het in de pagina of het bericht in te voegen.
Het blok bevat een leeg codeveld waarin je de beschikbare HTML code kunt plakken of intypen.
In deze tutorial plak ik een simpel contactformulier met een e-mailveld en een verzendknop.
Wanneer je de HTML code in het blok heb geplaatst, klik je op Bijwerken of Publiceren knop zodat het zichtbaar wordt op het front-end gedeelte van je pagina of bericht.
Wanneer je naar het front-end gedeelte van de pagina of het bericht gaat, zou de HTML moeten werken en het ontwerp of de functie die je aan de lay-out wil toevoegen zou zichtbaar moeten zijn.
In dit geval zie je een formulier waarin ik gebruikers vraag om hun e-mailadres achter te laten en er is een verzendknop.
De methode en het resultaat verschillen niet veel van Classic WordPress Editor, het enige verschil is dat je het Gutenberg blok niet kunt verslepen om het te plaatsen. In plaats daarvan ga je naar het tabblad Tekst (in plaats van het tabblad Visueel) en plak je de HTML code op de plek waar deze moet verschijnen op de pagina.
Zo upload je een HTML verificatiebestand naar WordPress
Een andere reden waarom je misschien een HTML bestand naar WordPress wil uploaden, is om de zoekoptimalisatie te verbeteren. Google, en sommige andere zoekprogramma’s, bieden consoles en webmaster-hulpprogramma’s aan om de prestaties van je website te bekijken en met behulp van analyses en rapporten de inhoud te verbeteren en eventuele problemen te verhelpen.
Google kan er alleen niet vanuit gaan dat jij de eigenaar bent van de website, alleen maar omdat je dit zegt. Dit is waar een HTML verificatiebestand van pas komt.
Simpelweg gezegd biedt Google een HTML bestand aan dat je naar je website moet uploaden. De eigenaar van de website is de enige die toegang heeft tot de bestanden van een website. Zo kan Google er zeker van zijn dat je niet probeert om de controle te verkrijgen over de website van iemand anders.
Het geüploade HTML verificatiebestand stuurt vervolgens een bericht naar Google om aan te geven dat het bestand is toegevoegd aan het desbetreffende domein en dat je inderdaad de eigenaar bent.
Het is van belang om te leren hoe je een HTML verificatiebestand uploadt, aangezien Google en andere zoekmachines niet de enigen zijn die je zullen vragen om je te identificeren of te bewijzen dat je de eigenaar bent van bestanden. Sommige externe plugins, directory’s en andere plugins vereisen ook een bewijs dat je geen indringer bent.
Redenen om een HTML verificatiebestand te uploaden
- Om voor zoekoptimalisatie tools te bewijzen dat jij de eigenaar bent van een website.
- Om eigenaarschap van online directory’s te bewijzen.
- Wanneer je wil linken met een integratie of een externe plugin, moet je er bewijzen zijn dat je eigenaar bent van jouw website.
Zoals je kan zien, zijn er meerdere soorten HTML bestanden. Over het algemeen hoef je verder niets te weten over de daadwerkelijke inhoud van het HTML bestand, alleen dat je deze nodig hebt om te linken met een dienst de service of om aan te geven dat jij de eigenaar bent van de bestanden van de website.
Een kleine opmerking: ons voorbeeld van het uploaden van een HTML verificatiebestand naar WordPress gebruikt de Google Search Console, omdat dit een van de meest voorkomende redenen is om een verificatiebestand te gebruiken.
Voordat je kan beginnen registreer je je website bij Google. Dit doe je door naar de Google Search Console tool te gaan. Klik op ‘Start Now’ en log in op je Google account of open een nieuw account bij Google.
Wanneer je ingelogd bent bij Google Search Console, zie je een lijst met eigendommen die je eerder al hebt beheerd of getest. Het is ook mogelijk dat je een lege lijst ziet.
Hoe dan ook, ga naar het Search Property tabblad. Je vindt deze linksboven op het dashboard.
In het keuzemenu selecteer je vervolgens de optie Add Property om door te gaan. Zo kun je website toevoegen aan de Google Search Console en aangeven dat jij de beheerder bent van de website.
Het volgende popupvenster vraagt om jouw type eigendom te selecteren. De Domain optie maakt het mogelijk om alle URL’s in alle subdomeinen te verifiëren. Dit is vaak de gemakkelijkste manier om een pagina te verifiëren, het vereist alleen wel DNS-verificatie. Deze kun je vinden in je hostingaccount.
In dit artikel hebben we het echter over het uploaden van HTML bestanden en dus bespreken we de optie van een URL prefix. Dit is een oudere, maar betrouwbare methode om te verifiëren dat jij de eigenaar bent van een website. Daarnaast helpt deze methode ook bij het identificeren van specifieke URL’s die je onder het adres invoert.
Neem de URL van je website en plak deze in het URL Prefix veld.
Klik op ‘Continue’.
Google Search Console vraagt nu om te verifiëren dat jij de eigenaar bent van de website.
Er zijn verschillende andere verificatiemogelijkheden maar dit is de optie om een HTML bestand te uploaden.
Klik op de knop die vraagt om het bestand te downloaden.
Bewaar dit HTML bestand op je computer in een map die je gemakkelijk kunt terugvinden.
De volgende stap is om het bestand te uploaden naar de WordPress website die je eerder in Google Search Console hebt geplakt.
Zoals we eerder al aangaven zijn er drie opties om een HTML bestand te uploaden naar WordPress.
De eerste methode, uploaden via het dashboard, is een gemakkelijke optie. Veel mensen raken in de war wanneer er een veelvoorkomende fout optreedt tijdens het uploaden van een HTML bestand naar de mediabibliotheek. Het is daarom vaak sneller om de uploads uit te voeren met een FTP client. Wanneer je echter van plan bent om te uploaden naar een WordPress dashboard en je ziet het bericht “Sorry, This File Type is Not Permitted”, gebruik dan dit stappenplan om het probleem op te lossen.
Er zijn nog twee andere mogelijke oplossingen: gebruik maken van een FTP/SFTP client of uploaden naar cPanel vanuit jouw hosting account.
Er is niks mis met hosting met cPanel, Kinsta biedt alleen geen cPanel aan. We focussen daarom vooral op het uploaden van het HTML bestand met gebruik van FTP/SFTP client. Een gedetailleerd stappenplan is te vinden het in artikel dat we hierboven hebben gelinkt maar hier is een verkorte versie om je verder te helpen.
Om te beginnen download FileZilla op je computer. Je kunt eventueel ook één van de andere FTP/SFTP clients proberen.
Tip: We raden aan om, voordat je hiermee begint, een back-up te maken van je website. Het komt niet vaak voor dat er problemen met een website ontstaan tijdens het overdragen van bestanden via FTP/SFTP, maar het is mogelijk. Je wilt natuurlijk voorkomen dat je je website laat crashen of dat je gegevens verliest. Maak daarom een back-upbestand.
Open FTP/SFTP client en voer jouw FTP/SFTP inloggegevens in om verbinding te maken met de host van de website.
De benodigde inloggegevens zijn onder meer:
- Host
- Gebruikersnaam
- Wachtwoord
- Poort
Waar vind je je inloggegevens voor jouw WordPress website?
Over het algemeen vind je deze in jouw hostingdashboard. Je kunt dus het beste contact opnemen met de host of deze zelf opzoeken.
Kinsta heeft een gemakkelijke manier om je FTP/SFTP inloggegevens op te zoeken. Ga naar het Sites tabblad in jouw Kinsta hostingpaneel en selecteer de desbetreffende website.
Onder het Info tabblad zoek je naar het SFTP/SSH gebied. Kopieer de overeenkomende inloggegevens naar FTP/SFTP client.
Je kunt bijvoorbeeld zien dat gegevens zoals Host, Gebruikersnaam, Wachtwoord en Poort netjes georganiseerd zijn in Kinsta.
Plak deze gegevens in FTP/SFTP client en klik op Quickconnect.
Als je een foutmelding krijgt, is dit waarschijnlijk omdat FileZilla standaard het FTP protocol gebruikt en niet het SFTP protocol. Om dit op te lossen, ga je naar File > Site Manager. Voeg een nieuwe site toe in FileZilla en selecteer SFTP. Plak de gegevens van je host in dat gebied en probeer nog eens om verbinden te maken.
Wanneer je verbinding hebt gemaakt met de host, verschijnen alle WordPress bestanden van de website zodat deze kunnen worden gewijzigd.
Traceer het rootbestand van jouw website, dat mappen bevat zoals wp-content en wp-admin.
Zoek het HTML verificatiebestand op (in dit geval heb ik het hernoemd om het gemakkelijker te kunnen vinden) in het deel met de bestanden van je computer. Je vindt deze bijvoorbeeld bij Downloads, als dat is waar jouw downloads van het internet naartoe gaan.
Sleep het bestand naar het de hoofdmap jouw website. Nu zou de FTP/SFTP client het moeten uploaden.
Het uploaden zou slechts een paar seconden moeten duren.
Wanneer het bestand zich tussen de bestanden van je website bevindt, ga je terug naar de Google Verification pagina en controleer je of het registreert dat jij de eigenaar bent van de website. Als het goed is, verschijnt er een succesbericht in de Google Search Console en kan je nu een aantal verschillende functies openen waarmee je onder andere het welzijn van de website kan analyseren en optimaliseren.
Handmatig een volledige HTML website converteren naar WordPress
Om een HTML website te converteren naar WordPress, kun je gebruik maken van een plugin/applicatie, handmatig de bestanden converteren of gebruik maken van een child-thema en de HTML bestanden overbrengen naar het child-thema.
De eerste mogelijkheid is het handmatig converteren van de HTML om een WordPress thema te maken.
Sommige vinden dit de meest lastige methode, maar anderen geven hier de voorkeur aan omdat je de volledige controle hebt over het proces en je niet afhankelijk bent van applicaties of plugins die soms onbetrouwbaar kunnen zijn. Volg de volgende stappen om handmatig een volledige HTML website te converteren naar WordPress.
Maak een map aan voor jouw thema en voeg de standaard themabestanden toe
Maak op je computer een map aan om alle basisbestanden van jouw thema op te slaan. Het maakt niet uit hoe je de map noemt maar geef het bij voorkeur een naam die je gemakkelijk kunt onthouden.
Creëer de volgende basisthema-bestanden:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
Je kunt deze openen in een code- of teksteditor aangezien je ze in de toekomst daar gaat bewerken. Op dit moment is het nog niet nodig om codes toe te voegen aan de bestanden. Je kunt ze dus gewoon in de map laten staan.
Tip: Je kunt beginnen door de bestanden als TXT bestanden op te slaan. Wanneer je dan de bestandsextensie verandert, zoals van .txt naar .php of .txt naar .css, dan past de computer de bestanden automatisch aan. Bijvoorbeeld, een .css extensie toevoegen verandert een bestand in een Cascading Style Sheet.
Zet de huidige CSS van jouw WordPress website over naar een nieuwe map
Als het goed is, is er al een thema geïnstalleerd op je huidige WordPress website. Als dit niet zo is, installeer dan een thema.
Je gebruikt de CSS van het huidige thema als basis en bouwt daarop voort in het style.css bestand van de bestanden van jouw website.
Kopieer de stylesheet-header van jouw WordPress website naar het nieuwe style.css bestand.
Het zou er ongeveer zo uit moeten zien:
/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/In dit voorbeeld maakt de site gebruik van het Twenty Seventeen thema. Als je gebruik maakt van een ander thema, dan zal de de stylesheet-header er iets anders uitzien.
Het is nu tijd om elementen van het oude thema te vervangen met informatie van jouw nieuwe thema.
Dit doe je door het volgende te vervangen:
- Theme Name: Het maakt niet uit hoe je dit noemt, maar het is handig om dit dezelfde naam te geven als de themamap.
- Theme URI – Hiervoor kan je de primaire URL van je website gebruiken.
- Author – Voer hier je eigen naam in of een andere naam die je liever gebruikt.
- Author URI – Maak hiervan een link naar de homepage.
- Description – Je kunt gebruik maken van een korte beschrijving die op de back-end van de WordPress website verschijnt.
Laat de rest zoals het is. De meeste andere elementen, zoals License en Tags zijn alleen als je het nieuwe thema wil toevoegen aan de WordPress Themabibliotheek.
Onthoud dat wat je zojuist hebt geplakt en bewerkt jouw thema header is.
Zoek de bestaande CSS van jouw HTML website. Kopieer en plak de CSS na de header in het nieuwe style.css bestand.
Sla het style.css bestand op en sluit het.
Verdeel je huidige HTML in verschillende stukjes
Over het algemeen maakt WordPress gebruik van PHP om bestanden, codes en media uit de database te halen. Een HTML website moet daarom in verschillende PHP bestanden worden verdeeld zodat het gecombineerd kan worden met de WordPress infrastructuur.
Dit klinkt misschien geavanceerd, maar je hoeft eigenlijk alleen het HTML document in verschillende stukken te delen en elk deel om te zitten in een PHP bestand.
Elk HTML bestand zal er anders uit zien maar het helpt om een visueel voorbeeld te hebben. We zullen een aantal HTML website templates laten zien ter demonstratie.
De volgende code is een goede optie om te gebruiken als vergelijking voor je eigen HTML bestand. Het is een simpele HTML webpagina met een header, menu-items, subheadings, een zijbalk en een footer. Je kan vergelijkbare code vinden in je index.html bestand.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2019 My Test Site</p>
</footer>
</div>
</body>
</html>Het volgende template is een ander voorbeeld om je eigen ontwerp op te baseren.
Zoals je ziet, is dit index.html bestand wat gecompliceerder maar het is nog altijd een redelijk bekende manier om een website op te bouwen.
Beide voorbeelden bevatten headers, contentgedeeltes, sidebars en footers. Waarschijnlijk heb je zelf een ander ontwerp en daarom zal je de volgende stappen een beetje moeten aanpassen.
Elke volgende stap heeft te maken met het bewerken en toevoegen van de WordPress bestanden die je eerder hebt aangemaakt. Hou echter het index.html bestand van je HTML website wel open. Deze zul je namelijk nodig hebben.
Het header.php bestand
In het HTML bestand dat je momenteel geopend hebt, zoek je naar het begin van het bestand en het eind van het contentgedeelte. Het belangrijkste contentgedeelte wordt over het algemeen aangegeven met een <div class=“main"> of <main> tag.
Kopieer en plak dit deel van het HTML bestand in het nieuwe header.php bestand.
Zoek daarna naar het gedeelte aangegeven met </head>.
Plak de volgende code daar vlak voor:
<?php wp_head();?>Dit stukje code is voor de meeste WordPress plugins nodig om te kunnen werken.
Het sidebar.php bestand
Zoek naar het <aside> gedeelte in je index.html bestand.
Alles met een <aside> en </aside> tag, inclusief de aside tags, kopieer je naar het nieuwe sidebar.php bestand.
In ons voorbeeld ziet dit er ongeveer zo uit:
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>Het footer.php bestand
Als je een simpele HTML website hebt, hoef je waarschijnlijk alleen nog maar je footer informatie over te zetten. Veel andere websites zijn wat gecompliceerder. Hoe dan ook, het is geen slecht idee om te eindigen met een aanpassing van de footer omdat het een belangrijk onderdeel is van je WordPress websitebestand.
In het index.html bestand, zoek naar en kopieer alle codes die na de </aside> (de sidebar) tag komen.
Nogmaals, het is mogelijk dat je meer content hebt na het sidebargedeelte maar voor een simpele HTML website hoeft misschien alleen een footer die moet worden overgezet.
In ons voorbeeld ziet de footer er ongeveer zo uit:
</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
</body>
</html>Laten we niet te hard van stapel lopen. Nadat je de footer code hebt gekopieerd naar het nieuwe footer.php bestand, zet je het <?php wp_footer();?> fragment vlak voor het </body> gedeelte. Dit zorgt ervoor dat de footer goed werkt met WordPress.
Hier volgt een voorbeeld van de <?php wp_footer();?> code die in het footerbestand is gezet:
</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>Vergeet niet om al deze nieuwe bestanden op te slaan in je themamap. Nadat je bijvoorbeeld de footercode in het footer.php bestand hebt gezet, klik je op de Save knop in je bewerkingsprogramma en sluit je deze af.
Nu alle basisbestanden af zijn, sluit je het originele index.html bestand van je website.
Koppel je header.php en index.php bestanden aan WordPress
Je hebt dit al aan je header.php bestand toegevoegd, maar er zijn nog een aantal extra stappen die je zal moeten nemen. Momenteel staat de call in de stylesheet nog in HTML maar deze moet worden aangepast aan de standaard WordPress PHP opmaak.
Ga terug naar het header.php bestand en zoek naar de <head> sectie.
We zijn op zoek naar de call voor de stylesheet. Dit ziet er ongeveer zo uit:
<link rel="stylesheet" href="style.css">Verwijder deze call en vervang hem met het volgende:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />Dit is het enige wat je aan het header.php bestand hoeft aan te passen. De call voor de stylesheet werkt nu met de WordPress opmaak, en niet met HTML.
Sla het header.php bestand op en sluit het.
Vervolgens open je het index.php bestand (niet het oude index.php bestand dat je eerder gebruikte maar het nieuwe index.php bestand).
Als het goed is, is het index.php bestand nog leeg.
Neem de volgende code over en kopieer en plak deze in het nieuwe index.php bestand. Laat ruimte over tussen de eerste twee rijen. Deze hebben een bepaalde functie, wat we later zullen uitleggen.
Deze rijen fungeren als calls naar jouw andere websitebestanden, zoals header.php, sidebar.php, en footer.php.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Het open gedeelte op de tweede rij is gereserveerd voor iets dat we The Loop noemen. Dit is een dynamisch proces in WordPress dat in de achtergrond wordt gebruikt om nieuwe berichten aan je website toe te voegen. In wezen laat het WordPress weten dat er meer content aankomt en dat het The Loop moet gebruiken om content toe te voegen. Je kunt hier meer over The Loop te weten komen.
Om The Loop toe te voegen, plak de volgende code in het gedeelte dat je eerder open hebt gelaten in je index.php bestand (meteen onder <?php get_header(); ?>).
<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>Het resultaat zou er ongeveer zo uit moeten zien:
<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Sla het index.php bestand op. Je kunt dit bestand nu ook afsluiten.
Nu dit gedaan is, is het WordPress thema, dat gebaseerd is op je originele HTML website, klaar om te uploaden naar WordPress.
Het nieuwe thema uploaden naar WordPress
De laatste stap is het uploaden van het thema naar je WordPress website. Een gemakkelijke methode is om de map van de website op te slaan als Zip bestand en deze te uploaden naar de WordPress themasectie zonder dat je een screenshot van de website toevoegt als referentie.
Het thema werkt prima zonder dat je een screenshot ter referentie toevoegt maar we raden aan om een screenshot bij te voegen zodat het gemakkelijker is om je thema’s te organiseren en te begrijpen welke momenteel in gebruik is op je website.
Met screenshot, oftewel schermafbeelding, bedoelen we een klein voorbeeld dat verschijnt voor alle thema’s die je op je WordPress dashboard hebt geïnstalleerd. Zelfs de thema’s die niet in gebruik zijn, zijn voorzien van een screenshot. Het is een vereiste dat je een screenshot hebt van een thema als je van plan bent om jouw thema te uploaden naar de WordPress Themabibliotheek.
Je hoeft niet per se je thema te uploaden maar het maken van screenshots helpt om de thema’s op orde te houden. Zoals je kan zien, is het redelijk lastig om je voor te stellen hoe een thema eruitziet als je geen voorbeeld beschikbaar hebt.
Het Twenty Seventeen Child thema heeft bijvoorbeeld geen screenshot, er is alleen een leeg beeld beschikbaar. Dit kan anderen in de war brengen.
Om een screenshot toe te voegen, open de oude HTML website in de browser en maak een screenshot van de homepage met het programma dat je gebruikt om screenshots te nemen.
Open je favoriete beeldbewerkingsprogramma en crop de screenshot tot 880×660 pixels. Dit zorgt ervoor dat de screenshot niet wordt uitgerekt of disproportioneel wordt afgebeeld wanneer je het toevoegt aan WordPress.
Sla de aangepaste versie van de screenshot op in de nieuwe themamap. Het hoeft niet opgeslagen te worden in een aparte map, je kunt het gewoon plaatsen naast de andere bestanden zoals header.php en footer.php.
Je hebt nu twee opties om je nieuwe WordPress thema te uploaden naar WordPress.
De eerste optie is door de bestanden te verslepen naar de wp-content/themes map via FTP. Wanneer je deze optie gebruikt, hoef je geen Zip bestand te creëren. Je kunt gewoon een FTP client zoals FileZilla gebruiken en de normale map verslepen naar de wp-content/themes map.
De andere optie is om een Zip bestand van de bestanden te maken en deze te uploaden naar het WordPress dashboard.
De eerste stap is om de volledige themamap te comprimeren tot een Zip bestand.
Vervolgens, op het WordPress dashboard, ga je naar Weergave > Thema’s.
Klik op de Nieuwe toevoegen knop.
Selecteer de Thema uploaden knop.
Klik op Kies bestand en zoek naar het Zip bestand op je computer. Selecteer het bestand zodat het zichtbaar wordt op het WordPress dashboard.
Klik op Nu installeren om het bestand naar WordPress te verwerken.Click Install Now to process the file into WordPress.
WordPress geeft aan wanneer het bestand wordt geïnstalleerd en wanneer dit succesvol is afgerond.
Klik op Activeren om af te ronden.
Het thema, samen met de screenshot, verschijnt nu in de lijst met thema’s als actieve thema. Je kunt nu op het front-end gedeelte van je WordPress website nu jouw originele HTML website zien als WordPress versie.
Onthoud dat geen enkele conversie van HTML naar WordPress hetzelfde is. Jouw versie is wellicht wat gecompliceerder dan wat we net hebben besproken. Over het algemeen zul je verschillende stappen moeten nemen om een exacte kopie van jouw HTML website te verkrijgen.
Je zult misschien widgetgebieden en opmerken moeten toevoegen of de titel en beschrijving van je blog aanpassen zodat deze werken in WordPress.
Er gaat veel werk zitten in het omzetten van een HTML website naar een WordPress website en je zult merken dat sommige veranderingen alleen mogelijk zijn met CSS opmaak.
Daarnaast legt deze tutorial niet uit hoe je bijvoorbeeld berichten of afbeeldingen kunt toevoegen. Dit kun je handmatig doen door de afbeeldingen te uploaden in de Mediabibliotheek en de URL elementen aan te passen.
Er zijn plugins om het importeren van content te automatiseren, maar de meeste zijn niet geschikt voor de nieuwe WordPress versies. Je kunt het proberen, maar verwacht er niet te veel van.
HTML naar WordPress converteren via een child-thema
Dit is een van de gemakkelijkste methodes om een volledige HTML website om te zetten naar WordPress. Je gebruikt hiervoor een van de bestaande gratis WordPress thema’s die je online kan vinden, je selecteert een favoriet en combineert deze met het ontwerp van je HTML website.
Je gebruikt het al bestaande WordPress thema als parent-thema. Vervolgens wordt de HTML website omgezet zodat deze werkt met WordPress en gelinkt aan het parent-thema als een child-thema. Als je vragen hebt over parent- en child-thema’s, bekijk dan hier onze gids over dit onderwerp.
In het kort: het parent-thema beheert de functionaliteit van jouw website terwijl het child-thema bovenop het parent-thema wordt gebouwd. Het parent-thema zou ook als een op zichzelf staand thema kunnen worden gebruikt, dit kan niet met een child-thema. We gebruiken het child-thema daarom om het ontwerp van parent-thema aan te passen terwijl we de functionaliteit en structuur van het parent-thema behouden.
We zullen uitleggen hoe je HTML omzet naar WordPress met behulp van een child-thema.
Selecteer een parent-thema
Allereerst selecteer je een thema dat je mooi vindt. Het thema dat je uitkiest, wordt jouw parent-thema en deze ga je gebruiken als fundering voor het ontwerp van je eigen website.
Bij voorkeur kies je een thema dat lijkt op het ontwerp van je oude HTML website. Een andere optie is om gebruik te maken van een WordPress framework of beginnersthema, aangezien beide soorten thema’s gebruikt worden als fundering voor een ontwerp.
Een goed thema om mee te beginnen is het Twenty Twenty thema of een ander standaard WordPress beginnersthema dat vernoemd is naar het jaar dat deze is ontworpen. We raden aan om langzaamaan terug te gaan in de tijd (Twenty Nineteen, Twenty Seventeen, enz.) en te kijken of er eentje tussen zit die het meest lijkt op jouw HTML ontwerp.
Als voorbeeld gebruiken we het Twenty Seventeen thema omdat het simpel is opgebouwd en de mogelijkheid biedt om het aan verschillende eenvoudige HTML ontwerpen aan te passen. Al deze thema’s zijn mooie uitgangspunten.
Om te beginnen, installeer het thema op jouw WordPres website.
Als je wil, kun je dit thema al activeren maar je gaat later een nieuw child-thema gebruiken met dit parent-thema als basis.
Maak een nieuwe map
Voor alle WordPress thema’s is het nodig dat ze worden opgeslagen in de bestanden van je website. Je moet daarom een nieuwe map aanmaken voordat het child-thema van de HTML website wordt aangemaakt.
We raden aan om de map naar het parent-thema te vernoemen en “-child” toe toe voegen aan het eind van de bestandsnaam.
We noemen de map in ons voorbeeld dus “twentyseventeen-child”.
Elke bestandsnaam werkt, zolang je de naam kunt onthouden en er geen spaties in zitten.
Configureer jouw stylesheet
Voor elk child-thema zijn stylesheets benodigd die in de themamap worden opgeslagen.
Maak een tekstdocument aan en noem deze style.css. Sla het op in de themamap en kopieer de volgende code naar dit tekstbestand:
/*
Theme Name: Twenty Seventeen Child
Theme URI: http://examplesite.com/twenty-seventeen-child/
Description: Twenty Seventeen Child Theme
Author: Jane Doe
Author URI: http://examplesite.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-seventeen-child
*/Vergeet niet om de elementen te vervangen om ze aan te passen naar jouw website. Het is mogelijk dat je dingen zoals, Theme Name, Theme URL, Author, Template en een aantal andere elementen moet aanpassen om ervoor te zorgen dat deze overeenkomen met jouw bestandsnamen. Dit doe je op een vergelijkbare manier als de stappen die we eerder hebben gezet in de sectie “Handmatig een volledige HTML website converteren naar WordPress”, waar we uitleggen wat elke rij betekent.
De belangrijkste is de Template tag. Deze moet worden vernoemd naar het parent-thema zodat het child-thema goed functioneert.
Maak een functions.php bestand
Als je alleen de stylesheet gebruikt voor de website en het child-thema activeert, dan heb je een HTML website zonder styling. Maar we willen natuurlijk wat elementen toevoegen zodat het eruit ziet als zoals we graag willen. Alle stylingelementen gaan we overnemen van het parent-thema.
Hiervoor is een functions.php bestand nodig zodat we de stylingelementen van het parent-thema kunnen kopiëren naar het child-thema.
Maak een nieuw bestand aan, sla dit op als functions.php en plaats het in de themamap.
Om het bestand te activeren, voeg een PHP tag toe en open deze. Voeg ook een code toe die WordPress een seintje geeft dat je de styling van het parent-thema gebruikt.
<?php
function child_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );Een ander voordeel van dit stukje code is dat je in de toekomst gemakkelijk het design voor je website kunt aanpassen door middel van je child-thema.
Activeer het nieuwe child-thema
Het is nu tijd om je child-thema te activeren.
Een mogelijke manier om het child-thema te activeren, is door de map aan het wp/content/themes bestand in je WordPress bestanden toe te voegen. Hiervoor gebruik je een FTP/SFTP client.
Je kunt de map ook opslaan als zip-bestand en het thema uploaden via Weergave > Thema’s > Nieuwe toevoegen.
Klik op Thema uploaden.
Klik op Kies bestand en zoek naar het Zip bestand van het child-thema op je computer.
Wanneer het is geüpload, klik op Nu installeren.
Klik op Activeren.
Als het goed is, verschijnt nu het Twenty Seventeen Child thema (of het thema dat jij gebruikt) en is die geactiveerd als jouw hoofdthema.
Welke methode je ook hebt gebruikt om het child-thema te activeren, als het goed is ziet jouw WordPress website eruit als jouw parent-thema. In andere woorden, het is een exacte kopie van het parent-thema.
Tip: Het is mogelijk om een screenshot van het nieuwe thema toe te voegen maar je kunt er ook voor kiezen om geen voorbeeld te hebben. In de sectie “Handmatig een volledige HTML website converteren naar WordPress” nemen we door hoe je een screenshot toevoegt aan het thema.
HTML bestanden toevoegen
Het uiteindelijke doel is om een website te maken die eruitziet als jouw originele HTML website en niet zoals het parent-thema.
De laatste stap is dus het kopiëren van de inhoud van jouw HTML website naar je nieuwe WordPress website. Over het algemeen zal je deze stappen handmatig moeten uitvoeren. Zoals we al eerder zeiden, er zijn een aantal plugins die automatisch de inhoud overzetten. Maar vaak zijn deze plugins niet up-to-date met de nieuwe WordPress versies dus het kan een risico zijn om deze te gebruiken.
Wat is een HTML-naar-WordPress-converter? (en wat zijn de opties?)
Een HTML-naar-WordPress-converter neemt de stappen die we net benoemden en maakt deze gemakkelijker of voltooid ze allemaal voor je. Je kunt ervoor kiezen om een HTML-naar-WordPress-converter te gebruiken wanneer je geen tijd hebt of de kennis en ervaring mist om deze conversie handmatig uit te voeren.
Er zijn allerlei verschillende soorten converters. Het is belangrijk om te onthouden dat niet alle converters een goed alternatief zijn voor het handmatig omzetten van HTML naar WordPress.
De verschillende soorten converters zijn:
- externe softwareconverters, zowel online and lokaal
- WordPress plugins
- een persoon, bijvoorbeeld een ontwikkelaar
Hier is wat extra informatie voor als je op zoek gaat naar een converter. De externe softwareconverters of applicaties zijn vooral geschikt voor gemakkelijke taken. Je maakt een Zip bestand van de HTML bestanden van jouw website en uploadt deze naar de converter. De meeste externe converters zijn beschikbaar als online applicatie, je kunt ze simpelweg in je browser openen en klikken op Upload.
We geven de voorkeur aan deze applicaties wanneer het gaat om een simpele conversie. Als je een standaard HTML website hebt en deze wil omzetten naar WordPress, dan is dit waarschijnlijk een gemakkelijke oplossen maar het is geen garantie dat dit vlekkeloos verloopt.
Als het gaat om WordPress plugins die HTML omzetten naar WordPress, dan zal je wellicht moeite hebben om een plugin te vinden die een volledige HTML website en de desbetreffende bestanden omzet naar WordPress. Er zijn een aantal plugins beschikbaar maar geen van deze zijn up-to-date met de nieuwere versies van WordPress en we raden af om gebruik te maken van een verouderde plugin.
Enkele plugins bieden features die benodigd zijn voor het uploaden van standaard bestanden, waardoor het gemakkelijker wordt om een FTP transfer uit te voeren of wanneer je bezig met de back-end van je hostingaccount. Vaak geven plugins alleen de mogelijkheid om bestanden individueel te uploaden en dus is dit geen handige manier voor als je bezig bent om een grote website om te zetten.
En dan tot slot de laatste methode: personen die het werk doen dat een HTML-naar-WordPress-converter normaal gesproken doet. Het zal het proces zeker vergemakkelijken door een expert te hebben die kan helpen en de conversie voor je uitvoert. Het inhuren van iemand om je website om te zetten verlaagt de kans dat je in de problemen komt en het geeft je ook de mogelijkheid om iemand vragen te stellen als er iets misgaat.
De beste pluginopties en andere tools om HTML naar WordPress te converteren
Zoals we net benoemden, zijn er verschillende soorten HTML-naar-WordPress-converters. Er bestaan geen specifieke WordPress plugins die niet of verouderd zijn of niet meer werken. We hebben wel een aantal favoriete converterplugins die kleine conversie taken kunnen uitvoeren. Ook zijn er een aantal online applicaties en handmatige opties die van pas kunnen komen bij gecompliceerde HTML naar WordPress conversietaken.
De voor- en nadelen van een geautomatiseerde HTML-naar-WordPress-converter plugin of applicatie
Een geautomatiseerde HTML-naar-WordPress-converter klinkt natuurlijk fantastisch maar dit is niet altijd de beste oplossing. Bekijk eerst even de voor- en nadelen voordat je besluit om gebruik te maken van een applicatie of plugin die gemaakt is voor het dupliceren of omzetten van HTML.
Voordelen
- Je hoeft geen nieuwe websitebestanden aan te maken, vaak worden deze voor je gemaakt.
- Veel converters geven je de mogelijkheid om HTML elementen op te breken en te bepalen welke bij de juiste WordPress bestanden horen.
- Je kunt een oude HTML omzetten naar een thema en deze gebruiken voor meerdere website.
- Voor sommige plugins of applicaties is alleen een URL benodigd om een nieuwe website of nieuw thema aan te maken.
- Andere plugins of applicaties bieden de mogelijkheid om een website te dupliceren die niet van jou is, zodat je deze als basis kunt gebruiken voor een ontwerp dat je mooi vindt.
Nadelen
- Vaak zul je nog steeds handmatig werk moeten uitvoeren om inhoud, zoals blog posts en foto’s, over te zetten
- Je zal waarschijnlijk zelf moeten uitzoeken hoe je handmatig de links van de oude website kan overzetten.
- Deze converters zijn niet altijd up-to-date. Eén van de beste converters was een WordPress plugin maar we hebben deze niet eerder benoemd omdat de plugin helaas niet meer in gebruik is.
- Je zult merken dat sommige converterapplicaties grote bestanden niet aankunnen.
Nu je een beter beeld hebt van de voor- en nadelen van een geautomatiseerde HTML converters, laten we eens kijken naar onze favoriete geautomatiseerde converter applicaties en plugins.
WP Site Importer
Hoewel de WP Site Importer tool allerlei soorten inhoud en bestanden van oude of externe websites extraheert en importeert, kun je er zeker van zijn dat één van deze elementen HTML is. Kort gezegd biedt de WP Site Importer je de mogelijkheid om elke website om te zetten naar WordPress door inhoud zoals afbeeldingen, menu’s en pagina’s uit de HTML website en bestanden te halen. De WP Site Importer repareert links die niet meer werken zodat je deze niet hoeft aan te passen of handmatig nieuwe moet toevoegen. Ook behoudt het de SEO informatie, inclusief metadescriptions en keywords, die je via de vorige website hebt opgebouwd.
Deze converter bespaart je tijd en geld omdat er geen developerskosten zijn en het mogelijk maakt om met één klik HTML en inhoud om te zetten. Daarnaast ruimt het ook je HTML op door de HTML bron op te schonen en opnieuw te formatteren. Hierdoor zijn je HTML bestanden meer geschikt voor WordPress en het laat aan Google zien dat je met opgeschoonde codes werkt, wat je weer een boost geeft in je SEO.
De WP Site Importer tool functioneert ook als WordPress plugin. Zo kun je de plugin direct van het dashboard downloaden en de features activeren.
WP All Import
De WP All Import plugin is één van de snelste en gemakkelijkste tools voor het uploaden van XML bestanden die HTML data bevatten. De plugin geef je de mogelijkheid om content van een vorige website over te zetten naar een mogelijke demo website die gebouwd is met simpele HTML of een aantal HTML bestanden die je wilt dupliceren en verplaatsen naar een nieuwe WordPress website.
Deze conversie bestaat uit slechts vier stappen en je krijgt toegang tot een prachtige drag-and-drop interface waar je de conversies en importen kunt beheren. Daarnaast biedt de WP All Import plugin je de mogelijkheid om URL te importeren van externe websites. Het is daarom niet nodig om het wachtwoord te hebben of de beheerder te zijn van een website om die bestanden over te zetten en mogelijk elementen in WordPress van die website weer te geven.
Een conversie van een volledige website zal waarschijnlijk lastig worden met deze plugin. Maar het is het waard om het te proberen, zeker als het gaat om een simpel HTML bestand. Tot slot ondersteunt deze plugin HTML conversies voor elementen zoals WooCommerce producten en WordPress pagina’s. Er is een premium versie, met meer geavanceerde functies, beschikbaar en een premium klantenservice die hulp kan bieden bij het maken van deze conversies.
HTMLtoWordPress.io
De HTMLtoWordPress.io online applicatie is één van de meest populaire oplossingen om een HTML bestand om te zetten naar WordPress. Wat de HTMLtoWordPress.io tool zo bijzonder maakt is dat het vooral geschikt is voor conversies van volledige websites, websites die gebouwd zijn met HTML.
Het enige dat je hoeft te doen voor een snelle conversie, is naar de homepagina te gaan en het Zip bestand van je HTML daar uploaden. De applicatie zet automatisch HTML om naar WordPress en daarom heb je geen codeerskills nodig en hoef je niet te rommelen met een FTP client.
Je krijgt ook een voorbeeld te zien van je nieuwe WordPress website voordat je het proces afmaakt en de site publiceert op het internet. De inhoud en afbeeldingen van je website blijven ook behouden. Deze kun je aanpassen via de Simple Live Editor applicatie en samen met JavaScript en CSS zou het zonder problemen naar die afbeeldingen moeten verwijzen. Over het algemeen is dit een solide oplossing wanneer je meerdere HTML website moet converteren. Een extra bonus is dat je classes kunt toevoegen aan je HTML zodat je gebruik kunt maken van geavanceerde WordPress features.
Pinegrow Theme Converter for WordPress
De Pinegrow Theme Converter is een unieke webdesigntool omdat het een HTML websitemap kan omzetten naar een volledig WordPress thema. Deze thema converter uploadt je bestanden en geeft je een voorbeeld van de WordPress website in een visuele interface. Nadat het uploaden is voltooid, kun je op de verschillende elementen van de pagina klikken om elk item slimme acties toe te wijzen. Deze zijn geïntegreerd met WordPress, dus wanneer je acties toewijst, voegt het de juiste WordPress functies toe aan de aangepaste HTML structuur en stijl.
Wanneer je hebt besloten welke acties te wilt gebruiken en de bestanden hebt opgeslagen, heeft Pinegrow ook een optie voor het exporteren van het project naar standaard WordPress PHP bestanden, welke kunnen worden geüpload naar een WordPress installatie om deze in het echt uit te testen. Daarnaast zorgt het importsysteem er ook voor dat inhoud zoals afbeeldingen en video’s met succes kunnen worden overgebracht.
We waarderen vooral de mogelijkheid om via Pinegrown wijzigingen aan te brengen. Het enige wat je hoeft te doen, is om op Update te klikken en de nieuwe versie naar je WordPress thema te verzenden zonder dat je allerlei geavanceerde codes moet wijzigen of de website moet aanpassen in WordPress.
Eigenlijk is dit geen plugin. WordPress plugins worden niet gebruikt om een HTML bestand om te zetten naar een WordPress thema. Pinegrow is een softwareprogramma dat gedownload kan worden als Mac, Windows en Linux versie. Van de prachtige visuele interface tot de mogelijkheid om gemakkelijk te uploaden, de Pinegrow software lijkt ons één van de beste opties om een volledige HTML website om te zetten naar een WordPress thema.
Jekyll
Jekyll is een gratis HTML-naar-WordPress-converter dat simpele tekstbestanden omzet in een echte website. Het project is gratis te downloaden op GitHub. Met deze converter zijn databases en comment moderation niet nodig. In plaats daarvan kun je je concentreren op je inhoud en het overbrengen of converteren van je bestanden met HTML, CSS en markdown.
Een interessant element van Jekyll is dat het zeer geschikt is voor HTML designs die gericht zijn op blogs. Het voegt inhoud, zoals pagina’s, posts en permalinks, samen zodat de volledige blog kan worden overgezet en behouden. Ook creëert het aangepaste lay-outs, categorieën en tal van andere items.
Je kunt de Jekyll converter installeren op macOS, Ubuntu, Windows en zelfs op andere Linux systemen. Al met al is Jekyll een vrijwilligersproject met verschillende bronnen, zoals thema’s, plugins en handleidingen om je kennis te testen en je te helpen een HTML ontwerp om te zetten in iets moois.
Vooral de integraties met e-commerce tools, zoals MemberSpace en formulier applicaties zoals Getform, springen eruit. Er zijn veel verschillende integraties maar dit is alleen maar bewijs hoeveel mogelijkheden je hebt met een website nadat je deze van HTML naar WordPress hebt omgezet.
Theme Matcher
Theme Matcher is eigenlijk geen HTML bestandsconverter maar een extractor van HTML bestanden van externe websites. Het genereert prachtige WordPress thema’s nadat je een URL van je eigen website of van een HTML van een website die je niet beheert, hebt ingevoerd.
Het idee achter deze converter en thema generator is of om je eigen HTML website om te zetten naar een volledige WordPress website, of om een thema te maken aan de hand van een ontwerp dat je ergens anders op het web hebt gezien.
Je kunt bijvoorbeeld naar je favoriete webwinkel gaan en besluiten dat jij jouw design wilt baseren om hun format en structuur. Theme Matcher produceert een volledige nieuwe thema voor jouw website. Deze moet vanwege copyright natuurlijk wel iets worden aangepast maar het vormt een mooie basis om mee te beginnen.
Je kopieert en plakt de URL van de website in het Theme Matcher veld en verzoekt het om een thema voor je te creëren en om de layout van de website om te zetten in inhoud voor WordPress. Veel van de conversie van HTML naar WordPress speelt zich af op de achtergrond en het is daarom belangrijk dat je goed aangeeft om welke WordPress gebieden het gaat zodat zo dicht mogelijk bij een echt WordPress thema zit. Wanneer dit gedaan is kun je het thema downloaden en uploaden naar je WordPress CMS.
Wanneer jouw HTML website niet online staat en je daarom de URL niet kan invoegen, dan geeft Theme Matcher je de mogelijkheid om een Zip bestand van je HTML pagina te uploaden voor je de rest van het proces doorloopt.
Import Into Blog
De Import Into Blog website is een online applicatie dat HTML en andere bestanden van jouw website pakt en deze omzet naar een WordPress website. Er zijn verschillende opties beschikbaar, zoals het creëren van een downloadbaar XML bestand om te importeren naar je WordPress website. Je kunt er ook voor kiezen om het uiteindelijke resultaat te downloaden als WordPress thema, deze te uploaden naar WordPress en om het de complete website te zien.
Ook is automatisch herstel voor websites beschikbaar met de ImportIntoBlog tool. En niet te vergeten, alle interne links worden herschreven zodat deze op je nieuwe website naar de juiste pagina’s verwijzen. Het overgrote deel van de inhoud van de website wordt automatisch opgezet en je kunt het design en de stijl van het thema aanpassen voordat je deze exporteert. Deze tool werkt het best voor vaste HTML bestanden of een URL. Het beheert CSS bestanden en JavaScript en geeft je de mogelijkheid om de complete opbouw van je website te bekijken zodat je ervoor kan zorgen dat deze goed functioneert.
HTML to WordPress Converter
De HTML to WordPress Converter is een andere oplossing die HTML websites neemt en deze omzet in WordPress thema’s. Er is een veld waar je de URL van een website in kunt plakken waarna je op Generate Theme klikt. Je kunt kiezen welke inhoud en sidebar gebieden je voor WordPress wil gebruiken zodat jouw pagina’s en posts op de juiste plek eindigen en dat je de benodigde data van de vorige HTML website overneemt. Het ziet er naar uit dat de inhoud goed is overgezet maar we raden aan om voor de zekerheid te checken of alle foto’s en andere media-elementen goed zijn overgekomen. Eventueel zal je er een aantal via WordPress moeten uploaden.
Deze applicatie produceert een thema en geen volledige website. Je zal zelf je WordPress website moeten activeren en deze ergens hosten. Je downloadt het thema van deze tool, een thema dat er exact zo uitziet als de oude HTML website. Onthoud dat sommige elementen niet werken zoals je ze eerst had maar uit onze testen blijkt dat deze tool zeer handig is voor het behouden van de structuur en format van een website.
Het schijnt dat de developers van de HTML to WordPress Converter tool ook gratis CSS aanpassingen bieden wanneer het resultaat niet overeenkomt met het originele plan.
PHP Simple HTML DOM Parser
De PHP Simple HTML DOM Parser voltooit de benodigde stappen wanneer je een HTML bestand upload naar WordPress. Deze tool kan worden gebruikt voor het vinden, extraheren en aanpassen van HTML elementen op je website of in een HTML bestand. Hiermee kun je errors identificeren en deze repareren voordat je ze omzet naar een WordPress website. Ook kun je deze tool gebruikt om HTML elementen, die onderdeel uitmaken van je huidige WordPress website, aan te passen.
Je kunt de PHP Simple HTML Dom Parser tool gratis downloaden via de SourceForge website, waar je ook reviews kunt lezen en om hulp vragen als dat nodig is.
Het inhuren van een developer
WP Geeks, WP Online Support en Acclaim bieden allemaal een betaalbare service voor ieder die liever niet zelf aan de slag gaat met een conversie, of voor wie de eerder besproken geautomatiseerde tools geen oplossing bieden. Het inhuren van een developer lijkt een logische oplossing wanneer je niet in het bezit bent van de benodigde kennis en ervaring om het proces zelf uit te voeren en vaak bespaart het tijd en soms zelfs geld.
Samenwerken met een gespecialiseerde developer betekent dat je niet zelf aan de slag hoeft om een nieuwe website op te bouwen vanuit HTML bestanden. Het wordt wordt overgenomen door mensen die hier ervaring mee hebben en het geeft je de mogelijkheid om de juiste hulp te vinden, vragen te stellen en verzoeken in te dienen dan wanneer je gebruik maakt van een online applicatie die misschien een paar developers in dienst heeft.
Ook geeft dit je de mogelijkheid om te bepalen welke features je wilt behouden. En je bent gegarandeerd van een goedlopende website die functioneert zoals de bedoeling is.
We begrijpen dat het inhuren van een developer die gespecialiseerd is in het omzetten van HTML naar WordPress niet in ieders budget past maar het is het waard om te overwegen wanneer je een probleem hebt of wat geld over hebt.
HTML naar WordPress converteren met een geautomatiseerde app of plugin
Wanneer je vragen hebt over het gebruik van één van de eerdergenoemde geautomatiseerde HTML-naar-WordPress-converters, dan is hier een voorbeeld van het gebruik van de WP Site Importer te vinden. Dit is een betrouwbare oplossing en het is een externe WordPress plugin die gebruik maakt van veel verschillende features van andere geautomatiseerde HTML-naar-WordPress-converters.
Om te beginnen, download, installeer en activeer de WP Site Importer plugin op je WordPress dashboard. Eerst download je het Zip bestand van de website van de developer en schrijf je je in voor een gratis proefperiode. Er is ook een mogelijkheid om gebruik te maken van een van de premium abonnementen. Klik hier als je vragen hebt over het installeren van een WordPress plugin.
De WP Site Importer plugin heeft verschillende import tools in de aanbieding voor enkele pagina’s en posts maar ook voor volledige website en extra benodigde elementen om een project te voltooien, zoals bijvoorbeeld afbeelding lokalisatie en interne link modificaties.
We zullen een aantal van de features doornemen, te beginnen met een HTML pagina. Op het WordPress dashboard, ga naar Site Importer > Import Single Page.
Het overgrote deel van de standaard settings in de plugin staan al klaar, wat betekent dat je zelf weinig hoeft te veranderen. Behalve wanneer je natuurlijk iets wilt aanpassen, zoals bijvoorbeeld een pagina importeren als post of het verwijderen van bepaalde afbeeldingen. Neem rustig de tijd om alle plugin settings even te bekijken zodat je weet welke voor jou van toepassing zijn.
Het enige wat je hoeft te doen voor het importeren van een ‘single-page’ is het invoegen van de URL voor de plugin om deze te scannen.
Tip: Het uploaden van bestanden is alleen mogelijk voor het tegelijk omzetten van meerdere pagina’s.
Klik op Import Page om verder te gaan.
De plugin geeft aan of deze stap succesvol is voltooid en voorziet van een link om een voorbeeld te bekijken van de nieuwe WordPress pagina’s. Eventueel kun je deze nog aanpassen.
Vervolgens ga je de menu’s van de HTML website overzetten.
Om dit te doen, ga je naar Site Importer > Import Menus.
Het proces van het importeren van een menu is te vergelijken met het converteren van een bestand omdat het vraagt om een URL. Je kunt hier ook bepalen wat bijvoorbeeld de dichtheid en de grootte van het menu moet zijn.
Klik op Identify Menu om door te gaan.
Elk menu-item verschijnt nu in een lijst. Als je meerdere menu’s had op je HTML website, dan zul je dus ook een aantal menu’s zien.
Bepaal welke menu’s je wilt importeren en geef elk menu-item een naam. Klik vervolgens op Import Menu.
Nadat de WordPress menu’s zijn geïmporteerd, kun je de locatie van het menu configureren.
Op het dashboard, ga naar Weergave > Menu’s.
Creëer een menu, geef het een naam en bewaar het in WordPress. Als het goed is, zie je het geïmporteerde menu verschijnen.
Klik het Locaties beheren tabblad aan en lokaliseer het geïmporteerde menu in de lijst. Vervolgens plaats je het nieuwe menu op de gewenste plek.
Vergeet niet om op Wijzigingen Opslaan te klikken wanneer je klaar bent.
Een ander onderdeel van een HTML website importeren naar WordPress is het lokaliseren van afbeeldingen. Om dit proces te voltooien, ga je naar Site Importer > Localize Images.
Over het algemeen kun je de standaard settings voor het lokaliseren van afbeeldingen gebruiken.
Klik op de Next knop.
Je ziet een lijst met de afbeeldingen die worden overgezet van de vorige website.
Selecteer de afbeeldingen die je wilt lokaliseren en klik op Next.
Binnen enkele seconden voegt de plugin alle afbeeldingen aan je WordPress Mediabibliotheek toe en geeft ze een URL van de nieuwe website. In de Mediabibliotheek kun je nagaan of dit is gebeurd.
Een ander onderdeel van een HTML conversie is het updaten van de interne links. Het komt vaak voor dat het overzetten van een website resulteert in gebroken links en problemen met de URL structuren.
Deze zul je moeten repareren. Om hiermee te beginnen ga je naar Site Importer > Update Internal Links.
De volgende pagina legt uit hoe je oude links kunt vervangen met versies van de nieuwe website en hoe je sub-directory’s kunt toevoegen voor een vriendelijke gebruikerservaring op de URL van de WordPress website.
Het enige wat je hoeft te doen, is te klikken op Update Links. De plugin voert het werk verder uit.
Als je van plan bent om een volledige HTML website (in plaats van een enkele pagina) te converteren, ga dan naar het Import Multiple Pages tabblad in het Site Importer menu.
Dit is ook een handige optie voor ieder die geïnteresseerd is in het uploaden van lokale websitebestanden in plaats van het kopiëren van een bestaande URL.
De Multiple Pages Wizard heeft velden waar je een URL kunt invoegen en HTML bestanden van een website kunt uploaden.
Bepaal welke optie het beste is voor wat je wilt doen.
Wanneer de HTML website is geconverteerd en geïmporteerd, dan zie je een lijst met URL’s verschijnen op je WordPress website. De pagina’s die je niet nodig hebt, kun je na de import verwijderen. Er zijn ook een mogelijkheden om posts met afbeeldingen te importeren en deze in te stellen als niet-gepubliceerd.
De laatste stap toont een volledige lijst met de webpagina’s die zijn geconverteerd van de HTML website naar het WordPress systeem. Je kunt nu klikken op Edit of Preview om verder te gaan met het aanpassen van de pagina’s van jouw website.
Onthoud dat een conversie zoals deze niet meteen resulteert in het exacte ontwerp van jouw HTML website. Je zult onder andere de stylesheet moeten importeren en de codes van de website of pagina’s eventueel moeten aanpassen.
Samenvatting
Van HTML naar WordPress overstappen, vereist wat werk maar is het zeker waard. Veranderen van HTML naar WordPress kan ook helpen bij kleine taken, zoals het verifiëren van het eigenaarschap van een website of het implementeren van een eenvoudige HTML module.
Er zijn zoveel verschillende mogelijkheden als het gaat om het uploaden van HTML bestanden en conversies. Onthoud dat je vaak een groot deel van het werk kan uitvoeren met een geautomatiseerde HTML converter. Vervolgens zul je handmatig nog wat details moeten aanpassen maar met een combinatie van de juiste tools en kennis kun je bijna elke HTML website dupliceren!
Als je vragen hebt over het uploaden van HTML bestanden naar WordPress of het converteren van HTML naar WordPress website, laat het ons weten in de comments.
Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.
Laat een reactie achter