Es gibt gute Gründe, warum WordPress standardgemäß zu jedem Beitrag den Autor, das Veröffentlichungsdatum, die Kategorie und die Schlagwörter ausgibt. Immerhin handelt es sich bei WordPress von Haus aus um eine Blog-Software. Mehrere Autoren können am regelmäßigen Veröffentlichen von Beiträgen beteiligt sein, schreiben zu unterschiedlichen Themen. Das alles sollte dann auch entsprechend ausgezeichnet sein. Es kann aber auch gute Gründe geben, die WordPress Post Meta ausblenden zu wollen.
Im Folgenden geht es nach wie vor erst einmal um das Grundprinzip, unter welchen Umständen es sinnvoll ist, die WordPress Post Meta auszublenden. Nach dem konkreten Vorgehen für das Theme Twenty Sixteen folgen dann – neu – konkrete Angaben für die drei letzten Standardthemes Twenty Nineteen, Twenty Twenty und Twenty Twenty-One
WordPress Post Meta ausblenden auf Unternehmenswebsite
Wenn Sie zum Beispiel auf Basis von WordPress eine Unternehmenswebsite erstellen wollen. Oder wenn Sie zwecks interessanterer Nutzererfahrung statt nur Seiten auch die Möglichkeiten von Kategorien und Beiträgen nutzen wollen. In solchen Fällen möchten Sie vielleicht nicht zwangsläufig anzeigen, wann welcher Autor diese Beiträge erstellt hat. WordPress Post Meta ausblenden, das heißt, entweder alle oder einzelne dieser Angaben einfach nicht anzuzeigen. Das geht recht einfach per CSS. Die Modifikation der entsprechenden php-Dateien wäre natürlich auch ein Weg. Doch warum sich mit PHP herumschlagen, wenn es sich auch rein mit CSS machen lässt?
Für benutzerdefiniertes CSS stellt Twenty Sixteen wie jedes andere Theme seit WordPress 4.7 die Option Design > Customizer > Zusätzliches CSS zur Verfügung. Hier können Sie Ihre Definitionen updatesicher hinterlegen. Nur wenn Sie darüber hinaus Änderungen, also zum Beispiel in Templates wie der single.php, vornehmen wollen, benötigen Sie ein Child-Theme.
Grundlegende Situation: Beiträge statt Seiten
Gehen wir zum Beispiel von einer Unternehmenswebsite aus, die gar nicht bloggen möchte. Neben den Standardseiten Start, Kontakt, Impressum und Datenschutz bieten Sie weitere Inhalte an, die die eigentlichen Angebote darstellen. Das könnten Obst und Gemüse sein. Fahrräder und Fahrradzubehör. Oder Haustiere und Zootiere.
Unabhängig vom konkreten Inhalt bietet es sich an, diese Angebote nicht als Seiten zu gestalten, sondern als Beiträge. Das Menü ruft dann die passende Kategorie ab (sagen wir: Zootiere). Auf einer Kategorie-Seite stellt WordPress für Sie die dazugehörenden Beiträge in chronologischer Reihenfolge dar, den aktuellsten zuoberst. Diese Kategorie-Seite bietet also schon einmal eine gute Übersicht. Wer dann einen der dort angeteaserten Beiträge anklickt, kann in der Folge von Beitrag zu Beitrag navigieren.
Die Sache hat nur einen Haken: Standardgemäß liefert WordPress für alle Beiträge immer auch die zugehörigen Post Meta Angaben aus. Dabei bieten wahrlich nicht alle Themes die Möglichkeit, dies mit einem einzigen Klick in den Einstellungen abzuschalten. Sie aber möchten nicht, dass Ihre Angebote auf diese Weise datiert sind. Den Autoren wollen Sie wahrscheinlich auch nicht angeben. Einzig die Verlinkung zu weiteren Beiträgen dieser Kategorie oder zu passend verschlagworteten Beiträgen macht auch hier durchaus Sinn. Was also tun?
WordPress Post Meta Angaben ausblenden – am Beispiel vom Twenty Sixteen Theme
Was seine Anpassungsoptionen betrifft, ist Twenty Sixteen nicht allzu opulent ausgestattet. Entsprechend bietet es auch nicht die Möglichkeit, ungewünschte Post Meta Angaben einfach abzuschalten. Dafür hält es sich, was seinen strukturellen Aufbau betrifft, an Standards. Es benutzt also CSS-Klassen wie .entry-content (Beitragsinhalt), .byline (Autor) oder .posted-on (Veröffentlichungsdatum). Dennoch erfordert es ein wenig Analyse des konkreten Aufbaus, um herauszufinden, wie die einzelnen Elemente angesprochen werden können.
Die drastische Variante: Alle WordPress Post Meta Angaben ausblenden
Das Twenty Sixteen Theme zeigt die Post Meta Angaben links neben dem eigentlichen Beitragsinhalt. Über beiden Spalten thront das Beitragsbild. Verantwortlich für diese grundsätzliche Aufteilung unterhalb des Beitragsbildes sind zwei Container mit den Klassen .entry-footer und .entry-content und ihren CSS-Definitionen.
Der Container mit der Klasse .entry-footer beinhaltet dabei alle WordPress Post Meta Angaben. Wenn Sie diese komplett ausblenden wollen, reicht es, dieser Klasse die entsprechende Definition zu geben. Diese lautet:
.entry-footer {
display:none;
}Dieses Vorgehen ist in jeder Hinsicht drastisch. Nicht nur blendet es wirklich alle Post Meta Angaben aus. Also auch solche wie die Kategorie oder die Schlagwörter, die auch bei nicht als Blog-Post verstanden Beiträgen sinnvoll sind. Es sorgt auch dafür, dass sie auf keiner Seite mehr erscheinen. Das ist keine unerhebliche Erkenntnis. Denn das Theme arbeitet mit einer Unterscheidung von Beitrags- und Archivseiten vor allem im Gegensatz zu Suchergebnisseiten. Mehr dazu später.
Breite des Beitrags
Durch dieses drastische Vorgehen entsteht ganz nebenbei auch ein unschöner Effekt. An der Stelle, wo die Post Meta Angaben bislang standen, erscheint nun nichts mehr. Auch nicht der Beitragstext. Man könnte meinen, dass der sich den nun zur Verfügung stehenden Platz einfach nimmt. Das kann er aber nicht, denn das Theme gibt vor, dass der entsprechende Container nur gut 71% des gesamt zur Verfügung stehenden Raumes einnehmen kann (width). Wir aber gönnen .entry-content nun die volle Breite. Wie bei der Angabe zum Ausblenden des .entry-footer überschreibt auch die Änderung der Breite des .entry-content die im Theme direkt hinterlegte Definition.
Die Definition für .entry-content ist im Twenty Sixteen Theme allerdings ein wenig komplexer. Sie bezieht Unterschiede zur Darstellung des Beitrags als Suchergebnis (.search-result) sowie Unterschiede in der Darstellung unterschiedlicher Inhaltsarten (.type-page) mit ein und lautet deshalb:
body:not(.search-results) article:not(.type-page) .entry-content {
width: 100%;
}Herausfinden lassen sich solche Angaben wie immer mittels der Funktion Element untersuchen (oder Prüfen…) Ihres Browsers.
Das Ergebnis dieser beider CSS-Angaben sieht nun entsprechend aus:
Die bessere Variante: Kategorie und Schlagwörter nicht ausblenden
Selbst wenn Sie gar nicht bloggen wollen, ist es sinnvoll, die Kategorien und Schlagwörter nicht auszublenden. So bieten Sie Ihren Nutzer/innen eine weitere Möglichkeit der Navigation. In diesem Fall müssen wir uns also die einzelnen Posten, die Twenty Sixteen im .entry-footer zusammenfasst, im Detail anschauen:
.byline– Beitragsautor.posted-on– Veröffentlichungsdatum.cat-links– Kategorie(n).tags-links– Schlagwörter.entry-format– Formatvorlage.edit-link– die Möglichkeit des direkten Zugriffs auf die Bearbeitung.comments-link– Link zu den Beitragskommentaren
Um herauszufinden, wie diese Post Meta Angaben genau angesprochen werden, kommen wir nicht um den Blick in die style.css herum. Siehe hierzu: Design -> Editor. Wie bei jedem Theme ist auch die style.css von Twenty Sixteen recht umfangreich. Es macht also viel Sinn, hier die Suchfunktion des Browsers zu nutzen und dort zum Beispiel nach .byline zu suchen. So finden Sie schnell die vorhandene Definition für diverse Elemente, die im Fall von Twenty Sixteen wie folgt lautet:
CSS-Definition Original
.single .byline,
.full-size-link,
body:not(.search-results).group-blog .byline,
body:not(.search-results) .entry-format,
body:not(.search-results) .cat-links,
body:not(.search-results) .tags-links,
body:not(.search-results) article:not(.sticky) .posted-on,
body:not(.search-results) article:not(.type-page) .comments-link,
body:not(.search-results) article:not(.type-page) .entry-footer .edit-link {
display: block;
margin-bottom: 0.5384615385em;
}Kopieren Sie sich Ihr Suchergebnis zu Ihren benutzerdefinierte CSS-Definitionen und schreiben Sie es wie folgt um:
CSS Definition Änderung
.single .byline,
.full-size-link,
body:not(.search-results).group-blog .byline,
body:not(.search-results) .entry-format,
/* body:not(.search-results) .cat-links,
body:not(.search-results) .tags-links, */
body:not(.search-results) article:not(.sticky) .posted-on,
body:not(.search-results) article:not(.type-page) .comments-link,
body:not(.search-results) article:not(.type-page) .entry-footer .edit-link {
display:none;
}display:none; sorgt wieder für das Ausblenden, diesmal allerdings für ausgewählte Post Meta-Angaben. Denn durch Nutzung des Auskommentierens von CSS /* */ sorgen Sie dafür, dass bestimmte Elemente und Klassen von dem Ausblenden unberührt bleiben. Im Beispiel sind die Kategorien und die Schlagwörter entsprechend auskommentiert.
Ihre Website gibt nun in der entsprechenden Spalte links vom Beitragstext die Kategorie(n) und die Schlagwörter aus. Alles andere wird ausgeblendet. Dies gilt allerdings nur – und das ist eine Besonderheit des Twenty Sixteen Themes – auf allen Seiten, die nicht Suchergebnis sind.
Um nun auch die Post Meta Angaben auf der Suchergebnisseite auszublenden, braucht es zudem eine extra Definition:
.search-results .byline,
.search-results .entry-format,
.search-results .posted-on,
.search-results .comments-link,
.search-results .edit-link {
display:none;
}Das Ergebnis sieht dann wie folgt aus:
Weiteres CSS im Beispiel
Nachgeschoben noch für alle, die sich wundern und denken: »So sieht mein Twenty Sixteen aber gar nicht aus…«, hier noch kurz die CSS-Definitionen, die
- die weißen Hintergründe einzelner Container halbtransparent machen (und deshalb das unter Design -> Anpassen hinterlegte Hintergrundbild durchscheinen lassen),
- den Innenabstand vom Text zum Containerrand bestimmen und
- den Seitentitel ausblenden (also auch den Hinweis, auf welcher Kategorie-Seite Sie sich gerade befinden. Auf Unternehmenswebsite, die nicht bloggen, eher unerwünscht):
.site, .site-header-main {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
}
.site-main > article, .page-header, .widget {
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
}
.page-header {
display:none;
}WordPress Post Meta ausblenden für Twenty Nineteen / Twenty / Twenty-One
WordPress Post Meta lassen sich natürlich auch für die letzten drei Standardthemes ausblenden. Dennoch kommt man mit den oben genannten CSS-Angaben nicht weit. Die Theme-Autoren haben halt andere Vorgehen gewählt, an die Sie nun Ihr Vorgehen anpassen müssen. So eröffnen sich recht unterschiedliche Möglichkeiten, auf einzelne oder auf alle Angaben zu verzichten.
Twenty Nineteen
Bei Twenty Nineteen gilt, dass Autor und Datum unterhalb des Titels und dann noch einmal zusammen mit Kategorie und Schlagwörtern unterhalb des Textes erscheinen. Doppelt hält besser, haben sich die Theme-Autoren vielleicht gedacht. Oder aber auch, dass es somit eine Entscheidungsoption gibt, wo denn nun Autor und Datum stehen sollen. Außerdem gibt es noch den gewaltigen Beitrags-Header. Wie man diesen Header loswird, hatte ich schon einmal im Beitrag zum Twenty Nineteen Header gezeigt. Solange es ihn aber gibt, sind es grundsätzlich drei Klassen, die zu beachten sind:
.entry-meta– Autor und Datum oberhalb des Textes.site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta– Autor und Datum im Beitrags-Header und.entry .entry-footer– alle Angaben unterhalb des Textes
Daraus ergeben sich unterschiedliche Möglichkeiten. Zum Beispiel lässt sich kategorisch alles ausblenden. Alternativ kann man die Meta-Angaben aber auch nur auf Archivseiten wie der Kategorie-Seite ausblenden, auf der Beitragsseite selbst aber zeigen. Oder man belässt alles, wie es ist, verzichtet aber auf die doppelte Nennung von Autor und Datum im Footer des Beitrags.
/* Entry Meta komplett ausblenden für Single und Archive */
.entry-meta, .site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta, .entry .entry-footer {display:none;}
/* Entry-Meta ausblenden nur für Archive */
.archive .entry .entry-footer {
display: none;
}
/* Entry-Meta ausblenden nur für Single (mit oder ohne Beitragsbild im Header) */
.single .entry-meta, .site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta, .single .entry .entry-footer {
display: none;
}
/* Autor und Datum im Footer ausblenden */
.entry .entry-footer .byline, .entry .entry-footer .posted-on {display:none;}
Twenty Twenty
Twenty Twenty teilt seine Meta Angaben gleich auf drei Stellen auf. Da gibt es den Bereich oberhalb des Titels, dort erscheint die Kategorie. Oder die Kategorien, wenn es mehrere sind. Unterhalb des Titels stehen Autor, Datum und die Anzahl der Kommentare. Und ganz unten, unterhalb des Textes, gibt es noch die Schlagwörter. Bedeutsam sind drei Klassen:
.entry-categories– die Kategorie/n oberhalb des Titels.post-meta-wrapper.post-meta-single.post-meta-single-top– Autor und Datum unterhalb des Titels.post-meta-wrapper.post-meta-single.post-meta-single-bottom– die Schlagwörter ganz unten
Das Vorgehen ermöglicht es, mit einer CSS-Angabe für Beitrags- und Archivseiten alle Angaben auszublenden. Oder man verzichtet nur auf einzelne Elemente, zum Beispiel die Schlagwörter unterhalb des Beitrags. Auch lässt sich nur die Angabe des Autoren ausblenden – ob nun für Beitrags- und Archivseiten oder (dann mit vorangestelltem .single beziehungsweise .archive) für Beitrags- oder Archivseiten.
/* Post Meta komplett ausblenden für Single und Archive */
.post-meta-wrapper.post-meta-single.post-meta-single-top, .post-meta-wrapper.post-meta-single.post-meta-single-bottom, .entry-categories {
display: none;
}
/* Post Meta ausblenden nur für Archive */
.archive .post-meta-wrapper.post-meta-single.post-meta-single-top, .archive .post-meta, .archive .entry-categories {
display: none;
}
/* Post Meta ausblenden nur für Beitragsseiten */
.single .post-meta-wrapper.post-meta-single.post-meta-single-top, .single .post-meta, .single .entry-categories {
display: none;
}
/* Autor ausblenden auf Beitrags- und Archivseiten */
.post-author.meta-wrapper {display:none;}Twenty Twenty-One
Die Besonderheit bei Twenty Twenty-One ist, dass es auf Archivseiten ohnehin keinen Autoren ausgibt. Auf Beitragsseiten fasst das Theme Autor und Datum unter der Klasse .posted-by zusammen. Dieser Bereich umfasst dann mit .byline den Autor und mit .posted-on das Datum. Beide erscheinen unterhalb des Beitrags im Footer des Beitrags. In dem finden sich dann auch die Kategorien und Schlagwörter.
Wesentliche Klassen bei Twenty Twenty-One sind:
.posted-by– umfasst Autor und Datum.post-taxonomies– für Kategorien und Schlagwörter
Auch für dieses Theme gibt es eine radikale Lösung, mit der sich alle WordPress Post Meta ausblenden lassen. Darüber hinaus lässt sich aber doch differenzierter vorgehen.
/* alle Post Meta Angaben auf Beitrags- und Archivseiten */
.site-main > article > .entry-footer, .single .site-main > article > .entry-footer {display:none;}
/* blendet Autor und Datum aus auf Beitragsseiten */
.single .site-main > article > .entry-footer .posted-by {
display: none;
}
/* blendet nur das Datum aus auf Beitragsseiten */
.single .site-main > article > .entry-footer .posted-on {
display: none;
}
/* blendet nur den Autor aus auf Beitragsseiten */
.single .site-main > article > .entry-footer .byline {
display: none;
}
/* Kategorie und Schlagwörter linksbündig */
.single .site-main > article > .entry-footer .post-taxonomies, .single .site-main > article > .entry-footer .full-size-link {
justify-content: flex-start;
text-align: left;
}
/* blendet alles (Autor, Datum, Kategorie und Schlagwörter) aus auf Beitragsseiten */
.single .site-main > article > .entry-footer
{display: none;}
/* kein Datum auf Archivseiten - Autor erscheint hier ohnehin nicht */
.archive .entry-footer .posted-on, .search .entry-footer .posted-on, .blog .entry-footer .posted-on
{display:none;}
/* auf Archivseiten: Kategorie und Schlagwörter ausblenden */
.archive .post-taxonomies {display:none;}
/* auf Archivseiten: alles ausblenden */
.archive .entry-footer {display:none;} Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar