So konvertieren Sie eine HTML-Website in ein WordPress-Business-Theme

Viele Unternehmen verlassen sich noch immer auf einfache HTML-Websites für ihre Online-Präsenz. Diese HTML-Websites sind normalerweise statisch, was bedeutet, dass Sie den Code bearbeiten müssen, um auch nur ein kleines Detail auf der Website zu ändern. Um dies zu vermeiden, können Sie Ihre HTML-Website jedoch in WordPress konvertieren.

In diesem Tutorial zeige ich Ihnen, wie Sie HTML in ein WordPress-Business-Theme konvertieren. Dadurch bleiben alle HTML-Elemente intakt und Sie haben die Flexibilität von WordPress, jedes Element einfach anzupassen.

Wenn Sie sowohl mit HTML als auch mit WordPress vertraut sind, ist dieses Tutorial gut für Sie. Wenn Sie ein Neuling sind, versuchen Sie dies mit einer Dummy-Website auf Ihrem localhost wie XAMPP.

• Konvertieren von HTML-Websites in WordPress
• Welche WordPress-Dateien Sie benötigen
• CSS, JavaScript und Bilder konfigurieren
• Hinzufügen von WordPress-Funktionen, um Funktionen hinzuzufügen

Konvertieren einer HTML-Site in ein WordPress-Theme

Für dieses Tutorial habe ich hier ein kostenloses HTML-Business-Theme ausgewählt. Die Techniken bleiben bei der Konvertierung jedes Geschäftsthemas gleich. Wenn Sie Fragen zu Ihrem Geschäftsthema haben, schreiben Sie einfach einen Kommentar oder eine E-Mail, und ich antworte Ihnen gerne.

Lass uns weitermachen. Sehen Sie sich zuerst Ihr HTML-Theme an und markieren Sie die Kopf-, Haupt- und Fußzeilenelemente.

Kopfzeile : Die Kopfzeile enthält den oberen Abschnitt.

Hauptteil : Es ist eine lange Seite, also habe ich herausgezoomt, um einen Screenshot zu machen, aber der gesamte Mittelteil ist im Hauptteil enthalten.

Fußzeile : Der Fußzeilenbereich enthält den unteren Teil.

Schritt 1: Voraussetzungen

Ich hoffe, Sie haben WordPress bereits auf Ihrem lokalen Host wie XAMPP (dh Ihrem Computer) installiert. Falls nicht, haben wir bereits eine ausführliche Anleitung zur lokalen Installation und Einrichtung von WordPress behandelt.

Schritt 2: Erstellen Sie Ihren Themenordner

Für dieses Tutorial verwende ich XAMPP und meine WordPress-Site ist im Ordner htdocs installiert. Um ein WordPress-Theme zu erstellen, müssen Sie auf Ihren Themenordner zugreifen und einen neuen Ordner erstellen.
Öffnen Sie nun den XAMPP- Ordner > htdocs > WordPress- Ordner (in meinem Fall testet es ) > wp-content > themes .

Im Ordner Themes sehen Sie alle Ihre installierten WordPress-Themes. Erstellen Sie einen neuen Ordner und benennen Sie Ihr Thema.

Schritt 3: PHP-Dateien erstellen

Der neu erstellte Themenordner ist leer und Sie müssen einige Dateien erstellen, um ihn funktionsfähig zu machen. Dazu müssen Sie Ihren Code-Editor (VS Code) starten und den gesamten WordPress-Theme-Ordner öffnen (in meinem Fall farhan-wordpress-theme).

Erstellen Sie nun die folgenden wesentlichen WordPress-Dateien, um Ihr Theme besser zu organisieren.

1. style.css (enthält Designdetails und CSS-Dateien)
2. index.php (dient dem Hauptinhalt, wenn keine anderen optionalen Dateien deklariert sind)
3. header.php (enthält die Header-Elemente des Themes)
4. footer.php (enthält die Footer-Elemente des Themes)
5. functions.php (enthält Funktionen, die im WordPress-Theme aktiviert sind)

Schritt 4: CSS-, Bilder- und JavaScript (JS)-Ordner kopieren

