Warum sollten Sie Ihre HTML-Website in ein WordPress-Theme konvertieren?

Veröffentlicht: 2021-08-24

Verwenden Sie immer noch archaische HTML-Websites? Es ist an der Zeit, dass Sie Ihre HTML-Website in eine WordPress-Website umwandeln und von der Fülle an Funktionen profitieren, die dieses beliebte Content-Management-System bietet. Wir werden uns darauf konzentrieren, warum Sie zu WordPress wechseln sollten und wie Sie dies erreichen können.

Einführung

Pure Vanilla HTML ist seit langem der goldene Standard für die Entwicklung von Websites. Die Websites vergangener Zeiten waren jedoch skelettartig, ohne aufwändigen Schnickschnack, und die Verwendung von HTML für diese Websites war damals sinnvoll.

Mit den aktuellen Markttrends und -bedürfnissen können Sie jetzt HTML in WordPress konvertieren und das Content Management System nutzen, um Ihre Website zu betreiben, anstatt den Code zu schreiben. Lesen Sie mehr, um ein breiteres Verständnis der WordPress-Entwicklung zu erhalten.

gründe-um-html-websites-in-wordpress-umzuwandeln

Gründe für das Hochladen oder Konvertieren von HTML-Websites in WordPress

Dies sind einige der wichtigsten Gründe, warum der Wechsel von einer statischen HTML-Website zu einer WordPress-Website ein idealer Schritt ist:

  1. WordPress ist ein fantastisches Tool zum Erstellen und Kuratieren einzigartiger Benutzeroberflächen, die mit statischen HTML-Vorlagen für Website-Designs nicht ohne weiteres möglich sind.
  2. WordPress verfügt über eine starke Community von Entwicklern, die Sie bei Ihrer Website unterstützen und Neulingen bei den bisherigen Herausforderungen helfen können.
  3. Wenn Sie das Layout schnell anpassen möchten, ist dies mit einem einfachen HTML-Layout nicht möglich. Die Seitenerstellungsfunktionen von WordPress ermöglichen es dem Benutzer, das Layout und das Erscheinungsbild der Website unterwegs anzupassen.
  4. Falls Sie Ihre vorhandenen HTML-Dateien nicht verwenden möchten, können Sie aus Tausenden von verfügbaren Designs wählen. Es ist sehr wahrscheinlich, dass Sie ein Design finden, das Ihrem HTML-Erscheinungsbild sehr ähnlich ist. Auf diese Weise sparen Sie Kosten und Aufwand, um Ihr vorhandenes HTML-Layout in WordPress zu konvertieren und auf fertige Vorlagen zurückzugreifen
  5. WordPress hat sich im Laufe der Zeit weiterentwickelt und während der Entwicklung hat die WordPress-Community dafür gesorgt, dass es SEO-freundlich ist. Es hat einige erstaunliche SEO-Boosting-Plugins, ein solches Plugin ist YOAST SEO, der Goldstandard für SEO-Management in WordPress. Es hilft dabei, bessere Platzierungen in Suchmaschinen zu erreichen, was das ultimative Ziel beim Erstellen von Unternehmenswebsites ist.
wege-um-html-websites-in-wordpress-umzuwandeln

Verschiedene Möglichkeiten zum Konvertieren von HTML-Websites in WordPress

Nachdem wir besprochen haben, warum es ratsam ist, HTML in WordPress zu konvertieren, werden wir eintauchen, um zu verstehen, wie man das bewerkstelligt.

Es stehen drei Optionen zur Verfügung

  • Manuelle Methode, bei der alles von Grund auf neu konstruiert werden muss.
  • Die Child-Theme-Methode umfasst die Verwendung eines grundlegenden WordPress-Themes und dessen Anpassung an Ihre Vorgaben.
  • Die Plugin-Technik.

Die Methode, die Sie wählen, hängt von Ihren Programmierkenntnissen, der Zeit, die Sie diesem Projekt widmen möchten, und Ihren Vorlieben ab.

schritte-um-html-websites-mit-manueller-methode-in-wordpress-umzuwandeln

Manuelle Konvertierung der HTML-Website in WordPress

Der HTML-Code Ihrer aktuellen Website kann ein Anhaltspunkt für die manuelle Konvertierung sein. Experten raten, dass Sie über ausreichende Programmierkenntnisse verfügen, bevor Sie dieses Übersetzungsverfahren versuchen. Insbesondere sollten Sie sich mit HTML, CSS und PHP auskennen.

So konvertieren Sie HTML manuell in WordPress:

