Kostenlose Tutorials für Anfänger

Appearance

Kapitel 2: Frontend-Basics und WordPress-Anbindung ​

2.1 Frontend-Technologien (HTML/CSS/JS) in WordPress-Themes ​

HTML in WordPress-Themes ​

In WordPress-Themes wird HTML in PHP-Dateien eingebettet.

Beispiel: header.php

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(); ?>
</head>
<body <?php body_class(); ?>>
    <header class="site-header">
        <div class="container">
            <div class="site-branding">
                <h1 class="site-title">
                    <a href="<?php echo esc_url(home_url('/')); ?>">
                        <?php bloginfo('name'); ?>
                    </a>
                </h1>
                <p class="site-description"><?php bloginfo('description'); ?></p>
            </div>
        </div>
    </header>

Wichtige Punkte:

  • <?php ... ?> ist PHP-Code, der dynamisch HTML generiert
  • bloginfo() ist eine WordPress-Funktion, die Website-Informationen ausgibt
  • wp_head() und wp_footer() sind Pflicht-Hooks für Plugins und Styles

CSS in WordPress-Themes ​

CSS wird in WordPress-Themes in der style.css Datei definiert.

Beispiel: style.css (Theme-Informationen oben)

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
License: GNU General Public License v2 or later
Text Domain: mein-theme
Tags: blog, custom-logo, custom-menu
*/

Dann 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;
}

.site-title {
    font-size: 2rem;
}

.site-title a {
    color: white;
    text-decoration: none;
}

.site-description {
    font-size: 1rem;
    opacity: 0.8;
}

JavaScript in WordPress-Themes ​

JavaScript sollte nicht direkt in HTML eingebettet werden, sondern über wp_enqueue_script() eingebunden werden (siehe Abschnitt 2.3).

Beispiel: script.js

javascript
// Navigation Toggle (Mobile)
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.querySelector('.menu-toggle');
    const mainMenu = document.querySelector('.main-navigation ul');

    if (menuToggle) {
        menuToggle.addEventListener('click', function() {
            mainMenu.classList.toggle('active');
        });
    }
});

2.2 WordPress Template-Tags vs. HTML-Tags (Kern: Dynamische Inhaltswiedergabe) ​

Was sind Template-Tags? ​

Template-Tags sind PHP-Funktionen, die WordPress bereitstellt, um dynamische Inhalte anzuzeigen.

Unterschied: HTML vs. Template-Tags ​

HTML (Statisch)WordPress (Dynamisch)
<title>Meine Website</title><?php wp_title(); ?>
<h1>Willkommen!</h1><?php the_title(); ?>
<p>Hier ist mein Text.</p><?php the_content(); ?>
<a href="/about">Über uns</a><?php echo get_permalink(get_page_by_path('about')); ?>

Häufig verwendete Template-Tags ​

1. Website-Informationen ​

php
<?php bloginfo('name'); ?>         // Website-Titel
<?php bloginfo('description'); ?>  // Website-Untertitel
<?php bloginfo('charset'); ?>      // Zeichenkodierung (z.B. UTF-8)
<?php bloginfo('language'); ?>     // Sprache (z.B. de-DE)
<?php echo home_url('/'); ?>       // Startseiten-URL
<?php echo get_stylesheet_uri(); ?> // URL zur style.css

2. Beitragsinformationen (innerhalb der Loop) ​

php
<?php the_title(); ?>           // Beitragstitel
<?php the_content(); ?>         // Beitragsinhalt
<?php the_excerpt(); ?>         // Beitragsauszug
<?php the_permalink(); ?>       // Beitrags-URL
<?php the_author(); ?>          // Autorname
<?php the_date(); ?>            // Veröffentlichungsdatum
<?php the_category(); ?>        // Kategorien
<?php the_tags(); ?>            // Schlagworte
<?php comments_number(); ?>     // Kommentaranzahl

3. Navigation ​

php
<?php wp_nav_menu(); ?>         // Navigationsmenü anzeigen
<?php previous_post_link(); ?>  // Link zum vorherigen Beitrag
<?php next_post_link(); ?>      // Link zum nächsten Beitrag
<?php posts_nav_link(); ?>      // Navigation zwischen Beitragsseiten

Die WordPress-Loop (Schleife) ​

Die Loop ist das Herzstück von WordPress. Sie durchläuft alle Beiträge und zeigt sie an.

Grundstruktur der Loop:

php
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- Hier werden die Beitragsdaten angezeigt -->
        <h2><?php the_title(); ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    <?php endwhile; ?>
<?php else : ?>
    <p>Keine Beiträge gefunden.</p>
<?php endif; ?>

Erklärung:

  1. have_posts(): Prüft, ob Beiträge vorhanden sind
  2. while (have_posts()): Schleife durch alle Beiträge
  3. the_post(): Bereitet den aktuellen Beitrag für Template-Tags vor
  4. the_title(), the_content(): Zeigen Beitragsdaten an

2.3 CSS/JS-Dateien in WordPress korrekt einbinden ​

⚠️ Warnung: Binden Sie CSS/JS niemals direkt in HTML ein (z.B. <link rel="stylesheet" href="style.css">). Dies kann zu Konflikten mit Plugins führen!

Das korrekte Verfahren: wp_enqueue_script() und wp_enqueue_style() ​

WordPress stellt Funktionen bereit, um Stylesheets und Skripte sicher und konfliktfrei einzubinden.

Schritt 1: functions.php erstellen ​

Die functions.php ist die zentrale Datei für Theme-Funktionen.

Beispiel: functions.php

php
<?php
/**
 * Mein Theme - Funktionen und Definitionen
 */

