Erstellen von Header- und Footer-Vorlagen für ein individuelles WordPress-Theme

Wie man eine grundlegende Struktur für ein individuelles WordPress-Theme erstellt

In einem unserer Beiträge hatten wir darüber gesprochen, wie man damit beginnt, ein einfaches WordPress-Theme von Grund auf zu erstellen und welche Dateien für ein WordPress-Theme erforderlich sind. Index.php und style.css sind die beiden erforderlichen Dateien, um mit der Erstellung eines Themes zu beginnen. Obwohl dies die erforderlichen Dateien sind, kann ein WordPress-Theme viele Vorlagendateien haben. Die beiden wichtigen Dateien sind header.php und footer.php.

Header.php steuert den gemeinsamen Header, footer.php steuert den gemeinsamen Footer einer Website. Header und Footer sind in der Regel auf allen Seiten einer Website gleich, daher hat WordPress spezielle Vorlagen für diese gemeinsamen Bereiche. Lassen Sie uns sehr einfache Beispielcodes für jede Vorlage anzeigen.

Beispiel-Vorlagendateien

header.php

<?php
// Gemeinsame Header-Vorlage
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="<?php bloginfo('charset') ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>

Wie Sie sehen, enthält die Datei header.php HTML, das größtenteils den Kopfbereich einer Website darstellt. Es kann auch CSS- und JavaScript-Code enthalten, oder zumindest Link- und Script-Elemente, die externe Stylesheet- oder JavaScript-Dateien aufrufen. Noch wichtiger ist, dass die header.php Datei das Logo der Website und das Navigationsmenü enthalten kann, aber in diesem Beitrag sind wir nicht so ins Detail gegangen und haben einfachere Beispieldateien verwendet.

footer.php

<?php
// Gemeinsame Footer-Vorlage
?>
</body>
</html>

Auf der anderen Seite ist die Datei footer.php in unserem Beispiel ziemlich einfach. Normalerweise enthält sie mehr HTML- und JavaScript-Code im Vergleich zu unserer Beispiel-Footer-Vorlage. Darüber hinaus können in anderen Themes auch Urheberrechtsinformationen und Links zu sozialen Medien zu sehen sein.

Wichtiger Hinweis: Wie wir zuvor gesagt haben, sind diese Beispiele sehr grundlegend und dienen nur zu Lehrzwecken. In der Regel können beide dieser Vorlagendateien in professionellen Unternehmenswebsites sehr umfangreich werden.

Wie header.php und footer.php in die Hauptvorlagendateien passen

Zunächst einmal sind diese Vorlagendateien für sich allein genommen nicht nützlich. Sie sind Teilvorlagen, was bedeutet, dass sie mit anderen Vorlagendateien wie index.php, archive.php oder search.php verwendet werden sollten. Nun wollen wir eine vollständige index.php Datei mit den Header- und Footer-Vorlagen erstellen.

index.php

<?php
get_header();
?>
    <div id="primary">
        <h1><?php bloginfo('name') ?></h1>
        <h2><?php bloginfo('description') ?></h2>
        <p>Diese Datei ist die Hauptvorlage für eine WordPress-Website. Wenn im Theme-Verzeichnis keine andere Vorlage vorhanden ist, wird diese Datei gerendert.</p>
    </div>
<?php get_footer();

Wenn Sie sich das obige Beispiel von index.php ansehen, werden Sie feststellen, dass zwei neue WordPress-Funktionen, get_header und get_footer, verwendet wurden. Diese Funktionen sind so wichtig, dass sie in allen Vorlagendateien im Theme-Verzeichnis verwendet werden.

get_header

Normalerweise ist es sehr einfach, diese Funktion zu verwenden, aber wenn Sie mehr Anpassung benötigen, können Sie einen benannten Header als Parameter für diese Funktion verwenden. Es hilft dabei, einen alternativen Header in einer Vorlagendatei zu laden, in der diese Funktion verwendet wird. Sie können auch die offizielle Dokumentation überprüfen, aber hier ist ein kurzes Beispiel für die Verwendung eines alternativen Headers.

<?php get_header('special'); ?>

Der obige Code lädt die Datei header-special.php in einer Vorlagendatei. Wenn sie nicht gefunden wird, lädt WordPress die Standard-header.php.

get_footer

Diese Funktion kann auch alternative Footer-Dateien laden. Die Funktionalität ist fast dieselbe wie bei der get_header Funktion. Auch hier ist es immer besser, die offizielle Dokumentation zu überprüfen, aber hier sehen Sie den Beispielcode unten.

<?php get_footer('special'); ?>

Der obige Code lädt die Datei footer-special.php in einer Vorlagendatei, in der er verwendet wird. Wenn sie nicht gefunden wird, lädt WordPress die Standard-footer.php.

Bei Media Pons erstellen wir immer Websites gemäß den geschäftlichen Anforderungen unserer Kunden. Fühlen Sie sich frei, uns über unser Kontaktformular eine Nachricht zu Ihrem nächsten Projekt zu senden.

Zurück zu allen Beiträgen