Decoding WordPress: Benutzerdefinierte Vorlagen und Vorlagenteile

Mit der Einführung von WordPress 5.9 können Sie nun das vollständige Seitenediting verwenden, um das Erscheinungsbild Ihres Themes anzupassen. Darüber hinaus können Sie auf mehr Designfunktionen zugreifen, um Ihre Website ohne Programmierung mithilfe eines blockbasierten Themes zu erstellen. Diese grundlegenden Einstellungen könnten jedoch möglicherweise nicht Ihren Anforderungen entsprechen.

Glücklicherweise können Sie Ihrer WordPress-Blockvorlage problemlos benutzerdefinierte Vorlagen und Vorlagenteile hinzufügen. Ob durch die Verwendung von Full-Site Editing oder das Bearbeiten Ihrer Themendatei, Sie können ein benutzerdefiniertes Layout erstellen, um es beim Entwerfen neuer Inhalte wiederzuverwenden.

In diesem Artikel werden wir besprechen, was Vorlagen und Vorlagenteile sind. Dann zeigen wir Ihnen, wie Sie diese in WordPress erstellen. Anfangen!

Eine Einführung in WordPress-Seitenvorlagen

Themes sind einige der vielseitigsten Funktionen von WordPress. Durch die Installation eines Themes auf Ihrer Website können Sie das Aussehen radikal ändern, um es Ihren Bedürfnissen anzupassen. Außerdem ist es normalerweise einfach, Themes zu finden, die auf Ihre spezielle Nische zugeschnitten sind und während des Designprozesses viel Flexibilität bieten.

Es gibt jedoch einige Dinge, die schwer zu bewerkstelligen sind, wenn Sie nur ein Thema verwenden, um das Aussehen Ihrer Website anzupassen. Zum Beispiel, was ist, wenn Sie möchten, dass Ihre Archive ein ganz anderes Layout haben als der Rest Ihrer Seiten? Ähnlich könnten Sie wollen, dass die Seitenleiste auf verschiedenen Seitentypen unterschiedliche Informationen enthält.

Geben Sie Seitenvorlagen ein — eine Möglichkeit, mehr Kontrolle über das Aussehen Ihrer Website zu erhalten. In mancher Hinsicht sind Seitenvorlagen sehr ähnlich wie Themes. Beide sind Dateien mit Code, die Ihrer Website sagen, wie Informationen angezeigt werden sollen.

Wie der Name schon sagt, kontrolliert eine Seitenvorlage jedoch nur den Stil einer bestimmten Seite (oder eines bestimmten Seitentyps). Viele Themes bieten verschiedene Seitenvorlagen zur Auswahl, aber Sie können auch Ihre eigene erstellen. Auf diese Weise können Sie genau entscheiden, wie sie eingerichtet sein sollte und welchen Seiten diese Vorlage zugeordnet werden sollte.

Das Verständnis und die Nutzung von Templates ist etwas technischer als der Umgang mit Themes. Wenn Sie wirklich ein Gefühl dafür bekommen möchten, wie Templates funktionieren, möchten Sie vielleicht etwas Zeit damit verbringen, sich über die WordPress Template-Hierarchie zu informieren. Dieses System weist jedem Template-Typ eine Prioritätsstufe zu, sodass Ihre WordPress-Seite immer weiß, welches angezeigt werden soll.

Wir werden jetzt nicht zu sehr ins Detail über dieses Konzept gehen, da wir uns zunächst speziell auf Seitenvorlagen konzentrieren werden. Lassen Sie uns zuerst erkunden, warum Sie überhaupt Vorlagen verwenden möchten.

Die Vorteile der Verwendung von Seitenvorlagen

Bis jetzt sollten Sie eine Vorstellung davon haben, warum Seitenvorlagen so nützlich sind. Sie bieten viel mehr Kontrolle über das Aussehen und Layout Ihrer Website, als Sie normalerweise durch die Modifizierung Ihres Themes erreichen können. Die Anwendungen für Seitenvorlagen sind zahlreich — die einzige Grenze ist Ihre eigene Kreativität.

Um Ihnen ein Gefühl für die Bedeutung dieser Funktion zu geben, sind hier einige Beispiele für Situationen, in denen Sie eine Seitenvorlage verwenden möchten:

• Wenn Sie möchten, dass eine bestimmte Seite ein vollflächiges Layout hat, während die anderen Seiten ein festes Layout beibehalten.
• Um eine benutzerdefinierte Seite zu erstellen, die Widgets verwendet, die auf anderen Seiten nicht angezeigt werden.
• Zum Anzeigen empfohlener Beiträge für Leser, die relevant für den spezifischen Inhalt sind, den sie durchsuchen.
• Zum Erstellen einer Seite mit einem einzigartigen Satz von Funktionen, wie beispielsweise einer Beitragenden- oder Archivseite.

Am Ende dieses Beitrags zeigen wir Ihnen, wie Sie jede dieser Dinge tun können. Sobald Sie mit Seitenvorlagen experimentiert und ein Gefühl dafür bekommen haben, wie sie funktionieren, können Sie damit machen, was Sie möchten.

Eine Einführung in die vollständige Seitenbearbeitung mit Vorlagen und Vorlagenteilen

Mit Full-Site Editing können Sie das Layout Ihrer Website mit Blöcken gestalten. Sie verwenden wahrscheinlich bereits Blöcke, um WordPress-Beiträge zu erstellen. Jetzt können sie Ihre gesamte Seite aufbauen, einschließlich der Bereiche ohne Inhalt.

Ein Vorteil des Full-Site-Editing sind seine Seitenvorlagen. Sie ermöglichen es Ihnen, Ihre Vorlagen leicht zu sehen und anzupassen, ohne dass Sie Ihre Themendateien manuell bearbeiten müssen:

In WordPress gibt es auch Template-Teile, die als kleinere strukturelle Abschnitte einer Seitenvorlage fungieren. Normalerweise sehen Sie Template-Teile für Kopfzeilen oder Fußzeilen:

Mit einer Vorlage können Sie Seiten mit einzigartigen Funktionen erstellen. Zum Beispiel möchten Sie vielleicht nicht, dass Ihre Startseite das gleiche Layout wie der Rest Ihres Inhalts hat. Daher können Sie mit einer Seitenvorlage ein einzigartiges Design erreichen.

Darüber hinaus können Sie während des Designprozesses Zeit sparen, indem Sie Vorlagen und Vorlagenteile wiederverwenden. Durch einfaches Klicken auf eine Vorlage oder ein einzelnes Element können Sie es sofort umsetzen.

Wie man Vorlagen in WordPress mit dem Vorlagen-Editor erstellt

Wenn Sie ein Block-Theme verwenden, kommt es mit dem Template Editor. Mit dieser Funktion können Sie Vorlagen für jede Seite oder jeden Beitrag auf Ihrer Website erstellen und bearbeiten. Es funktioniert ähnlich wie der Block Editor und ermöglicht es Ihnen, Ihr Theme mit Blöcken zu individualisieren.

Um anzufangen, müssen Sie ein Block-Thema installieren. In Ihrem WordPress-Armaturenbrett navigieren Sie zu Appearance > Themes > Add New. Filtern Sie dann die Ergebnisse mit einem Full Site Editing Tag:

Wählen Sie Filter anwenden. In den Suchergebnissen installieren und aktivieren Sie ein Thema. Wir verwenden das Standard-Thema Twenty Twenty-Two für dieses Tutorial:

Um eine neue Vorlage zu erstellen, beginnen Sie damit, einen neuen Beitrag oder eine neue Seite hinzuzufügen. Dann finden Sie im Beitrag-Einstellungen-Tab den Abschnitt Vorlage und wählen Sie den Neu-Knopf:

Im Pop-up-Fenster geben Sie Ihrer neuen Vorlage einen Namen. Dann wählen Sie Erstellen:

Dies öffnet automatisch den Template-Editor. Sie können Ihr Template mit denselben Blöcken gestalten, die Sie auch in einem Beitrag verwenden würden. Es ist jedoch wichtig zu beachten, dass diese Blöcke jedem Beitrag mit diesem Template hinzugefügt werden:

Sie können auch Blöcke einfügen, die mit Ihrem Thema zusammenhängen. Wenn Sie im Blockoptionen bis zum Abschnitt Theme nach unten scrollen, können Sie ein Logo, ein Motto, Kommentare zu Beiträgen und mehr anzeigen:

Wenn Sie mit der Anpassung Ihrer Vorlage fertig sind, klicken Sie auf Veröffentlichen. Wählen Sie dann, wann immer Sie einen Beitrag oder eine Seite dieser Vorlage zuweisen möchten, diese einfach im Einstellungstab aus.

Wie man Template-Teile in WordPress mit dem Site-Editor erstellt

Mit einem Block-Theme können Sie Vorlagen mit dem Site Editor bearbeiten. Sie können Ihr Theme direkt bearbeiten, anstatt einen neuen Beitrag oder eine neue Seite zu erstellen.

Zuerst gehen Sie zu Ihrem Armaturenbrett. Dann wählen Sie Appearance > Editor (beta):

Dies wird den Site-Editor öffnen. Um die Vorlagen und Vorlagenteile Ihres Themas zu finden, klicken Sie auf das WordPress-Symbol in der oberen linken Ecke:

Nach der Auswahl von Template Parts sehen Sie eine Liste der Standardoptionen. Um einen neuen Template-Teil hinzuzufügen, klicken Sie auf die Schaltfläche Add New:

Dann erstellen Sie einen Namen für Ihren Template-Teil und wählen Sie, wo er platziert werden soll. Die drei Platzierungsbereiche sind Allgemein, Kopfzeile und Fußzeile:

Wenn Sie fertig sind, wählen Sie Erstellen. Dies führt Sie zum isolierten Template-Teil, den Sie durch Hinzufügen von Blöcken anpassen können:

Sie könnten eine einfache Handlungsaufforderung, ein Website-Logo oder alles, was Sie als Vorlagenteil wiederverwenden möchten, anzeigen. Sobald es gespeichert ist, können Sie es zu jeder Vorlage hinzufügen, indem Sie einfach den Template Part Block einfügen.

Wie man benutzerdefinierte Vorlagen und Vorlagenteile in WordPress erstellt (Manuelle Codierung)

Obwohl die vollständige Seitenbearbeitung Ihnen ermöglicht, Vorlagen und Vorlagenteile für ein vorhandenes Thema zu erstellen, möchten Sie vielleicht Ihr Thema entwickeln. Darüber hinaus kann Ihnen diese Option mehr Kontrolle über das Erscheinungsbild Ihrer Website geben.

Wenn Sie Ihr neues Theme von einem bestehenden aus erstellen, empfehlen wir das Erstellen eines Child-Themes. Dieser Schritt stellt sicher, dass neue Updates des Eltern-Themes Ihre Anpassungen nicht überschreiben.

Schritt 1: Eine Konfigurationsdatei hinzufügen

Mit früheren PHP-basierten Themes konnten Sie die Kopfzeile Ihrer Vorlagendatei bearbeiten. Um jedoch benutzerdefinierte Inhalte in einem blockbasierten Thema zu erstellen, müssen Sie eine neue theme.json-Datei erstellen.

Zuerst müssen Sie über das Secure File Transfer Protocol (SFTP) oder das Armaturenbrett des Site-Managers Ihres Hosting-Anbieters auf Ihre Website zugreifen. Suchen Sie dann nach dem themes-Ordner, der sich unter wp-content befinden sollte:

In Ihrem Child-Themes-Ordner erstellen Sie eine neue Datei. Benennen Sie sie „theme.json“:

In dieser Datei, fügen Sie die Versionsnummer in geschweiften Klammern hinzu. Wenn Sie dies nicht tun, wird sie als „Version 0“ gelesen:

{
    "version": 2
}

Sie müssen diese theme.json-Datei konfigurieren, um die Breite Ihres Inhalts zu unterstützen. Nach Ihrer Versionsnummer kopieren und fügen Sie diesen zusätzlichen Code ein:

{
        "version": 2,
"settings": {
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
 }
 }
}

Dies wird die Breite Ihres Inhalts auf 840px festlegen. Die breite Breite wird ebenfalls auf 1100px aktualisiert. Diese Werte entsprechen den Standardbreiten im Site Editor, können aber bei Bedarf bearbeitet werden.

Da die Inhaltsbreite nun 840px beträgt, bietet sie viel Platz für jede Zeichenzeile. Abhängig von Ihrer gewählten Schriftart und Größe müssen Sie diese möglicherweise anpassen, damit die Betrachter Ihren Inhalt bequem lesen können.

Schritt 2: Neue Vorlagenteile erstellen

Dann gehen Sie zurück zu Ihrem themes-Ordner und öffnen Sie den templates-Ordner:

Hier, erstellen Sie eine index.html Datei:

Kehren Sie zu Ihrem Themenordner zurück und klicken Sie auf template-parts. Erstellen Sie in diesem Ordner Dateien für footer.html und header.html:

In der Datei header.html fügen Sie Code für Ihre Seitentitel- und Slogan-Blöcke hinzu. Dies können Sie tun, indem Sie dieses Block-Markup einbinden:

<!-- wp:site-title /-->
<!-- wp:site-tagline /-->

Als nächstes gehen Sie zur footer.html-Datei und fügen den folgenden Code ein:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Stolz betrieben von 
<a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph /—->

Sobald Sie diese Vorlagenteile hinzugefügt haben, können sie leicht identifiziert werden, wenn Sie bereit sind, Ihr Thema zu testen.

Schritt 3: Kombinieren Sie die Vorlagenteile

Der nächste Schritt ist, Block-Markierungen für Ihre Vorlagenteile in Ihre Vorlagen-HTML-Datei einzufügen. Öffnen Sie den Ordner templates und finden Sie die Datei index.html, die Sie im letzten Schritt erstellt haben.

Dann müssen Sie Code für Ihre zwei Template-Teile hinzufügen:

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:template-part {"slug":"footer"} /—->

Basierend auf dem Namen der Template-Part-Datei wird dieser Name zum Slug. Zum Beispiel wird das Template-Part header.html „header“ als seinen Slug haben.

Als nächstes fügen Sie das richtige HTML-Element für jeden Template-Teil hinzu. Sie werden den Standort des Template-Teils identifizieren:

"tagName":"header"
"tagName":"footer"

Wenn Sie vorhaben, CSS zu verwenden, um diesen Header und Footer zu identifizieren, müssen Sie einen benutzerdefinierten CSS-Klassennamen hinzufügen. Sie können diesen Code am Ende jeder Zeile platzieren:

"className":"site-header"
"className":"site-footer"

Zuletzt muss die Layouteinstellung, die Sie in die Datei theme.json eingefügt haben, unterstützt werden. Um dies zu tun, fügen Sie diesen Code in jeden Template-Teil ein:

"layout":{"inherit":true}

Hier ist, wie der resultierende Code aussehen sollte:

Nachdem Sie die Programmierung abgeschlossen haben, können Sie Ihre Website vorab anzeigen, um diese Änderungen an Ihrem Layout zu sehen.

Bereit, Ihre eigenen benutzerdefinierten Vorlagen zu erstellen?

Wenn Sie Ihren Website-Designprozess optimieren möchten, ist es eine gute Idee, das Full-Site Editing zu verwenden. Sie können das Erscheinungsbild Ihrer Website einfach mit Vorlagen und Vorlagenteilen mit dieser Funktion anpassen. Dieser Ansatz kann eine einfachere Alternative sein, als jede Seite von Grund auf neu zu gestalten.

Zur Überprüfung, hier sind die verschiedenen Möglichkeiten, wie Sie Vorlagen und Vorlagenteile in WordPress erstellen können:

1. Erstellen Sie eine neue Vorlage mit dem Vorlagen-Editor.
2. Erstellen Sie Vorlagenteile mit dem Site-Editor.
3. Manuell Vorlagen und Vorlagenteile kodieren.

Das Entwickeln Ihres eigenen Themes kann schwierig sein, besonders wenn Sie keine Erfahrung mit Webentwicklung haben. Wenn Sie Ihr Layout von Grund auf anpassen müssen, möchten Sie vielleicht einen professionellen Designer engagieren. Mit unserem Custom Web Design Pro Service können Sie diesen komplizierten Codierungsprozess vermeiden und eine hochwertige Website erhalten, die für Ihre Marke gestaltet ist!