Internetkurse Köln

Das aktuelle Standardtheme Twenty Seventeen ist auf den ersten Blick zwar sehr attraktiv, hat aber so seine Haken und Ösen (Header, keine Sidebar auf Seiten). Deshalb kann man durchaus auf die Idee kommen, beim Standard des letzten Jahres zu bleiben. Zwar hat auch Twenty Sixteen einen Aspekt, der nicht jedem gefällt: die Darstellung der Beiträge als Zweispalter mit den Metaangaben links vom Beitragscontent. Doch lässt sich auch im Fall von Twenty Sixteen die Darstellung der WordPress Beitragsseite anpassen. Dafür braucht es zwar einige CSS-Änderungen, immerhin aber keinerlei Änderung der Templates. Somit ist auch kein Child Theme nötig: Geben Sie alle folgenden Angaben einfach in das zusätzliche CSS des Themes ein, dann sind sie auch updatesicher.

WordPress Beitragsseite anpassen: Zielsetzung

Die Zielsetzung ist eigentlich ganz einfach: Statt der Aufteilung von Beitragscontent und Metaangaben wie Autor, Datum, Kategorien und Schlagwörter in zwei Spalten soll der Content die volle zur Verfügung stehende Breite nutzen. Die Metaangaben ihrerseits sollen unterhalb des Contents nebeneinander erscheinen und dabei ebenfalls die volle Breite nutzen. So sollen sie sowohl auf einzelnen Beitragsseiten als auch auf der Blogseite sowie auf allen Archivseiten erscheinen. Letztlich bedeutet diese Zielsetzung auch, dass sie so aussehen sollen, wie es im Rahmen der mobilen Darstellung ohnehin schon geschieht.

Media Query für die Desktop-Darstellung

Daraus folgt, dass die Anpassungen nun nur für die Desktop-Darstellung notwendig sind. Wir sprechen hier von Geräten mit einer Breite von mehr als 985 Pixeln. Oder in der relativen Maßeinheit em ausgedrückt: Es geht hier um Geräte mit einer Breite von mehr als 61.5625 em. Mit dieser sogenannten media query arbeitet das Theme bereits, und Sie benutzen sie nun auch:

@media screen and (min-width: 61.5625em) { }

Übernehmen Sie diese media query in Ihr zusätzliches CSS und geben Sie alle folgenden Anpassungen zwischen den beiden geschwungenen Klammern ein. Somit stellen Sie sicher, dass sie nur wirken im Kontext der Darstellung auf Desktop und nicht etwa auf Mobilgeräten.

Die volle Breite nutzen: .entry-content und .entry-footer

Wenngleich das Theme die Metaangaben im Fußbereich des Beitrags (.entry-footer) zusammenfasst, befindet sich dieser im Originalzustand links vom Content. Namen sind eben doch nur Schall und Rauch. Indem beide Elemente nicht länger schweben (float) und eine Breite von 100 Prozent erhalten, kehrt der Beitragsfooter nun auch wieder zu seiner Bedeutung zurück: Er befindet sich damit unterhalb des Contents. Und damit dieser Fußbereich nicht so sehr am Content klebt, gibt es ein wenig Außenabstand von 25px.

body:not(.search-results) article:not(.type-page) .entry-content, body:not(.search-results) article:not(.type-page) .entry-footer 
{float:none; width: 100%;}

.entry-content {margin-bottom: 25px;}

Die Metaangaben nebeneinander ausgeben

Allerdings listen sich nun noch immer alle Elementen innerhalb dieses Footers untereinander auf: Autor, Datum, Kategorie etc. Deshalb braucht jedes von ihnen die Definition, nun bitte nebeneinander zu erscheinen, das heißt: zu floaten.

.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
{float: left;}

Wenn Sie einzelne Elemente wie zum Beispiel den Autoren und/oder das Datum hier gar nicht ausgeben wollen: siehe meinen Beitrag zum Thema Post Meta Angaben!

Wirklich gut sieht das Ganze ohnehin noch nicht aus. So kleben zum Beispiel die einzelnen Elemente aneinander. Und der Avatar des Autoren erscheint viel zu groß. Das müssen wir noch ändern.

Abstand der einzelnen Metaangaben mit einem Slash

Bei der mobilen Darstellung nutzt Twenty Sixteen einen Schrägstrich (Slash) zur Trennung der Metaangaben. So soll es jetzt auch auf dem Desktop aussehen. Die folgende Definition sorgt übrigens auch dafür, dass nach dem letzten Element kein Schrägstrich mehr erfolgt.

body:not(.search-results) article:not(.type-page) .entry-footer > span:not(:last-child):after
{content: "\002f"; display: inline-block; opacity: 0.7; padding: 0 0.538461538em;}

Die Größe des Avatars anpassen – oder den Avatar ausblenden

Nun passt die Größe des Avatars, also des Bildchens, das für den Autoren steht, noch nicht so recht. Allerdings stellt sich die Frage, ob man den blassen Typ vor grauer Wand überhaupt ausgeben möchte. Denn genau der wird angezeigt, wenn Sie nicht die Gravatar-Funktion benutzen. Sprich: Damit Ihr Bild erscheint, müssten Sie dies bei Gravatar mit der E-Mail-Adresse verbinden, die auch hinter Ihrem WordPress-Konto steht.

Wenn Sie den Avatar nutzen möchten, lautet die Definition:

body:not(.search-results) article:not(.type-page) .entry-footer .avatar
{display: block; height: auto; margin: 0 0.5384615385em 0 0 ; width: 20px; float:left;}

Wenn Sie den Avatar ausblenden wollen:

body:not(.search-results) article:not(.type-page) .entry-footer .avatar
{display: none;}

Den Slash nach dem Avatar ausblenden

Den Slash nach dem Avatar sollten Sie aber auf jeden Fall ausblenden:

body:not(.search-results) article:not(.type-page) .entry-footer > span .author.vcard::after
{display:none;}

Wenn Sie sich nicht vertippt haben oder sich nicht sonst ein Fehlerteufel eingeschlichen hat, sollten Ihre Beiträge nun in etwa so aussehen:

Beitragsbild: Britta Kretschmer