// Stylesheets und Skripte einbinden
function mein_theme_scripts() {
    // CSS einbinden
    wp_enqueue_style('mein-theme-style', get_stylesheet_uri(), array(), '1.0.0');
    
    // Zusätzliche CSS-Dateien einbinden
    wp_enqueue_style('mein-theme-custom', get_template_directory_uri() . '/css/custom.css', array(), '1.0.0');
    
    // JavaScript einbinden
    wp_enqueue_script('mein-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mein_theme_scripts');

Erklärung der Parameter:

wp_enqueue_style($handle, $src, $deps, $ver, $media) ​

  • $handle: Eindeutiger Name (Slug)
  • $src: URL zur CSS-Datei
  • $deps: Abhängigkeiten (Array)
  • $ver: Versionsnummer (für Cache-Busting)
  • $media: Medientyp (z.B. screen, print, all)
  • $handle: Eindeutiger Name (Slug)
  • $src: URL zur JS-Datei
  • $deps: Abhängigkeiten (z.B. array('jquery'))
  • $ver: Versionsnummer
  • $in_footer: true = vor </body> einfügen (empfohlen für Performance)

Schritt 2: Hooks verwenden ​

Wichtige Hooks:

  • wp_enqueue_scripts: Für Frontend-Styles/Skripte
  • admin_enqueue_scripts: Für Admin-Bereich
  • login_enqueue_scripts: Für Login-Seite

Beispiel:

php
// Falsch ❌
add_action('init', 'mein_theme_scripts'); // Funktioniert, aber nicht empfohlen

// Richtig ✅
add_action('wp_enqueue_scripts', 'mein_theme_scripts');

Schritt 3: Pfade korrekt angeben ​

FunktionRückgabewert
get_template_directory_uri()URL zum Parent-Theme-Verzeichnis
get_stylesheet_directory_uri()URL zum Child-Theme-Verzeichnis (oder Parent, wenn kein Child)
get_template_directory()Pfad zum Parent-Theme-Verzeichnis
get_stylesheet_directory()Pfad zum Child-Theme-Verzeichnis

Beispiel:

php
// Für Parent-Themes:
wp_enqueue_style('my-style', get_template_directory_uri() . '/css/style.css');

// Für Child-Themes (um CSS zu überschreiben):
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));

2.4 Einsteiger-Wissenswertes: PHP-Basissyntax (Minimaler Einstieg) ​

Sie benötigen keine tiefgehenden PHP-Kenntnisse, um WordPress-Themes zu erstellen. Hier sind die Grundlagen, die Sie benötigen:

1. PHP-Tags ​

php
<?php
// PHP-Code hier
?>

In WordPress-Dateien sehen Sie oft:

php
<?php the_title(); ?>   <!-- Kurzform: PHP-Code ausführen -->

2. Variablen ​

php
$name = 'WordPress';
echo $name;   // Gibt "WordPress" aus

3. Arrays ​

php
$farben = array('Rot', 'Grün', 'Blau');
echo $farben[0];   // Gibt "Rot" aus

// Assoziative Arrays
$person = array(
    'name' => 'Max',
    'alter' => 30
);
echo $person['name'];   // Gibt "Max" aus

4. Funktionen ​

php
function begruessung($name) {
    return 'Hallo, ' . $name . '!';
}

echo begruessung('Welt');   // Gibt "Hallo, Welt!" aus

5. Bedingte Anweisungen ​

php
if (is_user_logged_in()) {
    echo 'Willkommen zurück!';
} else {
    echo 'Bitte loggen Sie sich ein.';
}

6. Schleifen ​

php
// For-Schleife
for ($i = 0; $i < 5; $i++) {
    echo $i;
}

// Foreach-Schleife
$array = array('a', 'b', 'c');
foreach ($array as $wert) {
    echo $wert;
}

7. WordPress-spezifische PHP-Konzepte ​

add_action() und add_filter() ​

php
// Aktion hinzufügen
add_action('wp_head', 'meine_funktion');

// Filter hinzufügen
add_filter('the_content', 'mein_filter');

get_template_part() ​

php
// Teile eines Templates laden
get_template_part('template-parts/content', 'page');
// Lädt: template-parts/content-page.php

📝 Übung 2: Template-Tags ausprobieren ​

Ziel: Erstellen Sie eine index.php, die die WordPress-Loop verwendet.

Schritte:

  1. Erstellen Sie einen Ordner mein-theme in wp-content/themes/
  2. Erstellen Sie style.css mit Theme-Informationen
  3. Erstellen Sie index.php mit folgendem Inhalt:
php
<?php get_header(); ?>

<main id="main" class="site-main">
    <?php if (have_posts()) : ?>
        <div class="posts-container">
            <?php while (have_posts()) : the_post(); ?>
                <article <?php post_class(); ?>>
                    <h2 class="entry-title">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>
        </div>
    <?php else : ?>
        <p>Keine Beiträge gefunden.</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>
  1. Aktivieren Sie das Theme im WordPress-Dashboard
  2. Überprüfen Sie die Startseite

✅ Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  • ✅ Wie HTML, CSS und JavaScript in WordPress-Themes verwendet werden
  • ✅ Den Unterschied zwischen statischem HTML und dynamischen Template-Tags
  • ✅ Die WordPress-Loop (Schleife) zu verwenden
  • ✅ CSS und JavaScript korrekt in WordPress einzubinden (nicht direkt!)
  • ✅ Grundlegende PHP-Syntax für WordPress-Theme-Entwicklung

Nächstes Kapitel: Wir lernen die Theme-Dateistruktur im Detail kennen.

➡️ Zu Kapitel 3: Theme-Dateistruktur →

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials