Als das Web anfing, waren Websites ziemlich dumm. Das heißt, sie waren nichts weiter als Text und statischer HTML-Code, ohne ausgefallene Effekte und sehr wenig Interaktivität.

Zwanzig Jahre später basieren Websites auf komplexer Programmierung und können Wochen und Wochen in Anspruch nehmen, um erstellt zu werden. Sie sind vollgepackt mit Funktionen, hochgradig interaktiv, reaktionsschneller, sehen besser aus und so weiter.

Anstatt selbst Code zu schreiben, können Sie heute Content-Management-Systeme verwenden, die sich selbst um den Code hinter Ihrer Website kümmern. Alles, was Sie tun müssen, ist, ein Thema auszuwählen und mit dem Posten zu beginnen.

WordPress ist ein solches CMS, das jetzt von Millionen auf der ganzen Welt verwendet wird. Das Beste an WordPress ist, dass es eine sehr flexible Plattform ist. Es erfordert keine Programmierkenntnisse, um es zu verwenden, und Sie können damit die reaktionsschnellsten und erstaunlichsten Websites erstellen.

Wenn Sie eine Website besitzen, die seit den 1990er Jahren nicht aktualisiert wurde, hilft Ihnen dieser von unserem Team bei wpDataTables erstellte Artikel, HTML in WordPress zu konvertieren, damit auch Sie die Vorteile der modernen Webtechnologie nutzen können.

Lesen Sie weiter, um mehr zu erfahren.

Warum sollten Sie HTML in WordPress konvertieren?

Die Gründe, warum eine Person HTML in WordPress konvertieren sollte, sind sehr unterschiedlich. Hier eine Auswahl der wichtigsten:

Durch die Konvertierung zu WordPress haben Sie die volle Kontrolle über jedes Detail Ihrer Website. Wenn Ihnen ein Teil Ihrer Website nicht gefällt, können Sie ihn ganz einfach nach Ihren Wünschen anpassen.
WordPress-Sites sind im Vergleich zu statischen HTML-Sites viel einfacher zugänglich, zu verwalten und zu warten. Dies ist ein sehr wichtiger Grund, eine HTML-zu-WordPress-Migration durchzuführen.
Indem Sie Ihren HTML-Vorlagenstil in WordPress konvertieren, erhalten Sie am Ende ein einzigartiges Design, das keine andere Person, die das CMS verwendet, besitzen wird.
WordPress hilft bei der Suchmaschinenoptimierung und stellt sicher, dass Ihre Website von mehr Menschen entdeckt wird.
Als Website-Entwickler halbiert sich Ihre Arbeit, da WordPress die meisten Tätigkeiten übernimmt, die vorher unnötig zeitaufwändig waren.

Der Wechsel von statischem HTML zu WordPress: Die Methoden

Jetzt, da Sie alle Gründe haben, HTML in WordPress zu konvertieren, können Sie fortfahren, um zu lernen, wie es geht.

Es gibt zwei Methoden, aus denen Sie wählen können: die manuelle Methode, bei der alles von Grund auf selbst gemacht wird; und die Child-Theme-Methode, bei der ein grundlegendes WordPress-Theme verwendet und an Ihre Bedürfnisse angepasst wird.

Die Wahl einer Methode hängt von Ihrer Erfahrung mit dem Programmieren ab, davon, wie viel Zeit Sie in diese Aufgabe investieren möchten, sowie von Ihren eigenen Vorlieben. Jede dieser Methoden wird in den folgenden Abschnitten vorgestellt, in denen Sie lernen, wie Sie HTML in WordPress konvertieren.

Die manuelle Methode

1 Erstellen Sie einen neuen Themenordner

Erstellen Sie einen neuen Ordner auf Ihrem Desktop, in dem Ihre Designdateien gespeichert werden. Benennen Sie diesen Ordner beliebig (er repräsentiert den Namen des Themas). Erstellen Sie diese Dateien in Ihrem bevorzugten Code-Editor und lassen Sie sie geöffnet:

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

2 Kopieren Sie den vorhandenen CSS-Code in Ihr neues Stylesheet

Nachdem Sie die Dateien erstellt haben, können Sie mit dem Kopieren Ihres CSS-Codes fortfahren. Wer seine Seiten duplizieren und nach WordPress verlagern möchte, muss den CSS-Code seiner bisherigen Seite exportieren und importieren. CSS ist für das Aussehen der Website verantwortlich, also bearbeiten Sie die Datei style.css, indem Sie ihr die folgenden Codezeilen hinzufügen:


/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Ersetzen Sie die erforderlichen Informationen durch Ihre eigenen, fügen Sie die restlichen CSS-Zeilen hinzu und fertig. Vergessen Sie nicht, die Datei zu speichern. Sie können jetzt style.css schließen.

3 Holen Sie sich Ihren aktuellen HTML-Code

Gehen Sie zur index.html-Datei Ihrer Website und markieren Sie den gesamten Inhalt vom Anfang des Dokuments bis zum div class="main"-Tag. Dieser Abschnitt muss in die header.php-Datei eingefügt werden, die Sie in Schritt 1 erstellt haben.

Gehen Sie zurück zur Datei index.html und markieren Sie alles im Element class="sidebar". Kopieren Sie den Inhalt und fügen Sie ihn in die von Ihnen erstellte Datei sidebar.php ein. Machen Sie dasselbe für die Fußzeile, mit dem gesamten Inhalt nach dem Seitenleistenelement.

Wählen Sie für die Datei index.php den gesamten Inhalt aus, der nach dem Hervorheben übrig bleibt, und fügen Sie ihn in die neue Datei ein, speichern Sie ihn und lassen Sie ihn für den nächsten Schritt geöffnet.

4 Bearbeiten Sie die index.php-Datei