Kopieren Sie aus Ihrem HTML-Theme (oben heruntergeladen) den Assets-Ordner (CSS-, JS- und Bilderordner) in Ihren neuen WordPress-Themeordner.

Nachdem Sie in Ihren neuen WordPress-Theme-Ordner verschoben haben, sieht dieser so aus:

Schritt 5: Aktivieren Sie ein neues WordPress-Theme

Jetzt haben Sie die wichtigen Ordner hinzugefügt, die für jedes wp-Theme erforderlich sind. Öffnen Sie als Nächstes Ihre WordPress-Site in Ihrem Browser und melden Sie sich bei Ihrem Dashboard an. Navigieren Sie zu Darstellung > Designs, und Sie werden sehen, dass Ihr neues Design zu diesem Abschnitt hinzugefügt wurde.

Dieses Thema sieht leer aus. Um die Informationen und das Banner für das neu erstellte Design hinzuzufügen, öffnen Sie Ihre Datei style.css (zuvor erstellt) und fügen Sie den folgenden Code ein und speichern Sie ihn ( ctrl+s ).

 /*

Theme-Name: Farhan WordPress Theme

Autor: Farhan

Beschreibung: Konvertieren Sie HTML in WordPress-Theme.

Version: 1.0

*/

Für das Banner müssen Sie Ihrem neuen Themenordner eine Bilddatei hinzufügen. Die Bildgröße sollte 800 x 600 betragen und der Bildname sollte Screenshot (png-Format) sein.

Sobald Sie die Datei screenshot.png hinzugefügt haben, aktualisieren Sie Ihr wp-admin-Dashboard und das Bildbanner wird angezeigt.

Jetzt können Sie die Themeninformationen anzeigen, wenn Sie auf das Banner klicken.

Klicken Sie anschließend einfach auf Aktivieren .

Schritt 6: HTML-Code in Kopfzeile, Index und Fußzeile konvertieren

Kopf-, Fuß- und Hauptteil sind mit HTML-Kommentaren gekennzeichnet, um sie einfach zu Ihren WordPress-PHP-Dateien hinzuzufügen und den Code zu konvertieren.

Kopieren Sie nun den Header-Code aus der index.html des heruntergeladenen Themes in die von Ihnen erstellte header.php- Datei im WordPress-Themes-Ordner. Sie müssen von <!DOCTYPE html> bis </header> kopieren und speichern.

Kopieren Sie auf ähnliche Weise die Fußzeilen- und Hauptkörperelemente von index.html in footer.php bzw. index.php.

Kopieren Sie für die Fußzeile von <footer> (in meinem Fall ist im Footer-Tag ein Klassenname definiert, also lassen Sie sich nicht verwirren) bis </html> in die Datei footer.php und speichern Sie sie.

Kopieren Sie als nächstes den gesamten Code nach dem </header> -Tag und kurz vor dem <footer> in die index.php und speichern Sie ihn.

Fügen Sie die WordPress-Funktion get_header() oben und get_footer() am Ende der Datei index.php hinzu.

get_header() ist eine eingebaute Funktion, die header.php aufruft, und get_footer() ist eine Funktion, die footer.php aufruft .

Fügen Sie den folgenden Code oben in die Datei index.php ein und speichern Sie ihn.

 <?php get_header(); ?> 

Um eine Fußzeile aufzurufen, fügen Sie den folgenden Code am Ende des index.php-Codes ein und speichern Sie ihn.

 <?php get_footer(); ?> 

Besuchen Sie nun Ihre Website und Sie werden so etwas sehen.

Schritt 7: CSS konfigurieren

Die Tatsache, dass Ihr Design seltsam aussieht, liegt daran, dass die CSS-Dateien nicht auf das Design angewendet werden.

Sie haben den CSS-Ordner bereits aus dem HTML-Theme in Ihren WordPress-Themeordner kopiert. Jetzt müssen Sie diese CSS-Dateien aufrufen, um das Aussehen des Themes zu vervollständigen.

Denken Sie daran, dass die Namen Ihrer CSS-Dateien unterschiedlich sein können – also überprüfen Sie es noch einmal, bevor Sie diesen Vorgang durchführen.

