HTML zu WordPress: Eine detaillierte Anleitung zum Hochladen und Konvertieren von HTML

Das Hochladen und Konvertieren von HTML zu WordPress wird aus einer Vielzahl von Gründen gemacht. Es kann sein, dass du eine alte, statische HTML-Seite konvertieren und sie mit dem WordPress Content Management System betreiben möchtest. Es gibt auch die Möglichkeit, dass du einfach nur einen Ort brauchst, um eine HTML-Datei zu speichern oder zu teilen, und WordPress bietet eine praktikable Lösung für beide Fälle.

Die Umstellung von HTML auf WordPress fühlt sich oft einschüchternd oder unproduktiv an. Wir sind hier, um dich durch den Prozess zu führen, um sicherzustellen, dass du die Werkzeuge lernst, die du brauchst, um HTML-Dateien zu konvertieren und eine Konvertierung selbständig durchzuführen.

HTML ist eine einfache Auszeichnungssprache, und WordPress ist, obwohl es mächtig und voller Funktionen ist, ziemlich einfach und intuitiv. Daher sollte sich die Konvertierung zwischen HTML und WordPress auch nicht wie eine lästige Pflicht anfühlen.

Lies weiter, um mehr über die Konvertierung von HTML-Grundlagen zu WordPress zu erfahren, zusammen mit den realen Situationen, in denen du einen solchen Schritt in Betracht ziehen kannst.

Hauptgründe für das Hochladen oder Konvertieren von HTML in WordPress

Wenn du dich fragst, warum du überhaupt HTML zu WordPress konvertieren oder hochladen sollst, dann schau dir die folgenden Beispiele an, um die Gründe für die Durchführung einer solchen Aufgabe zu verstehen.

• Konvertiere eine alte HTML-Website, damit sie auf dem WordPress-System läuft. Vielleicht ist das alte Design eines deiner Lieblingsdesigns oder du willst dir einfach nicht die Arbeit eines Redesigns machen. Das ist auch wichtig, um dein Markenimage zu bewahren.
• Konvertiere eine einzelne HTML-Webseite oder einen Blogbeitrag und veröffentliche ihn auf deiner aktuellen WordPress-Seite. Dies ist besonders nützlich, wenn dein aktuelles Theme kein benutzerdefiniertes Seitenlayout hat, das du möchtest.
• Wandle eine HTML-Webseitenvorlage in ein Theme-Format um, das auf WordPress installiert werden kann.
• Lade eine HTML-Verifizierungsdatei hoch, die einer Suchmaschine oder einem anderen Dienst die Rechte an deiner Website nachweist.
• Speichere eine HTML-Datei auf deiner Website zur späteren Verwendung.
• Erstelle einen Link zu dieser Datei, damit du sie weitergeben kannst oder die Nutzer die Datei auf ihren eigenen Computer herunterladen können.
• Erstelle eine HTML-Designkomponente auf einer WordPress-Seite oder einem Beitrag, wie z.B. eine benutzerdefinierte Autorenbox oder ein E-Mail-Anmeldeformular.
• Passe dein WordPress-Theme mit einem HTML-Webseitendesign an, das du online gefunden hast, auf das du aber keinen Zugriff hast.

Wie du sehen kannst, variieren die Gründe für das Hinzufügen einer HTML-Datei zu WordPress je nach deinen Zielen. Manchmal ist der Prozess recht einfach, wie z.B. das Hochladen einer HTML-Datei zu einem WordPress-Blogpost oder einer Seite. In anderen Fällen ist es ein langwieriger Prozess, eine ganze HTML-Website zu konvertieren, mit Dutzenden von Dateien und Nebenaufgaben, die erledigt werden müssen, wie z.B. das Übertragen des Website-Inhalts zusammen mit dem HTML.

In diesem Leitfaden zum Konvertieren und Hochladen von HTML in WordPress beginnen wir mit den Grundlagen (wie man eine HTML-Datei in WordPress hochlädt), dann gehen wir auf die detaillierteren Anforderungen für das Duplizieren oder Konvertieren kompletter HTML-Webseiten ein, damit sie im WordPress-System funktionieren.

Zum Schluss werden wir über die Vor- und Nachteile von automatisierten HTML-Konvertern sprechen und welche Tools es auf dem Markt gibt.

Lies weiter, um mit deinem ersten HTML zu WordPress Upload oder deiner ersten Konvertierung loszulegen!

Wie man eine HTML Datei in WordPress hochlädt

Der erste Schritt, um zu lernen, wie man eine HTML-Datei in eine WordPress-Seite oder eine komplette Website verwandelt, ist zu sehen, wie der HTML-Datei-Upload-Prozess funktioniert.

In dieser Anleitung erfährst du, wie du eine HTML-Datei in WordPress hochlädst.

Im Folgenden geben wir dir eine kurze Zusammenfassung dieses Prozesses, um sicherzustellen, dass du auf dem richtigen Weg bist, wenn wir weiter unten in diesem Artikel zu anderen Schritten übergehen.

Es gibt drei Methoden, um eine HTML-Datei in WordPress hochzuladen:

1. Über das WordPress Dashboard.
2. Mit einem FTP-Client.
3. Mit cPanel.

Das Hochladen einer HTML-Datei in das WordPress-Dashboard wird in der Medienbibliothek durchgeführt. Wir werden einige der Wege in den folgenden Tutorials abdecken, aber denke daran, dass das Hochladen einer Datei über das WordPress Dashboard auf einer Seite, einem Beitrag oder direkt über die Medienbibliothek erfolgen kann.

Ein FTP-Client (wie z.B. FileZilla) verlinkt auf die Live-Dateien deiner WordPress Seite, zusammen mit den Dateien auf deinem Computer. Dies ermöglicht es dir, lokale Dateien auf die gehosteten Dateien der Seite zu übertragen, solange du dich mit deinen SFTP-Hosting-Zugangsdaten in den FTP-Client einloggst.

Schließlich bietet ein Hosting cPanel Zugriff auf einen Online-Dateimanager. Er funktioniert ähnlich wie ein FTP-Client und gibt dir die Kontrolle über die gleichen Dateien. Der Hauptunterschied ist, dass das cPanel eine Online-Web-App ist und du deine Dateien in das cPanel hochladen musst, anstatt sie sofort von einer lokalen Umgebung auf eine Live-Site in einem FTP-Client zu übertragen.

Jede Methode hat ihre Vor- und Nachteile. Kinsta Hosting bietet kein cPanel an, daher ist es am besten, wenn du kleinere HTML-Dateien, die du speichern oder teilen möchtest, über das WordPress-Dashboard hochlädst.

Ein FTP/SFTP-Client ist die gewählte Methode, um aus einer statischen HTML-Website eine komplett neue Website zu erstellen. Der Grund dafür ist, dass ein FTP/SFTP Client eine unglaubliche Menge an Kontrolle über die Dateien deiner Website bietet und alles von Mediendateien bis hin zu HTML-Ordnern direkt von deinem Computer übertragen kann.

Wie man HTML Code zu einer WordPress Seite oder einem Beitrag hinzufügt

Es gibt ein paar Methoden, um eine HTML-Datei direkt in einen WordPress-Beitrag oder eine Seite hochzuladen. Die erste ist der Prozess des eigentlichen Hochladens einer HTML zip oder TXT Datei als Medienelement. Diese Methode funktioniert ähnlich wie das Hochladen eines Bildes in den Medienmanager, nur dass du es über eine Seite oder einen Beitrag machst und es sich um eine HTML-Datei und nicht um ein Foto handelt.

Du kannst diese Methode vervollständigen, indem du einen Link einfügst, über den die HTML-Datei heruntergeladen werden kann, oder du kannst die Datei selbst im Backend deiner Seite aufrufen.

Eine andere Möglichkeit ist das Einfügen eines HTML-Blocks in eine Seite oder einen Beitrag, um einige Designelemente hinzuzufügen. Du könntest zum Beispiel ein Anmeldeformular speziell für diese Seite erstellt haben, das du mit einem kleinen HTML-Block einfügen möchtest.

Beide Methoden haben unterschiedliche Zwecke und Prozesse, um das Endergebnis zu erreichen.

Um eine HTML-Datei in einen Beitrag oder eine Seite hochzuladen, befolge diese Schritte.

Gehe im WordPress Dashboard auf Seiten > Alle Seiten. Wenn du mit einer leeren Seite beginnen möchtest, gehe auf Seiten > Neu hinzufügen.

Wähle die Seite aus, auf die du die HTML-Datei hochladen möchtest. Du kannst auch auf die Schaltfläche Neu hinzufügen klicken, wenn du eine ganz neue Seite erstellst.

Diese Schritte sind praktisch die gleichen wie beim Hinzufügen von HTML-Dateien zu WordPress-Beiträgen. Wir gehen einfach durch, wie man es mit einer WordPress Seite macht. Wenn du stattdessen einen Beitrag verwenden möchtest, gehe auf Beiträge > Alle Beiträge oder Beiträge > Neu hinzufügen.

Dieser Teil hängt davon ab, ob du den Gutenberg Block Editor oder den klassischen WordPress Editor verwendest.

In Gutenberg findest du die Schaltfläche mit dem + Zeichen und klickst darauf, um nach einem neuen visuellen Baustein zu suchen. Suche nach dem Dateiblock, den du entweder in das Suchfeld eintippen oder durch die Liste der Blöcke scrollen kannst, um ihn zu finden.

Wähle den Dateiblock aus, um ihn auf deiner Seite oder in deinem Beitrag zu platzieren.

Hinweis: Wenn du den klassischen WordPress-Editor verwendest, klicke einfach auf die Schaltfläche Medien hinzufügen und lade deine HTML-Datei damit hoch. Es wird ein Link zu deiner Datei erstellt, den die Nutzer auf dem Frontend deiner Seite herunterladen können.

Für den Gutenberg-Block sollte das Datei-Modul einen Upload-Button anzeigen. Klicke auf den Upload-Button und suche die gewünschte HTML-Datei auf deinem Computer. Diese sind normalerweise als TXT-Dateien, Sammlungen von TXT-Dateien in einem Ordner oder in ZIP-Dateien gespeichert.

Sobald sie auf deine Website hochgeladen ist, wird die Datei als Link angezeigt. Jeder Nutzer kann nun auf deine Webseite kommen und auf den Link von dieser Seite oder diesem Beitrag klicken, um die HTML-Datei zu sehen und sie sogar auf seinen eigenen Computer herunterzuladen.

Außerdem wird die Datei in deiner Mediathek gespeichert, so dass du jederzeit die URL der Datei abrufen und sie an einem anderen Ort platzieren kannst. Du kannst WordPress auch nur als Speicherort für die Datei verwenden.

Wenn du die Datei nur in WordPress speichern willst und keinen Download-Link für alle deine Nutzer haben willst, löschst du einfach den Link, der auf der Seite oder im Beitrag erstellt wurde.

Es kann sein, dass du einen Fehler siehst, der dir sagt, dass der Dateityp aus Sicherheitsgründen nicht erlaubt ist. Das ist ziemlich häufig der Fall, also wirf einen Blick auf diese Anleitung, um diesen Fehler zu entfernen und die meisten Dateitypen in deiner WordPress-Mediathek zu erlauben. Insgesamt beinhaltet der Prozess entweder die Bearbeitung deiner wp-config.php Datei oder die Verwendung eines Plugins, um den Fehler zu beseitigen.

HTML Code zum Design deiner Seite oder deines Beitrags hinzufügen

Wie bereits erwähnt, ist einer der Gründe, warum du eine HTML-Datei zu einer Seite oder einem Beitrag hinzufügen möchtest, dass du ein einfaches Design auf dieser Seite oder diesem Beitrag rendern möchtest.

Die vorherige Methode ist eher dafür gedacht, HTML-Dateien in WordPress zu speichern und einen Link hinzuzufügen, damit die Leute sie herunterladen können.

Dies ist eine funktionellere Lösung, da du die Möglichkeit hast, deinen eigenen HTML-Code für Dinge wie Formulare, Autorenboxen, Banner und mehr zu kopieren und einzufügen.

Gehe auf die Seite oder den Beitrag deiner Wahl und wähle den Bereich, in dem du den HTML-Code platzieren möchtest.

Klicke auf das + Zeichen, um die Auswahl der Blöcke zu sehen. Finde den Custom HTML-Block, indem du ihn entweder in das Suchfeld eingibst oder durch die Liste der Blöcke scrollst.

Wähle den benutzerdefinierten HTML-Block aus, um ihn in die Seite oder den Beitrag einzufügen.

Dieser Block bietet ein einfaches, leeres Codefeld, in das du jeden HTML-Code einfügen oder eingeben kannst, den du zur Verfügung hast.

Für dieses Tutorial werde ich ein einfaches Kontaktformular mit einem E-Mail-Feld und einem Submit-Button einfügen.

Sobald du den HTML-Code in den Block eingefügt hast, klicke auf die Schaltfläche Aktualisieren oder Veröffentlichen, damit er im Frontend deiner Seite oder deines Beitrags angezeigt wird.

Wenn du auf das Frontend der Seite oder des Beitrags gehst, sollte das HTML seine Arbeit tun und das Design oder die Funktionalität offenbaren, die du versucht hast, dem Layout hinzuzufügen.

In diesem Fall kannst du das Formular sehen, in dem ich nach einer E-Mail frage und auch einen Submit-Button habe.

Der Prozess und das Ergebnis sind im klassischen WordPress-Editor nicht viel anders, außer dass du keinen Gutenberg-Block per Drag-and-Drop einfügst. Stattdessen navigierst du zum Text-Tab in deinem Editor (anstelle des Visual-Tabs) und fügst den HTML-Code dort ein, wo du ihn auf der Seite haben möchtest.

Wie man eine HTML-Überprüfungsdatei in WordPress hochlädt

Ein weiterer Grund, warum du HTML in WordPress hochladen möchtest, ist die Optimierung für die Suche. Google und einige andere Suchmaschinen bieten Konsolen und Webmaster-Tools an, mit denen du die Leistung deiner Seite einsehen und deine Inhalte mit Hilfe von Analysen und Berichten optimieren kannst, die Probleme und deren Behebung aufzeigen.

Allerdings kann Google nicht davon ausgehen, dass du der Besitzer einer beliebigen Webseite bist, nur weil du behauptest, dass du es bist. An dieser Stelle kommt eine HTML-Verifizierungsdatei ins Spiel.

Einfach ausgedrückt: Google stellt eine HTML-Datei zur Verfügung, die du auf deine Website hochladen musst. Nur der Eigentümer der Website sollte Zugriff auf die Website-Dateien haben, so dass Google dies als eine Möglichkeit nutzt, um sicherzustellen, dass du nicht versuchst, die Webmaster-Tools von jemand anderem zu kontrollieren.

Die hochgeladene HTML-Verifizierungsdatei sendet dann eine Nachricht an Google, die anzeigt, dass die Datei zu dieser Domain hinzugefügt wurde und dass du tatsächlich der Eigentümer bist.

Es ist klug, sich über das Hochladen einer HTML-Verifizierungsdatei zu informieren, da Google und die Suchmaschinen nicht die einzigen Dienste sind, die dich bitten, deine Identität oder Eigentümerschaft mit solchen Dateien zu verifizieren. Einige Plugins, Verzeichnisse und Plugins von Drittanbietern wollen ebenfalls sicherstellen, dass du kein Unbefugter bist.

Gründe für das Hochladen einer HTML-Verifizierungsdatei

• Zum Nachweis, dass du eine Webseite für Suchmaschinenoptimierungs-Tools besitzt.
• Beim Nachweis der Eigentümerschaft für bestimmte Online-Verzeichnisse.
• Wenn du auf eine Integration oder ein Plugin eines Drittanbieters verlinken musst, musst du herausfinden, ob du tatsächlich der Eigentümer deiner Seite bist.

Wie du sehen kannst, kann diese HTML-Datei aus verschiedenen Quellen stammen. Du musst in der Regel nichts über den Inhalt der HTML-Datei wissen, sondern nur, dass sie dazu verwendet wird, den Pingback an den Dienst zu senden, um zu zeigen, dass du die Kontrolle über die Site-Dateien hast.

In unserer Demonstration des Hochladens einer HTML-Verifizierungsdatei in WordPress werden wir die Google Search Console einbeziehen, da dies einer der häufigsten Gründe für die Verwendung einer Verifizierungsdatei ist.

Um zu beginnen, registriere deine Webseite bei Google. Dies geschieht, indem du zum Google Search Console Tool gehst. Klicke auf die Schaltfläche Jetzt starten und logge dich entweder in dein Google-Konto ein oder registriere ein Konto bei Google.

Sobald du in der Google Search Console eingeloggt bist, siehst du vielleicht eine Liste mit Eigenschaften, die du in der Vergangenheit entweder verwaltet oder getestet hast. Andererseits kann es auch sein, dass du eine leere Liste siehst.

Wie auch immer, gehe auf den Search Property Tab in der oberen linken Ecke des Dashboards.

Wähle im Dropdown-Menü die Option Add Property, um fortzufahren. Dies ermöglicht es dir, deine Webseite als verwaltete Eigenschaft in der Google Search Console hinzuzufügen.

Das nächste Popup-Fenster fordert dich auf, einen Eigenschaftstyp auszuwählen. Die Option Domain erlaubt es dir, alle URLs über alle Subdomains hinweg zu verifizieren. Dies ist oft der einfachste Weg, eine Seite zu verifizieren, aber es erfordert eine DNS-Verifizierung – die du in deinem Hosting-Account findest.

Da es hier aber um den Upload von HTML-Dateien geht, werden wir uns mit der URL-Präfix-Option beschäftigen, die eine ältere, aber immer noch zuverlässige Methode ist, um zu verifizieren, dass du eine Website besitzt. Außerdem hilft diese Methode dabei, bestimmte URLs unter der von dir eingegebenen Adresse zu identifizieren.

Nimm also die URL von deiner Website und füge sie in das URL-Präfix-Feld ein.

Klicke auf die Schaltfläche Weiter.

Jetzt fordert die Google Search Console dich auf, die Eigentümerschaft der Website zu verifizieren.

Es gibt mehrere andere Verifizierungsmethoden, aber dies ist diejenige, die einen HTML-Datei-Upload verwendet.

Klicke auf den Button, der dich auffordert, die Datei herunterzuladen.

Speichere diese HTML-Datei auf deinem Computer in einem Ordner, den du dir merken kannst.

Im nächsten Schritt lädst du die Datei auf die WordPress Webseite hoch, die du zuvor in die Google Search Console eingefügt hast.

Wie bereits erwähnt, gibt es drei Möglichkeiten, eine HTML-Datei in WordPress hochzuladen.

Die erste Methode, das Hochladen über das Dashboard, ist definitiv eine praktikable Option. Viele Leute schrecken immer noch zurück, wenn ein häufiger Fehler beim Hochladen einer HTML-Datei in die Mediathek auftaucht. Aus diesem Grund ist es oft schneller, deine Uploads mit einem FTP-Client durchzuführen. Wenn du jedoch einen Upload in das WordPress Dashboard planst und die Fehlermeldung „Sorry, This File Type is Not Permitted“ siehst, kannst du mit dieser Anleitung das Problem beheben.

Jetzt hast du die anderen beiden Lösungen: die Verwendung eines FTP/SFTP-Clients oder das Hochladen in das cPanel deines Hosting-Accounts.

Das cPanel ist bei manchen Hostern keine schlechte Wahl, aber auch hier gilt: Kinsta bietet kein cPanel an. Daher werden wir uns hauptsächlich auf das Hochladen der HTML-Datei über einen FTP/SFTP-Client konzentrieren. Die detaillierten Schritte sind in dem oben verlinkten Artikel beschrieben, aber hier ist eine kurze Zusammenfassung, um dich auf deinem Weg zu begleiten.

Um zu beginnen, lade FileZilla auf deinen Computer herunter. Du kannst auch andere FTP/SFTP-Clients ausprobieren.

Hinweis: Wir empfehlen dir, vor diesem Prozess ein Backup deiner Webseite zu erstellen. Es ist ungewöhnlich, dass beim Übertragen von Dateien per FTP/SFTP Probleme mit der Website entstehen, aber es ist durchaus möglich. Du willst nicht, dass deine Seite abstürzt oder Daten verloren gehen, also erstelle eine Backup-Site-Datei.

Öffne den FTP/SFTP-Client und gib deine FTP/SFTP-Anmeldedaten ein, um dich mit dem Webhost zu verbinden.

Zu den erforderlichen Nachweisen gehören die folgenden:

• Host
• Benutzername
• Passwort
• Port

Wo findest du die Anmeldedaten für deine WordPress Seite?

Sie befinden sich in der Regel in deinem Hosting-Dashboard, du kannst dich also entweder an deinen Hoster wenden oder sie selbst suchen.

Bei Kinsta findest du die FTP/SFTP-Credentials ganz einfach, indem du in deinem Kinsta-Hosting-Panel auf den Reiter Seiten gehst und deine gewünschte Webseite auswählst.
Unter dem Reiter Info suchst du den Bereich SFTP/SSH. Kopiere die entsprechenden Anmeldedaten in den FTP/SFTP-Client.

Du kannst zum Beispiel die Elemente Host, Benutzername, Passwort und Port in Kinsta sehen.

Füge diese Elemente in den FTP/SFTP Client ein und klicke auf den Quickconnect Button.

Wenn du eine Fehlermeldung siehst, liegt es höchstwahrscheinlich daran, dass FileZilla standardmäßig das FTP-Protokoll und nicht das SFTP-Protokoll verwendet. Um das zu beheben, gehe zu Datei > Webseiten Manager. Füge eine neue Webseite in FileZilla hinzu und wähle SFTP. Füge die Anmeldedaten des Hosts in diesen Bereich ein und versuche erneut, dich zu verbinden.

Nachdem du dich mit deinem Host verbunden hast, erscheinen alle Dateien deiner WordPress Seite zur Bearbeitung.

Finde das Stammverzeichnis deiner Webseite, das Ordner wie wp-content und wp-admin enthält.

Finde die HTML-Verifizierungsdatei (in diesem Fall habe ich sie umbenannt, um sie leichter zu finden) unter dem Bereich, der die Dateien deines Computers anzeigt. Du könntest es z.B. unter Downloads sehen, wenn deine Internet-Downloads dorthin gehen.

Ziehe die Datei in den Stammordner deiner Webseite. Dies wird alles im FTP/SFTP-Client gemacht.

Der Upload sollte nur ein paar Sekunden dauern.

Sobald es in den Dateien deiner Webseite ist, kannst du zurück zur Google Verifizierungsseite gehen und überprüfen, ob es registriert, dass du die Webseite besitzt. Eine Erfolgsmeldung sollte in der Google Search Console erscheinen und verschiedene Funktionen öffnen sich, mit denen du den Zustand deiner Webseite optimieren und analysieren kannst.

Manuelles Konvertieren einer kompletten HTML Webseite zu WordPress

Um eine HTML Webseite zu WordPress zu konvertieren, kannst du entweder ein Plugin/App verwenden, deine Dateien manuell konvertieren oder ein Child Theme verwenden und die HTML Dateien in dieses Child Theme übertragen.

Die erste Möglichkeit ist die manuelle Konvertierung der HTML-Dateien in ein WordPress Theme.

Manche sagen, dass es die schwierigste Methode ist, aber andere bevorzugen es, da du die volle Kontrolle über den Prozess hast und dich nicht auf Apps oder Plugins verlassen musst, die manchmal unzuverlässig sein können. Folge den folgenden Schritten, um eine vollständige HTML zu WordPress Seite manuell zu konvertieren.

Erstelle einen Ordner für dein Theme und füge die Standard Theme Dateien hinzu

Erstelle auf deinem Computer einen Ordner, um alle grundlegenden Dateien deines Themes zu speichern. Benenne den Ordner nach Belieben, am besten gibst du ihm einen Namen, den du dir merken kannst.

Erstelle die folgenden grundlegenden Dateien für dein Theme:

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

Du kannst sie in deinem Code- oder Texteditor öffnen, da du sie in der Zukunft bearbeiten wirst. Ab sofort ist es nicht mehr nötig, Code in die Dateien einzufügen. Lass sie einfach im Ordner liegen.

Hinweis: Du kannst damit beginnen, sie als TXT-Dateien zu erstellen. Wenn du dann die Dateierweiterung änderst – z.B. von .txt zu .php oder .txt zu .css – passt dein Computer sie automatisch an das richtige Dateiformat an. Wenn du zum Beispiel eine .css Erweiterung hinzufügst, wird die Datei zu einem Cascading Style Sheet.

Übertrage das aktuelle CSS deiner WordPress Seite in den neuen Ordner

Du solltest bereits ein Theme auf deiner aktuellen WordPress Seite installiert haben. Wenn nicht, dann installiere ein Theme, um dir bei diesem Teil zu helfen.

Du wirst das CSS des aktuellen Themes als Grundlage verwenden und darauf in der style.css Datei mit den Dateien deiner Webseite aufbauen.

Kopiere daher den Stylesheet-Header von deiner WordPress Seite in die neue style.css Datei.

Es sollte in etwa so aussehen:

/*
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 diesem Fall hat deine Webseite das Twenty Seventeen Theme verwendet. Wenn du ein anderes Theme verwendest, wirst du einige Variationen im Stylesheet-Header sehen.

Nun ist es an der Zeit, die Elemente des alten Themes durch Informationen über dein neues Theme zu ersetzen.

Um dies zu tun, tausche Folgendes aus:

• Theme Name: Du kannst dein Theme beliebig nennen, aber es ist keine schlechte Idee, es so zu nennen wie deinen Theme-Ordner.
• Theme URI – Hier kannst du die Haupt-URL deiner Webseite verwenden.
• Autor – Gib hier deinen Namen ein, oder einen anderen Namen, den du gerne verwenden möchtest.
• Autoren-URI – Erstelle hier einen Link zu deiner Homepage.
• Beschreibung – Du kannst eine Beschreibung deines Themes erstellen, die im Backend deiner WordPress Seite angezeigt wird.

Lass alles andere so wie es ist. Die meisten anderen Elemente, wie z.B. die Lizenz und die Tags, brauchst du nur, wenn du das neue Theme im WordPress Theme Directory veröffentlichen möchtest.

Denke daran, dass das, was du gerade eingefügt und bearbeitet hast, dein Theme-Header ist.

Finde das bestehende CSS von deiner HTML Webseite. Kopiere dieses CSS und füge es nach dem Header in die neue style.css Datei ein.

Speichere und schließe die style.css Datei.

Nimm dein aktuelles HTML und teile es in Einzelteile

WordPress verwendet in der Regel PHP, um Elemente wie Dateien, Code und Medien aus seiner Datenbank zu ziehen. Daher muss eine HTML Webseite in einzelne PHP Dateien zerhackt werden, um sich in die WordPress Infrastruktur einzufügen.

Das mag einschüchternd klingen, aber alles, was nötig ist, ist dein HTML-Dokument in mehrere Teile zu unterteilen und jeden dieser Teile in eine PHP-Datei zu verwandeln.

Jede HTML-Datei wird anders aussehen, aber es hilft, ein visuelles Beispiel zu bekommen. Deshalb zeigen wir ein paar HTML Webseiten Templates zur Demonstration.

Der folgende Code ist eine großartige Möglichkeit, um einen Querverweis auf deine eigene HTML-Datei zu machen. Es ist eine einfache HTML-Webseite mit einer Kopfzeile, Menüpunkten, Unterüberschriften, einer Sidebar und einer Fußzeile. Du kannst einen ähnlichen Code in deiner eigenen index.html Datei finden.

<!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>

Das folgende Template ist ein weiteres Beispiel, auf dem du deine eigenen Strategien aufbauen kannst.

 

Wie du sehen kannst, ist die index.html Datei ein bisschen komplizierter, aber immer noch vertraut in der Art und Weise, wie sie strukturiert ist.

Beide Beispiele beinhalten Kopfzeilen, Inhaltsbereiche, Sidebars und Fußzeilen.

Du wirst höchstwahrscheinlich ein anderes Design haben. Aus diesem Grund musst du die unten beschriebenen Schritte anpassen.

Jeder weitere Schritt beinhaltet das Bearbeiten und Hinzufügen der neuen WordPress-Dateien, die du zuvor erstellt hast. Trotzdem solltest du die index.html Datei deiner Webseite geöffnet lassen. Du wirst sie in Zukunft benutzen.

Die header.php Datei

In deiner geöffneten HTML-Datei suchst du nach allem, was am Anfang der Datei steht und mit dem Hauptinhaltsbereich endet. Der Hauptinhaltsbereich wird normalerweise mit einem <div class="main"> oder <main> Tag dargestellt.

Kopiere diesen Abschnitt der HTML-Datei und füge ihn in deine neue Datei header.php ein.

Suche danach die Stelle, an der </head> steht.

Direkt davor fügst du das Folgende ein:

<?php wp_head();?>

Dieses Stück Code ist für die meisten WordPress Plugins wichtig, damit sie funktionieren.

Die Datei sidebar.php

Suche nach dem <aside> Abschnitt in deiner indexieren.html Datei.

Alles innerhalb der <aside> und </aside> Tags, einschließlich dieser aside Tags selbst, sollte in die neue sidebar.php Datei kopiert werden.

In unserer Beispieldatei sieht es in etwa so aus:

<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>

Die footer.php Datei

Wenn du eine einfache HTML Webseite hast, musst du vielleicht nur noch deine Fußzeileninformationen übertragen. Andere Webseiten sind ein bisschen komplizierter. Unabhängig davon ist es keine schlechte Idee, mit der Änderung des Footers zu enden, da es einer der Kernbausteine ist, aus denen die WordPress Seite besteht.

Finde in der index.html Datei den gesamten Code nach dem </aside> (die Sidebar) Tag und kopiere ihn.

Auch hier kann es sein, dass du nach dem Sidebar-Abschnitt noch weitere Inhalte hast, aber bei einfacheren HTML Webseiten ist es möglich, dass du dich nur mit dem Footer beschäftigen musst.

In unserem Beispiel sieht die Fußzeile etwa so aus:

</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>

Aber nicht so schnell. Nachdem du den Footer Code in die neue footer.php Datei eingefügt hast, füge das <?php wp_footer();?> Snippet direkt vor der </body> Klammer ein. Dies hilft, dass der Footer mit WordPress richtig funktioniert.

Unten siehst du ein Beispiel für den <?php wp_footer();?> Code, der in die Footer-Datei eingefügt wurde.

</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>

Achte darauf, dass du all diese neuen Dateien in deinem Theme-Ordner speicherst. Nachdem du zum Beispiel diesen Footer Code in die footer.php Datei eingefügt hast, solltest du auf den Speichern-Button in deinem Editor klicken und ihn schließen.

Nun, da die grundlegenden Dateien fertig sind, schließe die ursprüngliche index.html Datei deiner HTML Webseite.

Verbinde deine header.php und index.php Dateien mit WordPress

Du hast es bereits in die Datei header.php eingefügt, aber du musst noch weitere Maßnahmen ergreifen. Im Wesentlichen willst du den Aufruf im Stylesheet von dem HTML, das dort jetzt drin ist, auf das Standard WordPress PHP Format ändern.

Zurück in der header.php Datei, finde den <head> Abschnitt.

Wir suchen nach dem Aufruf für das Stylesheet. Es sieht ungefähr so aus:

<link rel="stylesheet" href="style.css">

Lösche diesen Aufruf und ersetze ihn durch den folgenden:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

Das ist alles, was du an der Datei header.php machen musst. Der Aufruf des Stylesheets arbeitet jetzt mit dem WordPress Format, nicht mit HTML.

Speichere und schließe die header.php Datei.

Als nächstes öffnest du die index.php Datei (nicht die index.html Datei, die du vorher benutzt hast, sondern die neue index.php Datei).

Zu diesem Zeitpunkt ist die index.php Datei leer.

Nimm den folgenden Code und kopiere ihn und füge ihn in die neue index.php Datei ein. Lass das Leerzeichen zwischen den ersten beiden Zeilen stehen. Das ist aus einem bestimmten Grund da, den du gleich sehen wirst.

Diese Zeilen dienen als Aufrufe zu deinen anderen Webseiten-Dateien, einschließlich header.php, sidebar.php und footer.php.

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Der freie Platz in der zweiten Zeile ist für das reserviert, was wir The Loop nennen, ein dynamischer Prozess in WordPress, der im Hintergrund läuft, um neue Beiträge zu deiner Webseite hinzuzufügen. Im Grunde genommen teilt es WordPress mit, dass noch mehr Inhalte kommen werden und dass es The Loop nutzen soll, um diese Inhalte hinzuzufügen. Erfahre hier mehr über The Loop.

Um The Loop hinzuzufügen, füge den folgenden Code in die Lücke ein, die du zuvor in der index.php Datei gelassen hast (direkt unter <?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; ?>

Das Ergebnis sollte wie folgt aussehen:

<?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(); ?>

Mach weiter und speichere die Datei index.php. Du kannst die Datei jetzt auch schließen.

Damit ist das WordPress Theme, das auf deiner ursprünglichen HTML Webseite basiert, fertig und kann in WordPress hochgeladen werden.

Das neue Theme zu WordPress hochladen

Der letzte Schritt ist der Upload des Themes auf deine WordPress Seite. Eine Möglichkeit ist, den Ordner der Webseite einfach zu zippen und es in den WordPress Theme Bereich hochzuladen, ohne einen Screenshot deiner Webseite als Referenz hinzuzufügen.

Obwohl dein Theme auch ohne einen Referenz-Screenshot funktioniert, empfehlen wir dir, einen Screenshot zu erstellen, damit es für dich einfacher ist, deine Themes zu organisieren und zu verstehen, welches davon tatsächlich auf deiner Webseite aktiv ist.

Mit Screenshot meinen wir die kleine Vorschau, die für alle installierten Themes auf deinem WordPress Dashboard erscheint. Auch die, die nicht aktiv sind, haben einen Screenshot. Es ist eine Voraussetzung, dass du einen Screenshot hast, wenn du dein Theme in die WordPress Theme Library hochladen willst.

Auch wenn du dein Theme nicht öffentlich hochlädst, hilft ein Screenshot bei der Verwaltung deines eigenen Themes. Wie du sehen kannst, ist es ziemlich schwierig zu erkennen, wie das Theme aussieht, wenn keine Screenshot-Vorschau verfügbar ist. Das Twenty Seventeen Child Theme hat keinen Screenshot, also ist es nur ein leeres Bild. Es könnte in Zukunft viele verwirren.

Um einen Screenshot hinzuzufügen, öffne die alte HTML Webseite in einem Browser und mache einen Screenshot der Homepage mit einem beliebigen Clipping Tool oder einer Screenshot Software, die du zur Verfügung hast.

Öffne deine bevorzugte Bildbearbeitungssoftware und schneide den Screenshot auf 880×660 Pixel zu. Dies stellt sicher, dass der Screenshot nicht gestreckt oder unproportioniert ist, wenn er in WordPress eingefügt wird.

Speichere die bearbeitete Version des Screenshots in deinem neuen Theme-Ordner. Er muss nicht in einem speziellen Ordner abgelegt werden – platziere ihn einfach im Theme Ordner neben den anderen Dateien wie header.php und footer.php.

Nun hast du zwei Möglichkeiten, das neue WordPress Theme in WordPress hochzuladen.

Die erste ist, dass du die Dateien per FTP in den Ordner wp-content/themes ziehst. Wenn du diesen Weg wählst, ist es nicht nötig, die Datei zu zippen. Verwende einfach einen FTP-Client wie FileZilla und ziehe den regulären Ordner in den wp-content/themes Ordner.

Die andere Möglichkeit ist, eine gezippte Version in das WordPress Dashboard hochzuladen.

Um zu beginnen, komprimiere den gesamten Theme-Ordner in eine Zip-Datei.

Als nächstes gehst du im WordPress Dashboard auf Appearance > Themes.

Klicke auf die Schaltfläche Neu hinzufügen.

Wähle die Schaltfläche Theme hochladen.

Klicke auf Datei auswählen und suche nach der gezippten Datei auf deinem Computer. Wähle die Datei aus, damit sie auf dem WordPress Dashboard angezeigt wird.

Klicke auf Jetzt installieren, um die Datei in WordPress zu verarbeiten.

WordPress sollte dir mitteilen, dass das Paket installiert wird und dass es erfolgreich installiert wird.

Klicke auf die Schaltfläche Aktivieren, um den Vorgang abzuschließen.

Jetzt erscheint das Theme mit seinem Screenshot in der Themes-Liste als aktives Theme. Du kannst nun zum Frontend deiner WordPress Seite gehen, um eine WordPress Version deiner ursprünglichen HTML Webseite zu sehen.

Behalte im Hinterkopf, dass keine HTML zu WordPress Konvertierung gleich ist. Es kann sein, dass deine Konvertierung etwas komplexer ist, als das, was wir gerade durchgegangen sind. Generell müssen noch einige andere Maßnahmen ergriffen werden, um ein exaktes Duplikat deiner HTML Webseite zu erhalten.

Zum Beispiel musst du Widget-Bereiche und Kommentare hinzufügen und sogar deinen Blogtitel und deine Beschreibung anpassen, damit sie in WordPress veränderbar sind.

Es ist viel Handarbeit nötig, um eine HTML Webseite in eine WordPress Seite umzuwandeln, und du wirst feststellen, dass einige Änderungen nur mit ein wenig CSS Markup möglich sind.

Außerdem hat dieses Tutorial nichts mit dem Hinzufügen von Inhalten wie Posts und Bildern zu tun. Das kannst du manuell machen, indem du Bilder in die Medienbibliothek hochlädst und Elemente wie die URL-Strukturen anpasst.

Es gibt einige Plugins, die den Import von Inhalten automatisieren, aber die meisten von ihnen sind nicht auf dem neuesten Stand mit den neuen WordPress-Versionen. Daher schlagen wir vor, dass du sie vielleicht ausprobierst, um zu sehen, ob sie für dich funktionieren, aber du solltest nicht viel erwarten.

HTML zu WordPress konvertieren über ein Child Theme

Dies ist zweifellos eine der einfachsten Methoden, um eine komplette HTML Webseite in eine WordPress Seite zu konvertieren. Es funktioniert, indem du eines der bereits existierenden kostenlosen WordPress Themes online verwendest. Du kannst also deinen Favoriten auswählen und diesen mit dem Design deiner Webseite kombinieren.

Insgesamt verwendest du das bereits erstellte WordPress Theme als Parent Theme. Dann wird die HTML Webseite konvertiert, um mit WordPress zu arbeiten und mit dem Parent Theme als Child Theme verknüpft. Wenn du Fragen zu Parent- und Child-Themes hast, kannst du hier unseren Guide zum Thema lesen.

Zur kurzen Erklärung: Das Parent Theme verwaltet die Funktionalität deiner Webseite, während das Child Theme auf dem Parent Theme aufbaut. Das Parent-Theme kann technisch gesehen für sich alleine stehen, das Child Theme jedoch nicht. Daher nutzen wir das Child Theme, um das Design des Parent Themes zu verändern, während wir die leistungsstarken Funktionen des Parent Themes beibehalten.

Hier erfährst du, wie du mit einem Child Theme von HTML zu WordPress konvertieren kannst.

Wähle ein Parent Theme

Der erste Schritt besteht darin, ein Theme auszuwählen, das dir gefällt. Das Theme, für das du dich entscheidest, wird als dein Parent Theme fungieren und du wirst es als Grundlage für das Design deiner Webseite verwenden.

Idealerweise suchst du dir ein Theme, das dem Design deiner alten Webseite sehr ähnlich ist. Eine weitere Option ist es, ein WordPress Framework oder ein Starter Theme zu verwenden, da beide Arten von Themes bereits als Designgrundlage verwendet werden.

Ein hochwertiges Starter-Theme ist zum Beispiel das Twenty Twenty Theme oder eines der Standard-WordPress-Starter-Themes, die nach dem Jahr benannt sind, in dem sie erstellt wurden. Wir empfehlen, in den Jahren zurück zu gehen (Twenty Nineteen, Twenty Seventeen, etc.), um zu sehen, ob eines davon besser zum Design deiner Webseite passt.

Wir werden uns für dieses Tutorial für das Twenty Seventeen Theme entscheiden, da es sehr sauber ist und zu vielen einfachen HTML-Webdesigns passt.

Unabhängig davon sind alle diese Themes wunderbare Ausgangspunkte.

Um zu beginnen, installiere das Theme auf deiner WordPress Webseite.

Du kannst das Theme aktivieren, wenn du möchtest, aber du wirst später ein neues Child Theme aktivieren und das Starter Theme nur als Basis für das Design verwenden.

Einen neuen Ordner erstellen

Alle WordPress Themes benötigen Ordner, um die Dateien deiner Webseite zu speichern. Daher musst du einen neuen Ordner für das Child Theme erstellen, das aus der HTML Webseite erstellt wird.

Wir empfehlen, den Ordner nach deinem Parent Theme zu benennen und am Ende des Ordnernamens „-child“ hinzuzufügen.

Zum Beispiel nennen wir den Ordner in diesem Fall „twentyseventeen-child“.

Im Großen und Ganzen ist jeder Name geeignet, solange du dir den Namen des Ordners merken kannst und du keine Leerzeichen hinzufügst.

Konfiguriere dein Style Sheet

Alle Child Themes benötigen Stylesheets, die in den Ordner des Themes gelegt werden.

Erstelle daher ein Textdokument und nenne es style.css. Speichere es im Theme Ordner und füge den folgenden Code in diese Textdatei ein:

/*
 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
*/

Achte darauf, die Elemente zu ersetzen, die für deine Webseite spezifisch sind. Du wirst möglicherweise Dinge wie Theme Name, Theme URI, Author, Template und einige andere Elemente ändern müssen, um sicherzustellen, dass es mit deinen eigenen Dateinamen übereinstimmt. Es ist ähnlich wie einige der Schritte im Abschnitt „Manuelles Konvertieren einer kompletten HTML Webseite zu WordPress“, wo erklärt wird, was jede Zeile bedeutet.

Das Wichtigste ist das Template Tag. Dieser sollte nach dem Parent Theme benannt werden, damit das Child Theme richtig funktioniert.

Erstelle eine functions.php Datei

Wenn du nur das Stylesheet für deine Webseite verwenden und das Child Theme aktivieren würdest, wäre eine HTML Webseite ohne jegliches Styling vorhanden. Wir wollen aber auch dem Child Theme Styling hinzufügen, damit es so aussieht, wie wir es wollen.

Das gesamte Styling wird vom Parent Theme übernommen.

Daher wird eine functions.php Datei benötigt, um die Styles des Parent Themes in das Child Theme zu vererben.

Erstelle eine Datei namens functions.php in deinem Theme Ordner.

Um die Datei zu aktivieren, füge einen öffnenden PHP-Tag hinzu, zusammen mit einem Code, der WordPress auffordert, das Styling des übergeordneten Themes zu verwenden:

<?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' );

Ein weiterer Vorteil dieses Codes ist, dass er es dir ermöglicht, das Design deiner Webseite mit deinem Child Theme anzupassen.

Schalte das neue Child Theme ein

Nun ist es an der Zeit, das Child Theme zu aktivieren.

Eine Möglichkeit, das Child Theme zu aktivieren, ist das Hinzufügen des Ordners zur wp/content/themes Datei in deinen WordPress Dateien. Dies kannst du mit einem FTP/SFTP Client machen.

Du kannst den Ordner auch zippen und das Theme unter Appearance > Themes > Add New hochladen.

Wähle die Schaltfläche Theme hochladen.

Klicke auf Datei auswählen und suche die Zip-Datei für das Child Theme auf deinem Computer.

Nach dem Hochladen klickst du auf die Schaltfläche Jetzt installieren.

Klicke auf die Schaltfläche Aktivieren.

Du solltest nun das Twenty Seventeen Child Theme (oder welches Theme du auch immer verwendet hast) als dein primäres Theme aktiviert sehen.

Unabhängig von der Methode, die du zur Aktivierung des Child Themes verwendest, sollte deine WordPress Webseite dein Parent Theme widerspiegeln. Mit anderen Worten, es ist ein exaktes Duplikat des Parent-Themes.

Hinweis: Es ist möglich, einen Screenshot zu deinem neuen Theme hinzuzufügen, anstatt überhaupt keine Vorschau zu haben. Wie du einen Screenshot zum Theme hinzufügst, haben wir in einem der vorherigen Abschnitte mit dem Titel „Manuelles Konvertieren einer kompletten HTML Webseite zu WordPress“ beschrieben.

HTML-Dateien hinzufügen

Das Ziel ist es, eine Webseite zu erstellen, die deiner ursprünglichen HTML Webseite ähnelt, nicht dem übergeordneten Theme.

Daher besteht der letzte Schritt darin, dass du den Inhalt deiner HTML Webseite auf deine neue WordPress Webseite kopierst. Die meiste Zeit wirst du diese Schritte manuell durchführen müssen. Wir haben es bereits erwähnt, aber es gibt ein paar Plugins, die den Prozess der Übertragung von Inhalten automatisieren. Allerdings sind diese Plugins nicht auf dem neuesten Stand mit den neueren WordPress-Versionen, also verwende sie auf eigene Gefahr.

Was ist ein HTML zu WordPress Konverter? (Und was sind die Optionen?)

Ein HTML zu WordPress Konverter nimmt die oben beschriebenen Schritte und vereinfacht sie entweder oder erledigt die Aufgabe komplett für dich. Du könntest ein HTML zu WordPress Konverter Tool in Betracht ziehen, wenn du nicht die Zeit oder Erfahrung hast, die Konvertierung manuell vorzunehmen.

Konverter gibt es in vielen verschiedenen Ausführungen, aber es ist wichtig zu bedenken, dass nicht alle von ihnen eine vernünftige Alternative zum manuellen Durchlaufen des HTML zu WordPress Konvertierungsprozesses sind.

Konverter werden in den folgenden Formen angeboten:

• Software-Konverter von Drittanbietern, sowohl online als auch lokal.
• WordPress Plugins.
• Tatsächliche menschliche Entwickler.

Wenn du dir die Konvertierungsoptionen ansiehst, erscheinen die Software/Apps von Drittanbietern vernünftig für einfache Aufgaben. Du kannst eine Zip-Datei mit den HTML-Dateien deiner Webseite nehmen und sie in den Konverter hochladen. Die meisten der verfügbaren Tools von Drittanbietern funktionieren als Online-Apps, du öffnest sie also einfach in deinem Browser und klickst auf den Upload-Button.

Wir mögen diese Apps für weniger komplizierte Konvertierungen. Wenn du eine einfache HTML Webseite hast und es auf WordPress laufen lassen willst, kann dies den Trick machen, aber ein reibungsloser Übergang ist nicht garantiert.

Was WordPress Plugins angeht, die HTML für WordPress konvertieren, wirst du es schwer haben, Plugins zu finden, die eine komplette HTML Webseite nehmen und die Dateien für WordPress konvertieren. Es gab ein paar Plugins, aber keines von ihnen wurde aktualisiert, um mit den neueren Versionen von WordPress zu funktionieren, und du willst kein veraltetes Plugin verwenden.

Ein paar Plugins bieten jedoch die Funktionen, die für grundlegende Datei-Uploads benötigt werden, die es einfacher machen als eine FTP-Übertragung oder das Durcheinanderbringen mit dem Backend deines Host-Accounts. Insgesamt erlauben viele der Plugins nur einzelne Datei-Uploads, daher ist es nicht der beste Weg für eine massive Umstellung der Webseite.

Wir betrachten die letzte Methode (tatsächliche menschliche Entwickler) als eine Form von HTML zu WordPress Konverter, da es definitiv den Prozess für dich automatisiert, indem du um Expertenhilfe bittest und eine Person den Job erledigen lässt. Insgesamt bietet die Beauftragung eines Entwicklers für die Konvertierung deiner HTML Webseite die geringste Chance, dass du auf Probleme stößt, und du hast jemanden, mit dem du sprechen kannst, wenn etwas schief läuft.

Die besten HTML zu WordPress Konverter Plugin Optionen und andere Tools

Wie bereits erwähnt, gibt es HTML zu WordPress Konverter in vielen verschiedenen Konfigurationen. Du wirst nicht viele ausgewiesene WordPress Plugins finden, die nicht entweder veraltet sind oder nicht mehr funktionieren. Wir haben jedoch einige bevorzugte Konverter Plugins, die kleinere Konvertierungsaufgaben erledigen, zusammen mit Web Apps und manuellen Entwicklungsoptionen, die für fortgeschrittene HTML zu WordPress Konvertierungsaufgaben nützlich sind.

Vor- und Nachteile der Verwendung eines automatisierten HTML zu WordPress Konverter Plugins oder einer App

Ein automatisierter HTML zu WordPress Konverter klingt für manche wie ein Segen, aber es ist nicht immer die beste Lösung. Wirf einen Blick auf die Vor- und Nachteile, bevor du dich für eine App oder ein Plugin entscheidest, das zum Duplizieren oder Konvertieren von HTML entwickelt wurde.

Vorteile

• Es erspart dir das Erstellen eigener Dateien für deine Webseite und generiert sie oft für dich.
• Viele der Konverter geben dir die Möglichkeit, HTML-Elemente zu zerlegen und auszuwählen, welche davon in die richtigen Dateien für WordPress gehen sollen.
• Du kannst ein Theme aus altem HTML erstellen und dieses auf mehreren Webseiten verwenden.
• Einige Tools benötigen nur eine URL, um eine neue Webseite oder ein Theme zu erstellen.
• Andere Tools bieten Optionen, um eine Webseite zu duplizieren, die du nicht besitzt, und bieten einen Ausgangspunkt für ein Design, das dir gefällt.

Nachteile

• Oft bleibt dir noch manuelle Arbeit, um Inhalte wie Blogbeiträge und Fotos zu übertragen.
• Du wirst wahrscheinlich herausfinden müssen, wie du die Links von deiner alten Webseite manuell übertragen
• Diese Konverter werden nicht immer auf dem neuesten Stand gehalten. Einer der besten Konverter war ein WordPress Plugin, aber wir haben es in diesem Artikel nicht empfohlen, da der Entwickler es nicht mehr pflegt.
• Es kann sein, dass einige der Konverter mit größeren Dateien nicht zurechtkommen.

Jetzt, wo du die Vor- und Nachteile von automatisierten HTML-Konvertern kennst, werfen wir einen Blick auf unsere Lieblings-Apps und Plugins für automatisierte Konverter.

WP Site Importer

Obwohl das WP Site Importer Tool alle Arten von Inhalten und Dateien von älteren Webseiten oder Webseiten von Drittanbietern extrahiert und importiert, kannst du darauf wetten, dass eines dieser Elemente HTML beinhaltet. Kurz gesagt, der WP Site Importer ermöglicht es dir, jede Webseite in eine WordPress Webseite zu verwandeln, indem er Inhalte wie Bilder, Menüs und Seiten aus der HTML Seite und den Dateien der Webseite zieht. Der WP Site Importer behebt defekte Links, sodass du sie nicht manuell anpassen oder neue hinzufügen musst. Es behält sogar die SEO-Informationen der vorherigen Webseite bei, einschließlich Meta-Beschreibungen und Keywords.

Der Importer spart dir Zeit und Geld, indem er die Kosten für einen Entwickler einspart und diese HTML- und Inhaltskonvertierung zu einem Ein-Klick-Prozess macht. Außerdem säubert er dein HTML, indem er den Quell-HTML-Code bereinigt und neu formatiert. Das macht deine HTML-Dateien kompatibler mit WordPress und zeigt Google, dass du mit sauberem Code arbeitest, was wiederum deine SEO verbessert.

Das WP Site Importer Tool funktioniert als direktes WordPress Plugin, so dass du das Plugin herunterladen und seine Funktionen direkt über das Dashboard aktivieren kannst.

WP All Import

Das WP All Import Plugin ist eines der schnellsten und einfachsten Tools, um XML-Dateien mit HTML-Daten hochzuladen. Mit dem Plugin kannst du Inhalte von einer vorherigen Webseite oder einer potentiellen Demo-Webseite, die mit einfachem HTML oder einigen HTML-Dateien erstellt wurde, die du gerne duplizieren und auf die neue WordPress Seite übertragen möchtest, migrieren.

Die Konvertierung geschieht in nur vier Schritten und du erhältst Zugang zu einer schönen Drag-and-Drop-Oberfläche, um deine Konvertierungen und Importe zu verwalten. Interessant am WP All Import Plugin ist auch, dass es URL-Importe von externen Webseiten übernimmt. Daher musst du nicht einmal ein Passwort oder die Kontrolle über eine Webseite haben, um diese wenigen Dateien und möglicherweise gerenderte Elemente in WordPress von dieser Webseite zu übertragen.

Eine vollständige Konvertierung einer Webseite kann mit diesem Plugin eine Herausforderung darstellen, aber es ist einen Versuch wert, besonders wenn es sich um eine einfache HTML-Datei handelt. Darüber hinaus unterstützt das Plugin HTML-Konvertierungen für Elemente wie WooCommerce-Produkte und WordPress-Seiten. Eine Premium-Version ist für erweiterte Funktionen erhältlich, vor allem für den Premium-Support, der es dir ermöglicht, bei diesen Konvertierungen um Hilfe zu bitten.

HTMLtoWordPress.io

Die HTMLtoWordPress.io online app ist eine der beliebteren Lösungen für die Konvertierung einer HTML-Datei zu WordPress. Das Spannende am HTMLtoWordPress.io Tool ist, dass es in erster Linie Konvertierungen für komplette Webseiten anbietet, also Webseiten, die mit HTML aufgebaut sind.

Alles, was du tun musst, ist die Homepage aufzurufen und deine HTML-Zip-Datei für eine schnelle Konvertierung hochzuladen. Die Web-App automatisiert die Konvertierung von HTML zu WordPress vollständig, so dass keine Programmierkenntnisse erforderlich sind oder ein Grund besteht, sich mit einem FTP-Client herumzuschlagen.

Du kannst dir auch eine vollständige Vorschau deiner neuen WordPress Seite ansehen, bevor du den Prozess abschließt und sie im Internet veröffentlichst. Die Inhalte und Bilder deiner Webseite bleiben auch für die neue WordPress Seite erhalten. Sie sind über die Simple Live Editor App editierbar und es soll diese Bilder, zusammen mit JavaScript und CSS, ohne Probleme referenzieren. Insgesamt sieht es nach einer soliden Lösung aus, wenn du eine oder mehrere HTML Webseiten hast, die konvertiert werden müssen. Als Bonus kannst du Klassen zu deinem HTML hinzufügen, um erweiterte WordPress-Funktionen zu nutzen.

Pinegrow Theme Converter für WordPress

Der Pinegrow Theme Converter ist ein einzigartiges Webdesign Tool, um einen HTML Webseiten Ordner zu nehmen und ihn sofort in ein komplettes WordPress Theme zu konvertieren. Der Theme Converter lädt deine Dateien hoch und präsentiert eine Vorschau der WordPress Seite in einer visuellen Oberfläche. Nach dem Upload kannst du verschiedene Elemente auf den Seiten anklicken und jedem Element intelligente Aktionen zuweisen. Diese integrieren sich mit WordPress, so dass, während du Aktionen zuweist, es die richtigen WordPress-Funktionen zu deiner benutzerdefinierten HTML-Struktur und dem Styling hinzufügt.

Sobald du dich für die gewünschten Aktionen entschieden und die Dateien gespeichert hast, verfügt Pinegrow über eine Option zum Exportieren des Projekts in Standard-WordPress-PHP-Dateien, die in eine reguläre WordPress-Installation hochgeladen werden können, um es in der Realität zu testen. Außerdem sorgt das Content-Import-System dafür, dass du die Medienelemente wie Bilder und Videos erfolgreich überführst.

Besonders gut gefallen uns die Funktionen, die es dir ermöglichen, zurück in Pinegrow zu gehen und Änderungen vorzunehmen. Alles, was du tun musst, ist auf den Update-Button zu klicken und die neue Version an dein WordPress-Theme zu senden, ohne dass du fortgeschrittene Änderungen am Coding vornehmen oder die Webseite in WordPress anpassen musst.

Es handelt sich hierbei nicht um ein Plugin. In der Tat werden keine WordPress Plugins verwendet, um die HTML-Datei in ein WordPress Theme zu verwandeln. Pinegrow kommt als herunterladbare Software in Mac-, Windows- und Linux-Versionen. Vom schönen visuellen Editor bis zur sofortigen Aktualisierungsfunktion sieht die Pinegro Software wie eine der besten Optionen aus, um eine vollständige HTML Webseite in ein WordPress Theme zu konvertieren.

Jekyll

 

Jekyll ist ein kostenloser HTML zu WordPress Konverter, der funktioniert, indem er einfache Textdateien in echte Webseiten umwandelt. Das Projekt wird auf GitHub als kostenloser Download gehostet. Es bietet die Möglichkeit, auf Datenbanken und Kommentarmoderation zu verzichten und sich stattdessen auf die Übertragung von Inhalten und die Übertragung/Konvertierung von Dateien mit HTML, CSS und Markdown zu konzentrieren.

Ein interessanter Teil von Jekyll ist, dass es sich um blog-orientierte HTML-Designs kümmert und die Inhaltseinstellungen für Seiten, Beiträge und Permalinks zusammenstellt, um deinen Blog zu migrieren und benutzerdefinierte Layouts und Kategorien und viele andere Elemente beizubehalten oder zu erstellen.

Du kannst den Jekyll-Konverter auf macOS, Ubuntu, Windows und sogar anderen Linux-Betriebssystemen installieren. Alles in allem ist Jekyll ein freiwilliges Projekt mit verschiedenen Ressourcen wie Themes, Plugins und Anleitungen, um dein Wissen zu testen und dir zu helfen, ein HTML-Design in etwas Besonderes zu verwandeln.

Uns gefallen besonders die Integrationen mit E-Commerce Tools wie MemberSpace und Formular-Apps wie Getform. Die Liste der Integrationen ist lang, aber es ist ein wahrer Beweis dafür, wie viel Potential du mit deiner Webseite hast, nachdem du die HTML zu WordPress Konvertierung gemacht hast.

Theme Matcher

Theme Matcher ist nicht so sehr ein HTML-Dateikonverter, sondern ein Extraktor von HTML-Dateien von Webseiten Dritter. Es generiert vollwertige WordPress Themes, nachdem du eine URL von deiner persönlichen Webseite oder einer HTML Webseite, die du nicht besitzt, eingefügt hast.

Die Idee hinter dieser Art von Konverter und Theme-Generator ist es, entweder eine deiner eigenen HTML Webseiten zu nehmen und sie in eine komplette WordPress Webseite zu verwandeln oder ein Theme zu erstellen, das auf einem Design basiert, das du anderswo online gesehen hast.

Du könntest zum Beispiel zu deinem Lieblings-Onlineshop navigieren und entscheiden, dass du dein Design mit dieser Formatierung und Struktur beginnen möchtest. Der Theme Matcher generiert ein komplett neues Theme für deine Webseite, das natürlich aus urheberrechtlichen Gründen geändert werden muss, aber es ist ein wunderbarer Startpunkt für dich.

Der Prozess funktioniert, indem du die URL deiner Webseite kopierst und in das Feld des Theme Matchers einfügst. Bitte es, ein Theme für dich zu erstellen und wähle das Layout der Webseite aus, um es zu WordPress zu konvertieren. Ein Großteil der HTML-zu-WordPress-Konvertierung läuft hier im Hintergrund ab, und es ist wichtig, diese WordPress-Inhaltsbereiche zu identifizieren, damit es einem echten WordPress-Theme so nahe wie möglich kommt. Schließlich kannst du das Theme herunterladen und es in dein WordPress CMS hochladen.

Wenn deine Webseite noch nicht live ist und du keine URL einfügen kannst, bietet der Theme Matcher eine Möglichkeit, eine Zip-Datei deiner HTML-Seite hochzuladen, um dann den gleichen Prozess zu durchlaufen.

Import Into Blog

Die Import Into Blog Webseite ist eine Online-App, die HTML- und andere Dateien von deiner Webseite in eine WordPress Seite konvertiert. Es stehen mehrere Optionen zur Verfügung, wie z.B. die Erstellung einer herunterladbaren XML-Datei to Import in deine WordPress Seite. Du kannst auch erwägen, das Endergebnis als WordPress Theme herunterzuladen, um es in WordPress hochzuladen und die fertige Webseite zu sehen.

Eine automatische Wiederherstellung deiner Webseite ist mit dem ImportIntoBlog Tool möglich. Ganz zu schweigen davon, dass alle internen Links umgeschrieben werden, so dass sie zu den richtigen Seiten auf deiner neuen Webseite führen. Der Großteil der Inhalte deiner Webseite wird automatisch erkannt und du kannst das Aussehen und den Stil des Themes anpassen, bevor du es exportierst. Im Allgemeinen arbeitet das Tool am besten mit statischen HTML-Dateien oder einer URL. Es verwaltet CSS-Dateien und Javascript und ermöglicht es dir, die komplette Geschichte hinter deiner Webseite herauszufinden und dafür zu sorgen, dass sie richtig funktioniert.

HTML to WordPress Converter

Der HTML zu WordPress Converter ist eine weitere Lösung, die eine HTML Webseite nimmt und sie in ein WordPress Theme umwandelt.

Es gibt ein Feld, in das du die URL deiner Webseite einfügst und auf den Button Theme generieren klickst. Du wählst die Inhalts- und Sidebar-Bereiche für WordPress aus, so dass deine Seiten und Beiträge an den richtigen Stellen landen, und du ziehst genau die notwendigen Daten von der vorherigen HTML Webseite. Es sieht so aus, als ob alle deine Inhalte übertragen werden sollten. Es kann jedoch sein, dass du deine Fotos und andere Medienelemente noch einmal überprüfen und den gelegentlichen Upload durch WordPress vervollständigen musst.

Dies erzeugt ein Theme und keine komplette Webseite. Du musst deine eigene WordPress Seite aktivieren und es woanders hosten. Du lädst das Theme von diesem Tool herunter, ein Theme, das genau wie die HTML Webseite von vorher aussieht. Behalte im Hinterkopf, dass einige Elemente nicht mehr so funktionieren werden, wie du sie ursprünglich hattest, aber es macht einen wunderbaren Job, die Struktur und Formatierung deiner Webseite aus unseren Tests beizubehalten.

Anscheinend bieten die Entwickler des HTML zu WordPress Konverter Tools auch kostenlose CSS Korrekturen an, falls etwas nicht so herauskommt, wie du es wolltest.

PHP Simple HTML DOM Parser

Der PHP Simple HTML DOM Parser vervollständigt einen notwendigen Prozess beim Hochladen einer HTML-Datei in WordPress. Der Parser findet, extrahiert und verändert alle HTML-Elemente auf deiner Webseite oder in einer HTML-Datei. Auf diese Weise kannst du Fehler identifizieren, sie vor der Konvertierung zu einer WordPress Seite beheben oder sogar das Tool nutzen, um die HTML-Elemente zu ändern, die auf deiner aktuellen WordPress Webseite vorhanden sind.

Dies ist ein kostenloser Download von der Webseite SourceForge, so dass du dir Bewertungen ansehen und bei Bedarf um Support bitten kannst.

Einen Entwickler anheuern

WP Geeks, WP Online Support und Acclaim bieten günstige HTML zu WordPress Konvertierungsservices für diejenigen an, die sich entweder nicht selbst um die Konvertierung kümmern wollen oder eines der oben genannten automatisierten Tools keine soliden Ergebnisse liefert. Der Grund, warum die Beauftragung eines Entwicklers manchmal so viel Sinn macht, ist, dass du am Ende Zeit und Geld für den Prozess sparen kannst, besonders wenn es sich um eine einfache Aufgabe handelt, für die du einfach nicht das Wissen hast.

Eine Partnerschaft mit einem echten Entwickler bedeutet, dass du keine deiner eigenen technischen Fähigkeiten – oder fehlenden technischen Fähigkeiten – einsetzen musst, um eine neue Webseite aus den HTML-Dateien zu erstellen. Die Aufgabe wird an Leute delegiert, die wissen, was sie tun, und es ist viel wahrscheinlicher, dass du die richtige Hilfe findest und Fragen und Wünsche stellen kannst, als bei einer Web-App, die vielleicht einige Entwickler hat, die dir helfen können.

Ganz zu schweigen davon, dass du auf diese Weise Wünsche äußern kannst, welche Funktionen du auf der neuen Webseite beibehalten möchtest. Und es ist fast eine Garantie dafür, dass die Aktionen auf der Webseite tatsächlich übertragen werden und so funktionieren, wie sie sollten.

Wir verstehen, dass die Beauftragung eines HTML-zu-WordPress-Entwicklers nicht immer im Budget liegt, aber es ist eine Überlegung wert, wenn du in Schwierigkeiten steckst und ein wenig Geld zur Verfügung hast.

Wie man HTML zu WordPress konvertiert mit einer automatisierten App oder einem Plugin

Wenn du Fragen zur Verwendung eines der zuvor aufgelisteten automatisierten HTML zu WordPress Konvertierers hast, hier ein Beispiel mit dem WP Site Importer. Dies ist eine der seriöseren Lösungen und es ist ein WordPress Plugin eines Drittanbieters, das viele der Funktionen von anderen automatisierten HTML zu WordPress Konvertierern zusammenbringt.

Um zu beginnen, lade das WP Site Importer Plugin herunter, installiere und aktiviere es in deinem WordPress Dashboard. Du musst die Zip-Datei von der Webseite des Entwicklers herunterladen und dich für die kostenlose Testversion anmelden. Es gibt auch Premium-Pläne, die du in Betracht ziehen kannst. Klicke hier, wenn du Fragen zur Installation eines WordPress Plugins hast.

Das WP Site Importer Plugin bietet eine Sammlung von Import Tools für einzelne Seiten und Beiträge, sowie komplette Webseiten und die zusätzlichen Elemente, die benötigt werden, um den Job zu erledigen, wie z.B. die Lokalisierung von Bildern und die Änderung von internen Links.

Für dieses Beispiel gehen wir durch die meisten Funktionen und beginnen mit einer einzelnen HTML-Seite. Gehe im Dashboard von WordPress zu Site Importer > Import Single Page.

Die meisten Standardeinstellungen des Plugins sind sofort einsatzbereit, was bedeutet, dass du normalerweise nichts ändern musst. Es sei denn, du möchtest Dinge wie das Importieren einer Seite als Beitrag oder das Entfernen von Featured Images ändern. Du kannst gerne durch alle Einstellungen des Plugins scrollen, um sicherzustellen, dass sie deinen Bedürfnissen entsprechen.

Alles, was du für den Import einer einzelnen Seite tun musst, ist, die URL einzufügen, die das Plugin scannen soll.

Hinweis: Datei-Uploads sind nur bei mehrseitigen Konvertierungen möglich.

Klicke auf die Schaltfläche Seite importieren, um fortzufahren.

Das Plugin teilt dir mit, was erfolgreich war und bietet mehrere Links, um die neuen WordPress-Seiten in der Vorschau zu sehen und sie bei Bedarf zu bearbeiten.

Du möchtest auch alle Menüs auf der statischen HTML Webseite übertragen.

Gehe dazu auf Website-Importer > Menüs importieren.

Das Importieren eines Menüs ist ähnlich wie die Dateikonvertierung, da es nach der URL fragt. Du kannst auch Elemente wie die Menüdichte und die Mindestgröße des Menüs festlegen.

Klicke auf Menü identifizieren, um fortzufahren.

Jeder Menüpunkt erscheint nun in einer Liste. Du solltest auch mehrere Menüs sehen, wenn du mehr als eines auf deiner Webseite hast.

Markiere die Menüs, die du importieren möchtest und gib jedem von ihnen einen Namen. Klicke auf die Schaltfläche Menü importieren.

Bei den WordPress-Menü-Importen musst du noch die Menüposition konfigurieren.

Im Dashboard navigierst du zu Erscheinungsbild > Menüs.

Benenne und erstelle ein Menü und speichere es in WordPress. Du solltest das importierte Menü bereits sehen, wenn alles wie geplant funktioniert hat.

Klicke auf den Reiter Standorte verwalten und finde das importierte Menü im Dropdown. Du solltest das neue Menü an dem von dir gewählten Ort platzieren.

Achte darauf, die Änderungen zu speichern, wenn du fertig bist.

Ein weiterer Teil des Imports einer HTML Webseite in WordPress ist die Lokalisierung der Bilder. Um diesen Prozess abzuschließen, gehe zu Website-Importer > Bilder lokalisieren.

Alle Standardeinstellungen für die Bildlokalisierung sind in der Regel gut zu verwenden.

Klicke auf die Schaltfläche Weiter.

Du wirst eine Liste der Bilder sehen, die von der vorherigen Webseite übertragen wurden.

Wähle die Bilder aus, die du lokalisieren möchtest und klicke auf die Schaltfläche Weiter.

Innerhalb von Sekunden fügt das Plugin jedes Bild zu deiner WordPress-Mediathek hinzu und gibt ihnen alle URLs auf der neuen Webseite. Du kannst in die Mediathek gehen, um sicherzustellen, dass dieser Übergang stattgefunden hat.

Ein weiterer Teil einer HTML-Konvertierung beinhaltet die Aktualisierung deiner internen Links. Alle Webseiten-Transfers führen typischerweise zu kaputten Links und Problemen mit den URL-Strukturen.

Wir müssen diese beheben, also gehe zu Site Importer > Interne Links aktualisieren, um loszulegen.

Auf der folgenden Seite wird erklärt, wie die älteren Links durch Versionen der neuen Domain der Webseite ersetzt werden, indem Unterverzeichnisse für eine flüssige Benutzererfahrung hinzugefügt werden, die sich auf der URL der WordPress Seite befinden.

Alles was du tun musst, ist auf den Button Links aktualisieren zu klicken. Das Plugin erledigt alle Umstellungen für dich.

Wenn du vorhast, eine ganze HTML Webseite zu konvertieren (im Gegensatz zu einer Seite), navigiere zum Reiter Mehrere Seiten importieren unter dem Menü Site Importer.

Dies ist auch eine wunderbare Option für diejenigen, die lokale Webseiten-Dateien hochladen möchten, anstatt eine Live-URL zu kopieren.

Der Assistent für mehrere Seiten hat Felder zum Einfügen einer URL und zum Hochladen von Webseiten HTML-Dateien.

Wähle das aus, was für deine Aufgabe am besten geeignet ist.

Während die HTML Webseite konvertiert und importiert wird, siehst du eine Liste von URLs, die in deine WordPress Webseite gezogen werden. Du kannst einige der Seiten aus dem Import entfernen, wenn du sie nicht brauchst. Du hast auch die Möglichkeit, Beiträge zu importieren, sie als unveröffentlicht einzustellen und das Featured Image einzubinden.

Der letzte Schritt zeigt die vollständige Liste der Webseiten, die von deiner Webseite in dein WordPress System konvertiert wurden. Du kannst nun auf die Schaltfläche Bearbeiten oder Vorschau für jede Seite klicken, um mit der Anpassung deiner Webseite fortzufahren.

Denke daran, dass eine Konvertierung wie diese nicht bedeutet, dass du sofort das exakte Design deiner HTML Webseite sehen wirst. Es kann sein, dass du ein Stylesheet importieren oder die Webseite oder Seiten sogar selbst programmieren musst.

Zusammenfassung

Der Wechsel von HTML zu WordPress erfordert ein wenig Arbeit. Aber es ist die Herausforderung wert. Ein HTML-zu-WordPress-Upload kann auch bei weniger aufwändigen Aufgaben helfen, wie z.B. der Überprüfung der Inhaberschaft deiner Webseite oder der Implementierung eines einfachen HTML-Moduls.

Die Möglichkeiten sind vielfältig, wenn es um den Upload und die Konvertierung von HTML-Dateien geht. Denke einfach daran, dass du einen Großteil der Arbeit mit einem automatisierten HTML-Konverter erledigen kannst. Danach wird höchstwahrscheinlich manuelle Arbeit anfallen, aber mit der Kombination aus den richtigen Tools und Kenntnissen kannst du fast jede beliebige HTML Webseite duplizieren!

Wenn du Fragen zum Hochladen von HTML-Dateien zu WordPress oder zum Konvertieren von HTML zu WordPress Webseiten hast, lass es uns in den Kommentaren unten wissen.