Konvertieren von HTML-Vorlagen in WordPress-Themes

Obwohl die Webtechnologie einen langen Weg zurückgelegt hat, gibt es immer noch Websites, die ausschließlich mit HTML erstellt wurden. Wenn Sie eines davon besitzen, fragen Sie sich vielleicht, wie Sie eine HTML-Vorlage in ein WordPress-Theme konvertieren können.

Glücklicherweise stehen Ihnen mehrere Optionen zur Verfügung, wenn Sie diese HTML-Dateien in WordPress konvertieren möchten. Die verfügbaren Techniken reichen von praktischen manuellen Umbauten bis hin zur Zusammenarbeit mit Experten, die das ganze schwere Heben bewältigen können.

In diesem Artikel behandeln wir vier verschiedene Ansätze zur Konvertierung von HTML-Vorlagen. Für jeden stellen wir Anleitungen und Ressourcen zur Verfügung, die Ihnen helfen können, eine HTML-basierte Website in die WordPress-Falte zu bringen. Es gibt viel zu behandeln, also lass uns gleich eintauchen!

Manuelles Konvertieren von HTML

Die erste Option bei der Konvertierung ist der manuelle Ansatz. Da dies ein ziemlich praktischer Prozess ist, müssen Sie sicherstellen, dass Sie Zugriff auf die Dateien sowohl für Ihre ursprüngliche als auch für Ihre neue Website haben.

Normalerweise verwenden Sie zu diesem Zweck eine Secure File Transfer Protocol (SFTP)-Anwendung. Sobald Sie auf Ihre Website zugegriffen haben, können Sie mit den folgenden Schritten fortfahren.

Schritt 1: Erstellen Sie einen Themenordner

Zuerst müssen Sie einen Ordner erstellen, um Ihre neuen Themendateien zu speichern, und ihn mit dem Namen Ihres neuen Themas beschriften. Mit Ihrem Code-Editor können Sie dann fünf spezifische Dateien erstellen:

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

Im Moment können Sie diese Dateien einfach leer lassen und sie in dem gerade erstellten Ordner speichern.

Schritt 2: Kopieren Sie Ihr vorhandenes CSS und fügen Sie es ein

Ihre nächste Priorität besteht darin, die CSS-Datei (Cascading Style Sheet) anzupassen. Hier skizzieren Sie alle verschiedenen Stilelemente für Ihre Website.

Oben empfiehlt es sich, einige Informationen über die Datei hinzuzufügen. Tatsächlich gibt es bei WordPress einige Elemente, die erforderlich sind, damit das Thema im Themenverzeichnis enthalten ist.

Unterhalb dieser Informationen möchten Sie dann alle vorhandenen CSS-Stile von Ihrer ursprünglichen Website einfügen, die Sie in Ihr neues Design übernehmen möchten.

Schritt 3: Trennen Sie bestehenden HTML-Code

Auf Ihrer ursprünglichen Website befindet sich der HTML-Code, der Ihre Kopfzeile, Fußzeile, Seitenleiste und Hauptinhaltsbereiche bezeichnet, wahrscheinlich alle in Ihrer index.html- Datei. Jetzt müssen Sie jedes dieser Elemente in die neuen Dateien verteilen, die Sie für Ihr WordPress-Theme erstellt haben.

Beispielsweise können Sie in der index.html- Datei Ihrer ursprünglichen Website das erste <div> -Tag mit der Klasse „main“ finden. Alles, was diesem Tag vorangeht, kann dann kopiert und in Ihre neue header.php- Datei eingefügt werden.

Anschließend wiederholen Sie diesen Vorgang für die Tags „sidebar“ und „footer“. Kopieren Sie den in jedem dieser Elemente enthaltenen Code und fügen Sie ihn in die entsprechenden PHP-Dateien ein.

Jetzt bleibt nur noch der primäre Teil Ihrer index.html- Datei übrig. Dies macht das Hauptinhaltslayout Ihrer HTML-basierten Website aus. Sie müssen diesen verbleibenden Code kopieren und in Ihre neue index.php- Datei einfügen.

