1. Erstellen Sie ein WordPress-Theme aus einer statischen HTML-Website<\/h3>
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.<\/p>
Als Beispiel verwenden wir eine statische HTML-Vorlage<\/a> von Rachel McCollin.<\/p> 1. Erstellen Sie einen Theme-Ordner und die grundlegenden Dateien<\/strong><\/p> Erstellen Sie auf Ihrem Desktop einen neuen Theme-Ordner und geben Sie ihm einen Namen. In unserem Beispiel heißt der Ordner my-theme<\/strong>. Öffnen Sie anschließend Ihren Code-Editor und erstellen Sie die folgenden Dateien:<\/p> 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.<\/p> Lassen Sie den Editor nach dem Erstellen der Dateien geöffnet. Sie benötigen ihn später noch einmal.<\/p> 2. Passen Sie das CSS der alten Website an das WordPress-Stylesheet an<\/strong><\/p> Erstellen Sie nun ein WordPress-Stylesheet, indem Sie Ihren alten CSS-Code darin einfügen. Öffnen Sie die Datei style.css<\/strong> und fügen Sie diesen Code ein:<\/p> 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.<\/p> Fügen Sie direkt nach dem Header Ihren alten CSS-Code in die Datei ein. Speichern und schließen Sie die Datei anschließend.<\/p> 3. Teilen Sie den HTML-Code Ihrer alten Website auf<\/strong><\/p> 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.<\/p> Sehen wir uns an, wie unsere statische Website<\/a> und ihr Code aufgebaut sind:<\/p> Öffnen Sie nun die Datei index.html<\/strong> Ihrer alten statischen Website. Teilen Sie deren Inhalt anschließend auf die neu erstellten WordPress-Dateien auf. Die folgenden Beispiele zeigen unseren Markup-Code.<\/p> header.php<\/strong><\/p> 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><\/strong> oder <div class=”main”><\/strong> gekennzeichnet.<\/p> Fügen Sie außerdem direkt vor dem Element <\/head><\/strong> den Code <?php wp_head();?><\/strong> ein. Dadurch wird sichergestellt, dass WordPress-Plugins ordnungsgemäß funktionieren. Speichern Sie die Datei anschließend.<\/p> sidebar.php<\/strong><\/p> Fügen Sie den gesamten Abschnitt <aside … <\/aside><\/strong> aus Ihrem alten HTML-Code in diese Datei ein. Speichern Sie die Datei anschließend.<\/p> footer.php<\/strong><\/p> Der gesamte restliche Code bis zum Ende der Datei gehört in die Datei footer.php<\/strong>. Fügen Sie direkt vor dem schließenden Element <\/body><\/strong> den Code <?php wp_footer();?><\/strong> ein. Dieser ist aus demselben Grund erforderlich wie wp_head()<\/strong> in header.php<\/strong>. Speichern Sie die Datei anschließend.<\/p> Damit haben Sie die Arbeit an der alten Datei index.html<\/strong> abgeschlossen. Sie können sie sowie alle nicht mehr benötigten Dateien im Theme-Ordner schließen. Lassen Sie lediglich header.php<\/strong> und index.php<\/strong> geöffnet, da diese noch bearbeitet werden müssen.<\/p> 4. Passen Sie das Stylesheet an WordPress an<\/strong><\/p> Im Header müssen Sie nun das Stylesheet für WordPress anpassen. Suchen Sie im Abschnitt <head><\/strong> nach dem vorhandenen Stylesheet-Link. In unserem Beispiel sieht er so aus:<\/p> Ersetzen Sie ihn durch folgende Zeile:<\/p> Speichern und schließen Sie anschließend die Datei header.php<\/strong>.<\/p> Öffnen Sie nun die Datei index.php<\/strong>. Sie sollte derzeit leer sein. Kopieren Sie die folgenden Codezeilen und fügen Sie sie ein:<\/p> Dieser Code bindet die übrigen WordPress-Dateien ein. Zwischen dem Header und der Sidebar bleibt eine Lücke. Dort fügen Sie The Loop<\/a> ein.<\/p> 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.<\/p> Fügen Sie dazu direkt nach <?php get_header(); ?><\/strong> den folgenden Code ein:<\/p> Speichern und schließen Sie anschließend die Datei index.php<\/strong>. Damit haben Sie erfolgreich ein WordPress-Theme erstellt und können es zu Ihrer WordPress-Website hinzufügen.<\/p> 5. Laden Sie Ihr Theme in WordPress hoch<\/strong><\/p> 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<\/strong>-Datei.<\/p> Öffnen Sie das WordPress-Dashboard<\/a> und navigieren Sie zu Design<\/strong> → Themes<\/strong>. Klicken Sie auf Theme hinzufügen<\/strong> → Theme hochladen<\/strong>.<\/p> Wählen Sie im Menü die ZIP-Datei Ihres Themes aus, laden Sie sie hoch und klicken Sie auf Jetzt installieren<\/strong>. Aktivieren Sie anschließend das Theme.<\/p> 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.<\/p> 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.<\/p> 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<\/a> eine einfache Alternative.<\/p> Mit einem Child-Theme können Sie auf einem bestehenden WordPress-Theme, dem Parent-Theme<\/strong>, aufbauen, ohne das Parent-Theme selbst zu verändern. Anpassungen im Child-Theme bleiben erhalten, wenn das Parent-Theme aktualisiert wird.<\/p> Schritt 1. Wählen Sie ein geeignetes Parent-Theme<\/strong><\/p> Wählen Sie aus dem WordPress-Verzeichnis ein kostenloses Parent-Theme<\/a>, 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<\/strong> beginnen.<\/p> Schritt 2. Erstellen Sie ein Child-Theme<\/strong><\/p> Sie können das Child-Theme entweder manuell einrichten oder den Vorgang mit einem Plugin wie Childify Me<\/a> automatisieren. Beide Methoden bieten eine sichere Umgebung, in der Sie Ihre Website anpassen können, ohne das Parent-Theme zu verändern.<\/p> Ändern Sie das Parent-Theme nicht direkt. Erstellen Sie stattdessen im Verzeichnis \/wp-content\/themes\/<\/strong> einen neuen Ordner für Ihr Child-Theme.<\/p> In diesem neuen Ordner benötigen Sie zwei wichtige Dateien:<\/p> Schritt 3. Binden Sie das Stylesheet des Parent-Themes ein<\/strong><\/p> Öffnen Sie die Datei functions.php<\/strong> Ihres Child-Themes und fügen Sie den folgenden Code ein:<\/p> Schritt 4. Passen Sie das Child-Theme an<\/strong><\/p> 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<\/strong> Ihres Child-Themes ein.<\/p> 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<\/strong> oder page.php<\/strong>, 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.<\/p> Schritt 5. Importieren Sie Ihre Inhalte<\/strong><\/p> Verwenden Sie den WordPress Importer<\/a>, 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.<\/p> 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<\/strong> 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.<\/p> 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.<\/p> Am einfachsten übertragen Sie die Inhalte mit dem WordPress-eigenen Block Individuelles HTML<\/strong>. Dafür benötigen Sie keine Plugins. Die Übertragung erfolgt jedoch manuell und eignet sich daher nur für kleine Websites oder einzelne Seiten.<\/p> Wichtiger Hinweis:<\/strong> Diese Methode bewahrt zwar die ursprüngliche HTML-Struktur, hat jedoch erhebliche Nachteile. Die Inhalte innerhalb eines Blocks Individuelles HTML<\/strong> werden als eine einzige statische Einheit behandelt. Das bedeutet, dass Sie diese Inhalte nicht mit anderen Gutenberg-Blöcken oder -Funktionen bearbeiten können<\/strong>. Für eine vollständig dynamische und bearbeitbare WordPress-Website müssten Sie die Inhalte manuell mit WordPress-eigenen Blöcken neu erstellen.<\/p> 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.<\/p> So können Sie Ihre neue WordPress-Website weiterentwickeln:<\/p>\n
\/*\nTheme Name: My Theme\nAuthor: LakiGarang\nAuthor URI: https:\/\/hostinger.com\/tutorials\/author\/luqman\nDescription: A development theme, from static HTML to WordPress\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>
![\"Sample](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/08\/Vorschau-der-Beispiel-Website.jpg\/public\")
<\/figure>\n<\/div><!DOCTYPE html>\n<!--[if lt IE 7]><html lang=\"en-US\" class=\"ie6\"><![endif]-->\n<!--[if IE 7]><html lang=\"en-US\" class=\"ie7\"><![endif]-->\n<!--[if IE 8]><html lang=\"en-US\" class=\"ie8\"><![endif]-->\n<!--[if IE 9]><html lang=\"en-US\" class=\"ie9\"><![endif]-->\n<!--[if gt IE 9]><html lang=\"en-US\"><![endif]-->\n<!--[if !IE]><html lang=\"en-US\"><![endif]-->\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width\" \/>\n<title>WordPress Writer and Instructor | RACHEL McCOLLIN<\/title>\n\n<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\">\n\n<\/head>\n\n<body>\n \n <div class=\"header-bg\">\n \n <header role=\"banner\">\n \n <hgroup class=\"site-name three-quarters left\">\n \n <!-- 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 -->\n <h1 id=\"site-title\" class=\"one-half-left\">\n <a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\">RACHEL McCOLLIN<\/a>\n <\/h1>\n \n <h2 id=\"site-description\">Fiction and Technical Writer<\/h2>\n \n <\/hgroup>\n \n <div class=\"right quarter\">\n \n <a class=\"toggle-nav\" href=\"#\">☰<\/a>\n \n <\/div> <!-- .right quarter -->\n \n <\/header><!-- header -->\n \n <\/div><!-- header-bg-->\n \n \n <!-- full width navigation menu -->\n <nav class=\"menu main\">\n \n <div class=\"skip-link screen-reader-text\"><a href=\"#content\" title=\"Skip to content\">Skip to content<\/a><\/div>\n \n <div class=\"main-nav\">\n <ul class=\"menu\">\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/\">Home<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/about-me\/\">About Me<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/books\/\">Books<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/bookclub\/\">Book Club<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/blog\/\">Blog<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/contact\/\">Contact<\/a><\/li>\n <\/ul>\n <\/div> \n \n <\/nav><!-- .main -->\n \n\n <div class=\"main\">\n \n <div id=\"content\" class=\"two-thirds left\">\n\n <article class=\"post\">\n \n <h2 class=\"entry-title\">Welcome to This Website<\/h2>\n \n <section class=\"entry-content\">\n \n <p>This site is comprised of one static HTML file.<\/p>\n <p>You will be able to add more content later via the WordPress admin screens.\n \n <h3>Here's a heading so you can check how it's styled<\/h3>\n <p>And another paragraph underneath.<\/p>\n <p>And a list:<\/p>\n \n <ul>\n <li>Item 1<\/li>\n <li>Item 2<\/li>\n <li>And so on...<\/li>\n <\/ul>\n \n \n <\/section><!-- .entry-content -->\n\n <\/article><!-- #post-## -->\n\n <\/div><!-- #content -->\n\n \n <aside class=\"sidebar one-third right\">\n\n <aside class=\"widget-area\">\n \n <div class=\"widget-container\">\n \n <h3 class=\"widget-title\">Buy My Book<\/h3>\n \n <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;\" \/>\n \n <p><em>WordPress: Pushing the Limits<\/em> will help you become a professional WordPress developer.<\/p>\n \n <\/div>\n \n <\/aside>\n\n <\/aside>\n \n <\/div><!-- .main -->\n\n\n <footer>\n \n <div class=\"fatfooter\">\n \n <p>Add footer content here with <a href=\"#\">widget areas<\/a> - the tutorials will show you how.<\/p>\n \n <\/div>\n\n <\/footer>\n\n<\/body>\n<\/html><\/pre>
<!DOCTYPE html>\n<!--[if lt IE 7]><html lang=\"en-US\" class=\"ie6\"><![endif]-->\n<!--[if IE 7]><html lang=\"en-US\" class=\"ie7\"><![endif]-->\n<!--[if IE 8]><html lang=\"en-US\" class=\"ie8\"><![endif]-->\n<!--[if IE 9]><html lang=\"en-US\" class=\"ie9\"><![endif]-->\n<!--[if gt IE 9]><html lang=\"en-US\"><![endif]-->\n<!--[if !IE]><html lang=\"en-US\"><![endif]-->\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width\" \/>\n<title>WordPress Writer and Instructor | RACHEL McCOLLIN<\/title>\n\n<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\">\n<?php wp_head();?>\n<\/head>\n\n<body>\n \n <div class=\"header-bg\">\n \n <header role=\"banner\">\n \n <hgroup class=\"site-name three-quarters left\">\n \n <!-- 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 -->\n <h1 id=\"site-title\" class=\"one-half-left\">\n <a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\">RACHEL McCOLLIN<\/a>\n <\/h1>\n \n <h2 id=\"site-description\">Fiction and Technical Writer<\/h2>\n \n <\/hgroup>\n \n <div class=\"right quarter\">\n \n <a class=\"toggle-nav\" href=\"#\">☰<\/a>\n \n <\/div> <!-- .right quarter -->\n \n <\/header><!-- header -->\n \n <\/div><!-- header-bg-->\n \n \n <!-- full width navigation menu -->\n <nav class=\"menu main\">\n \n <div class=\"skip-link screen-reader-text\"><a href=\"#content\" title=\"Skip to content\">Skip to content<\/a><\/div>\n \n <div class=\"main-nav\">\n <ul class=\"menu\">\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/\">Home<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/about-me\/\">About Me<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/books\/\">Books<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/bookclub\/\">Book Club<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/blog\/\">Blog<\/a><\/li>\n <li class=\"menu-item\"><a href=\"https:\/\/rachelmccollin.com\/contact\/\">Contact<\/a><\/li>\n <\/ul>\n <\/div> \n \n <\/nav><!-- .main --><\/pre>
<aside class=\"sidebar one-third right\">\n\n <aside class=\"widget-area\">\n \n <div class=\"widget-container\">\n \n <h3 class=\"widget-title\">Buy My Book<\/h3>\n \n <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;\" \/>\n \n <p><em>WordPress: Pushing the Limits<\/em> will help you become a professional WordPress developer.<\/p>\n \n <\/div>\n \n <\/aside>\n\n <\/aside><\/pre>
<\/div><!-- .main -->\n\n\n <footer>\n \n <div class=\"fatfooter\">\n \n <p>Add footer content here with <a href=\"#\">widget areas<\/a> - the tutorials will show you how.<\/p>\n \n <\/div>\n\n <\/footer>\n <?php wp_footer();?>\n<\/body>\n<\/html><\/pre>
<link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/><\/pre>
<link rel=\"stylesheet\" href=\"<?php echo get_template_directory_uri(); ?>\/style.css\" type=\"text\/css\" media=\"all\" \/><\/pre>
<?php get_header(); ?>\n\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/pre>
<?php while ( have_posts() ) : the_post(); ?>\n <article class=\"<?php post_class(); ?>\" id=\"post-<?php the_ID(); ?>\">\n <h2 class=\"entry-title\"><?php the_title(); ?><\/h2>\n <?php if ( !is_page() ):?>\n <section class=\"entry-meta\">\n <p>Posted on <?php the_date();?> by <?php the_author();?><\/p>\n <\/section>\n <?php endif; ?>\n <section class=\"entry-content\">\n <?php the_content(); ?>\n <\/section>\n <section class=\"entry-meta\"><?php if ( count( get_the_category() ) ) : ?>\n <span class=\"category-links\">\n Posted under: <?php echo get_the_category_list( ', ' ); ?>\n <\/span>\n <?php endif; ?><\/section>\n <\/article>\n<?php endwhile; ?><\/pre>
![\"Upload](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/08\/Theme-hochladen.jpg\/public\")
<\/figure>\n<\/div>![\"Theme](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/08\/Theme-in-WordPress-hochgeladen.jpg\/public\")
<\/figure>\n<\/div>2. Verwenden Sie ein Child-Theme auf Basis eines bestehenden Themes<\/h3>
\n
<?php\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\nfunction my_theme_enqueue_styles() {\n wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n}\n?><\/pre>3. Verzichten Sie auf das Design und behalten Sie nur die Inhalte<\/h3>
\n
So holen Sie mehr aus Ihrer WordPress-Website heraus<\/h2>
\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/public\")
<\/a><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"