So erstellen Sie eine benutzerdefinierte WordPress-Seitenvorlage

Veröffentlicht: 2020-06-05

Eine wirklich professionelle WordPress-Website wird mit ziemlicher Sicherheit benutzerdefinierte Seitenvorlagen enthalten. Tatsächlich basieren viele der gängigsten Arten von Websites auf Vorlagen. Eine Immobilien-Website benötigt eine Vorlage für ihre Häuser, eine E-Commerce-Website für ihre Produkte, eine Mitglieder-Website für ihre Mitglieder und so weiter.

Sie können Toolset mit Gutenberg verwenden, um WordPress-Seitenvorlagen für Ihre einzelnen Beiträge zu erstellen.

Eine Vorlage definiert, wie Seiten und Beiträge im Frontend aussehen. Es ist die Blaupause, die sagt, wie und wo Sie den gesamten Inhalt jedes Beitrags anzeigen. Beispielsweise wirken sich alle Änderungen, die Sie an Ihrer Rezeptvorlage auf einer Koch-Website vornehmen, darauf aus, wie alle Rezepte im Frontend angezeigt werden.

Es gibt zwei Arten von benutzerdefinierten WordPress-Seitenvorlagen, die ich durchgehen werde:

  1. Eine Vorlage für normale Seiten
  2. Eine Vorlage für einzelne Beitragsseiten

Warum Sie eine benutzerdefinierte WordPress-Vorlage für normale Seiten benötigen

Eine Vorlage ist eine einfache Möglichkeit, sicherzustellen, dass ähnliche Seiten der gleichen Struktur folgen. Anstatt das Layout für jede Seite einzeln erstellen zu müssen, können Sie die Vorlage einfach einmal erstellen und sie beliebigen Seiten zuweisen. Diese Seiten folgen dann der Vorlage.

Stellen wir uns ein Beispiel vor. Auf einer Koch-Website gibt es möglicherweise eine Reihe von Seiten mit Kochtipps wie „Wie man die perfekte Pasta macht“, „Wie man Eier kocht“ und so weiter.

Ich habe ein E-Book zum Thema Kochen, das ich auf all diesen Seiten präsentieren möchte. Anstatt jede Seite mit dem gleichen Inhalt zu bearbeiten (was viel Zeit in Anspruch nehmen würde), kann ich einfach einmal eine Vorlage erstellen und den Seiten die Vorlage zuweisen. Auf diese Weise enthält jede Seite einen Call-to-Action zum Herunterladen meines E-Books.

So sieht meine Vorlage für normale Seiten im Frontend aus.
Dies ist genau die gleiche Vorlage wie das obige Bild. Beachten Sie, dass die Struktur gleich ist.

Auf beiden Seiten oben sehen Sie rechts meinen Call-to-Action. Das liegt daran, dass ich beiden Seiten dieselbe Vorlage zugewiesen habe.

Die zwei Möglichkeiten, eine benutzerdefinierte WordPress-Seitenvorlage zu erstellen

Es gibt zwei Möglichkeiten, Ihre benutzerdefinierte WordPress-Seitenvorlage zu erstellen:

  • Der harte Weg . Themes stellen automatisch die PHP-Dateien bereit, die Vorlagen in WordPress definieren. Wenn Sie einen benutzerdefinierten Beitragstyp (z. B. Rezepte) erstellen, müssen Sie entweder diese PHP-Felder bearbeiten oder neue erstellen, um sicherzustellen, dass Ihre Website Ihre Beiträge anzeigt.
  • Der einfache Weg. Sie können ein WordPress-Plugin wie Toolset verwenden, um Ihre Vorlagen zu erstellen. Toolset erstellt Vorlagen in wenigen Minuten und ohne jegliche Codierung. Darüber hinaus können Sie mit Toolset Blocks Blöcke mit dynamischen Inhalten zum WordPress Gutenberg-Editor hinzufügen.
Mit Toolset können Sie benutzerdefinierte Websites ohne Codierung erstellen.

Im Folgenden zeige ich Ihnen den einfachen Weg.

Zuerst erstelle ich eine Vorlage für normale Seiten, die auf der rechten Seite einen Call-to-Action enthält.

