Die vollständige Website-Bearbeitung ermöglicht es Ihnen, jeden Aspekt Ihrer WordPress-Website – vom Header bis zum Footer – mithilfe verschiedener Blockfunktionen direkt im Website-Editor zu erstellen.
Mit dem Website-Editor können Sie Templates und Template-Teile ändern und den gesamten Stil Ihrer Website anpassen. Vor dem Website-Editor wurde das Design der Hauptelemente einer Website (z. B. Header, Seitenleiste und Footer) durch das Theme bestimmt. Mit dem Website-Editor können Sie die Struktur und den Stil Ihrer Website selbst festlegen. Der Website-Editor dient nicht nur zum Erstellen von Seiten- und Beitragsinhalten, sondern ermöglicht es Ihnen auch, mithilfe von Templates das gesamte Erscheinungsbild Ihrer Website zu gestalten.
Mit dem Template-Editor können Sie Templates bearbeiten, erstellen und einzelnen Beiträgen und Seiten zuweisen. Außerdem können Sie mithilfe des normalen WordPress-Block-Editors individuelle Templates für Ihre Beiträge und Seiten gestalten.
Ziel
Nach Abschluss dieser Lerneinheit können die Teilnehmenden:
- zwischen den Funktionen des Website-Editors und des Template-Editors unterscheiden.
- Templates, Template-Teile und globale Stileinstellungen über den Website-Editor verwalten.
- Templates über den Template-Editor bearbeiten, erstellen und einzelnen Beiträgen und Seiten zuweisen.
Erforderliche Kenntnisse
Die Teilnehmenden profitieren am meisten von dieser Lerneinheit, wenn sie mit Folgendem vertraut sind:
Fragen zur Kompetenz
- Können Sie die Funktion von Templates erklären?
- Sind Sie damit vertraut, wie man Templates Beiträgen oder Seiten zuweist?
Benötigte Materialien
- WordPress-Installation in einem lokalen Netzwerk
- Ein Block-Theme wie Twenty Twenty-Two
Hinweise für Präsentierende
- Es ist hilfreich, vor Beginn dieser Lerneinheit eine lokale Website zu erstellen.
- Einführung in den Website-Editor und den Template-Editor
- Templates
- Template-Teile
Übersicht über die Inhalte
- Gibt einen Überblick über das Layout und die Funktionen des Website-Editors: Templates, Template-Teile und Stileinstellungen.
- Zeigt, wie Sie die Stileinstellungen verwenden können, um den Stil Ihrer gesamten Website zu ändern.
- Erklärt, dass Templates aus einer Gruppe von Blöcken bestehen, die zu einem Webseitendesign oder dem Gesamtlayout einer Seite zusammengefügt werden.
- Unterscheidet zwischen dynamischen Bereichen (Inhalten) und wiederverwendbaren Bereichen (statischen Komponenten) eines Templates.
- Demonstriert, wie vorhandene Template-Teile geändert und neue erstellt werden.
- Demonstriert, wie der Template-Editor zum Bearbeiten, Erstellen und Zuweisen von Templates zu einzelnen Beiträgen und Seiten verwendet wird.
Übung
- Verwenden Sie die Stileinstellungen, um die Schriftart, die Hintergrundfarbe und die Textfarbe Ihrer Website zu ändern.
- Bearbeiten Sie ein vorhandenes Template und ändern Sie die Template-Teile für Header und Footer.
- Erstellen Sie ein individuelles Template und verwenden Sie es auf einer Seite.
Bewertung
Der Website-Editor bietet Zugriff auf die folgenden Funktionen. Wählen Sie alle zutreffenden Antworten aus.
- Templates
- Template-Teile
- Bearbeitung von Seiten- oder Beitragsinhalten
- Globale Stileinstellungen
Antworten: 1. Templates, 2. Template-Teile, 4. Globale Stileinstellungen
Mit dem Template-Editor können Sie …
- Ihre gesamte Website mit Blöcken erstellen.
- Templates bearbeiten, erstellen und einzelnen Beiträgen und Seiten zuweisen.
Antwort: 2. Templates bearbeiten, erstellen und einzelnen Beiträgen und Seiten zuweisen.
Beim Verwalten von Templates werden Inhalte über den Block „Beitragsinhalt“ angezeigt.
- Richtig
- Falsch
Antwort: 1. Richtig
Wenn Sie ein Template erstellen …
- erzielen Sie das beste Ergebnis, wenn Sie nicht die wiederverwendbaren Bereiche von den dynamischen Bereichen trennen.
- erzielen Sie das beste Ergebnis, wenn Sie die wiederverwendbaren Bereiche von den dynamischen Bereichen trennen.
Antwort: 2. Sie erzielen das beste Ergebnis, wenn Sie die wiederverwendbaren Bereiche von den dynamischen Bereichen trennen.
Zusätzliche Ressourcen
- Website-Editor
- Template-Editor
- Handbuch zum Block-Editor: Templates für die vollständige Website-Bearbeitung
- Handbuch zum Block-Editor: Template-Hierarchie
- Theme-Entwicklerhandbuch: Templates und Template-Teile
Beispiel für die Lerneinheit
Heute werden wir uns eingehender mit dem Website-Editor und dem Template-Editor beschäftigen. Wenn Sie ein Block-Theme wie Twenty Twenty-Two installiert haben und bereit sind, Ihre Reise in die vollständige Website-Bearbeitung zu beginnen, werden Sie feststellen, dass der Customizer verschwunden ist. Wenn Sie jedoch zu „Design“ gehen, sehen Sie eine neue Option: „Editor“. Wenn Sie auf „Editor“ klicken, werden Sie zum Website-Editor weitergeleitet.
Hier können Sie Templates und Template-Teile ändern und außerdem den Stil Ihrer gesamten Website anpassen. Der Website-Editor stellt eine Ansicht der Template-Liste bereit, wie Sie sie auf der linken Seite sehen werden. Sie ermöglicht es Benutzerinnen und Benutzern, den Bereich „Website“ zu durchsuchen, also das Template der Startseite, Templates und alle anderen Template-Teile. Dies ist ein wichtiger Bestandteil des Website-Editors. Im Grunde können Sie damit das Gesamtdesign Ihrer Website bearbeiten. Um die Ansicht zu wechseln, klicken Sie oben links auf das WordPress-Symbol oder das Symbol Ihrer Website. Anschließend können Sie zwischen der Rückkehr zum Dashboard, der Website (also dem Template Ihrer Startseite, wie bereits erwähnt), der Template-Liste und der Liste der Template-Teile wählen.
Wenn Sie auf das Stil-Symbol klicken, können Sie die Typografie und die Farben Ihrer gesamten Website ändern. Wenn Sie weiter nach unten scrollen, finden Sie außerdem Optionen, um das Erscheinungsbild bestimmter Blöcke für Ihre gesamte Website anzupassen. Beachten Sie, dass die Stileinstellungen unabhängig davon verfügbar sind, welches Template oder welcher Template-Teil gerade bearbeitet wird. Wenn Sie auf „Typografie“ klicken, können Sie die Typografieeinstellungen für Text und Links verwalten. Sie können die Hintergrundfarbe Ihrer Website oder die Farbe von Text und Links mit einem einzigen Klick ändern. Oben rechts sehen Sie den Hinweis ‘Hintergrundfarbe oder Verlauf für die gesamte Website festlegen.’
Wenn Sie oben rechts auf die drei vertikalen Punkte klicken, können Sie einige Einstellungen in den Editor-Einstellungen ändern:
- Spotlight-Modus: Hebt den ausgewählten Block hervor und blendet die übrigen Inhalte ab.
- Textbeschriftungen für Schaltflächen anzeigen: Zeigt auf Schaltflächen Text anstelle von Symbolen an.
- Listenansicht immer öffnen: Öffnet die Seitenleiste der Listenansicht standardmäßig.
Wie verwaltet man Templates über den Website-Editor? Klicken Sie oben links auf das WordPress-Symbol und öffnen Sie die Templates. Templates sind eine Gruppe von Blöcken, die zu einem Webseitendesign zusammengefügt werden. Öffnen wir das Template „Seite“. Man könnte sagen, dass ein Template das vollständige Seitenlayout darstellt. Dazu gehören Bereiche wie Header, Inhalt und Footer. Klicken Sie auf „Listenansicht“. Oben sehen Sie den Header, unten auf der Seite den Footer und in der Mitte den Block „Beitragsinhalt“. Beim Erstellen eines Templates erzielen Sie das beste Ergebnis, wenn Sie die wiederverwendbaren Bereiche von den dynamischen Bereichen trennen. Der dynamische Bereich ist der Inhaltsbereich, der sich auf jeder Seite ändert, die dieses Template verwendet. Der wiederverwendbare Bereich ist der statische Teil des Templates, der gleich bleibt. Templates dienen nicht zum Veröffentlichen von Inhalten. Das Template für Beiträge oder Seiten zeigt Ihre Inhalte mit dem Block „Beitragsinhalt“ an. Ein Template ist, wie der Name schon sagt, ein Designentwurf, der von einer oder mehreren Seiten und Beiträgen verwendet werden kann.
Wenn Sie mit dem Aufbau einer neuen Website beginnen, können Sie vorhandene Templates bearbeiten oder neue hinzufügen. Sie können auch individuelle Templates erstellen. Denken Sie daran, jede Seite oder jeden Beitrag über den Template-Editor einem Template zuzuweisen.
Als Nächstes sehen wir uns die Verwaltung von Template-Teilen genauer an. Zur zusätzlichen Information: Template-Teile eignen sich besonders gut zum Erstellen von Bereichen wie Header, Footer und Seitenleiste.
Wenn wir die Template-Teile öffnen, sehen wir die Template-Teile, die wir selbst erstellt haben, sowie die Template-Teile, die vom verwendeten Theme bereitgestellt werden. Die vier Template-Teile am unteren Ende der Liste werden vom Theme Twenty Twenty-Two bereitgestellt. Wenn Sie einen Punkt über dem Symbol eines Template-Teils sehen, wissen Sie, dass dieses Template geändert wurde. Der oben angezeigte Seitenbereich ist ein Template-Teil, den ich selbst erstellt habe.
Zum Schluss können Sie sich dafür entscheiden, einen neuen Template-Teil hinzuzufügen. Beim Hinzufügen eines neuen Template-Teils können Sie zwischen einem allgemeinen Template-Teil, einem Header und einem Footer wählen. Ein allgemeiner Template-Teil ist nicht an einen bestimmten Bereich gebunden. Denken Sie daran, Ihrem Template-Teil einen aussagekräftigen Namen zu geben.
Sehen wir uns an, wie man einen Template-Teil-Block hinzufügt. Ich öffne mein 404-Template, das angezeigt wird, wenn keine Inhalte gefunden wurden. Wie Sie sehen werden, gibt es derzeit keinen Header. Öffnen wir also die Listenansicht. Oberhalb des Gruppenblocks füge ich meinen Template-Teil-Block ein. Nachdem Sie den Template-Teil-Block ausgewählt haben, können Sie einen vorhandenen Template-Teil auswählen oder einen neuen erstellen. Wählen wir den vorhandenen aus, den ich bereits erstellt habe.
Sehen wir uns nun den Template-Editor an. Mit dem Template-Editor können Sie Templates bearbeiten, erstellen und einzelnen Beiträgen und Seiten zuweisen. Sehen wir uns an, wie das funktioniert, und probieren es gleichzeitig aus. Klicken Sie oben links auf das WordPress-Symbol und kehren Sie zum Dashboard zurück. Klicken Sie auf „Seiten“ und öffnen Sie eine der vorhandenen Seiten. In der Einstellungs-Seitenleiste auf der rechten Seite sehen Sie, dass dieser Seite das Standard-Template zugewiesen ist, also Ihr Seiten-Template. Sie können auch eines der anderen verfügbaren Templates zuweisen. Sobald Sie bereit sind, können Sie das gewünschte Template bearbeiten.
Wenn Sie auf „Bearbeiten“ klicken, gelangen Sie in den Template-Bearbeitungsmodus. Sie erkennen, dass Sie sich im Template-Bearbeitungsmodus befinden, wenn der Name des Templates in der oberen Leiste angezeigt wird. Außerdem erscheint beim Bearbeiten ein dunkler Rahmen um das Template. Es gibt jedoch noch eine dritte Möglichkeit: Sie können ein neues individuelles Template erstellen. Es erscheint die Aufforderung ‘Beschreiben Sie den Zweck des Templates, zum Beispiel volle Breite’, und das individuelle Template kann auf jeden Beitrag oder jede Seite angewendet werden. Sie können sich beispielsweise dafür entscheiden, ein individuelles Template für eine Landingpage oder eine Portfolioseite zu erstellen.
Nachdem Sie auf „Erstellen“ geklickt haben, werden Sie feststellen, dass der Header anders aussieht und kein Footer vorhanden ist. Sie haben also eine leere Arbeitsfläche, auf der Sie Ihr eigenes individuelles Template erstellen können. Zur Erinnerung: Im Template-Bearbeitungsmodus können Sie zwischen der Bearbeitung des Inhalts eines einzelnen Beitrags oder einer einzelnen Seite und der Bearbeitung des Templates wechseln, das von diesem Beitrag oder dieser Seite verwendet wird.
Wir sind überzeugt, dass Sie nun ein besseres Verständnis dafür haben, wie Sie den Website-Editor und den Template-Editor verwenden.
Abschluss der Lerneinheit