Schritt 4: Konfigurieren Sie Ihre Index.php-Datei

Ihr nächster Schritt besteht darin, sicherzustellen, dass Ihre neue Indexdatei die Dateien finden kann, die erforderlich sind, damit Ihr Design die Struktur und den Stil Ihrer Website anzeigen kann. Um dies zu erreichen, verwenden Sie WordPress-Vorlagen-Tags. Diese werden verwendet, um dem Design mitzuteilen, dass es die Header-, Footer- und Sidebar-Dateien abrufen soll.

Beispielsweise können Sie Ihre Vorlage die von Ihnen erstellte Header-Datei anzeigen lassen, indem Sie das folgende Tag verwenden:

get_header();

Sie platzieren dies in Ihrer index.php- Vorlagendatei oder auf nachfolgenden Seiten, auf denen der Header erscheinen soll. Gleiches gilt für Ihre Fußzeile.

Es gibt noch einen weiteren wichtigen Teil Ihrer neuen Vorlage, den Sie ebenfalls verstehen müssen. Dies wird als WordPress-Schleife bezeichnet – ein Ausschnitt aus PHP-Code, der das Template anweist, Beiträge einzufügen. Es kann auch angepasst werden, um zu steuern, wie viele Beiträge angezeigt werden.

Schritt 5: Laden Sie Ihr neues Design hoch

Jetzt, da Ihr neues Design einsatzbereit ist, müssen Sie seinen Ordner im Verzeichnis wp-themes/content/ für Ihre Website ablegen:

Sobald Sie die Dateien hochgeladen haben, können Sie sich bei Ihrem WordPress-Dashboard anmelden und zu Darstellung > Themen navigieren. Hier sollten Sie Ihr neues Thema aufgelistet sehen und in der Lage sein, auf Aktivieren zu klicken und es zu verwenden.

Importieren von HTML-Inhalten mit einem Plugin

Eine andere Möglichkeit, diesen Prozess zu handhaben, besteht darin, ein Plugin zu verwenden, um Inhalte von Ihrer alten, HTML-basierten Website zu übertragen. Leider sind nur sehr wenige Tools verfügbar, die mit den neuesten Versionen von WordPress kompatibel sind. Sie können sich jedoch eine kostenlose Testversion von WP Site Importer ansehen:

Dieses Plugin kann Ihre gesamte Website scannen und den beweglichen Inhalt katalogisieren. Es funktioniert am besten, wenn Ihr HTML von Anfang an gut organisiert und "sauber" ist. Sie können auch Inhalte wie Menüs und Links importieren.

Verwendung eines Child-Themes

Eine andere Möglichkeit, Ihre HTML-Site in WordPress zu verschieben, ist ein untergeordnetes Thema. Dies hat die gleiche grundlegende Funktionalität und den gleichen Stil wie das übergeordnete Design, aber Sie können alle von Ihnen vorgenommenen Optimierungen und Anpassungen beibehalten, selbst wenn Sie das übergeordnete Design aktualisieren.

Schritt 1: Wählen Sie ein Thema

Im WordPress-Theme-Verzeichnis stehen viele gut aufgebaute, kostenlose Themes zur Auswahl. Sobald Sie eines ausgewählt haben, das Ihnen gefällt, müssen Sie es installieren, damit seine Dateien im Dateiverzeichnis Ihrer Website verfügbar sind:

Sie müssen dieses übergeordnete Thema jedoch nicht aktivieren.

Schritt 2: Erstellen Sie einen Ordner für Ihr untergeordnetes Thema

Als nächstes musst du mit einer FTP-Anwendung auf deine Dateien zugreifen und einen neuen Ordner in deinem wp-content/themes- Verzeichnis erstellen. Diese Datei sollte den gleichen Namen wie Ihr übergeordnetes Design haben, wobei am Ende „-child“ hinzugefügt wird.

Wenn Sie beispielsweise ein untergeordnetes Thema für Twenty Nineteen erstellen, können Sie einen Ordner mit dem Namen Twentynineteen-Child erstellen:

Dieses Setup bedeutet, dass Ihr untergeordnetes Design automatisch Funktionen und Stile aus dem übergeordneten Design abrufen kann, sobald Sie den Rest der erforderlichen Designdateien eingerichtet haben.

Schritt 3: Richten Sie ein Stylesheet ein

Ihr nächster Schritt besteht darin, Ihre style.css- Datei einzurichten. WordPress erfordert einige spezifische Informationen im Stylesheet, damit die Eltern-Kind-Design-Beziehung funktioniert. Sie können bei Bedarf auch zusätzliche Stilinformationen aus Ihren ursprünglichen HTML-Dateien einfügen.

Schritt 4: Richten Sie eine Function.php-Datei ein

Jetzt, da Sie im Wesentlichen zwei Themen haben, mit denen Sie arbeiten, müssen Sie WordPress mitteilen, dass Ihr untergeordnetes Thema vom CSS des übergeordneten Themas abhängig ist. Dafür können Sie den PHP-Aufruf wp_enqueue_style() verwenden.

Du erstellst zuerst eine function.php- Datei und platzierst sie im Ordner deines Child-Themes. Dies ist die Datei, in der Sie die Enqueue-Funktion ausführen, die die Themenabhängigkeiten und -hierarchie buchstabiert.

Schritt 5: Aktivieren Sie Ihr untergeordnetes Thema

Sobald Sie diese neuen Dateien auf den Server Ihrer Website hochgeladen haben, können Sie zu Ihrem WordPress-Dashboard zurückkehren und zu Darstellung > Themen navigieren. Dort sollten Sie nun Ihr untergeordnetes Thema sehen, das einsatzbereit ist.

Klicken Sie auf Ihrem untergeordneten Design auf Aktivieren , um es als Design Ihrer Website festzulegen. Dann können Sie damit beginnen, den Inhalt Ihrer HTML-Website in Ihre neue WordPress-Site zu kopieren.

Erwerben Sie einen Website-Konvertierungsdienst

Wenn Sie nicht die Zeit oder die Ressourcen haben, eine Konvertierung selbst durchzuführen, können Sie auch einen Konvertierungsservice in Anspruch nehmen. Wenn Sie außerdem weitere Ressourcen oder Unterstützung bei der Migration anderer WordPress-Inhalte benötigen, bieten wir hier bei WP Engine viele Lösungen und Ressourcen für die Migration und Konvertierung an.

1. Stelle WPGeeks ein

HireWPGeeks ist eine Full-Service-Konvertierungsoption. Es wird all das schwere Heben bewältigen, und Sie werden am Ende eine flexible, reaktionsschnelle, themenbasierte WordPress-Website haben, die mit all Ihren Inhalten vollständig ist. Sie müssen sich für ein Angebot an das Unternehmen wenden, aber Sie können seine Dienste ab 89 US-Dollar einplanen.

2. FantasTech-Lösungen

FantasTech Solutions ist ein weiterer HTML-zu-WordPress-Konvertierungsdienst. Es bewirbt hochprofessionelle Konvertierungen von HTML in hochwertige, gut codierte WordPress-Designvorlagen. Denken Sie daran, dass die Kosten für eine Seite bei 297 $ beginnen. Zusätzliche Seiten beginnen bei jeweils 147 $, wobei die genauen Preise von der Komplexität abhängen.

Passen Sie Ihre Website-Erfahrung mit WP Engine an

Es mag wie ein großes Unterfangen erscheinen, aber die Umstellung Ihrer HTML-Website auf WordPress kann viele andere Möglichkeiten eröffnen. Mit dieser hochflexiblen und erweiterbaren Plattform werden Sie agiler und können neue Inhalte schnell bereitstellen.

Hier bei WP Engine glauben wir, dass die richtigen Entwicklerressourcen einen großen Einfluss auf Ihre Projekte haben können. Neben innovativen Lösungen bieten wir Pläne und Preisstufen für jedes Budget!