Sie finden Ihre CSS-Stylesheets in der Datei header.php, daher müssen Sie mit STRG +f nach „ rel=“stylesheet“ suchen.

Entfernen Sie danach die Google Font-Stylesheets, da wir sie nicht benötigen. Jetzt muss ich nur noch das eigentliche CSS-Stylesheet registrieren, dh <link rel=“stylesheet“ href=“assets/css/style-starter.css“> .

WordPress versteht die reguläre CSS-Stylesheet-Struktur nicht; Deshalb muss ich das CSS-Stylesheet einreihen und registrieren. Gehen Sie zur Dateifunctions.php und fügen Sie den folgenden Code hinzu.

 <?php

Funktion add_css()

{

   wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style( 'zuerst');

}

add_action('wp_enqueue_scripts', 'add_css'); 

Der wp_register_style hilft Ihnen, Ihr CSS-Stylesheet zu registrieren.

Die get_template_directory_uri() . '/href' wird verwendet, um den aktuellen Vorlagenverzeichnispfad abzurufen. Es wird den aktuellen Pfad mit der entsprechenden Datei verketten. Hier müssen Sie also den Speicherort Ihrer CSS-Datei (href) definieren. Sie können sehen, wie ich den Pfad dieser CSS-Datei definiert habe: get_template_directory_uri() . ' /assets/css/style-starter.css '.

Jetzt können wir den CSS-Stylesheet-Link aus der Datei header.php entfernen und durch den folgenden Code ersetzen und die Datei speichern.

 <?php wp_head(); ?>

Der wp_head() ist ein wesentlicher WordPress-Hook, der im Abschnitt <head> </head> von header.php definiert ist.

Wenn Sie Ihre WordPress-Site besuchen, werden Sie feststellen, dass die CSS-Dateien tatsächlich in Ihr neues WordPress-Theme eingereiht sind, aber das Design ist immer noch nicht in Ordnung. Dies liegt daran, dass Sie die JS-Skripte noch nicht konfiguriert haben.

In der header.php habe ich ein CSS-Stylesheet, und ich habe es nur in der functions.php registriert. Aber was ist, wenn Sie mehrere Stylesheets haben? In diesem Fall müssen Sie wp_register_style() für jedes Stylesheet definieren. Mach dir keine Sorge! Sie können ein Beispiel aus dem nächsten Schritt nehmen, in dem ich mehrere JS-Skripte habe. Der Prozess ist derselbe, sodass Ihre Fragen geklärt werden und Sie verstehen, wie Sie diese Arbeit erledigen.

Schritt 8: JavaScript konfigurieren

Das HTML-Theme, mit dem Sie arbeiten, verwendet JavaScript, und in der Datei footer.php werden bereits JavaScript-Dateien im HTML-Format aufgerufen. Um diese JS-Dateien auszuführen, müssen Sie nur die gleichen Aktionen ausführen, die Sie im vorherigen Schritt ausgeführt haben.

Öffnen Sie Ihre footer.php-Datei und suchen Sie nach „ <script src= “ mit „ STRG+f “. Dies wird Ihnen helfen, alle JS-Dateien zu finden, die Sie haben. In meinem Fall habe ich fünf, und hier muss ich sie alle registrieren und in die Warteschlange stellen.

Als nächstes müssen Sie Ihre Datei functions.php öffnen und den folgenden Code einfügen:

 Funktion add_script()

{

   wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script( 'js-Skript');

   wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'ändern');

   wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script( 'Popup');

   wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'Karussell');

   wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script( 'Bootstrap');

}

add_action('wp_enqueue_scripts', 'add_script');

Sie können sehen, dass die Codestruktur dieselbe ist wie zuvor im CSS-Konfigurationsteil. Aber hier verwenden Sie wp_register_script anstelle von style. Sie registrieren und reihen jede JS-Datei in derselben Funktion ein.

Jetzt können Sie alle JS-Skript-Links (ich habe fünf) aus der Datei footer.php entfernen , dann die folgende Codezeile am Ende des Codes (über dem Tag </body>) einfügen und die Datei speichern.

 <?php wp_footer(); ?> 

Öffnen Sie nun Ihre Site in Ihrem Browser und Sie werden feststellen, dass das neue WordPress-Theme gut funktioniert, aber dennoch einige Bilder fehlen.

Schritt 9: Bilder konfigurieren

Dieser Vorgang ist unkompliziert, und hier müssen Sie den Pfad der Bilder definieren.

Öffnen Sie zunächst Ihre index.php-Datei und suchen Sie nach „< img src= “ mit „ Strg+f “. Dies wird Ihnen helfen, alle Bilddateien zu finden, die Sie haben. In meinem Fall habe ich acht, und hier brauche ich den Pfad für alle.

Um Bildern einen Pfad zu geben; fügen Sie den folgenden PHP-Code in die src- Tags ein und speichern Sie die Datei.

 <img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" /> 

Jetzt sieht Ihr Design ähnlich wie das HTML-Design aus und ruft alle Bilder ab.

Es fehlen jedoch WordPress-Funktionen wie das Ändern des Site-Titels und des WordPress-Navigationsmenüs.

Schritt 10: Benutzerdefinierten Titel in WordPress aktivieren

Wenn Sie in das WordPress-Admin-Panel gehen und den Titel der Website ändern, hat dies keinen Einfluss auf den Titel der Site. Um diese Funktion zu aktivieren, können Sie die in WordPress integrierte Funktion bloginfo() mit dem Parameter „ name “ zwischen den Title- Tags in der Datei header.php verwenden und die Datei speichern.

 <?php bloginfo( 'name' ); ?> 

Auf ähnliche Weise müssen Sie die in WordPress integrierte Funktion bloginfo() mit dem Parameter „ name “ zwischen den h1-Tags in der Datei header.php verwenden und die Datei speichern.

 <?php bloginfo( 'name' ); ?> 

Jetzt nimmt Ihr Theme den Titel auf, den Sie in Einstellungen -> Allgemein -> Site-Titel im WP-Admin-Panel festgelegt haben.

Schritt 11: WordPress-Navigationsmenü in WordPress hinzufügen

Wenn Sie den WordPress-Administrator Ihrer Site besuchen und zu Erscheinungsbild navigieren, wird keine Option für das Menü angezeigt.

Sie müssen Menu zuerst aktivieren, indem Sie die folgende Codezeile in die Datei functions.php einfügen.

 add_theme_support( 'Menüs'); 

Dadurch wird die Menüfunktionalität in Ihrem Design aktiviert, es sind jedoch einige Konfigurationen erforderlich, um Menüs von Ihrem WP-Dashboard aus zu verwalten.

Finden Sie zuerst heraus, wo sich Ihr HTML-Theme-Navigationsmenü befindet, und ersetzen Sie es dann mit der in WordPress integrierten Funktion wp_nav_menu(); Weitere Informationen zu dieser Funktion finden Sie hier.

In diesem Theme enthält die header.php das Navigationsmenü.

Suchen Sie die folgenden Codezeilen:

 <ul class="navbar-nav mx-lg-auto">

<li class="nav-item active">

<a class="nav-link" href="index.html">Startseite <span class="sr-only">(aktuell)</span></a>

</li>

<li class="nav-item @@about__active">

<a class="nav-link" href="about.html">Über</a>

</li>

<li class="nav-item @@contact__active">

<a class="nav-link" href="contact.html">Kontakt</a>

</li>

</ul> 

Ersetzen Sie die obigen Zeilen durch:

 <?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

Ihr WordPress-Menü wird jetzt in Ihrem Theme angezeigt und verleiht Ihrem WordPress-Business-Theme Flexibilität.

Einpacken!

Ich hoffe, dieser Artikel hat Ihnen geholfen zu verstehen, wie Sie eine HTML-Vorlage oder eine Website in ein WordPress-Theme konvertieren. Dies ist ein detailliertes Tutorial, in dem ich elf Schritte behandelt habe, um den Prozess zu demonstrieren.

Wenn Sie Fragen und Anregungen haben, können Sie diese jederzeit im Kommentarbereich unten stellen.