Twenty Twenty Four - Beitragsseite mit Header, und Liste mit lleinen Bildern

Twenty Twenty-Four: Beitragsseite anpassen

Geschrieben

in

| 21 Kommentare

Veröffentlicht am

|

Aktualisiert am

In diesem Beitrag sehen Sie, wie man das Template für die Beitragsseite anpasst, eine Vorlage für die Ausgabe der Beiträge findet und diese im Website-Editor einbindet.

Für Twenty Twenty-Four gibt es bei der Beitragsseite einige Besonderheiten, aber das Einfügen der Vorlagen für den Abfrage-Loop funktioniert auch in allen anderen Block-Themes.

Dieser Beitrag ist Teil einer Reihe von Überlegungen zum Umstieg auf ein Block-Theme.

Inhaltsverzeichnis

Twenty Twenty-Four hat eine ganz besondere Beitragsseite

Twenty Twenty-Four ist das erste Standardtheme, das in einem frisch installierten WordPress auf der Startseite nicht nur den Beispielbeitrag Hallo Welt ausgibt, sondern hübsch gestaltete Inhalte präsentiert.

Das basiert auf einem Trick, den ich Ihnen kurz vorstellen möchte.

Standard: Beitragsseite ist Startseite

Nach der Installation von WordPress ist im Backend-Menü Einstellungen im Untermenü Lesen den Bereich Deine Homepage zeigt standardmäßig die Option Deine letzten Beiträge aktiviert. Die Startseite ist also auch gleich die Beitragsseite.

Diese Start- bzw. Beitragsseite basiert auf einem Template namens Blog-Startseite (engl. Blog Home), und in Twenty Twenty-Four sind in diesem Template zunächst einmal statische Inhalte zu finden.

Die eigentliche Hauptaufgabe des Templates, nämlich die Ausgabe der Beiträge, wird quasi zur Nebensache und der für die Ausgabe der Beiträge zuständige Block Abfrage-Loop steht ziemlich weit unten auf der Seite.

Die folgende Abbildung zeigt das Template Blog-Startseite im Website-Editor und in der Listenansicht ist die Gruppe mit der Beitragsausgabe markiert und im Website-Editor sichtbar.

Die Ausgabe der Beiträge steht im Template Blog-Startseite ziemlich weit unten

Genial: »Template ersetzen« erzeugt drei verschiedene Startseiten

Im Beitrag Twenty Twenty-Four kennenlernen habe ich beschrieben, dass man für das Template Blog-Startseite mit der gut versteckten Funktion Template ersetzen zwischen den drei Template-Varianten Business, Photographer und Blogger auswählen kann.

In dem Beitrag finden Sie auch die folgende Galerie, die zeigt, dass die Startseite von Twenty Twenty-Four mit einer Mischung aus den drei Templates und den mitgelieferten Stilvarianten mit wenigen Klicks sehr unterschiedlich aussehen kann.

Oops: Mit zusätzlicher Startseite stören die Inhalte im Template

Was mit der Beitragsseite als Startseite pfiffige Kombinationsmöglichkeiten eröffnet, wird zum Boomerang, wenn man im Backend-Menü Einstellungen > Lesen im Bereich Deine Homepage zeigt für Startseite und Beitragsseite jeweils eine unterschiedliche statische Seite auswählt.

Dann bekommt man, wie auch auf dieser Website, eine statische Startseite und eine zusätzliche Beitragsseite, die oft News oder Blog heißt. In dem Fall sollte die Beitragsseite sich wieder auf ihre klassische Aufgabe konzentrieren und einfach nur rückwärts chronologisch Beiträge ausgeben.

Die folgende Abbildung zeigt aber, dass die Beitragsseite nach wie vor auf dem Template Blog-Startseite basiert, und die Beiträge ziemlich weit unten auf der Seite stehen (und somit in der Abbildung gar nicht zu sehen sind).

Twenty Twenty-Four - Frontend - Business - Ausgabe der Beitrag weit unten
Die Beiträge stehen auf der Beitragsseite viel zu weit unten

Lösung: das »Blogging-Index-Template« zuweisen

Der einfachste Weg, die Beitragsseite wieder zur Ausgabe der Beiträge zu nutzen, ist die (leider) gut versteckte Funktion Template ersetzen.

Zusätzlich zu den drei oben gezeigten Template-Varianten für Business, Photographer und Blogger gibt es dort nämlich noch eine vierte namens Blogging-Index-Template, und die gibt einfach nur die neuesten Beiträge aus.

Und so weisen Sie dem Template Blog-Startseite das Blogging-Index-Template zu:

  1. Öffnen Sie das Template Blog-Startseite im Website-Editor.
  2. Aktivieren Sie ggfs. die rechte Seitenleiste mit dem Register Template.
  3. Klicken Sie rechts neben Blog-Startseite auf das 3-Punkte-Menü.
  4. Klicken Sie auf die Funktion Template ersetzen.
  5. Wählen Sie das Blogging-Index-Template ganz rechts außen.
  6. Ändern Sie den Text der H1-Überschrift von Sehen, lesen, hören, zum Beispiel zu einem simplen Blog.
  7. Zentrieren Sie den Text der H1-Überschrift.
  8. Speichern Sie alle Änderungen.

Jetzt zeigt die Beitragsseite einfach nur die Beiträge untereinander in rückwärts chronologischer Reihenfolge (siehe Abbildung).

Twenty Twenty-Four - Beitragsseite mit Blogging Index Template
Die Beitragsseite mit »Blogging Index Template«

Falls Ihnen diese Ausgabe der Beiträge gefällt, sind Sie fertig. Falls nicht, ist diese Beitragsseite ein guter Ausgangspunkt für die nächsten Schritte.

Schritt 1: Eine Vorlage für Beiträge finden

Die verfügbaren Vorlagen mit einem Abfrage-Loop zur Ausgabe der Beiträge finden Sie im Block-Inserter in der Kategorie Beiträge. Die folgende Abbildung zeigt die Vorlagen als Übersicht. Markiert ist Liste von Beiträgen ohne Bilder.

Block-Inserter > Kategorie Beiträge erkunden
Block-Inserter > Kategorie Beiträge erkunden

Im Vorlagenverzeichnis von WordPress gibt es noch viele weitere Vorlagen. Die folgende Abbildung zeigt die Vorlagen aus der Kategorie Beiträge mit den Filtern Community und Beliebt.

Vorlagenverzeichnis auf WordPress.org > Kategorie Beiträge
Vorlagenverzeichnis auf WordPress.org > Kategorie Beiträge

Sie können hier die Vorlagen wie gewohnt in der Einzelansicht testen und bei Gefallen mit dem Button Kopieren in die Zwischenablage kopieren. Im Website-Editor platzieren Sie den Cursor an der gewünschten Stelle und fügen dann die Vorlage per Strg bzw. cmd + V wieder ein.

Schritt 2: Die Vorlage einfügen

Das Einfügen der Vorlage funktioniert im Prinzip genauso wie beim Header oder Footer. Hier die Kurzanleitung:

  1. Im Website-Editor das Template für die Beitragsseite zur Bearbeitung öffnen, z. B. mit der Befehlspalette und der Eingabe von »Blog-Startseite«.
  2. Die Listenansicht mit der Block-Struktur einblenden.
  3. Den Block-Abfrage-Loop oder ggfs. den umgebenden Gruppe-Block markieren und löschen.
  4. Falls nötig fügen Sie an der gewünschten Stelle zwischen Header unf Footer einen leeren Absatz ein. Der wird in den nächsten Schritten durch die Vorlage ersetzt.
  5. Den Block-Inserter aufrufen und auf das Register Vorlagen wechseln.
  6. Die Kategorie Beiträge öffnen und die gewünschte Vorlage suchen.
  7. Die Vorlage mit einem Klick darauf einfügen.

Die folgende Galerie zeigt die Beitragsseite mit zwei verschiedenen Vorlagen.

Die Beitragsseite auf einen Blick

Das Anpassen von Header, Footer und Beitragsseite ist mit den entsprechenden Vorlagen wirklich einfach und in wenigen Minuten erledigt.

Die Beitragsseite für die Website zum Buch sieht mit Twenty Twenty-Four und den oben vorgestellten Vorlagen für Beiträge so aus wie in der folgenden Galerie.

Wenn Ihnen die Beitragsseite gefällt, sollten Sie die Templates Alle Archive für die Ausgabe der Archivseiten für Kategorien, Schlagwörter usw. und das Template für die Suchergebnisse auch entsprechend anpassen.

Avatar von Peter Müller

Kommentare

21 Antworten zu „Twenty Twenty-Four: Beitragsseite anpassen“

  1. Hallo Peter,

    Vielen Dank für deinen Artikel. Ich nutze das Theme seit ein paar Tagen. Momentan erscheint das Bild und dann die Überschrift. Wie kann ich das umdrehen? Also Überschrift des Artikels und dann das Titelbild. Ist das möglich? Und kann ich auch eine Subline über die Headline setzen – wenn ja, wie? Vielleicht hast du Zeit und Muse mir das zu erklären.

    Grüße
    Valerie

    1. Hallo Valerie,

      freut mich, dass dir der Artikel dir gefällt. Zu deinen Fragen:

      Momentan erscheint das Bild und dann die Überschrift. Wie kann ich das umdrehen?

      Ich nehme mal an, dass du die Einzelansicht eines Beitrags meinst. Um die Reihenfolge von Titel des Beitrag und Titelbild zu ändern, musst du das Template Einzelne Beiträge bearbeiten. Das ist nicht ganz so einfach wie es klingt, denn man die vorhandene Block-Struktur ist ein bisschen verschachtelt. Am einfachsten ist es, wenn du den Block Beitragsbild einfach unter den Block Stapel mit Titel und Beitrag-Meta verschiebst. Wenn du das Beitragsbild zwischen Titel und Beitrag-Meta haben möchtest, ist die Operation etwas aufwändiger. Aber immer dran denken: man kann alles wieder rückgängig machen und zurücksetzen. Es kann also nichts wirklich kaputt gehen.

      Und kann ich auch eine Subline über die Headline setzen – wenn ja, wie?

      Das geht in zwei Schritten:

      1. Im entsprechenden Template einen Block oberhalb der Headline einbauen.
      2. Im Block-Editor für den Inhalt von Beiträgen irgendwo den Text für diesen Block eingeben.

      Der erste Punkt ist vergleichsweise simpel, der zweite nicht so. Im Template kann man den Text für die Subline ja nicht eingeben, denn dann wäre der ja in allen Beiträgen gleich, und im Block-Editor eingegebener Text erscheint normalerweise im Inhaltsbereich.

      Als Workaround könnte man vielleicht die Option Textauszug nutzen, aber ich habe das nicht ausprobiert. Die Idee wäre, als Subline im Template den Block Textauszug einzubauen, und im Block-Editor den Text für die Subline in der Seitenleiste Einstellungen im Feld Textauszug einzugeben. Irgendein Standardtheme (Twenty-Fifteen oder Twenty-Sixteen) hat das früher auch mal so gemacht.

      Besser wäre es vielleicht, auf WordPress 6.5 zu warten. Dort kann man einen Block in einem Template mit einem Custom Field verbinden. Das Custom Field ist ein Eingabefeld im Block-Editor, dass man z. B. »Subline« nennen könnte. Dieses Custom Field wird dann an den Block für die Subline im Template gebunden, sodass der Inhalt dort erscheint.

      Siehe WordPress 6.5 Beta 1 im Abschnitt »Connecting blocks and custom fields or other dynamic content«.

      1. Avatar von Valerie

        Vielen Dank Peter, ich hab mich zunächst dagegen entschieden das umzusetzen. Dafür brauch ich Muse und Zeit und beides ist gerade knapp. 🙂 Ich komme aber sicher wieder auf unseren Austausch zurück, wenn es soweit ist.

      2. Avatar von Valerie

        Hallo nochmal 🙂 lieber Peter,

        ich will gerade 6.5 ausprobieren und habe versucht einen Block in einem Template mit einem Custom Field verbinden. Das klappt leider nicht. Das Custom Field erscheint, man sieht es im Frontend (leider) doch ich habe keine Möglichkeit es im Backend zu beschreiben. Ich finde das Feld nicht, das in GitHub gezeigt wird. Hast du schon eine Schritt-für-Schritt-Anleitung?

        Grüße
        Valerie

        1. Ich habe da noch nichts mit gemacht, aber du musst die Custom Fields erst aktivieren:
          Block-Editor für Beiträge und Seiten
          > Obere Werkzeugleiste
          > Drei-Punkte-Menü rechts oben
          > Voreinstellungen (ganz unten)
          > Erweitert | Individuelle Felder

          Ein Tutorial gibt’s z. B. von Birgit Pauli-Haack auf gutenbergtimes.com:
          Block Bindings and Custom Fields – an (almost) no-code example

          Anne McCarthy beschreibt was momentan möglich ist und was geplant ist:
          Connect block attributes and custom fields

          Viel Erfolg mit der »Subline«, und sag kurz Bescheid, ob’s funktioniert.

          1. Avatar von Valerie

            Hi Peter,

            leider klappt es nicht.

            Ich frickel schon seit Stunden rum und es übernimmt die Subline einfach nicht. Beim Vorgehen unter deinem ersten Link https://gutenbergtimes.com/block-bindings-and-custom-fields-an-almost-no-code-example/ hab ich alles so gemacht, wie beschrieben. Ich habe auch dieselben Wörter verwendet etc.

            In den Beiträgen selbst hat es zwar den Namen vom Custom Field angezeigt, aber nicht den Wert. Wenn ich es dann im Block geändert habe, also der zweite Schritt, den Birgit Pauli-Haack in ihrem Text beschreibt, taucht es auch nicht auf.

            Zudem habe ich im Custom Field eine ganze Reihe von Namen von Feldern, die ich gar nicht zuordnen kann. Es waren auch noch Felder dabei von einem Adventskalender von vor zwei Jahren. Dafür hab ich mir nun ein Plugin installierst (Edit Custom Field) damit ich das löschen kann.

            Wenn ich im Name „Weather“ und unter „Wert“ z. B. sonnig eintrage, ist das zwar für den einen Artikel vorhanden, speichert es aber nicht. Ich vermute da liegt der Fehler. Ich habe leider keine Ahnung, wie ich das beheben kann – und warum es nicht speichert. Wo kann ich denn noch Custom Fields anlegen?

            Grüße
            Valerie

          2. Hi there, du schreibst:

            Wenn ich im Name „Weather“ und unter „Wert“ z. B. sonnig eintrage, ist das zwar für den einen Artikel vorhanden, speichert es aber nicht. Ich vermute da liegt der Fehler. Ich habe leider keine Ahnung, wie ich das beheben kann – und warum es nicht speichert. Wo kann ich denn noch Custom Fields anlegen?

            Ich habe momentan (und in den nächsten Wochen) leider keine Zeit, mich um Custom Fields zu kümmern, aber was meinst du mit „ist das zwar für den einen Artikel vorhanden, speichert es aber nicht“?

            Wenn ich das richtig verstehe, ist das erwartetes Verhalten: Den *Namen* des Custom Fields („Weather“) wählst du bei jedem Beitrag aus einer Liste aus, den musst du nur einmal definieren. Den *Wert* für das Custom Field („sonnig“) musst du aber bei jedem Beitrag neu eingeben. Der wird meines Wissens nirgendwo außerhalb dieses Beitrags gespeichert.

            Neu in WP 6.5 ist, dass man ein bestimmtes Custom Field („Weather“) an einen bestimmten Block binden kann, sodass der Wert, den du unterhalb des Beitrags eingibst dort automatisch erscheint. Das steht aber alles noch am Anfang und ist nicht sehr komfortabel (keine UI).

  2. Avatar von Valerie

    Lieber Peter,

    nun folgt eine weitere Frage: Wie kann ich die Anzahl der Kommentare, also beim Datum, Autor etc, oben einfügen? Ich habe dazu im Artikel nichts gefunden. In deinem Text kann man das oben sehen, wie viele Kommentare es schon gibt. Das hätte ich auch gerne.

    Grüße
    Valerie

    1. Da es dass leider noch nicht als Block gibt, muss man das selbst bauen und z. B. einen Shortcode erstellen und einbinden. Dabei hat Bego Mario Garde (aka @pixolin im WP-Support-Forum) mir geholfen.

      Schritt 1: Shortcode [kommentare_pro_beitrag] erstellen
      Zunächst einmal muss man mit dem folgenden PHP-Code einen Shortcode erstellen. Am einfachsten geht das mit einem Plugin wie Code Snippets:

      /*
      * Shortcode [kommentare_pro_beitrag] erstellen
      * zur Ausgabe Anzahl der Kommentare für einen Beitrag
      */
      function pix_kommentare_pro_beitrag() {
      $comments_count = wp_count_comments();
      $message = '| <a href="#kommentare" rel="nofollow ugc">' . esc_attr(get_comments_number_text('Kommentar schreiben', 'Ein Kommentar', '% Kommentare', $post_id)) . '</a>';
      return $message;
      }

      add_shortcode('kommentare_pro_beitrag', 'pix_kommentare_pro_beitrag');

      Schritt 2: Shortcode [kommentare_pro_beitrag] in einem Template einbinden
      Jetzt man kann diesen Shortcode in einem beliebigen Template einbinden. Auf dieser Website habe ich es im Template Einzelne Beiträge von Twenty Twenty-Four bei den Metadaten eingebunden. Das sieht im Website-Editor ein bisschen seltsam aus, da der Block Shortcode ziemlich viel Platz einnimmt, aber es funktioniert.

      1. Vielen Dank, Peter!

      2. Avatar von Valerie

        Vielen Dank, nun ist mir aufgefallen, dass ich zwar die Kommentaranzahl drin habe, aber auf diese Kommentare wird nicht verlinkt. Wie kann ich das noch eintragen? Und wie kann ich „Kommentar schreiben“ verlinken, damit der Uswr beim Klick entweder gleich auf die Kommentare kommt oder eben einen schreiben kann?

        1. Oops. In meinem Kommentar weiter oben mit dem Shortcode wurde der Link nicht angezeigt. Das habe ich jetzt behoben. Das Sprungziel ist #kommentare weiter unten auf derselben Seite, egal ob es schon Kommentare gibt oder nicht, und es muss in TT4 noch erstellt werden.

          Ich habe die ID (aka HTML-Anker) an die h2-Überschrift »Kommentare« am Anfang des Abschnitts mit den Kommentaren vergeben:
          – Template Einzelne Beiträge im Website-Editor öffnen
          – h2-Überschrift Kommentare im Website-Editor markieren
          – Im Block-Inspektor als HTML-Anker das Wort kommentare eingeben

          Den senkrechten Strich | am Anfang der Zeile brauchst du nur, wenn wie bei mir weiter oben in derselben Zeile vorher noch andere Meta-Daten stehen. Wenn du wie bei dir auf einer neuen Zeile anfängst, ist der nicht nötig.

          1. Perfekte Beschreibung lieber Peter! Vielen Dank! Wie kann ich mich erkenntlich zeigen?

          2. Freut mich, dass es dir geholfen hat 😃

  3. Ich finde deine obige Vorlage nicht … oder verstehe ich da was falsch?🙈

    1. Du meinst die Vorlagen zur Ausgabe der Beiträge?

      Die Vorlage »Liste von Beiträgen ohne Bilder, 1 Spalte« gehört zu Twenty Twenty-Four und müsste in jedem Fall vorhanden sein (jedenfalls solange das Theme aktiv ist).

      Die Vorlage »Posts: small image on left« stammt von Twentig und ist nur sichtbar, wenn Twentig installiert und aktiviert ist.

  4. Ja genau, ich meinte die Liste mit Beiträgen mit den Bildern.

  5. Avatar von Valerie

    Hallo Peter,

    ich konnte auf deinen Kommentar nicht direkt antworten, deshalb ein neuer:

    __________________________________________
    *

    Hi there, du schreibst:

    Wenn ich im Name „Weather“ und unter „Wert“ z. B. sonnig eintrage, ist das zwar für den einen Artikel vorhanden, speichert es aber nicht. Ich vermute da liegt der Fehler. Ich habe leider keine Ahnung, wie ich das beheben kann – und warum es nicht speichert. Wo kann ich denn noch Custom Fields anlegen?

    Ich habe momentan (und in den nächsten Wochen) leider keine Zeit, mich um Custom Fields zu kümmern, aber was meinst du mit „ist das zwar für den einen Artikel vorhanden, speichert es aber nicht“?

    Wenn ich das richtig verstehe, ist das erwartetes Verhalten: Den *Namen* des Custom Fields („Weather“) wählst du bei jedem Beitrag aus einer Liste aus, den musst du nur einmal definieren. Den *Wert* für das Custom Field („sonnig“) musst du aber bei jedem Beitrag neu eingeben. Der wird meines Wissens nirgendwo außerhalb dieses Beitrags gespeichert.

    Neu in WP 6.5 ist, dass man ein bestimmtes Custom Field („Weather“) an einen bestimmten Block binden kann, sodass der Wert, den du unterhalb des Beitrags eingibst dort automatisch erscheint. Das steht aber alles noch am Anfang und ist nicht sehr komfortabel (keine UI).

    ___________________________________________

    Dann hat mir die Info gefehlt, das sich das eh nicht speichert. (Obwohl ich eine lange Liste drin haben, die ja irgendwo liegen müssen.)

    Danke & Grüße,
    Valerie

    1. In der langen Liste stehen die *Namen* bereits verwendeter Custom Fields. Die werden irgendwo gespeichert, und die Liste kannst du mit dem Plugin, dass du gefunden hattest, bearbeiten.

      Die bereits eingegebenen *Werte* erscheinen aber nicht als lange Liste, oder?

  6. Langsam arbeite ich mich im tt4 ein und bei aller Kompliziertheit, kann ich ein paar Vorteile erkennen.
    Aber natürlich sind immer noch Fragen offen
    zum Beispiel( konnte ich nichts darüber finden: )

    die Homepage die ich baue, ist auf statische Seite gestellt,

    Wenn ich die Seiten bearbeiten will, erscheint die Veränderung nicht auf der Webseite.

    Ist jetzt nicht wirklich schlimm, ich kann sie ja über die Webseite bearbeiten,
    aber genau das irritiert mich, dass wenn ich die Seite selbst bearbeitet die Veränderung nicht sichtbar sind.
    womit hat das was zu tun? habe ich irgendwo einen Fehler gemacht ?

    Viele Grüße und vielen Dank für deine Erklärungen sind zu den wordpress themes

    1. Mmh, also wenn man eine Seite bearbeiten will, erscheint die Veränderung nicht auf der Webseite, aber das ist nicht schlimm, denn man kann sie ja über die Webseite bearbeiten?

      Ich verstehe das nicht wirklich, daher mal ein paar Gegenfragen:

      die Homepage die ich baue, ist auf statische Seite gestellt,

      Ist damit gemeint, dass in Einstellungen > Lesen bei Deine Homepage zeigt die Option Eine statische Seite aktiviert ist?

      Wenn ich die Seiten bearbeiten will, erscheint die Veränderung nicht auf der Webseite.

      Welche „Seiten“? Und wo und wie „bearbeiten“? Und „nicht auf der Webseite“ meint „nicht im Frontend“?

      Ist jetzt nicht wirklich schlimm, ich kann sie ja über die Webseite bearbeiten,

      Was genau ist denn mit „über die Webseite bearbeiten“ gemeint?

      Und die wichtigste Frage: Gibt es einen Link zum Anschauen deiner Website?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert