it-swarm.com.de

Konvertieren Sie eine statische Website in ein WordPress-Design und importieren Sie alle vorhandenen Inhalte

Ich habe eine Site, die mit html, css und javascript erstellt wurde und über kein CMS verfügt. Es sieht gut aus und mein Kunde möchte, dass diese Seite WordPress im Hintergrund hat, damit er den Inhalt leicht ändern kann. Also, ich stecke hier ein bisschen fest.

Ich weiß, dass es Plugins zum Importieren von gut geschriebenem HTML gibt, und sie funktionieren wie Charm. Aber ich habe diese Art von Migration nie gemacht. Wie kann ich die ganze Site auf WordPress übertragen? Gibt es eine Möglichkeit zum automatischen Scraping der gesamten Site und zum einfachen Importieren von JS-Bibliotheken, damit alle Klassen, Div- oder Span-Tags in HTML, Stile in CSS usw. erhalten bleiben?

3
Josip Ivic

WordPress hat einen perfekten Wrapper für HTML> Theme-Konvertierung: Das Theme selbst. Alle Informationen finden Sie auf der Codex-Seite .

Es reicht aus, Ihrem Verzeichnis wp-content/themes (oder dem Verzeichnis, das Sie zusätzlich registriert haben) einen Ordner hinzuzufügen und die folgenden Dateien hinzuzufügen

  1. functions.php
  2. style.css
  3. index.php
  4. header.php

in Ihren benutzerdefinierten Ordner themename. Verwenden Sie dann die Plugins API , um einige Rückrufe in den Ausführungsfluss von WordPress Core einzufügen. Hier definieren Sie grundlegende Dinge wie das Hinzufügen von Stylesheets oder Skripten. Beispiel für Ihren functions.php:

add_action( 'wp_enqueue_scripts', function() {
    // Register Stylesheets and Scripts in here
    // @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
} );

In Ihrem header.php fügen Sie die Eröffnungsaufrufe für Ihren HTML-Code hinzu:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
</head>

Die Funktion wp_head(); ruft alle Aktionen auf. Hier werden die registrierten Skripte und Stylesheets angezeigt.

In dir index.php fügst du dein Body Markup hinzu:

<?php get_header(); ?>
<body <?php body_class(); ?>>
    <!-- Markup from your HTML files -->
    <?php get_footer(); ?>
</body>

Die Funktion get_footer(); ruft eine footer.php-Datei auf, wenn Sie eine angeben.

Schließlich müssen Sie nur noch Seitenvorlagen hinzufügen, die die ursprünglichen PHP -Dateien ersetzen. Diese unterscheiden sich nicht wirklich vom obigen index.php, mit Ausnahme einer Sache: des Kopfzeilenkommentars. Nehmen wir an, Sie fügen eine Kopie Ihres index.php hinzu, benennen sie in about-us.php um und fügen als erste Zeile Folgendes hinzu:

<?php /** Template Name: About Us */ ?>

Wenn Sie nun in der Admin-Benutzeroberfläche eine neue Seite hinzufügen, können Sie diese neue Vorlage auswählen. Sie erhalten eine Ersatzdatei für eine vorhandene HTML-Datei. Sie können den Slug sogar im Bearbeitungsbildschirm der Admin-Benutzeroberfläche anpassen.

All dies sollte Ihnen einen guten Einstieg in die Konvertierung Ihrer HTML-Vorlagen in ein gültiges WordPress-Theme ermöglichen. Sie können diese Vorlagen später und je nach Vertrag Stück für Stück dynamisieren - zum Beispiel indem Sie sich wiederholende Seitenleisten aufteilen, Menüs anpassbar machen, den Titel ändern und den Inhalt .

5
kaiser