So konvertieren Sie HTML-Website in WordPress Business Theme

So konvertieren Sie HTML-Website in WordPress Business Theme

Viele Unternehmen verlassen sich immer noch 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-Geschäftsthema konvertieren. Dies hält alle HTML-Elemente intakt und gibt Ihnen 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.

• HTML-Website in WordPress konvertieren
• Welche WordPress-Dateien benötigen Sie?
• Konfigurieren von CSS, JavaScript und Bildern
• Hinzufügen von WordPress-Funktionen zum Hinzufügen von Funktionen

HTML-Site in WordPress-Theme konvertieren

Für dieses Tutorial habe ich ein kostenloses HTML-Business-Theme von hier. Die Techniken bleiben beim Konvertieren eines Geschäftsthemas gleich. Wenn Sie Fragen zu Ihrem Geschäftsthema haben, schreiben Sie einfach einen Kommentar oder eine E-Mail, und ich werde Ihnen gerne antworten.

Lass uns weitermachen. Schauen Sie sich zunächst Ihr HTML-Design an und markieren Sie die Elemente Kopfzeile, Hauptteil und Fußzeile.

Header: Der Header enthält den oberen Abschnitt.

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

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

Schritt 1: Voraussetzungen

Ich hoffe, Sie haben WordPress bereits auf Ihrem lokalen Host wie XAMPP (dh Ihrem Computer) installiert. Wenn nicht, haben wir bereits eine detaillierte Anleitung behandelt, die Ihnen bei der lokalen Installation und Einrichtung von WordPress hilft.

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 er) > wp-content > themes.

Im Ordner Themes sehen Sie alle 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, damit er funktioniert. Dazu müssen Sie Ihren Code-Editor (VS Code) starten und den gesamten WordPress-Themenordner öffnen (in meinem Fall farhan-wordpress-theme).

Erstellen Sie nun die folgenden wichtigen WordPress-Dateien, um Ihr Thema besser zu organisieren.

1. Stil.css (enthält Themendetails und CSS-Dateien)
2. Index.php (liefert den Hauptinhalt, wenn keine anderen optionalen Dateien deklariert sind)
3. header.php (enthält die Header-Elemente des Themas)
4. Fußzeile.php (enthält die Fußzeilenelemente des Themas)
5. Funktionen.php (enthält Funktionen, die im WordPress-Theme enthalten sind)

Schritt 4: Kopieren Sie die Ordner CSS, Images und JavaScript (JS)

Kopieren Sie von Ihrem HTML-Design (oben heruntergeladen) den Ordner Assets (Ordner CSS, JS und images) in Ihren neuen WordPress-Designordner.

Nach dem Umzug in Ihren neuen WordPress-Themenordner sieht es folgendermaßen aus:

Schritt 5: Aktivieren Sie ein neues WordPress-Theme

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

Dieses Theme sieht leer aus. Um die Informationen und das Banner für das neu erstellte Thema hinzuzufügen, öffnen Sie Ihren Stil.CSS-Datei (früher erstellt) und fügen Sie den folgenden Code ein und speichern Sie ihn (Strg + s).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to 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 den Screenshot hinzugefügt haben.png-Datei, aktualisieren Sie Ihr wp-Admin-Dashboard, und das Bildbanner wird angezeigt.

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

Als nächstes klicken Sie einfach auf Aktivieren.

Schritt 6: Konvertieren Sie HTML-Code in Kopf-, Index- und Fußzeile

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

Kopieren Sie nun den Header-Code aus dem Index.html des heruntergeladenen Themas in die Kopfzeile.PHP-Datei, die Sie im Ordner WordPress Themes erstellt haben. Sie müssen von < kopieren!DOCTYPE html> till </header> und speichern Sie es.

Kopieren Sie in ähnlicher Weise die Fußzeilen- und Hauptkörperelemente aus dem Index.html in Fußzeile.php und Index.php, beziehungsweise.

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

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

Fügen Sie die WordPress-Funktion get_header() oben und get_footer() am Ende des Index hinzu.PHP-Datei.

get_header() ist eine eingebaute Funktion, die Header aufruft.php und ähnlich ist get_footer() eine Funktion, die footer aufruft.PHP.

Fügen Sie den folgenden Code oben im Index hinzu.PHP-Datei und speichern Sie sie.

<?php get_header(); ?>

Um eine Fußzeile aufzurufen, fügen Sie den folgenden Code am Ende des Index ein.PHP-Code und speichern Sie es.

<?php get_footer(); ?>

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

Schritt 7: Konfigurieren von CSS

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

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

Denken Sie daran, dass die Namen Ihrer CSS—Dateien abweichen können – überprüfen Sie dies daher, bevor Sie diesen Vorgang durchführen.