Um Ihre index.php-Datei fertigzustellen, kopieren Sie diese Codezeilen und fügen Sie sie oben im Dokument ein:

Platzieren Sie dann ganz unten in Ihrer index.php-Datei diese PHP-Zeilen.

Die Datei ist noch nicht fertig, da Sie eine Post-Schleife erstellen müssen, die einen PHP-Code darstellt, den WordPress benötigt, um die Blog-Posts oder Artikel Ihrer Website korrekt anzuzeigen. Fügen Sie die folgenden Codezeilen im Inhaltsbereich der Datei hinzu:

Wenn Sie fertig sind, speichern Sie die Datei, schließen Sie sie und fahren Sie mit dem nächsten Schritt fort.

5 Laden Sie Ihr neues Thema hoch

Sobald Ihr Themenordner fertig ist, müssen Sie ihn auf Ihre Website hochladen und die HTML-zu-WordPress-Konvertierung abschließen. Navigieren Sie dazu zu dem Ordner, in dem Sie WordPress installiert haben, und legen Sie den gerade erstellten Ordner in /wp-content/themes/ ab.

Gehen Sie zu Ihrer WP-Admin-Seite, Aussehen und dann zu Themen, um zu sehen, ob der Name des Themas in der Liste angezeigt wird oder nicht. Wenn ja, haben Sie alles richtig gemacht und können es aktivieren. Wenn dies nicht der Fall ist, lesen Sie alle Schritte zum erneuten Konvertieren von HTML in WordPress sorgfältig durch.

Es gibt auch diese nützliche Videoanleitung von Traversy Media, die Sie sich ansehen sollten:

Verwendung eines WordPress-Child-Themes

Wenn die im vorherigen Schritt genannten Schritte für Ihr Niveau zu kompliziert erscheinen, ist dies eine Methode, die weniger Kenntnisse im Bereich der Codierung erfordert. Es ist einfacher zu handhaben und nimmt auch weniger Zeit in Anspruch.

Um HTML schneller in WordPress zu konvertieren, können Sie ein untergeordnetes Design aus einem vorhandenen Design verwenden. Untergeordnete Themen werden auf diese Weise benannt, weil sie auf einem zweiten Thema aufbauen, das das übergeordnete Thema ist.

1 Wählen Sie das Thema aus

Wählen Sie zunächst ein Theme aus, das zu Ihrem HTML-Design passt. Suchen Sie nach einem Child-Theme, das Ihrer bestehenden Website ähnelt. Achten Sie auf die Struktur, die es hat, damit Sie sich nicht zu sehr mit der Codierung beschäftigen müssen.

Sie sollten sich für ein Starter-Theme entscheiden, da es auf sehr einfachen Codezeilen basiert.

2 Erstellen Sie einen neuen Themenordner

Genau wie im vorherigen Fall müssen Sie einen neuen Themenordner erstellen. Der einzige Unterschied besteht darin, dass Sie den Ordner genauso benennen wie das übergeordnete Thema, auf dem Ihr untergeordnetes Thema basiert, und ihm das Suffix „-child” hinzufügen.

Wenn Ihr Thema beispielsweise Twenty Nine heißt, nennen Sie den Ordner „twentynine-child”. Stellen Sie sicher, dass Sie keine Leerzeichen innerhalb des Namens hinzufügen.

3 Richten Sie ein neues Stylesheet ein

Erstellen Sie als Nächstes die Datei style.css im Ordner und fügen Sie diese Codezeilen hinzu:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
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-nineteen-child
*/

Beachten Sie, dass dies ein Beispiel ist. Sie müssen die Informationen durch Ihre eigenen ersetzen. Speichern Sie die Datei nach Abschluss.

4 Erstellen Sie die Datei functions.php

Sobald Sie die style.css-Datei haben, können Sie das Design so aktivieren, wie es ist. Damit die Website jedoch besser aussieht und funktioniert, müssen Sie die Funktionen und Stile des übergeordneten Designs verwenden. Dazu müssen Sie die Datei functions.php erstellen.

Verwenden Sie diese Codezeilen und speichern Sie die Datei:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
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-nineteen-child
*/

5 Aktivieren Sie das Child-Theme

Schließlich müssen Sie das Thema aktivieren. Komprimieren Sie den Ordner und fügen Sie ihn zu WordPress hinzu, indem Sie zum Menü „Darstellung”, „Designs” navigieren und dann auf „Neu hinzufügen” klicken. Laden Sie die gezippte Datei dort hoch. Eine andere Möglichkeit wäre, den Ordner in wp-content/themes zu ziehen.

Abschließend

Sie brauchen etwas Geduld, um HTML in WordPress zu konvertieren, aber es ist sicherlich die Mühe wert. Auch wenn der Prozess einige Ihrer Aufmerksamkeit erfordert, werden Sie am Ende eine wirklich einzigartige Website haben, die von allen Standpunkten aus viel bequemer zu verwalten ist.

Wenn Sie die in diesem Artikel beschriebenen Schritte sorgfältig befolgen, kann nichts schief gehen, also machen Sie sich keine Sorgen! Wenn Sie jedoch auf Probleme stoßen, zögern Sie nicht, die Support-Foren der WordPress-Community zu besuchen. Dort gibt es viele Nutzer, die Ihnen gerne weiterhelfen.

Wenn Ihnen dieser Artikel über das Konvertieren von HTML in WordPress gefallen hat, sollten Sie sich diesen Artikel über das Gehalt von WordPress-Entwicklern ansehen.

Wir haben auch über ein paar verwandte Themen wie den besten Code – Editor, WordPress – Training, JavaScript – Bibliotheken und Brackets – Erweiterungen geschrieben .

Aufnahmequelle: wpdatatables.com