HTML-Vorlage konvertieren

Du hast ein fertiges HTML-Design und möchtest es als WBCE-Template nutzen? Hier zeigen wir Schritt für Schritt wie das geht.

---

Ausgangslage

Du hast eine statische HTML-Seite:

meine-website/
├── index.html
├── css/style.css
└── js/main.js

---

Schritt 1 — Ordner anlegen

mein_template/
├── info.php
├── index.php      ← wird aus index.html
├── css/
│   └── style.css  ← übernehmen
└── js/
    └── main.js    ← übernehmen

---

Schritt 2 — info.php anlegen

<?php
$template_name        = 'Mein Template';
$template_version     = '1.0.0';
$template_platform    = '1.6';
$template_author      = 'Dein Name';
$template_license     = 'GNU General Public License';
$template_description = 'Mein erstes WBCE-Template';

---

Schritt 3 — index.html → index.php

Datei umbenennen von index.html zu index.php und folgende Änderungen vornehmen:

Doctype und Head:

<!-- VORHER -->
<title>Meine Website</title>
<link rel="stylesheet" href="css/style.css">

<!-- NACHHER -->
<title><?php page_title(); ?> - <?php echo WEBSITE_TITLE; ?></title>
<link rel="stylesheet" href="<?php echo TEMPLATE_DIR; ?>/css/style.css">
<?php register_frontend_modfiles('css'); ?>

Navigation ersetzen:

<!-- VORHER — statisch -->
<nav>
    <a href="index.html">Start</a>
    <a href="ueber-uns.html">Über uns</a>
</nav>

<!-- NACHHER — dynamisch -->
<nav>
    <?php show_menu2(); ?>
</nav>

Inhalt ersetzen:

<!-- VORHER — statischer Inhalt -->
<main>
    <h1>Willkommen</h1>
    <p>Hier steht der Inhalt...</p>
</main>

<!-- NACHHER — WBCE Inhalt -->
<main>
    <?php page_content(1); ?>
</main>

JavaScript:

<!-- VORHER -->
<script src="js/main.js"></script>

<!-- NACHHER -->
<?php register_frontend_modfiles('js'); ?>
<script src="<?php echo TEMPLATE_DIR; ?>/js/main.js"></script>

---

Schritt 4 — ZIP erstellen und installieren

mein_template/
├── info.php
├── index.php
├── css/style.css
└── js/main.js

Als ZIP packen und im Backend unter Erweiterungen → Templates installieren.

---

Häufige Probleme

Bilder werden nicht angezeigt: Pfade in CSS auf TEMPLATE_DIR anpassen:

/* VORHER */
background-image: url('../images/bg.jpg');

/* NACHHER */
background-image: url('<?php echo TEMPLATE_DIR; ?>/images/bg.jpg');

Achtung: CSS-Dateien können kein PHP enthalten — Bildpfade in CSS müssen relativ zur CSS-Datei bleiben.

Navigation sieht falsch aus: show_menu2() erzeugt eigene HTML-Struktur — CSS entsprechend anpassen.

---

Nächster Schritt: Template-Hooks — alle verfügbaren WBCE-Funktionen