Sie finden Ihre CSS-Stylesheets in der Kopfzeile.PHP-Datei, 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 in die Warteschlange stellen und registrieren. Gehen Sie zu den Funktionen.PHP-Datei und fügen Sie den folgenden Code hinzu.

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}add_action('wp_enqueue_scripts', 'add_css');

Mit wp_register_style können Sie Ihr CSS-Stylesheet registrieren.

Die get_template_directory_uri() . ‚/href‘ wird verwendet, um den aktuellen Vorlagenverzeichnispfad abzurufen. Der aktuelle Pfad wird mit der entsprechenden Datei verkettet. 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/Stil-Starter.css‘.

Jetzt können wir den CSS-Stylesheet-Link aus der Kopfzeile entfernen.PHP-Datei und ersetzen Sie sie durch den folgenden Code und speichern Sie die Datei.

<?php wp_head(); ?>

Der wp_head() ist ein wesentlicher WordPress-Hook, der im Abschnitt <head> </head> des Headers definiert ist.PHP.

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

In der Kopfzeile.php, ich habe ein CSS-Stylesheet und habe es nur in Funktionen registriert.PHP. Aber was ist, wenn Sie mehrere Stylesheets haben? In diesem Fall müssen Sie wp_register_style() für jedes Stylesheet definieren. Keine Sorge! Sie können ein Beispiel aus dem nächsten Schritt nehmen, in dem ich mehrere JS-Skripte habe. Der Prozess ist der gleiche, so dass es Ihre Anfragen löschen und Ihnen helfen zu verstehen, wie Sie diesen Job machen werden.

Schritt 8: JavaScript konfigurieren

Das HTML-Design, mit dem Sie arbeiten, verwendet JavaScript und befindet sich in der Fußzeile.PHP-Datei, JavaScript-Dateien werden bereits 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 Fußzeile.PHP-Datei und suchen Sie mit „STRG + f“ nach „<script src=“. Dies wird Ihnen helfen, alle JS-Dateien zu finden, die Sie haben. In meinem Fall habe ich fünf, und hier muss ich mich registrieren und alle in die Warteschlange stellen.

Als nächstes müssen Sie Ihre Funktionen öffnen.PHP-Datei und fügen Sie den folgenden Code ein:

function 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-script'); wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'change'); 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( 'carousel'); 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. Hier verwenden Sie jedoch wp_register_script anstelle von style . Sie registrieren und stellen jede JS-Datei in derselben Funktion in die Warteschlange.

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

<?php wp_footer(); ?>

Jetzt, öffnen Sie Ihre Website in Ihrem Browser, und Sie werden feststellen, dass das neue WordPress-Theme funktioniert gut, aber immer noch, es hat ein paar fehlende Bilder.

Schritt 9: Bilder konfigurieren

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

Öffnen Sie zuerst Ihren Index.PHP-Datei und suchen Sie mit „STRG + f“ nach „<img src=“. 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 einen Pfad zu Bildern anzugeben; Fügen Sie den folgenden PHP-Code in 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 Thema dem HTML-Thema ähnlich und ruft alle Bilder ab.

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

Schritt 10: Aktivieren Sie den benutzerdefinierten Titel in WordPress

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

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

Und in ähnlicher Weise müssen Sie die in WordPress integrierte Funktion bloginfo() mit dem Parameter „name“ zwischen den h1-Tags in der Kopfzeile verwenden.PHP-Datei und speichern Sie die Datei.

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

Nun wird Ihr Thema den Titel abholen, die Sie in den Einstellungen festgelegt -> Allgemein-> Site-Titel im WP-Admin-Panel.

Schritt 11: Fügen Sie das WordPress-Navigationsmenü in WordPress hinzu

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

Sie müssen das Menü zuerst aktivieren, indem Sie die folgende Codezeile in den Funktionen hinzufügen.PHP-Datei.

add_theme_support( 'menus' );

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

Finden Sie zunächst heraus, wo sich Ihr HTML-Navigationsmenü befindet, und ersetzen Sie es dann mit der in WordPress integrierten Funktion wp_nav_menu() .

In diesem Thema, der Header.php enthält das Navigationsmenü.

Finden Sie die folgenden Codezeilen:

<ul class="navbar-nav mx-lg-auto"><li class="nav-item active"><a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</a></li><li class="nav-item @@contact__active"><a class="nav-link" href="contact.html">Contact</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 Thema angezeigt und verleiht Ihrem WordPress-Business-Thema Flexibilität.

Einpacken!

Ich hoffe, dieser Artikel hat Ihnen geholfen zu verstehen, wie Sie eine HTML-Vorlage oder -Site 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.