Im letzten Beitrag ging es um den WordPress Auszug, also um die Kurzdarstellung von Beiträgen auf Archivseiten wie den Kategorieseiten. Themes wie Twenty Sixteen und das aktuellere Twenty Seventeen stellen für den automatischen Auszug und den Teaser den Linktext Weiterlesen bereit. Für den manuellen Auszug braucht es eine zusätzliche Codezeile, die dann ebenfalls diesen Linktext ausgibt. Was aber tun, wenn man sich statt des schlichten Textes einen Weiterlesen Button wünscht?
Vom schlichten Link zum Weiterlesen Button: automatische Auszüge und Teaser
Wenn Sie keine Änderungen an Ihrem Theme vorgenommen haben und für Ihre Beiträge mittels des More tags Teaser erstellen, produzieren Twenty Sixteen und Twenty Seventeen für Sie automatisch einen Weiterlesen-Link. Dieser erscheint bei Twenty Sixteen in der letzten Zeile des Teasertextes, während Twenty Seventeen ihn in einer neuen Zeile ausgibt. Ansonsten sind sich die beiden Links relativ ähnlich: Sie reagieren beide, wenn die Mouse über sie fährt, mit einem kleinen Hover-Effekt, bei dem sich entweder die Schriftfarbe ändert und der Unterstrich verschwindet (Twenty Sixteen) oder der Unterstrich einfach nur fetter erscheint (Twenty Seventeen).
Zielsetzung
Beide Themes sollen einen Button zeigen, der sich wie der Senden-Button des Kommentarfeldes bei beiden Themes verhält. Sprich: In seinem Urzustand soll der Button weiße Schrift auf schwarzem Grund zeigen, während der Hover-Effekt dafür sorgt, dass der Button blau (Twenty Sixteen) beziehungsweise grau (Twenty Seventeen) wird.
Außerdem soll der Button natürlich (auch bei Twenty Sixteen) in einer neuen Zeile erscheinen.
Für die folgenden CSS-Angaben gilt: Für beide Themes können Sie diese im Rahmen des Zusätzlichen CSS des Themes (Design > Customizer) hinterlegen.
Die CSS-Definition für beide Themes
Die CSS-Änderungen für den Button an sich lautet für beide Themes gleich. Änderungen ergeben sich erst in Hinblick auf den Hover-Effekt.
Beide Themes nutzen die Klasse .more-link, die nun eine Hintergrundfarbe bekommt: #222 entspricht nicht wirklich einem tiefen Schwarz, sorgt aber für einen angenehmeren Kontrast zur Schriftfarbe #f3f3f3, die auch nicht ganz weiß ist. Für fette Schrift sorgt das font-weight von 800. Für den nötigen Innenabstand sorgt das padding von 15px in alle Himmelsrichtungen. Damit der Button leicht abgerundete Ecken hat, enthält die Definition einen kleinen border-radius von 2px. Die Angabe display: block sorgt dafür, dass der Button seine eigene Zeile nutzt. Damit aber nicht die komplette Zeile schwarz eingefärbt ist, erhält der Button eine Breite von 130px. Etwas Außenabstand nach oben sorgt schließlich dafür, dass der Button nicht am vorherigen Text klebt.
.more-link {background-color: #222; color: #f3f3f3; font-weight: 800; padding: 15px; border-radius: 2px; display: block; width: 130px; margin-top: 15px; }Hover-Effekt für Twenty Sixteen
Für den Hover-Effekt braucht es bei Twenty Sixteen nur noch die Änderung der Hintergrund- und der Schriftfarbe:
.more-link:hover {background-color: #007acc; color: #f3f3f3; }Schon sieht ein Teaser (oder ein automatischer Auszug) auf Archivseiten wie folgt aus:
Hover-Effekt für Twenty Seventeen – und: was vor dem Button passiert
Twenty Seventeen bringt eine eigene Definition dafür mit, dass der Weiterlesen-Link in einer neuen Zeile erscheint. Zu dieser Definition gehört ein Außenabstand nach oben von 1.5em. Den brauchen wir nun nicht mehr. Deshalb müssen wir den erst einmal aufheben. Dafür muss der Klasse .more-link mit der Pseudoklasse :before unbedingt die Klasse .entry-content vorangestellt werden.
.entry-content .more-link:before {margin-top:0; }Für den Hover-Effekt braucht es neben der neuen Hintergrund- und der neuen Schriftfarbe auch das Aufheben der vorhandenen Angaben für den box-shadow (mit den Variationen webkit- und moz- für unterschiedliche Browser) und der transition. Auch hier ist es nötig, der Klasse .more-link mit der Pseudoklasse :hover unbedingt die Klasse .entry-content voranzustellen, sonst würden die in der style.css vorhandenen Angaben nicht überschrieben werden.
.entry-content .more-link:hover {background-color: #007acc; color: #f3f3f3; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; transition:none;}Das Ergebnis sieht bei Twenty Seventeen dann wie folgt aus:
Weiterlesen Button für manuelle Auszüge – Twenty Seventeen
Wenn Sie hingegen mit manuellen Auszügen arbeiten (wie im Beitrag letzte Woche beschrieben) braucht es ein anderes Vorgehen. Der in die content-excerpt.php des Themes Twenty Seventeen eingefügte Weiterlesen-Link lässt sich über die Klasse .entry-summary ansprechen. Die nötigen Definitionen lauten:
.entry-summary a {background-color: #222; padding: 15px; color: #f3f3f3; border-radius: 2px; font-weight: 800;}
.entry-summary a:hover {background-color: #666; box-shadow: none; color: #f3f3f3;}Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar