Twenty Twenty und Child-Theme: Pflichtlinks im Footer einfügen

In diesem Beitrag sehen Sie, wie man bei Twenty Twenty mit einem Child-Theme die Pflichtlinks zum Impressum und zur Datenschutzerklärung ganz dezent im Footer unterbringen kann.

Um in Twenty Twenty die Pflichtlinks im Footer einzufügen benötigen Sie ein Child-Theme. Das können Sie entweder fertig herunterladen oder Schritt für Schritt selbst erstellen:

• Ein fertiges Child-Theme für Twenty Twenty herunterladen
• Ein Child-Theme für Twenty Twenty Schritt für Schritt selbst erstellen

Überblick: PHP-Template anpassen im Child-Theme

Beim Ändern eines PHP-Templates begegnet Ihnen eine Menge Quelltext, aber Sie müssen dazu weder PHP noch CSS fließend sprechen oder schreiben können. Meist genügt es, die richtige Stelle zu finden und dann vorsichtig zu ändern. Der typische Ablauf einer Template-Anpassung ist wie folgt:

1. Die richtige Stelle im Quelltext finden.
2. Das Original-Template vom Eltern-Theme-Ordner in den Child-Theme-Ordner kopieren.
3. Das Template im Theme-Editor des Child-Themes öffnen und die zu ändernde Stelle finden.
4. Template des Child-Themes ändern und speichern.
5. Anpassungen ggfs. per CSS gestalten

Das klingt recht kompliziert, ist aber ungefährlich. Solange Sie eine FTP-Verbindung zu Ihrem Webspace haben, können Sie eventuelle Fehler leicht wieder ausbügeln. Wie das geht, wird weiter unten beschrieben.

Schritt 1: Die richtige Stelle im Quelltext finden

Die Analyse zum Aufbau des Fußbereiches starten Sie am besten im Entwicklertools eines Browsers. Die folgende Abbildung zeigt den Footer von Twenty Twenty im Entwicklertool des Firefox.

Der Fußbereich beginnt mit dem Anfangs-Tag <footer> (1), in dem ein div-Element mit der Klasse section-inner liegt. In diesem gibt es noch ein div-Element mit der Klasse footer-credits (2), in dem zwei Absätze aufbewahrt werden:

• Der erste Absatz hat die Klasse footer-copyright . 
• Der zweite Absatz mit der Klasse powered-by-wordpress enthält den Link zu WordPress.org.

Danach könnte man gut einen neuen Absatz mit den Links zu Impressum und Datenschutz einfügen.

Schritt 2: Template in den Child-Theme-Ordner kopieren

Im folgenden ToDo erstellen Sie eine Kopie des Templates footer.php und fügen diese im Child-Theme-Ordner wieder ein.

Schritt 3: Die richtige Stelle im Template finden

Der nächste Schritt ist es, die footer.php im Theme-Editor zu öffnen und dort die richtige Stelle zu finden.

Ausgewählt ist das Child-Theme (1), der Theme-Footer erscheint in der Liste der Templates (2) und die Datei ist mit einem Klick im Editor geöffnet worden (3). Ganz oben sehen Sie folgenden Quelltext:

  </p><!-- .powered-by-wordpress -->

</div> <!-- .footer-credits -->

Zwischen dem Ende des Absatzes und dem schließenden </div> fügen Sie im nächsten Schritt einen neuen Absatz mit den Pflichtlinks ein.

Schritt 4: Einen Absatz mit den Pflichtlinks einfügen

Nach der Analyse folgt jetzt die Umsetzung. Zunächst einmal benötigen Sie den Quelltext, den Sie im Template einfügen möchten. Das folgende Listing zeigt zwei Links zu Impressum und Datenschutz, die von einem Absatz mit der Klasse rechtliches umschlossen werden:

<p class="rechtliches">
  <a href="#">Impressum</a> <a href="#">Datenschutz</a>
</p>

Das Rautezeichen im Attribut href dient als Platzhalter und sollte durch die jeweiligen URLs zu den beiden Seiten ersetzt werden, z. B. https://meine-domain.de/impressum/. Im folgenden ToDo fügen Sie diesen Quelltext im Template ein.

Im Theme-Editor sieht der Quelltext danach so aus wie in der folgenden Abbildung:

Falls alles geklappt hat, sieht das Frontend in der mobilen Ansicht ungefähr so aus wie in der folgenden Abbildung und Sie können mit Schritt 5 weitermachen. Falls das Frontend anders aussieht – keine Panik. Lesen Sie einfach weiter. Nach der Abbildung folgt die Lösung für den Notfall.

Schritt 5: Die Pflichtlinks in der Desktop-Version gestalten

Die Pflichtlinks sind jetzt im Footer und es sieht gar nicht so schlecht aus:

• In der mobilen Version wird »Powered by WordPress« ausgeblendet und die Pflichtlinks stehen direkt unter dem Copyright-Hinweis. Perfekt.
• In der Desktop-Version stehen »Powered by WordPress« und der Link zum Impressum ein bisschen sehr dicht aufeinander, und ein bisschen Abstand zum vorherigen Absatz wäre nicht schlecht.

Mit dem folgenden CSS, das Sie im Theme-Editor in der style.css des Child-Themes speichern können, bekommt der Absatz mit der Klasse rechtliches einen linken Margin von 2.4rem:

/* Pflichtlinks für die Desktop-Version gestalten */ 
@media ( min-width: 700px ) {
	.rechtliches {
		margin: 0 0 0 2.4rem;
	}
}

Genau diesen Abstand hat der Absatz »Powered by WordPress« auch. Im folgenden ToDo setzen Sie das um.

Nach diesem Schritt sieht auch in der Desktop-Version alles gut aus: