In den Anfängen (des Webs) wurden alle Websites nur mit Text und statischem HTML erstellt. Heute, mehr als 20 Jahre später, ist das Web jedoch ein ganz anderes Pflaster. Websites sind viel komplexer. Sie bieten sowohl für die Ersteller als auch für die Besucher reichhaltigere und angenehmere Erfahrungen.
Dies ist zum großen Teil Open-Source-Projekten wie WordPress zu verdanken. In den letzten zehn Jahren ist es gelungen, das Online-Publishing zu demokratisieren (und noch viel mehr), so dass jeder mit einer WordPress-Installation und den richtigen Themes/Plugins eine moderne Website mit fortschrittlichem Design und Funktionalität erstellen kann. Keine Programmierung – nicht einmal HTML! – erforderlich.
Deshalb ist es für begeisterte WordPress-Nutzer wie mich fast schwer zu glauben, dass im Jahr 2018 noch immer jemand eine statische HTML-Website anstelle einer WordPress-Website mit einem Theme und Plugins betreiben könnte. Aber Tatsache ist, dass es immer noch eine beträchtliche Anzahl aktiver reiner HTML-Websites da draußen gibt. (Oder HTML mit ein bisschen CSS.)
Zugegeben, diese Website-Besitzer haben vielleicht gute Gründe, nicht zu aktualisieren oder zu konvertieren. Vielleicht ändert sich der Inhalt ihrer Website nie, und die einfache Formatierung und das Design, das bereits vorhanden ist, ist brauchbar? Oder vielleicht ist es weniger lästig, als sich um die Aktualisierung einer WordPress-Site zu kümmern? Beides sind triftige Gründe (neben anderen). Ein Paradebeispiel für „Man soll nicht reparieren, was nicht kaputt ist“
Ich habe jedoch das Gefühl, dass dies nicht der Hauptgrund ist, warum einige (vielleicht viele) den Sprung nicht geschafft haben. Der offensichtlichste Grund ist, dass sie einfach nicht wissen, wie sie ihre HTML-Site in eine WordPress-Site umwandeln können. Vor allem, ohne dass Inhalte verloren gehen oder Seite für Seite übermäßig formatiert werden muss.
Glücklicherweise gibt es, wie so oft bei WordPress, eine Reihe von Möglichkeiten, dieses Problem zu lösen. Im Folgenden habe ich einige Optionen zusammengestellt.
Abonnieren Sie unseren Youtube-Kanal
Ihre Optionen für die Umwandlung einer statischen HTML-Site in eine WordPress-Site
Wie Sie Ihre statische HTML-Site in eine WordPress-Site umwandeln, hängt zweifellos von Ihren persönlichen Vorlieben, der gewünschten zeitlichen und finanziellen Investition und Ihren Kenntnissen im Umgang mit Code ab. Sie müssen selbst entscheiden, was für Sie am besten ist, aber mit den folgenden Zusammenfassungen sollten Sie in der Lage sein, sich schnell zu entscheiden und direkt zu den wichtigsten Informationen in diesem Beitrag für Ihre spezielle Situation zu springen.
Es gibt drei Hauptoptionen:
1. Erstellen Sie manuell ein WordPress-Theme auf der Grundlage Ihrer aktuellen statischen HTML-Site.
Dazu müssen Sie in Ihren Code eindringen. Sie müssen über FTP auf Ihr aktuelles Website-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 einige Code-Bestandteile aus dem WordPress-Codex kopieren. Das ist ziemlich einfach und unkompliziert, wenn Sie etwas Erfahrung mit HTML, CSS und ein wenig PHP haben.
2. Installieren Sie ein vorgefertigtes Theme und migrieren Sie einfach Ihre Inhalte.
Dies ist wahrscheinlich die beste Option, wenn es um Einfachheit und Wert geht. Vorausgesetzt, Sie haben bereits ein Hosting für Ihre aktuelle Website, müssen Sie nur dann Geld ausgeben, wenn Sie sich für ein Premium-Theme entscheiden. Das Plugin, das wir für den Import von Inhalten verwenden werden, ist im offiziellen WordPress-Plugin-Repository frei verfügbar.
3. Einen HTML-zu-WordPress-Konvertierungsdienst bezahlen, um Ihre Website neu zu erstellen.
Dies ist die einfachste Lösung, da Sie nicht viel tun müssen. Allerdings werden Sie dabei nicht viel mit WordPress vertraut gemacht, und die Kosten variieren je nach dem, wen Sie beauftragen. Ich werde in den folgenden Abschnitten nicht auf diese Option eingehen, denn wenn Sie sich für diesen Weg entscheiden, können Sie einfach eine schnelle Suche nach Dienstleistern durchführen, die sich dann um den Rest kümmern.
Vorbereitung der HTML-zu-WordPress-Konvertierung
Egal, für welchen Weg Sie sich entscheiden, es gibt ein paar Dinge, die Sie tun sollten, bevor Sie loslegen.
Das erste ist die Auswahl eines Hosting-Angebots. Schauen Sie sich die verfügbaren Optionen an und entscheiden Sie sich für ein Paket, das Ihren Bedürfnissen am besten entspricht. Oder vielleicht möchten Sie stattdessen eine lokale WordPress-Installation erstellen? Sie können es später immer noch zu einem Hosting-Dienst migrieren.
Wenn 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 Ihr Ziel darin besteht, 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 Theme erstellen müssen. Zum Glück ist das nicht so beängstigend, wie es sich zunächst anhört. Sie müssen nur ein paar Ordner und Dateien erstellen, ein wenig kopieren und einfügen und dann das Ergebnis hochladen.
Sie benötigen einen Code-Editor wie Sublime oder Notepad++ und Zugriff auf das Verzeichnis Ihrer HTML-Site und das Verzeichnis Ihrer neuen WordPress-Installation.
Schritt 1: Erstellen Sie einen neuen Theme-Ordner und die erforderlichen Dateien
Erstellen Sie auf Ihrem Desktop einen neuen Ordner für Ihre Theme-Dateien. Benennen Sie ihn so, wie Sie Ihr Thema benennen möchten.
Als Nächstes erstellen Sie in Ihrem Code-Editor einige Dateien (die alle in Ihren neuen Themenordner gehören). Ändern Sie noch nichts an ihnen. Lassen Sie sie einfach zur weiteren Bearbeitung offen.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Schritt 2: Vorhandenes CSS in neues Stylesheet kopieren
Wenn Sie ein Design duplizieren wollen, bedeutet das wahrscheinlich, dass Sie zumindest einige CSS-Dateien haben, die Sie speichern wollen. Die erste Datei, die Sie bearbeiten müssen, ist Ihre Style.css-Datei.
Fügen Sie zunächst Folgendes am Anfang Ihrer Datei ein.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Nach diesem Abschnitt fügen Sie einfach Ihr vorhandenes CSS unten ein. Speichern und schließen Sie die Datei.
Schritt 3: Trennen Sie Ihr aktuelles HTML
Bevor wir mit Schritt drei beginnen, möchte ich Ihnen kurz erklären, wie WordPress funktioniert. WordPress verwendet PHP, um Daten aus der zugrunde liegenden Datenbank aufzurufen und abzurufen. Jede Datei, die wir in diesem kleinen Tutorial verwenden, dient dazu, WordPress mitzuteilen, welcher Teil des Inhalts Ihrer Website an welcher Stelle angezeigt werden soll.
Wenn ich also sage, dass wir Ihr bestehendes HTML „zerhacken“ werden, ist das, was wir tatsächlich tun, einfach das Ausschneiden und Einfügen von Teilen Ihres bestehenden Codes in die verschiedenen Dateien, die wir gerade erstellt haben, so dass WordPress weiß, wo sie angezeigt werden sollen.
Beginnen wir.
Zuerst öffnen Sie die index.html-Datei Ihrer aktuellen Website. Markieren Sie alles vom Anfang der Datei bis zum einleitenden Tag div class=“main“. Kopieren Sie diesen Abschnitt und fügen Sie ihn in Ihre Datei header.php ein, speichern und schließen Sie sie.
Zweitens: Gehen Sie zurück zu Ihrer Datei index.html. Markieren Sie das Element aside class=“sidebar“ und alles, was sich darin befindet. Kopieren Sie diesen Abschnitt und fügen Sie ihn in die Datei „sidebar.php“ ein, speichern und schließen Sie sie.
Drittens: Markieren Sie in der Datei „index.html“ alles, was nach der Seitenleiste kommt, und kopieren Sie es in die Datei „footer.php“, speichern und schließen Sie sie.
Schließlich markieren Sie in der Datei „index.html“ alles, was übrig bleibt (das sollte der Hauptinhaltsbereich sein), und fügen Sie es in die Datei „index.php“ ein. Speichern Sie, aber schließen Sie die Datei noch nicht.
Sie können die Datei index.html jetzt schließen und mit den letzten Schritten fortfahren. Fast fertig!
Schritt 4: Schließen Sie Ihre index.php-Datei ab
Um die index.php-Datei Ihres neuen Themes abzuschließen, müssen Sie sicherstellen, dass sie die anderen Abschnitte (neben dem Hauptinhalt) aufrufen kann, die sich in den anderen von Ihnen erstellten Dateien befinden. Mit anderen Worten, fügen Sie die Elemente, die wir gerade „zerhackt“ haben, wieder zusammen.
Ganz oben in der Datei index.php platzieren Sie die folgende Zeile php.
<?php get_header(); ?>
Dann, ganz unten in der Datei index.php, platzieren Sie diese Zeilen php.
<?php get_sidebar(); ?><?php get_footer(); ?>
Und schließlich müssen wir noch die so genannte Schleife hinzufügen. Dies ist der primäre Teil von php, den WordPress verwendet, um den Inhalt Ihres Beitrags für die Besucher anzuzeigen. Der letzte Schritt bei der Erstellung der index.php-Datei deines neuen Themes besteht also darin, den unten stehenden Code in den Inhaltsbereich einzufügen.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?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; ?>
Speichere deine index.php und schließe sie. Ihr Theme ist nun fertig! Jetzt müssen Sie es nur noch auf Ihre WordPress-Website hochladen.
Schritt 5: Laden Sie Ihr neues Theme hoch
Nachdem Sie Ihre Theme-Dateien erstellt und in Ihrem neuen Theme-Ordner gespeichert haben, müssen Sie auf das Verzeichnis Ihrer neuen WordPress-Installation zugreifen.
Setzen Sie Ihren neuen Theme-Ordner in /wp-content/themes/. Navigiere dann zurück zu WP Admin > Appearance > Themes und dein neu erstelltes Theme sollte dort erscheinen. Aktivieren Sie es!
Jetzt müssen Sie nur noch Ihre neue WordPress-Website mit den Inhalten Ihrer alten Website bestücken. Folgen Sie dem folgenden Abschnitt (überspringen Sie den Teil über die Verwendung eines vorgefertigten Themes), um zu sehen, wie das geht.
Verwendung eines vorgefertigten WordPress-Themes und Importieren von HTML-Inhalten
Wenn Ihnen die obigen Schritte zu intensiv oder zeitaufwendig erscheinen, dann gibt es eine andere Möglichkeit. Anstatt das Design, mit dem Sie gerade arbeiten, in ein WordPress-Theme umzuwandeln, können Sie auf eines der Tausenden von Themes zurückgreifen, die auf dem breiten 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 darüber informieren, welche Themes für Ihre Bedürfnisse geeignet sind, und hier bei Elegant Themes und anderswo nach Themenkategorien suchen.
Wenn Sie ein Theme ausgewählt haben, das Ihnen gefällt (und das gezippte Dateipaket heruntergeladen haben), gehen Sie zurück zu WP Admin > Erscheinungsbild > Themes > Neu hinzufügen und installieren/aktivieren Sie Ihr neues WordPress-Theme.
Wenn das erledigt ist, haben Sie eine neue WordPress-Website und ein Theme – aber sonst wenig. Wenn Sie sich Ihre Website in der Vorschau ansehen, wird sie inhaltsleer sein und wahrscheinlich etwas langweilig aussehen. Das ist in Ordnung, denn als Nächstes werden wir den Inhalt Ihrer alten Website importieren.
In WP Admin gehen Sie 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, folgen Sie seiner praktischen Anleitung, um Ihr gesamtes Verzeichnis von HTML-Seiten zu importieren. Komplett mit Bildern!
Danach haben Sie alle Ihre alten Inhalte in WordPress gespeichert und mit Ihrem neuen Theme formatiert. Wenn Sie Ihr eigenes Theme erstellt haben, sollte Ihre Website fast genauso aussehen wie vorher – nur eben unter WordPress.
Zusammenfassend
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-Gemeinschaften der Welt beigetreten. Herzlich willkommen! Es ist ein unterhaltsamer Ort mit vielen Entwicklern, Designern, Bloggern, Heimwerkern und anderen, die alle mit WordPress und WordPress-Themes/Plugins bauen, spielen und kreieren.
Wenn Sie das WordPress-Virus gepackt hat, ist die offizielle Website WordPress.org voll mit nützlichen Themes, Plugins und anderen Ressourcen. Wenn Sie Ihre Themes weiter optimieren möchten, finden Sie im Codex unzählige Tipps, Tricks und Varianten.