Zweitens erstelle ich eine Vorlage für meinen benutzerdefinierten Beitragstyp für Rezepte.

So erstellen Sie eine benutzerdefinierte WordPress-Seitenvorlage für normale Seiten

Schritt 1: Erstellen der Inhaltsvorlagenstruktur

Sie müssen zunächst die Inhaltsvorlage für Ihre Seiten erstellen. Wenn Toolset installiert ist, können Sie eine neue Inhaltsvorlage öffnen und mit dem Hinzufügen Ihrer Blöcke beginnen.

Zuerst arrangiere ich die Struktur der Vorlage. Unten sehen Sie, dass ich einen eigenen Rasterblock von Toolset hinzugefügt habe, mit dem ich meine Vorlage in Abschnitte aufteilen kann. Ich habe die Vorlage zweigeteilt und den linken Abschnitt so erweitert, dass er 75% der Seite einnimmt.

Ich habe den Rasterblock hinzugefügt, um die Vorlagenstruktur zu erstellen, und das Raster gezogen, um den linken Abschnitt zu erweitern.

Schritt 2: Inhalte zu Ihrer Vorlage hinzufügen

Nun, da ich die Struktur habe, muss ich die Blöcke mit dem Inhalt einfügen, den ich anzeigen möchte. Links füge ich den Beitragsinhalt hinzu. Alles, was ich tun muss, ist, den einzelnen Feldblock von Toolset einzufügen, der es mir ermöglicht, eine beliebige Quelle für den Inhalt auszuwählen.

Unten wähle ich den Beitragsinhalt auf der rechten Seite als Quelle des Blocks aus.

Um den Inhalt auszuwählen, der im Block angezeigt wird, müssen Sie die Quelle auswählen.

Für die rechte Seite der Vorlage füge ich den Call-to-Action hinzu. Alles, was ich tun muss, ist, je nach Inhalt die gewünschten Blöcke auszuwählen. Unten habe ich den Überschriftenblock und den Schaltflächenblock des Toolsets verwendet. Für den Buttonblock füge ich auch einen Link zum Buch hinzu.

Sie können einen Link hinzufügen, um Ihren Benutzer auf die richtige Seite zu führen, wenn er auf die Schaltfläche klickt.

Schritt 3: Style die Blöcke

Wenn Sie WordPress mit Toolset kombinieren, können Sie die Blöcke, die Sie zu Ihrer Vorlage hinzufügen, stylen. Wenn Sie sich dafür entschieden haben, Blöcke auf die harte Tour zu erstellen, müssen Sie sich für ein gutes Styling auf Ihre Programmierkenntnisse verlassen.

Wenn Sie auf einen Block klicken, sehen Sie auf der rechten Seite eine Reihe von Optionen, um Ihre Vorlage zu gestalten und zu verbessern.

Unter „Typografie“ können Sie Folgendes ändern:

  • Schriftart
  • Schriftgröße
  • Abstand
  • Stil
  • Textfarbe
In der rechten Seitenleiste kann ich die Typografie des Blocks bearbeiten.

Das ist nicht alles. Unter den „Stileinstellungen“ können Sie außerdem Folgendes ändern:

  • Hintergrundfarbe
  • Rand Einlage
  • Grenze
  • Box Schatten

Unten habe ich eine neue Hintergrundfarbe für den Call-to-Action hinzugefügt. Beachten Sie, dass Sie keine Änderungen codieren müssen, sondern einfach die Farben und jedes andere gewünschte Styling auswählen.

In der rechten Seitenleiste können Sie auch die Hintergrundfarbe, das Padding und vieles mehr ändern.

Schritt 4: Passen Sie die Vorlage für verschiedene Bildschirmgrößen an

Sie erstellen Ihre Vorlage höchstwahrscheinlich auf einem Laptop oder Desktop, aber es ist wichtig zu bedenken, dass Ihre Benutzer die Website möglicherweise nicht auf der gleichen Bildschirmgröße anzeigen. Tatsächlich wird eine zunehmende Mehrheit auf ihrem Tablet oder Mobilgerät sein.

Daher müssen Sie möglicherweise die Vorlage für jede Bildschirmgröße anpassen. Dies ist mit Toolset und WordPress einfach genug.

In der rechten Sidebar neben jedem Style-Element gibt es die Möglichkeit zwischen Desktop, Tablet und Mobile zu wechseln.

Während Sie Ihren Block bearbeiten, können Sie zwischen den Bildschirmgrößen wechseln.

Wie Sie sehen, passt sich die Vorlage an, wenn ich zwischen den Optionen wechsle, sodass Sie überprüfen können, wie die Vorlage auf jedem Gerät aussieht.

Sie können auch oben auf der Seite zwischen den Bildschirmgrößen wechseln.

Schritt 5: Weisen Sie die Vorlage Ihren Seiten zu

Da ich nun eine Vorlage habe, muss ich sie nur noch den richtigen Seiten zuordnen. Sobald ich dies getan habe, zeigt jede Seite dieselbe Vorlage an.

Ich muss nur jede Seite bearbeiten und die richtige Inhaltsvorlage auswählen.

Auf der rechten Sidebar kann ich eine Vorlage zuweisen.

Auf dem Frontend sehe ich nun die Vorlage auf der Seite, der ich sie zuweist.

Dies ist die Vorlage im Frontend.

Warum Sie eine benutzerdefinierte WordPress-Seitenvorlage für einzelne Beiträge benötigen

Neben dem Erstellen von Vorlagen für normale Beiträge benötigen Sie höchstwahrscheinlich auch Vorlagen für jeden der Beiträge in einem benutzerdefinierten Beitragstyp.

Für meine Koch-Website habe ich einen benutzerdefinierten Beitragstyp für meine Rezepte erstellt. Unten seht ihr eines meiner Rezepte im Backend. Beachten Sie alle benutzerdefinierten Felder, die ich dafür erstellt habe, z. B. Vorbereitungszeit, Kochzeit und Rezeptbild.

Sie können alle benutzerdefinierten Felder sehen, die ich für meine Beiträge erstellt habe.

Ich habe meinen Rezepten noch keine Vorlage zugewiesen. Sehen Sie, was passiert, wenn wir uns das Rezept ohne Vorlage im Frontend ansehen.

Ohne Vorlage erscheint keines der benutzerdefinierten Felder im Frontend.

Wie Sie sehen, wird keines der benutzerdefinierten Felder im Frontend angezeigt. Tatsächlich ist alles, was Sie sehen können, der Hauptinhalt des Beitrags, wie der Beitragstitel und der Beitragskörper. Aus diesem Grund ist eine Vorlage für Ihre einzelnen Beiträge so wichtig, da Sie damit alle Ihre Inhalte einschließlich benutzerdefinierter Felder anzeigen können.

Unten seht ihr zwei meiner Rezepte im Frontend. Sie können jetzt die benutzerdefinierten Felder sehen, da ich ihnen eine Vorlage zugewiesen habe.

So sieht meine Vorlage im Frontend aus.
Dies ist die gleiche Vorlage wie das obige Bild, jedoch mit einem anderen Rezept.

Im Folgenden zeige ich Ihnen, wie ich diese Vorlage für meine Rezepte erstellt habe.

Schritt 1: Erstellen der Vorlage

Als erstes muss ich die Vorlage erstellen, in die ich meine Inhalte einfüge. Ich kann dies über das Toolset-Dashboard im WordPress-Backend tun.

Durch das Erstellen einer Vorlage für meine Rezepte aus dem Toolset-Dashboard werden alle Rezeptposten automatisch der Vorlage zugewiesen.

Bei dieser Auswahl der Vorlage weise ich die Vorlage automatisch allen von mir erstellten Rezepten zu. Daher muss ich nicht zu jedem Rezept zurückkehren und die Vorlage manuell zuweisen.

Schritt 2: Hinzufügen des Inhalts zur Vorlage

Jetzt kann ich auf der Inhaltsvorlage beginnen, den Inhalt wie bei der vorherigen Vorlage für meine regulären Beiträge hinzuzufügen und zu strukturieren.

Auch hier kann ich den Toolset Grid-Block hinzufügen, um die Struktur der Vorlage zu erstellen.

Mit dem Rasterblock kann ich auswählen, welche Art von Layout ich möchte.

Ich kann jetzt damit beginnen, meine Blöcke für meine Inhalte hinzuzufügen. Bei meinen Rezepten habe ich zum Beispiel ein Bild in der linken Spalte. Aus Gutenbergs Blocksatz kann ich den Bildblock von Toolset hinzufügen. Ich benötige die Toolset-Version des Blocks, da ich damit dynamische Inhalte hinzufügen kann.

Um einen Block mit dynamischem Inhalt hinzuzufügen, muss ich den Block von Toolset anstelle der Standardversion verwenden.

Dynamischer Inhalt bedeutet, dass Sie ein Element wie ein Bild erstellen können und für jeden der Beiträge den richtigen Inhalt für diesen bestimmten Beitrag zeichnen. Dynamischer Inhalt bedeutet zum Beispiel, dass mein Rezept für Bananenkuchen, Sie haben es erraten, einen Bananenkuchen anzeigt. Andernfalls wäre der Inhalt statisch und Sie würden anstelle eines Bananenkuchens das Bild sehen, das ich beim Erstellen in der Vorlage eingefügt habe.

Durch die Verwendung von Toolset und WordPress kann ich die dynamische Quelle für jeden meiner Blöcke auswählen, um ihm mitzuteilen, was angezeigt werden soll.

Ich habe beispielsweise einen neuen Block erstellt, um eines meiner benutzerdefinierten Felder hinzuzufügen, Vorbereitungszeit. Sobald ich den Block hinzugefügt habe, kann ich auf der rechten Seite das Feld Vorbereitungszeit als Quelle für den Block auswählen. Dieser Block ist auch dynamisch, da die Vorbereitungszeit abhängig von den Rezeptanforderungen variiert.

Um Ihren Block dynamisch zu machen, können Sie das Feld auswählen, das Sie in der rechten Seitenleiste anzeigen möchten.

Es gibt eine Reihe verschiedener Arten von Blöcken, die Sie hinzufügen können, einschließlich eines sich wiederholenden Feldblocks, um mehrere Elemente hinzuzufügen (z. B. mehrere Zeilen für ein Rezept), ein Bildschiebereglerblock, ein YouTube-Block und vieles mehr.

Schritt 3: Style deine Blöcke

Genau wie bei der ersten Vorlage für normale Beiträge kann ich jeden meiner Blöcke stylen.

Schritt 4: Passen Sie die Vorlage für verschiedene Bildschirmgrößen an

Auch hier kann ich, ähnlich wie bei der vorherigen Vorlage, die Struktur für verschiedene Bildschirmgrößen anpassen.

Um die Vorlage an verschiedene Bildschirmgrößen anzupassen, können Sie zwischen Desktop-, Tablet- und mobilen Bildschirmen wechseln.

Schritt 5: Überprüfen Sie, wie die Vorlage mit jedem Ihrer Beiträge aussieht

Schließlich können Sie auch auswählen, welches Rezept Sie in Ihrer Vorlage anzeigen möchten, damit Sie sehen können, ob es zu allen passt. Verwenden Sie das Dropdown-Menü oben auf der Seite, um zwischen den Beiträgen zu wechseln.

Wenn ich das Dropdown-Menü verwende, kann ich sehen, wie jedes meiner Rezepte mit der Vorlage aussieht.

Sobald Sie fertig sind, können Sie Ihre Vorlage im Frontend überprüfen.

Jedes meiner Rezepte hat jetzt die gleiche Vorlage.

Und einfach so habe ich eine Vorlage für meine Rezepte. Wenn ich jetzt ein brandneues Rezept erstelle, folgt es sofort der Vorlagenstruktur.

Beginnen Sie noch heute mit der Erstellung Ihrer eigenen benutzerdefinierten WordPress-Seitenvorlage

Jetzt sind Sie an der Reihe, um zu sehen, wie einfach es ist, Ihre eigene WordPress-Seitenvorlage zu erstellen. Alles, was Sie tun müssen, ist Toolset herunterzuladen und dann die Dokumentation zu lesen, um zu sehen, wie schnell Sie eine Vorlage für Ihre Beiträge ohne Codierung erstellen können.