Erstellen eines WordPress-Designs aus statischem HTML Die Fußzeilendatei

In dieser Serie haben Sie gelernt, wie Sie ein WordPress-Theme aus statischem HTML-Code erstellen.

Bis zu diesem Punkt haben Sie:

• hat Ihr Markup für WordPress vorbereitet
• Sie haben HTML in PHP konvertiert und Ihre Datei in Vorlagendateien aufgeteilt
• bearbeitete das Stylesheet und lud dein Design zu WordPress hoch
• fügte eine Schleife zu Ihrer Indexdatei hinzu
• Metatags hinzugefügt, die wp_head haken Sie den Titel und die Beschreibung der Site in Ihre Header-Datei ein
• Navigationsmenü hinzugefügt
• Widget-Bereiche zur Kopf- und Seitenleiste hinzugefügt.

In diesem Tutorial beenden Sie das footer.php Datei, indem Sie die folgenden Bereiche hinzufügen:

• Widget-Bereiche
• ein Kolophon
• das wp_footer Haken.

Wenn du das getan hast. Sie werden ein voll funktionsfähiges Thema haben. In den restlichen Teilen der Serie zeige ich Ihnen, wie Sie Ihr Design noch verbessern können, indem Sie zusätzliche Vorlagendateien und Funktionen für Funktionsbilder hinzufügen.

---

Was du brauchen wirst

• Ihr Code-Editor Ihrer Wahl
• einen Browser zum Testen Ihrer Arbeit
• eine WordPress-Installation, entweder lokal oder remote
• Wenn Sie lokal arbeiten, benötigen Sie MAMP, WAMP oder LAMP, damit WordPress ausgeführt werden kann.
• Wenn Sie remote arbeiten, benötigen Sie einen FTP-Zugang zu Ihrer Site sowie ein Administratorkonto in Ihrer WordPress-Installation.

---

1. Registrieren von Widget-Bereichen für die Fußzeile

Das Registrieren von Widget-Bereichen für Ihre Fußzeile ähnelt sehr dem Registrieren für die Kopf- und Seitenleiste, die wir im vorherigen Artikel dieser Serie erstellt haben.

Der Unterschied ist, dass wir in diesem Artikel vier Widgetbereiche registrieren werden, nicht nur einen. Dies bedeutet, dass das Thema vier mit einem Widget versehene Bereiche nebeneinander anzeigen kann, was traditionell als "fetter Fußbereich" bezeichnet wird.

Beginnen Sie mit dem Öffnen Ihres Functions.php Datei. Finden Sie das wptutsplus_widgets_init () Funktion und fügen Sie den folgenden Code unter dem Code für die drei Seitenleisten hinzu, die Sie bereits registriert haben:

 // Der erste Fußzeilen-Widgetbereich befindet sich in der Fußzeile. Standardmäßig leer. register_sidebar (array ('name' => __ ('First Footer Widget Area', 'compass'), 'id' => 'first-footer-widget-area', 'description' => __ ('Das erste footer-Widget Bereich ',' Kompass '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
')); // Zweiter Fußzeilen-Widgetbereich, der sich in der Fußzeile befindet. Standardmäßig leer. register_sidebar (array ('name' => 'Second Footer-Widget-Bereich', 'id' => 'second-footer-Widget-Bereich', 'description' => 'Der zweite Footer-Widget-Bereich', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Dritter Fußzeilen-Widgetbereich in der Fußzeile. Standardmäßig leer. register_sidebar (array ('name' => 'Third Footer Widget Area', 'id' => 'Third Footer-Widget-Area', 'description' => 'Die Third Footer Widget Area', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Vierter Fußzeilen-Widgetbereich, der sich in der Fußzeile befindet. Standardmäßig leer. register_sidebar (array ('name' => 'Fourter Footer Widget Area', 'id' => '4th Footer-Widget-Area', 'description' => 'Die vierte Footer Widget Area', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',));

Dadurch werden vier neue Widget-Bereiche registriert, von denen jeder eine eindeutige ID und Beschreibung hat.

Wenn Sie jetzt den Admin-Bildschirm "Widgets" öffnen, werden die vier leeren Widget-Bereiche angezeigt, die Sie mit Daten füllen können:

Sie müssen jedoch noch die Widget-Bereiche zu Ihrem hinzufügen footer.php Datei, damit sie richtig funktionieren.

---

2. Hinzufügen von Widget-Bereichen zur Fußzeilendatei

Öffne dein Thema footer.php Datei und finde diesen Code:

Ersetzen Sie es durch den folgenden Code:

Speichern Sie jetzt Ihre Fußzeilenvorlage.

Sie können jetzt Widgets zu Ihren Widget-Bereichen über den Admin-Bildschirm "Widgets" hinzufügen. Ich werde hier nicht weiter darauf eingehen, da wir Sie bereits im vorherigen Tutorial beschrieben haben.

---

3. Hinzufügen eines Kolophons zu Ihrer Fußzeile

Ein Kolophon ist eine Notiz mit kleinem Druck am unteren Rand der Seite. Es kann Copyright-Informationen oder Firmendetails enthalten, wenn Ihre Website für ein Unternehmen bestimmt ist, oder andere ähnliche Informationen. Für viele WordPress-basierte Websites enthalten viele von ihnen einen Link mit der Aufschrift "Proudly Powered by WordPress".

In meinem Kolophon füge ich einen Copyright-Hinweis mit dem Datum hinzu - ich benutze das bloginfo () Funktion zum Abrufen von Informationen über die Site.

In deiner footer.php Datei unmittelbar nach dem Schließen Tag, fügen Sie den folgenden Code hinzu:

Wenn Sie nun Ihre Fußzeilendatei speichern und Ihre Website besuchen, wird das Kolophon angezeigt (sowie die Fußzeilen-Widgets):

---

4. Hinzufügen des wp_footer-Hooks

Der letzte Schritt ist das Hinzufügen des wp_footer-Hooks. Sie erinnern sich vielleicht daran, dass Sie in Teil 5 dieser Serie die wp_head Haken an der header.php Datei. Beide Hooks werden von Plugins verwendet und beide sind für jede Site, die Ihr Theme verwendet, unerlässlich.

In deiner footer.php Vorlage, vor dem Abschluss Tag, fügen Sie die folgende Zeile hinzu:

Speichern Sie schließlich Ihre Datei.

---

Zusammenfassung

Die Fußzeilenvorlage sowie alle anderen von Ihnen erstellten Vorlagendateien sind nun abgeschlossen. Sie verfügen über ein voll funktionsfähiges Design, mit dem Sie Ihre Websites mit Strom versorgen können.

Im nächsten Tutorial zeige ich Ihnen, wie Sie Ihr Design noch besser machen können, indem Sie eine Vorlagendatei nur für statische Seiten hinzufügen, sodass Sie den Inhalt anders anzeigen können, als er auf Beiträgen oder Archivseiten angezeigt wird.

---

Ressourcen

• Die Widgets-API
• Die Funktion wp_get_theme ()
• Der wp_footer-Haken