Schritt 1: Erstellen Sie einen neuen Themenordner

Erstellen Sie eine neue Datei auf Ihrem PC, um Ihre Themendateien zu speichern. Sie können diese Kategorie beliebig benennen (sie dient als Name des Attributs). Erstellen Sie die entsprechenden Dateien und lassen Sie sie in Ihrem bevorzugten Codierungseditor geöffnet:

  1. Style.css
  2. Index.php
  3. Header.php
  4. Seitenleiste.php

Schritt 2: CSS-Code in das neue Stylesheet kopieren

Sie können Ihren CSS-Code erneut kopieren, nachdem Sie die Dateien erstellt haben. Diejenigen, die ihre Website replizieren und nach WordPress verschieben möchten, müssen den CSS-Code von ihrem vorherigen Standort lokalisieren und extrahieren. Die style.css-Datei ist für das Aussehen der Seite verantwortlich. Fügen Sie daher die folgenden Zeilen 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 */

Schritt 3: Trennen Sie den aktuellen HTML-Code

Öffnen Sie zunächst die Datei index.html.

Kopieren Sie den Code aus den produzierten WordPress-Dateien und fügen Sie ihn in die folgenden Bereiche ein:

  1. Header.php — Diese Datei enthält alles von der Einführung Ihres HTML-Codes bis zum Hauptinhaltsbereich. Sie müssen <?php wp_head();?> direkt vor dem Abschnitt </head> kopieren und einfügen.
  2. Sidebar.php – Hier fügen Sie den gesamten Code aus dem Abschnitt <aside> ein.
  3. Footer.php — Dieser Teil verläuft vom unteren Rand der Seitenleiste bis zum oberen Rand der Datei. Fügen Sie einen Aufruf für <?php wp_footer();?> hinzu, bevor Sie die Klammer mit </body> beenden.

Schritt 4: Header.php und Index.php für WordPress ändern

Anschließend ändern Sie header.php und index.php, damit sie dem Format von WordPress entsprechen.

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--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_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

Suchen Sie dazu im Abschnitt <head> nach einem Link, der so aussieht:

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

Ersetzen Sie die vorherige URL durch diese:

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

Speichern und beenden Sie jetzt die Datei header.php.

Öffnen Sie die Datei index.php in Ihrem Webbrowser. Es soll leer stehen.

Füllen Sie die Lücken genau so aus:

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

Schritt 5: Laden Sie Ihr neues Design herunter

Wenn Ihr Themenordner fertig ist, laden Sie ihn auf Ihre Website hoch und schließen Sie die HTML-zu-WordPress-Konvertierung ab. Gehen Sie dazu zu dem Ort, an dem Sie WordPress heruntergeladen haben, und fügen Sie den neu erstellten Ordner zum Thema / wp-content / hinzu.

Überprüfe die Liste der Attribute auf deiner WP-Admin-Seite, deinem Theme und deinen Themes, um zu sehen, ob der Attributname existiert. Wenn dies der Fall ist, haben Sie alles richtig gemacht und können es jetzt aktivieren.

schritte-um-html-websites-in-wordpress-mit-der-child-theme-methode-umzuwandeln

Konvertieren einer HTML-Website über ein WordPress-Child-Theme

Schritt 1: Wählen Sie ein Thema aus

Wählen Sie zunächst ein passendes HTML-Design-Theme aus. Suchen Sie nach einem Unterthema, das Ihrer aktuellen Website ähnelt. Wenn Sie das darin enthaltene Muster finden, werden Sie nicht so viel nach Codierung suchen.

Sie sollten das Startfeature angeben, da es auf grundlegenden Codezeilen aufgebaut wird.

Schritt 2: Erstellen Sie einen neuen Themenordner

Auf die gleiche Weise wie bei der letzten Methode erstellen Sie einen neuen Ordner auf Ihrem Desktop.

Der Ordner sollte denselben Titel wie der übergeordnete Stil haben, jedoch mit dem Zusatz „-child“ am Ende. Beachten Sie, dass der Name keine Leerzeichen enthalten darf.

Schritt 3: Erstellen Sie einen neuen Blattstil

Erstellen Sie dann innerhalb des Ordners eine style.css-Datei und fügen Sie zusätzliche Codezeilen hinzu:

Denken Sie daran, dass dies nur ein Beispiel ist. Sie müssen mit Ihren Daten von vorne beginnen. Wenn der Vorgang abgeschlossen ist, 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/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

Schritt 4: Erstellen Sie eine Functions.php

Dann schreiben Sie für das untergeordnete Thema eine Datei functions.php und kopieren die übergeordneten Stile.

Erstellen Sie dazu eine neue Datei namens functions.php. Stellen Sie zunächst sicher, dass die Datei <?php. Schild.

Geben Sie nun den folgenden Code in das Feld ein:

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

Dieser Code weist WordPress an, zum übergeordneten Thema zu wechseln und die dort angegebenen Stile des untergeordneten Themas zu verwenden.

Schritt 5: Aktivieren Sie das Thema des Kindes

Schließlich müssen Sie das Thema konfigurieren. Bevor Sie den Ordner an WordPress senden, entpacken Sie ihn über das Menü „Darstellung“, „Designs“ und dann „Neu hinzufügen“. Von dort können Sie die ZIP-Datei abrufen. Schaue als weitere Option im wp-content/theme-Ordner nach.

schritte-um-html-websites-in-wordpress-unter-verwendung-der-plugin-technik-umzuwandeln

Importieren Sie Ihre Inhalte von einer HTML-Website mithilfe eines Plugins in WordPress

Schritt 1: Richten Sie eine neue Website ein

Laden Sie das WordPress-Design Ihrer Wahl auf Ihre neue Website herunter. Stellen Sie sicher, dass es sich um eine gewünschte Vorlage handelt, die schnell geändert werden kann. Um Ihrer Identität zu entsprechen, müssen Sie das Aussehen aktualisieren.

Schritt 2: Installieren Sie das Plugin

Der erste Schritt besteht darin, das Plugin HTML Import 2 herunterzuladen und zu installieren. (Sind WordPress-Plugins sicher zu verwenden? Lesen Sie weiter, um mehr zu erfahren). Der einfachste Weg, dies zu tun, ist, zu Plugins > Neu hinzufügen zu gehen und den Namen des Plugins in Ihrem WordPress-Admin-Panel einzugeben. Klicken Sie auf Jetzt installieren, wenn Sie es auf dem Bildschirm finden (möglicherweise ganz unten). Wenn es fertig ist, starten Sie es.

Schritt 3: Seiten hochladen

Veröffentlichen Sie Ihre Seiten auf demselben Server wie Ihre WordPress-Installation, sobald das Plugin installiert ist.

Informationen, die Sie ausfüllen müssen:

  • Zu importierendes Verzeichnis
  • Alte Website-URL
  • Standarddatei
  • Einzuschließende Dateierweiterungen
  • Auszuschließende Verzeichnisse
  • Dateinamen beibehalten

Navigieren Sie danach zur Registerkarte Inhalt und konfigurieren Sie das HTML-Element, das den Inhalt Ihrer Website enthält.

Im zweiten Schritt richten Sie eine Umleitung von den alten auf die neuen URLs ein. Auf diese Weise verlieren Sie keinen bestehenden SEO-Wert.

Speichern Sie Ihre Optionen und klicken Sie dann auf Dateien importieren, nachdem Sie die einzelnen Registerkarten durchlaufen haben.

Fazit

Auf dem sich ständig verändernden Wettbewerbsmarkt von heute kann eine flexible WordPress-Website der effektivste Weg für die Entwicklung Ihres Unternehmens sein.

Mit praktischen Tricks zur Verbesserung der Geschwindigkeit einer WordPress-Website und Möglichkeiten zur Skalierung Ihrer WordPress-Website für hohen Datenverkehr kann sich WordPress mit Ihren großen oder kleinen Unternehmen weiterentwickeln.

Obwohl HTML-zu-WordPress-Konverter-Plugins eine praktikable Lösung zu sein scheinen, können sie nicht mit den Ergebnissen verglichen werden, die durch menschliches Codieren erzielt werden, insbesondere wenn eine HTML-Website in ein WordPress-Thema konvertiert wird.

Der Wechsel von einer statischen HTML-Seite zu einem effektiveren Content-Management-System mit etablierten Funktionen wie der WordPress-Plattform ist eine gute Option, wenn Sie eines haben, insbesondere im Vergleich zu anderen ähnlichen Plattformen wie Wix. Wenn Sie HTML in WordPress konvertieren, wird Ihre Website aufgrund der WordPress-Designs und der benutzerfreundlichen WordPress-Funktionen einfacher zu verwalten und zu verwalten. Kontaktieren Sie uns für kundenspezifische WordPress-Lösungen neben einer Fülle anderer Dienstleistungen und lassen Sie Ihre Ideen mit Creole Studios Wirklichkeit werden!