HTML naar WordPress converteren; zo doe je dat
HTML naar WordPress omzetten is een slimme keuze als je je content makkelijker wilt beheren en gebruik wilt maken van de flexibiliteit van een CMS.
Er zijn drie methodes om de overstap te maken: een custom WordPress thema bouwen van je HTML-website, een child thema gebruiken op basis van een bestaande template, of alleen de content importeren en het design behouden.
Elke methode past bij andere behoeften: van volledige controle over het design tot een snelle set-up waarbij de focus ligt op het verhuizen van content.
3 manieren om HTML naar WordPress om te zetten
Je kunt je HTML-website op verschillende manieren naar WordPress omzetten, afhankelijk van je doelen:
- Maak een WordPress thema van een statische HTML-website. Wil je het design van je oude HTML-website behouden, dan is dit de juiste optie. Het is wel de meest uitdagende route en vraagt om wat codeerwerk – maar in feite hoef je alleen de oude HTML-code te kopiëren en in meerdere PHP-bestanden te plakken.
- Gebruik een child thema gebaseerd op een bestaand thema. Dit is waarschijnlijk de makkelijkste manier als je het design van je oude website wilt behouden. Je gebruikt een bestaand WordPress thema en bouwt daarop verder. Extra voordeel: je kunt direct gebruikmaken van de krachtige functies van WordPress.
- Laat het design achter en neem alleen de content mee. Dit is geschikt als je geen probleem hebt om je oude website design los te laten en een nieuw WordPress thema te kiezen voor een frisse start. Je hoeft alleen de content over te zetten naar de nieuwe omgeving.
1. Maak een WordPress thema van een statische HTML-website
Deze methode is ideaal als je het design van je huidige HTML-website wilt behouden, maar ook de functies van WordPress als CMS wilt gebruiken. Het proces houdt in dat je je HTML-bestanden omzet naar een WordPress thema.
Om te laten zien hoe dit werkt, gebruiken we een statische HTML-template van Rachel McCollin.
1. Maak een themamap en basisbestanden
Maak een nieuwe themamap op je desktop en geef deze een naam. Wij noemen onze map mijn-thema. Open daarna je code-editor en maak de volgende bestanden aan:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
Let op: sommige van deze bestanden zijn mogelijk optioneel, afhankelijk van de functies en het design van je thema. Wil je meer weten over hun functies? Bekijk dan onze tutorial over het maken van een WordPress thema met HTML5.
Laat de editor na het aanmaken van de bestanden openstaan, we gaan hier later weer mee verder.
2. Pas de CSS van je oude website aan naar de WordPress stylesheet
Nu gaan we een WordPress stylesheet maken door de CSS van je oude website daarin te kopiëren. Open het bestand style.css en plak daar de volgende code:
/* Theme Name: My Theme Author: LakiGarang Author URI: /tutorials/author/luqman Description: A development theme, from static HTML to WordPress Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Deze code geeft WordPress de informatie dat het om een thema stylesheet gaat. Je kunt de details aanpassen, zoals de themanaam, auteur, URL, beschrijving, enzovoort.
Plak direct onder de header de CSS van je oude website in het bestand. Sla het bestand vervolgens op en sluit het.
3. Verdeel de HTML van je oude website
WordPress gebruikt PHP om content dynamisch uit de database te halen. Om je oude HTML-website compatibel te maken, moet je deze opdelen in aparte template bestanden, zodat WordPress de pagina’s correct kan samenstellen.
Laten we samen eens kijken hoe onze statische website en de bijbehorende code zijn opgebouwd:
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
</ul>
</div>
</nav><!-- .main -->
<div class="main">
<div id="content" class="two-thirds left">
<article class="post">
<h2 class="entry-title">Welcome to This Website</h2>
<section class="entry-content">
<p>This site is comprised of one static HTML file.</p>
<p>You will be able to add more content later via the WordPress admin screens.
<h3>Here's a heading so you can check how it's styled</h3>
<p>And another paragraph underneath.</p>
<p>And a list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>And so on...</li>
</ul>
</section><!-- .entry-content -->
</article><!-- #post-## -->
</div><!-- #content -->
<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>
</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
</body>
</html>
Open nu het index.html bestand van je oude statische website. We gaan dit opdelen in de nieuw aangemaakte WordPress bestanden. (De voorbeelden hieronder zijn gebaseerd op onze eigen mark-up.)
header.phpAlles van het begin van je oude HTML-code tot aan het hoofdcontentgedeelte gaat in dit bestand. Het hoofdcontentgedeelte wordt meestal aangeduid met <main> of <div class=”main”>.
Voeg daarnaast direct voor het </head> element deze code toe: <?php wp_head(); ?>. Hiermee zorg je dat WordPress plug-ins correct werken. Sla het bestand op zodra je klaar bent.
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
</ul>
</div>
</nav><!-- .main -->
sidebar.php
Alles wat binnen de <aside> … </aside> sectie van je oude HTML-code valt, komt in dit bestand. Sla het bestand op zodra je klaar bent.
<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>
footer.php
Nu hoort alles tot het einde van het bestand bij de footer en gaat dit in footer.php. Voeg net voor het sluitende </body> element de code <?php wp_footer(); ?> toe, om dezelfde reden als bij header.php. Sla het bestand daarna op.
</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
<?php wp_footer();?>
</body>
</html>
Je bent nu klaar met het oude index.html bestand. Sluit dit bestand en de andere bestanden in je themamap, behalve header.php en index.php, want daar moet nog wat werk in worden gedaan.
4. Pas de stijl aan naar WordPress formaat
In de header hoef je alleen de stylesheet aan te passen van HTML naar WordPress formaat. Zoek naar een bestaande link in de <head> sectie. In ons voorbeeld ziet dat er ongeveer zo uit:
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
Vervang deze regel door:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
Sla nu het header.php bestand op en sluit het af.
Nu gaan we verder met index.php. Het bestand is waarschijnlijk nog leeg, dus kopieer en plak de volgende regels code erin:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Deze code haalt de overige WordPress bestanden op. Je ziet waarschijnlijk een lege ruimte tussen de header en de sidebar; daar komt The Loop.
The Loop verwerkt elk bericht en zorgt dat het correct wordt weergegeven volgens de criteria binnen de Loop tags. Het is een belangrijk onderdeel om dynamische content op je WordPress website te tonen.
Plak de volgende code direct na <?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; ?>
Sla daarna je index.php bestand op en sluit het af. Je hebt nu met succes een WordPress thema gemaakt en kunt het toevoegen aan je WordPress website.
5. Upload je thema naar WordPress
Wanneer je basis thema klaar is, kun je het naar WordPress uploaden. Zorg dat alle bestanden in je themamap netjes in dezelfde map staan en comprimeer de map daarna tot een .zip bestand voor een eenvoudige installatie.
Ga in je WordPress Dashboard naar Weergave → Thema’s. Klik op Nieuwe toevoegen → Thema uploaden.
Zoek in het menu het .zip bestand van je thema, upload het, klik op Nu installeren en activeer het thema.
Op dit punt zou je frontend eruit moeten zien als je oude website. Hoewel het basisdesign behouden is, zijn er nog een paar stappen nodig om het volledig met WordPress te integreren.
Zo werken functies zoals widget gebieden niet automatisch, en moet je mogelijk je CSS aanpassen zodat het aansluit bij de structuur en stylingconventies van een WordPress thema.
2. Gebruik een child thema gebaseerd op een bestaand thema
Als je onderdelen van het design van je oude website wilt behouden, maar het maken van een volledig thema vanaf nul te ingewikkeld vindt, is een child thema een eenvoudige oplossing.
Child thema’s laten je bouwen op een bestaand WordPress thema (het parent thema) zonder de kernbestanden te beïnvloeden. Alle aanpassingen die je in een child thema maakt, blijven behouden wanneer het parent thema wordt geüpdatet.
Stap 1. Kies een geschikt parent thema
Kies een parent thema dat zo dicht mogelijk bij de lay-out van je oude website ligt, zodat je zo min mogelijk aanpassingen aan het design hoeft te doen. Kies bijvoorbeeld een gratis thema uit de WordPress directory dat goed aansluit bij je gewenste lay-out. Je kunt bijvoorbeeld beginnen met een standaardthema zoals Twenty Twenty-Five.
Stap 2. Maak een child thema aan
Je kunt een child thema handmatig aanmaken of een plug-in zoals Childify Me gebruiken om het proces te automatiseren. Beide manieren geven je een veilige omgeving om je website aan te passen zonder het parent thema te wijzigen.
Wijzig het parent thema nooit direct. Maak in plaats daarvan een nieuwe map aan voor je child thema in /wp-content/themes/.
In deze map heb je twee belangrijke bestanden nodig:
- style.css: Dit bestand bevat je aangepaste CSS-regels en is het enige bestand dat nodig is om je child thema door WordPress te laten herkennen. Helemaal bovenaan moet een header commentaarblok staan om het parent thema te identificeren.
- functions.php: Dit bestand zorgt ervoor dat WordPress de stylesheet van het parent thema laadt, zodat je child thema het design ervan kan overnemen.
Stap 3. Laad de stylesheet van het parent thema
Open het functions.php bestand van je child thema en voeg de volgende code toe:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Stap 4. Pas het child thema aan
Nu kun je beginnen met het aanpassen van het thema. Voeg je eigen CSS-regels toe direct in het style.css bestand van je child-thema, onder het header commentaarblok.
Wil je de lay-out of functionaliteit van het parent thema aanpassen? Kopieer dan het specifieke template bestand uit de map van het parent thema (bijvoorbeeld header.php of page.php) en plak het in de map van je child thema. Bewerk daarna het bestand in je child thema. WordPress gebruikt automatisch jouw aangepaste versie in plaats van die van het parent thema.
Stap 5. Begin met het importeren van je content
Gebruik de WordPress Importer om je berichten, pagina’s en media naar de nieuwe website te importeren, of voeg je content handmatig toe door nieuwe berichten en pagina’s aan te maken in het WordPress dashboard.
3. Laat het design achter en neem alleen de content mee
Als het design van je oude website verouderd is en je een frisse start wilt, kun je je content overzetten naar een nieuw WordPress thema met behulp van het Gutenberg Custom HTML-blok. Deze methode scheidt je content van het oude design, zodat je volledig gebruik kunt maken van de moderne functies van WordPress.
Deze aanpak is het meest geschikt voor websites met slechts een paar pagina’s, of wanneer een nieuw, modern design de hoogste prioriteit heeft.
De eenvoudigste manier om je content te verplaatsen is het gebruik van het native Custom HTML-blok van WordPress. Hiervoor zijn geen plug-ins nodig. Het is een handmatig proces dat vooral geschikt is voor kleine websites of individuele pagina’s.
- Open je oude HTML-bestanden. Open elk HTML-bestand van je oude website in een webbrowser.
- Maak nieuwe WordPress pagina’s of berichten aan. Ga in je WordPress dashboard naar Pagina’s → Nieuwe toevoegen of Berichten → Nieuwe toevoegen.
- Voeg een Custom HTML-blok toe. Klik in de WordPress editor op het +‑icoon om een nieuw blok toe te voegen. Zoek en selecteer het Custom HTML-blok.
- Kopieer en plak de content. Ga terug naar je oude HTML-bestand en kopieer de content die je wilt overzetten (bijvoorbeeld van de opening <body> tag tot de sluiting </body> tag, of alleen het hoofdcontentgedeelte). Plak deze HTML-code direct in het Custom HTML-blok in WordPress.
- Publiceer en controleer. Publiceer de nieuwe pagina of het nieuwe bericht en bekijk het resultaat om te zien hoe het eruitziet met je nieuwe WordPress thema.
Belangrijke opmerking: Hoewel deze methode de originele HTML-structuur behoudt, heeft het ook nadelen. De content in een Custom HTML-blok wordt behandeld als één statisch geheel. Dit betekent dat je het niet kunt bewerken met andere Gutenberg blokken of functies. Voor een echt dynamische en volledig bewerkbare WordPress website moet je de content handmatig opnieuw opbouwen met native blokken.
Het meeste uit je WordPress website halen
Zodra je je HTML-website naar WordPress hebt omgezet, begint het echte voordeel: alles wat je daarna kunt doen. WordPress biedt talloze mogelijkheden – van plug-ins die je functionaliteit uitbreiden tot thema’s die je design compleet transformeren.
We geven je wat manieren om je nieuwe WordPress website verder te verbeteren:
- Verken geavanceerde WordPress functies zoals caching, SEO plug-ins en custom post types.
- Houd thema’s en plug-ins up-to-date om je website veilig te houden.
- Gebruik moderne pagina bouwers voor makkelijker designbeheer.
- Volg de prestaties met ingebouwde tools en analytics plug-ins.
Alle tutorial content op deze website valt onder de strenge redactionele standaarden en waarden van Hostinger.
Lisa is een ervaren freelance vertaler en content writer met een creatieve en vlotte schrijfstijl. Ze weet hoe ze een verhaal boeiend en overtuigend maakt, helemaal afgestemd op de lezer. Met haar scherpe taalgevoel en persoonlijke aanpak zorgt ze voor teksten die niet alleen prettig lezen, maar ook impact maken.
