So konvertieren Sie HTML zu WordPress
Aug 21, 2026
/
By Faradilla A.
/
9 Min Lesezeit
Die Umstellung von HTML auf WordPress ist sinnvoll, wenn Sie Ihre Inhalte effizienter verwalten und die Flexibilität des CMS nutzen möchten.
Für die Umstellung gibt es drei Hauptmethoden: Sie können aus Ihrer HTML-Website ein benutzerdefiniertes WordPress-Theme erstellen, ein Child-Theme auf Basis eines bestehenden Themes verwenden oder nur die Inhalte importieren und das bisherige Design nicht übernehmen.
Die Ansätze eignen sich für unterschiedliche Anforderungen – von der vollständigen Kontrolle über das Design bis hin zu einer schnellen Einrichtung, bei der die Migration der Inhalte im Vordergrund steht.
3 Möglichkeiten, HTML zu WordPress zu konvertieren
Je nach Ihren Zielen können Sie Ihre HTML-Website auf verschiedene Arten in eine WordPress-Website konvertieren:
- Erstellen Sie ein WordPress-Theme aus einer statischen HTML-Website. Wenn Sie das Design Ihrer alten HTML-Website unverändert beibehalten möchten, ist diese Option die richtige Wahl. Sie ist zugleich die anspruchsvollste und erfordert Programmierkenntnisse – glücklicherweise müssen Sie lediglich den alten HTML-Code kopieren und in mehrere PHP-Dateien einfügen.
- Verwenden Sie ein Child-Theme auf Basis eines bestehenden Themes. Dies ist wahrscheinlich der einfachste Weg, wenn Sie das Design der alten Website beibehalten möchten. Bei dieser Methode verwenden Sie ein bestehendes WordPress-Theme und bauen darauf auf. Außerdem können Sie die leistungsstarken Funktionen von WordPress sofort nutzen.
- Verzichten Sie auf das Design und behalten Sie nur die Inhalte. Diese Option eignet sich, wenn Sie das Design Ihrer alten Website nicht übernehmen und mit einem neuen WordPress-Theme von vorn beginnen möchten. Sie müssen lediglich die Inhalte in die neue Website übertragen.
1. Erstellen Sie ein WordPress-Theme aus einer statischen HTML-Website
Diese Methode eignet sich ideal, wenn Sie das Design Ihrer bestehenden HTML-Website beibehalten und gleichzeitig die CMS-Funktionen von WordPress nutzen möchten. Dabei werden Ihre HTML-Dateien in ein WordPress-Theme umgewandelt.
Als Beispiel verwenden wir eine statische HTML-Vorlage von Rachel McCollin.
1. Erstellen Sie einen Theme-Ordner und die grundlegenden Dateien
Erstellen Sie auf Ihrem Desktop einen neuen Theme-Ordner und geben Sie ihm einen Namen. In unserem Beispiel heißt der Ordner my-theme. Öffnen Sie anschließend Ihren Code-Editor und erstellen Sie die folgenden Dateien:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
Je nach Funktionsumfang und Design Ihres Themes können einige dieser Dateien optional sein. Weitere Informationen zu ihrem Zweck finden Sie in unserem Artikel über die Erstellung eines WordPress-Themes mit HTML5.
Lassen Sie den Editor nach dem Erstellen der Dateien geöffnet. Sie benötigen ihn später noch einmal.
2. Passen Sie das CSS der alten Website an das WordPress-Stylesheet an
Erstellen Sie nun ein WordPress-Stylesheet, indem Sie Ihren alten CSS-Code darin einfügen. Öffnen Sie die Datei style.css und fügen Sie diesen Code ein:
/* Theme Name: My Theme Author: LakiGarang Author URI: https://hostinger.com/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 */
Dieser Code enthält die Informationen, anhand derer WordPress den Stylesheet-Header des Themes erkennt. Sie können Angaben wie den Namen des Themes, den Autor, die URL und die Beschreibung bearbeiten.
Fügen Sie direkt nach dem Header Ihren alten CSS-Code in die Datei ein. Speichern und schließen Sie die Datei anschließend.
3. Teilen Sie den HTML-Code Ihrer alten Website auf
WordPress verwendet PHP, um Inhalte dynamisch aus seiner Datenbank abzurufen. Damit Ihre alte HTML-Website mit WordPress kompatibel ist, müssen Sie deren HTML-Code in separate Template-Dateien aufteilen. So kann WordPress die Seiten korrekt zusammensetzen.
Sehen wir uns an, wie unsere statische Website und ihr Code aufgebaut sind:
<!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>Öffnen Sie nun die Datei index.html Ihrer alten statischen Website. Teilen Sie deren Inhalt anschließend auf die neu erstellten WordPress-Dateien auf. Die folgenden Beispiele zeigen unseren Markup-Code.
header.php
Fügen Sie alles vom Anfang Ihres alten HTML-Codes bis zum Beginn des Hauptinhaltsbereichs in diese Datei ein. Der Hauptinhaltsbereich wird normalerweise durch <main> oder <div class=”main”> gekennzeichnet.
Fügen Sie außerdem direkt vor dem Element </head> den Code <?php wp_head();?> ein. Dadurch wird sichergestellt, dass WordPress-Plugins ordnungsgemäß funktionieren. Speichern Sie die Datei anschließend.
<!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
Fügen Sie den gesamten Abschnitt <aside … </aside> aus Ihrem alten HTML-Code in diese Datei ein. Speichern Sie die Datei anschließend.
<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
Der gesamte restliche Code bis zum Ende der Datei gehört in die Datei footer.php. Fügen Sie direkt vor dem schließenden Element </body> den Code <?php wp_footer();?> ein. Dieser ist aus demselben Grund erforderlich wie wp_head() in header.php. Speichern Sie die Datei anschließend.
</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>Damit haben Sie die Arbeit an der alten Datei index.html abgeschlossen. Sie können sie sowie alle nicht mehr benötigten Dateien im Theme-Ordner schließen. Lassen Sie lediglich header.php und index.php geöffnet, da diese noch bearbeitet werden müssen.
4. Passen Sie das Stylesheet an WordPress an
Im Header müssen Sie nun das Stylesheet für WordPress anpassen. Suchen Sie im Abschnitt <head> nach dem vorhandenen Stylesheet-Link. In unserem Beispiel sieht er so aus:
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
Ersetzen Sie ihn durch folgende Zeile:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />
Speichern und schließen Sie anschließend die Datei header.php.
Öffnen Sie nun die Datei index.php. Sie sollte derzeit leer sein. Kopieren Sie die folgenden Codezeilen und fügen Sie sie ein:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Dieser Code bindet die übrigen WordPress-Dateien ein. Zwischen dem Header und der Sidebar bleibt eine Lücke. Dort fügen Sie The Loop ein.
The Loop verarbeitet jeden Beitrag für die Anzeige und formatiert ihn entsprechend den Kriterien, die in den Loop-Tags festgelegt sind. The Loop ist ein wichtiger Bestandteil für die Einbindung dynamischer Inhalte in Ihre WordPress-Website.
Fügen Sie dazu direkt nach <?php get_header(); ?> den folgenden Code ein:
<?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; ?>Speichern und schließen Sie anschließend die Datei index.php. Damit haben Sie erfolgreich ein WordPress-Theme erstellt und können es zu Ihrer WordPress-Website hinzufügen.
5. Laden Sie Ihr Theme in WordPress hoch
Sobald Ihr Basis-Theme fertig ist, können Sie es in WordPress hochladen. Stellen Sie sicher, dass sich alle Dateien Ihres Theme-Ordners im selben Verzeichnis befinden. Komprimieren Sie den Ordner anschließend für eine einfache Installation als .zip-Datei.
Öffnen Sie das WordPress-Dashboard und navigieren Sie zu Design → Themes. Klicken Sie auf Theme hinzufügen → Theme hochladen.
Wählen Sie im Menü die ZIP-Datei Ihres Themes aus, laden Sie sie hoch und klicken Sie auf Jetzt installieren. Aktivieren Sie anschließend das Theme.
Nun sollte das Frontend Ihrer alten Website ähneln. Das grundlegende Design bleibt zwar erhalten, allerdings können Sie weitere Schritte unternehmen, um die Website vollständig in WordPress zu integrieren.
WordPress-Funktionen wie Widget-Bereiche sind beispielsweise nicht automatisch funktionsfähig. Möglicherweise müssen Sie außerdem Ihr CSS an die Theme-Struktur und die Styling-Konventionen von WordPress anpassen.
2. Verwenden Sie ein Child-Theme auf Basis eines bestehenden Themes
Wenn Sie Elemente des Designs Ihrer alten Website beibehalten möchten, Ihnen die Erstellung eines vollständigen Themes von Grund auf aber zu aufwendig ist, bietet ein Child-Theme eine einfache Alternative.
Mit einem Child-Theme können Sie auf einem bestehenden WordPress-Theme, dem Parent-Theme, aufbauen, ohne das Parent-Theme selbst zu verändern. Anpassungen im Child-Theme bleiben erhalten, wenn das Parent-Theme aktualisiert wird.
Schritt 1. Wählen Sie ein geeignetes Parent-Theme
Wählen Sie aus dem WordPress-Verzeichnis ein kostenloses Parent-Theme, dessen Layout dem Ihrer alten Website möglichst ähnlich ist. So reduzieren Sie den Aufwand für Designanpassungen. Sie können beispielsweise mit einem Standard-Theme wie Twenty Twenty-Five beginnen.
Schritt 2. Erstellen Sie ein Child-Theme
Sie können das Child-Theme entweder manuell einrichten oder den Vorgang mit einem Plugin wie Childify Me automatisieren. Beide Methoden bieten eine sichere Umgebung, in der Sie Ihre Website anpassen können, ohne das Parent-Theme zu verändern.
Ändern Sie das Parent-Theme nicht direkt. Erstellen Sie stattdessen im Verzeichnis /wp-content/themes/ einen neuen Ordner für Ihr Child-Theme.
In diesem neuen Ordner benötigen Sie zwei wichtige Dateien:
- style.css: Diese Datei enthält Ihre individuellen CSS-Regeln und ist die einzige Datei, die WordPress benötigt, um Ihr Child-Theme zu erkennen. Ganz oben in der Datei muss ein Header-Kommentarblock stehen, der das Parent-Theme angibt.
- functions.php: Diese Datei weist WordPress an, das Stylesheet des Parent-Themes zu laden, damit das Child-Theme dessen Design übernehmen kann.
Schritt 3. Binden Sie das Stylesheet des Parent-Themes ein
Öffnen Sie die Datei functions.php Ihres Child-Themes und fügen Sie den folgenden Code ein:
<?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' );
}
?>Schritt 4. Passen Sie das Child-Theme an
Nun können Sie das Theme anpassen. Fügen Sie für individuelle Anpassungen am Design Ihre CSS-Regeln direkt nach dem Header-Kommentarblock in die Datei style.css Ihres Child-Themes ein.
Wenn Sie das Layout oder die Funktionalität des Parent-Themes ändern möchten, kopieren Sie die entsprechende Template-Datei aus dem Ordner des Parent-Themes, beispielsweise header.php oder page.php, und fügen Sie sie in den Ordner des Child-Themes ein. Bearbeiten Sie die Datei anschließend im Child-Theme. WordPress verwendet automatisch Ihre geänderte Version anstelle der Datei aus dem Parent-Theme.
Schritt 5. Importieren Sie Ihre Inhalte
Verwenden Sie den WordPress Importer, um Ihre Beiträge, Seiten und Medien in die neue Website zu importieren. Alternativ können Sie Ihre Inhalte manuell hinzufügen, indem Sie im WordPress-Dashboard neue Beiträge und Seiten erstellen.
3. Verzichten Sie auf das Design und behalten Sie nur die Inhalte
Wenn das Design Ihrer alten Website veraltet ist und Sie von vorn beginnen möchten, übertragen Sie Ihre Inhalte mithilfe des Gutenberg-Blocks Individuelles HTML in ein neues WordPress-Theme. Bei dieser Methode trennen Sie die Inhalte vom bisherigen Design und können so die modernen Funktionen von WordPress vollständig nutzen.
Dieser Ansatz eignet sich am besten für Websites mit nur wenigen Seiten oder für Websites, bei denen ein neues, modernes Design oberste Priorität hat.
Am einfachsten übertragen Sie die Inhalte mit dem WordPress-eigenen Block Individuelles HTML. Dafür benötigen Sie keine Plugins. Die Übertragung erfolgt jedoch manuell und eignet sich daher nur für kleine Websites oder einzelne Seiten.
- Öffnen Sie Ihre alten HTML-Dateien. Öffnen Sie jede HTML-Datei Ihrer alten Website in einem Webbrowser.
- Erstellen Sie neue WordPress-Seiten oder -Beiträge. Navigieren Sie im WordPress-Dashboard zu Seiten → Seite hinzufügen oder Beiträge → Beitrag hinzufügen.
- Fügen Sie den Block Individuelles HTML hinzu. Klicken Sie im WordPress-Editor auf das +-Symbol, um einen neuen Block hinzuzufügen. Suchen Sie nach Individuelles HTML und wählen Sie den Block aus.
- Kopieren Sie die Inhalte und fügen Sie sie ein. Kehren Sie zu Ihrer alten HTML-Datei zurück und kopieren Sie den gesamten Inhaltsbereich, den Sie übertragen möchten, beispielsweise vom öffnenden <body>-Tag bis zum schließenden </body>-Tag oder nur den Hauptinhaltsbereich. Fügen Sie den HTML-Code direkt in den Block Individuelles HTML in WordPress ein.
- Veröffentlichen und prüfen Sie die Inhalte. Veröffentlichen Sie die neue Seite oder den neuen Beitrag und rufen Sie die Seite bzw. den Beitrag auf, um zu prüfen, wie die Inhalte mit Ihrem neuen WordPress-Theme aussehen.
Wichtiger Hinweis: Diese Methode bewahrt zwar die ursprüngliche HTML-Struktur, hat jedoch erhebliche Nachteile. Die Inhalte innerhalb eines Blocks Individuelles HTML werden als eine einzige statische Einheit behandelt. Das bedeutet, dass Sie diese Inhalte nicht mit anderen Gutenberg-Blöcken oder -Funktionen bearbeiten können. Für eine vollständig dynamische und bearbeitbare WordPress-Website müssten Sie die Inhalte manuell mit WordPress-eigenen Blöcken neu erstellen.
So holen Sie mehr aus Ihrer WordPress-Website heraus
Nach der Konvertierung Ihrer HTML-Website in eine WordPress-Website profitieren Sie vor allem von den Möglichkeiten, die WordPress anschließend bietet. Mit Plugins können Sie den Funktionsumfang erweitern, während Sie mit Themes das Design Ihrer Website verändern können.
So können Sie Ihre neue WordPress-Website weiterentwickeln:
- Erkunden Sie fortgeschrittene WordPress-Funktionen wie Caching, SEO-Plugins und benutzerdefinierte Beitragstypen.
- Aktualisieren Sie Themes und Plugins regelmäßig, um Ihre Website zu schützen.
- Probieren Sie moderne Page-Builder aus, um das Design einfacher zu steuern.
- Überwachen Sie die Performance mit integrierten Tools und Analytics-Plugins.
Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.
Faradilla, auch bekannt als Ninda, ist Content Marketing Specialist bei Hostinger mit über fünf Jahren Erfahrung und einem zehnjährigen Hintergrund als Linguistin. Sie möchte Technologie für alle zugänglich machen, indem sie komplexe Anleitungen in klare und leicht verständliche Schritt-für-Schritt-Guides verwandelt. In ihrer Freizeit interessiert sie sich für Biowissenschaften oder schaut gerne lustige Tiervideos. Vernetzen Sie sich mit ihr auf LinkedIn.
Comments
0 responses