Konvertieren von HTML-Sites in WordPress-Sites

Veröffentlicht: 2018-10-05

Am Anfang (des Webs) wurden alle Websites nur mit Text und statischem HTML erstellt. Jetzt, über 20 Jahre später, ist das Web jedoch ein ganz anderer Ort. Websites sind viel komplexer. Sie bieten Website-Erstellern und Besuchern gleichermaßen reichhaltigere und angenehmere Erfahrungen.

Dies ist zum großen Teil auf Open-Source-Projekte wie WordPress zurückzuführen. Welches in den letzten zehn Jahren seine Kernaufgabe, das Online-Publishing (und vieles mehr im Prozess) zu demokratisieren, so geschafft hat, dass jeder mit einer WordPress-Installation und den richtigen Themes/Plugins eine moderne Website mit fortschrittlichem Design haben kann und Funktionalität. Keine Codierung – nicht einmal HTML! – erforderlich.

Aus diesem Grund ist es für begeisterte WordPress-Benutzer wie mich kaum zu glauben, dass im Jahr 2018 vielleicht noch jemand eine statische HTML-Website anstelle einer WordPress-Website mit Theme und Plugins betreibt. Tatsache ist jedoch, dass es immer noch eine beträchtliche Anzahl aktiver reiner HTML-Sites gibt. (Oder HTML mit etwas CSS.)

Zugegeben, diese Websitebesitzer können gute Gründe haben, kein Upgrade oder keine Konvertierung durchzuführen. Vielleicht ändert sich der Inhalt der Website nie und die einfache Formatierung und das bereits vorhandene Design sind einsatzbereit? Oder ist es vielleicht weniger mühsam, als sich darum zu sorgen, eine WordPress-Site auf dem neuesten Stand zu halten? Beides sind (unter anderem) triftige Gründe. Paradebeispiele für „Repariere nicht, was nicht kaputt ist“.

Ich habe jedoch das Gefühl, dass dies möglicherweise nicht der Hauptgrund ist, warum einige (vielleicht viele) den Sprung nicht geschafft haben. Der offensichtlichste ist, dass sie einfach nicht wissen, wie sie ihre HTML-Site in eine WordPress-Site umwandeln sollen. Vor allem ohne Inhalt zu verlieren oder Seite für Seite übermäßig formatieren zu müssen.

Glücklicherweise gibt es, wie so oft bei WordPress, eine Reihe von Möglichkeiten, dieses Problem zu lösen. Nachfolgend habe ich einige Optionen zusammengestellt.

Abonnieren Sie unseren Youtube-Kanal

Ihre Optionen zum Konvertieren einer statischen HTML-Site in eine WordPress-Site

Wie Sie Ihre statische HTML-Site in eine WordPress-Site konvertieren, hängt zweifellos von Ihren persönlichen Vorlieben, der gewünschten Zeit-/Geldinvestition und dem Kenntnisstand mit Code ab. Sie müssen selbst entscheiden, was für Sie am besten geeignet ist, aber mit den folgenden Zusammenfassungen sollten Sie in der Lage sein, schnell zu entscheiden und direkt zu den relevantesten Informationen in diesem Beitrag für Ihre spezifische Situation zu springen.

Es gibt drei Hauptoptionen:

1. Erstellen Sie manuell ein WordPress-Theme basierend auf Ihrer aktuellen statischen HTML-Site.

Dazu müssen Sie Ihren Code eingeben. Sie müssen über FTP auf Ihr aktuelles Site-Verzeichnis zugreifen und Ihren vorhandenen Code als Ausgangspunkt verwenden. Von dort aus müssen Sie die notwendigen Dateien für ein WordPress-Theme erstellen und Code-Stücke aus dem WordPress-Codex kopieren. Dies ist ziemlich einfach und unkompliziert, wenn Sie etwas Erfahrung mit HTML, CSS und ein wenig PHP haben.

2. Installieren Sie ein vorgefertigtes Thema und migrieren Sie einfach Ihre Inhalte.

Dies ist wahrscheinlich die beste Option an der Schnittstelle von Einfachheit und Wert. Angenommen, Sie haben bereits Hosting für Ihre aktuelle Website, müssen Sie nur dann Geld ausgeben, wenn Sie sich für den Kauf eines Premium-Themes entscheiden. Das Plugin, das wir zum Importieren von Inhalten verwenden werden, ist im offiziellen WordPress Plugin Repository frei verfügbar.

3. Sie bezahlen dafür, dass ein HTML-zu-WordPress-Konvertierungsdienst Ihre Website neu erstellt.

Dies ist die einfachste Lösung, da Sie nicht viel tun müssen. Es wird jedoch nicht viel dazu beitragen, Sie mit WordPress vertraut zu machen, und die Kosten hängen davon ab, wen Sie einstellen. Ich werde diese Option in den folgenden Abschnitten nicht behandeln, denn wenn Sie an dieser Route interessiert sind, können Sie einfach schnell nach Dienstleistern suchen und sie kümmern sich um den Rest.

Vorbereitung für die Konvertierung von HTML zu WordPress

Egal, für welche Route Sie sich unten entscheiden, es gibt ein paar Dinge, die Sie tun sollten, bevor Sie eintauchen.

Die erste ist die Auswahl eines Hosting-Plans. Sie sollten sich die verfügbaren Optionen ansehen und sich für ein Paket entscheiden, das Ihren Anforderungen am besten entspricht. Oder möchten Sie stattdessen eine lokale WordPress-Installation erstellen? Sie können es später jederzeit zu einem Hosting-Dienst migrieren.

Sobald Sie sich entschieden haben, müssen Sie WordPress installieren und sich bei WP Admin anmelden. Dies ist der Punkt, an dem sich unsere beiden möglichen Wege trennen.

Manuelles Konvertieren Ihrer statischen HTML-Site in WordPress

Wenn es Ihr Ziel ist, nicht nur Ihre Inhalte von Ihrer statischen HTML-Site in WordPress zu übertragen, sondern auch Ihr aktuelles Design zu duplizieren, bedeutet dies, dass Sie Ihr eigenes benutzerdefiniertes Design erstellen müssen. Zum Glück ist das nicht so beängstigend, wie es zunächst klingen mag. Es umfasst nur das Erstellen einiger Ordner und Dateien, ein wenig Kopieren und Einfügen und das anschließende Hochladen des Ergebnisses.

Sie benötigen einen Code-Editor wie Sublime oder Notepad++ und Zugriff sowohl auf das Verzeichnis Ihrer HTML-Site als auch auf das Verzeichnis Ihrer neuen WordPress-Installation.

Schritt 1: Erstellen Sie einen neuen Themenordner und die erforderlichen Dateien

Erstellen Sie auf Ihrem Desktop einen neuen Ordner für Ihre Designdateien. Benennen Sie es wie auch immer Sie möchten, dass Ihr Thema benannt wird.

Erstellen Sie als Nächstes einige Dateien (die alle in Ihrem neuen Themenordner gespeichert sind) in Ihrem Code-Editor. Tun Sie ihnen noch nichts. Lassen Sie sie einfach zur weiteren Bearbeitung geöffnet.

  • Stil.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

Schritt 2: Vorhandenes CSS in ein neues Stylesheet kopieren

Wenn Sie ein Design duplizieren möchten, bedeutet dies wahrscheinlich, dass Sie zumindest etwas CSS haben, das Sie speichern möchten. Die erste Datei, die Sie bearbeiten möchten, ist Ihre Style.css-Datei.

Fügen Sie zunächst Folgendes am Anfang Ihrer Datei hinzu. 

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

Fügen Sie nach diesem Abschnitt einfach Ihr vorhandenes CSS unten ein. Speichern und schließen Sie die Datei.

Schritt 3: Trennen Sie Ihren aktuellen HTML-Code

Bevor wir mit Schritt drei beginnen, möchte ich Ihnen eine kurze Anmerkung zur Funktionsweise von WordPress geben. WordPress verwendet PHP, um Daten aus der zugrunde liegenden Datenbank aufzurufen und abzurufen. Jede Datei, die wir in diesem kleinen Tutorial verwenden, soll WordPress mitteilen, welcher Teil Ihres Site-Inhalts wo angezeigt werden soll.

Wenn ich also sage, dass wir Ihr vorhandenes HTML „zerhacken“ werden, schneiden wir einfach Teile Ihres vorhandenen Codes aus und fügen sie in die verschiedenen Dateien, die wir gerade erstellt haben, ein, damit WordPress weiß, wo es angezeigt werden soll Sie.

Auf geht's.

Öffnen Sie zunächst die Datei index.html Ihrer aktuellen Site. Markieren Sie alles vom Anfang der Datei bis zum öffnenden div class="main" -Tag. Kopieren Sie diesen Abschnitt und fügen Sie ihn in Ihre header.php- Datei ein, speichern und schließen Sie.

Gehen Sie zweitens zurück zu Ihrer index.html- Datei. Markieren Sie das asside class="sidebar" -Element und alles darin. Kopieren Sie diesen Abschnitt und fügen Sie ihn in Ihre sidebar.php- Datei ein, speichern und schließen Sie.

Drittens, wählen Sie in Ihrer index.html alles nach Ihrer Seitenleiste aus und kopieren Sie es und fügen Sie es in Ihre footer.php- Datei ein, speichern und schließen Sie.

Wählen Sie schließlich in Ihrer Datei index.html alles aus, was übrig bleibt (dies sollte der Hauptinhaltsbereich sein) und fügen Sie es in Ihre Datei index.php ein . Speichern, aber noch nicht schließen.

Sie können Ihre index.html- Datei jetzt jedoch schließen und mit den letzten Schritten fortfahren. Fast fertig!

Schritt 4: Fertigstellen Ihrer Index.php-Datei

Um die index.php- Datei Ihres neuen Themes fertigzustellen , müssen Sie sicherstellen, dass es den anderen Abschnitt (neben dem Hauptinhalt) aufrufen kann, der in den anderen von Ihnen erstellten Dateien enthalten ist. Oder mit anderen Worten, fügen Sie die Elemente, die wir gerade „zerhackt“ haben, wieder zusammen.

Platzieren Sie ganz oben in Ihrer index.php- Datei die folgende Zeile von php. 

<?php get_header(); ?>

Fügen Sie dann ganz unten in Ihrer index.php- Datei diese PHP-Zeilen ein. 

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

Und schließlich müssen wir noch hinzufügen, was The Loop genannt wird. Dies ist das primäre PHP-Bit, das WordPress verwendet, um Besuchern Ihren Beitragsinhalt anzuzeigen. Der letzte Schritt beim Erstellen der index.php- Datei Ihres neuen Themes besteht also darin, den folgenden Code in den Inhaltsabschnitt einzufügen. 

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

Speichern Sie Ihre index.php und schließen Sie sie. Ihr Thema ist jetzt fertig! Sie müssen es nur noch auf Ihre WordPress-Website hochladen.

Schritt 5: Laden Sie Ihr neues Thema hoch

Nachdem Sie Ihre Theme-Dateien erstellt und alle in Ihrem neuen Theme-Ordner gespeichert haben, müssen Sie auf das Verzeichnis Ihrer neuen WordPress-Installation zugreifen.

Platzieren Sie Ihren neuen Themenordner in /wp-content/themes/ . Navigieren Sie dann zurück zu WP Admin > Darstellung > Themen und Ihr neu erstelltes Thema sollte dort erscheinen. Mach weiter und aktiviere es!

An dieser Stelle müssen Sie nur noch Ihre neue WordPress-Website mit den Inhalten Ihrer alten Website füllen. Folgen Sie dem Abschnitt unten (überspringen Sie den Teil über die Verwendung eines vorgefertigten Designs), um zu sehen, wie das geht.

Verwenden eines vorgefertigten WordPress-Themes und Importieren von HTML-Inhalten

Wenn Ihnen die oben genannten Schritte zu intensiv oder zeitaufwändig erscheinen, können Sie sicher sein, es gibt einen anderen Weg. Anstatt das Design, mit dem Sie gerade arbeiten, in ein WordPress-Theme zu konvertieren, können Sie eines der Tausenden von Themen nutzen, die auf dem breiteren WordPress-Marktplatz verfügbar sind.

Es gibt kostenlose Themes und es gibt Premium-Themes. Bevor Sie sich entscheiden, welches für Sie am besten geeignet ist, sollten Sie sich hier bei Elegant Themes und anderswo darüber informieren, welche Themen auf Ihre Bedürfnisse zugeschnitten sind, und nach Themenkategorien stöbern.

Sobald Sie ein Thema ausgewählt haben, das Ihnen gefällt (und das gezippte Dateipaket heruntergeladen haben), sollten Sie zu WP Admin > Erscheinungsbild > Themen > Neu hinzufügen zurückkehren und Ihr neues WordPress-Theme installieren/aktivieren.

Sobald dies erledigt ist, haben Sie eine neue WordPress-Website und ein neues Theme – aber sonst wenig. Wenn Sie Ihre Site in der Vorschau anzeigen, ist sie leer und sieht wahrscheinlich langweilig aus. Das ist in Ordnung, denn als nächstes werden wir den Inhalt Ihrer alten Site importieren.

Gehen Sie in WP Admin zu Plugins > Neu hinzufügen und suchen Sie nach einem Plugin namens HTML Import 2 von Stephanie Leary. Sobald dieses Plugin installiert und aktiviert ist, befolgen Sie die praktische Bedienungsanleitung, um Ihr gesamtes Verzeichnis von HTML-Seiten zu importieren. Komplett mit Bildern!

Danach werden alle Ihre alten Inhalte auf WordPress leben und mit Ihrem neuen Thema formatiert. Oder, wenn Sie oben Ihr eigenes Thema erstellt haben, sollte Ihre Website so ziemlich wie vorher aussehen – nur auf WordPress laufen.

Abschließend

Wenn Sie diesen Beitrag als Leitfaden für die Migration Ihrer Website auf WordPress verwendet haben, sind Sie gerade einer der größten Open-Source-Communitys der Welt beigetreten. Willkommen! Es ist ein unterhaltsamer Ort mit vielen Entwicklern, Designern, Bloggern, Heimwerkern und mehr – alle bauen, spielen und erstellen mit WordPress- und WordPress-Themes/Plugins.

Wenn Sie „den WordPress-Bug erwischt“ haben, ist die offizielle WordPress.org-Website voller nützlicher Themen, Plugins und anderer Ressourcen. Wenn Sie Ihre Designdateien weiter optimieren möchten, erkunden Sie den Codex für scheinbar endlose Tipps, Tricks und Variationen.

Und natürlich hoffen wir, dass Sie in den Kommentaren unten bleiben und in Zukunft weitere Blog-Posts abonnieren.

Miniaturansicht des Artikels über Max Griboedov / shutterstock.com