Kapitel 3: Theme-Dateistruktur (Kern des Kerns)

3.1 Theme-Pflichtdateien

Ein WordPress-Theme muss mindestens zwei Dateien haben:

1. `style.css` (Pflicht)

Enthält Theme-Informationen und CSS-Styles.

Theme-Informationen (Header):

css

/*
Theme Name: Mein Erstes Theme
Theme URI: https://example.com/mein-theme/
Description: Ein einfaches WordPress-Theme für Einsteiger
Author: Ihr Name
Author URI: https://example.com
Version: 1.0.0
Requires at least: WordPress 5.9
Tested up to: WordPress 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mein-theme
Tags: blog, custom-logo, custom-menu, featured-images, right-sidebar
*/

Wichtige Felder:

Feld	Beschreibung	Pflicht
`Theme Name`	Name des Themes	✅ Ja
`Description`	Kurze Beschreibung	❌ Nein (empfohlen)
`Version`	Theme-Version	❌ Nein (für Updates)
`Author`	Autor-Name	❌ Nein
`License`	Lizenz (meist GPL v2)	❌ Nein (für WordPress.org)
`Text Domain`	Für Übersetzungen	❌ Nein (für WordPress.org)

⚠️ Warnung: Fehlt Theme Name, wird das Theme von WordPress nicht erkannt!

2. `index.php` (Pflicht)

Haupt-Template-Datei. Wird verwendet, wenn keine spezifischere Template-Datei existiert.

Einfachste index.php:

php

<?php get_header(); ?>

<main>
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <?php the_content(); ?>
            </article>
        <?php endwhile; ?>
    <?php else : ?>
        <p>Keine Beiträge gefunden.</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

3.2 Datei-Rollen und Verknüpfungen

Standard-Dateistruktur (Empfohlen)

mein-theme/
├── style.css          # (Pflicht) Theme-Informationen + Styles
├── index.php          # (Pflicht) Haupt-Template
├── header.php         # Header-Bereich (Navigation, Logo)
├── footer.php         # Footer-Bereich (Copyright, Widgets)
├── functions.php      # Theme-Funktionen (Menüs, Sidebars registrieren)
├── single.php         # Einzelner Beitrag
├── page.php           # Statische Seiten
├── archive.php        # Archiv-Seiten (Kategorien, Tags, Datum)
├── search.php        # Suchergebnisseite
├── 404.php           # Fehlerseite (404 Not Found)
├── sidebar.php        # Sidebar (Widgets)
├── screenshot.png     # Theme-Vorschaubild (1200x900px)
└── css/              # (Optional) Zusätzliche CSS-Dateien
    └── custom.css
└── js/               # (Optional) JavaScript-Dateien
    └── script.js

Datei-Verknüpfungen

index.php lädt header.php und footer.php:

php

<?php get_header(); ?>   <!-- Lädt header.php -->
<!-- Inhalt -->
<?php get_footer(); ?>   <!-- Lädt footer.php -->

header.php enthält den HTML-Kopf:

php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <?php wp_head(); ?>   <!-- ⚠️ Pflicht für Plugins -->
</head>
<body <?php body_class(); ?>>
    <header>
        <!-- Navigation, Logo -->
    </header>

footer.php schließt den HTML-Code:

php

    <footer>
        <!-- Copyright, Widgets -->
    </footer>
    <?php wp_footer(); ?>   <!-- ⚠️ Pflicht für Plugins -->
</body>
</html>

3.3 `style.css` Datei-Schreibnormen

Theme-Informationen (Header)

Die Theme-Informationen müssen ganz oben in style.css stehen.

Format:

css

/*
Theme Name: [Name]
Theme URI: [URL]
Description: [Beschreibung]
Author: [Autor]
Author URI: [URL]
Version: [Version]
License: [Lizenz]
Text Domain: [Text-Domain]
Tags: [Schlagworte]
*/

Beispiel:

css

/*
Theme Name: Modern Blog
Theme URI: https://example.com/modern-blog/
Description: Ein modernes Blog-Theme mit Fokus auf Lesbarkeit
Author: Max Mustermann
Author URI: https://max-mustermann.de
Version: 1.0.0
Requires at least: WordPress 5.9
Tested up to: WordPress 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modern-blog
Tags: blog, two-columns, right-sidebar, custom-colors, featured-images
*/

CSS-Styles (nach dem Header)

Nach dem Header-Kommentar folgt das eigentliche CSS:

css

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    background-color: #1a73e8;
    color: white;
    padding: 20px 0;
}

/* Navigation */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.main-navigation a {
    color: white;
    text-decoration: none;
}