„Zum Inhalt springen“ Twenty Nineteen

Gelöst tron0070
(@tron0070)

vor 4 Jahren, 11 Monaten
Hallo Leute, habe eine WordPress Installation mit dem „Twenty Nineteen“ Theme.
Die Seite ist nur offline verfügbar, daher keine Link.

Twenty Nineteen: Version: 1.3
Wordpress: Version 5.1.1

Wenn ich in einem Beitrag ein „Beitragsbild“ angebe wird bei öffnen des Beitrages zuerst das Bild in voller Bildschirmhöhe angezeigt.

Das „Twenty Nineteen“ Theme hat links oben einen „Zum Inhalt springen“ Button welcher aber nicht sichtbar ist und auch nicht ohne weiteres angeklickt werden kann.

Wenn ich im Firefox (FF) den Cursormodus mit F7 aktiviere ist es möglich dorthin zu gelangen und zu aktivieren. Der Link funktioniert auch und ich gelange zum Inhalt.

Nur wie kann ich den sichtbar machen?
Ich kann das Design änder aber ich bekomme ihn nicht sichtbar.
Hat jemand ne Idee?

Gruß Tron
```
a.skip-link.screen-reader-text{
background-color: red;
  height: 200px;
  width: 50%;
position: absolute;
  right: 100px;
  top: 1000px;
z-index: 100000;
}
```
- Dieses Thema wurde geändert vor 4 Jahren, 11 Monaten von tron0070.
- Dieses Thema wurde geändert vor 4 Jahren, 11 Monaten von tron0070.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Thread-Starter tron0070
(@tron0070)

vor 4 Jahren, 11 Monaten
Hallo nochmal,
ich habe es jetzt hinbekommen, dass die Schaltfläche sichtbar ist. Aber ist das denn so normal, dass die Schaltfläche ausgeblendet wird? Gibt es den Themeeinstellungen keine Option dafür?

Hier mal der code mit dem die Schaltfläche erstmal sichtbar wird, aber noch nicht sehr schön aussieht.
```
.screen-reader-text{
    clip-path:none;
    position: relative !important;
}
```
Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 11 Monaten

Hallo,
unter der Voraussetzung, dass ich das richtig verstanden habe, könnte ich mir nur eine Änderung insofern vorstellen, indem Du ein childtheme erstellst und in diesem childtheme eine geänderte single.php speicherst.
Diese single.php müsste dann an entsprechender Stelle die folgende Zeile enthalten:
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentynineteen' ); ?></a>
Dabei könntest Du natürlich noch eine andere CSS-Klasse in die style.css packen, damit das entsprechend anders gestaltet ist.

Moderator La Geek
(@la-geek)

vor 4 Jahren, 11 Monaten

@tron0070

Wie der Name schon vermuten lässt, ist das ein Hilfsmittel um die Zugänglichkeit zu verbessern, für Leute, die Screenreader nutzen müssen, weil sie schlecht oder gar nicht sehen können. Deshalb ist der Button auch nicht sichtbar.

Wenn du es dennoch machen möchtest, dann musst du auch den Status :focus berücksichtigen.

Thread-Starter tron0070
(@tron0070)

vor 4 Jahren, 11 Monaten

Hallo Angelika und Hans,
vielen Dank für Eure hilfreichen Beiträge.

Richtig. Screenreader. Die Bedeutung ist mir vorher gar nicht aufgefallen.
Dennoch ist so ein Link, der das Beitragsbild überspringt, welches den ganzen Bildschirm einnimmt ganz nützlich. So habe ich es auch bei anderen Themes gesehen.

In einem Child Theme die single.php bearbeiten ist auch eine tolle Idee. Bisher bin ich noch am Anfang und habe mit mühe überhaupt ein Child Theme erstellen können welches auf das Parent Theme zeigt, um nicht mit einer unformatierte Seite zu arbeiten zu müssen. Mir kommen die Anleitung für Child Themes im Netz unvollständig vor. Aber das wird evtl. ein anders Thema werden.

Im endeffekt habe ich erstmal im Beitrag oder in der Seite, welches ein Beitragsbild enthält, einen Gutenberg Block erstellen der den Link „#content“ enthält und dies via CSS designt, positioniert und Scroll-smooth gemacht.

Vielen Dank nochmal.

Gruß Tron

Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 11 Monaten

Hallo Tron,
gerne – hier noch ein Link zu einer Anleitung zur Erstellung eines childthemes.
Viele Grüße
Hans-Gerd

Thread-Starter tron0070
(@tron0070)

vor 4 Jahren, 11 Monaten

Vielen Dank Hans-Gerd,
Danke für den Link.

Komischerweise funktionieren jetzt die Anleitungen auch die in Deinem Link. Vermutlich lag es an den Dateirechten die ich zwischenzeitlich angepasst habe.

Ich hatte vermutet das die functions.php fehlerhaft waren. Diese Sahen in den Anleitung immer Verschieden aus und hatte ein Branding vom ersteller. Und was mir auch zu denken gab, warum bei manchen Anleitungen der php-tag nicht geschlossen wurde „?>“.

Gruß Tron

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Das Thema „„Zum Inhalt springen“ Twenty Nineteen“ ist für neue Antworten geschlossen.

„Zum Inhalt springen“ Twenty Nineteen

Themen-Schlagwörter

Ansichten