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:


Ü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.

Child-Theme: Site-Footer im Entwicklertool des Firefox
Child-Theme: Site-Footer 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.

ToDo: Template kopieren und im Child-Theme-Ordner einfügen

  1. Erstellen Sie eine FTP-Verbindung zu Ihrem Webspace und wechseln Sie in den Ordner für das Parent-Theme twentytwenty.
  2. Erstellen Sie auf Ihrem Computer einen Ordner zum Aufbewahren der Original-Templates, den Sie z. B. twentytwenty-original-templates nennen
  3. Laden Sie das Template footer.php herunter auf Ihren Computer und speichern Sie es in dem eben erstellten Ordner.
  4. Wechseln Sie im FTP-Programm in den Child-Theme-Ordner.
  5. Laden Sie das auf Ihrem Computer gespeicherte Template footer.php hoch in den Child-Theme-Ordner.

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.

Child-Theme: Site-Footer im Theme-Editor
Child-Theme: Site-Footer im Theme-Editor

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.

ToDo: Die Pflichtlinks in der »footer.php« einfügen

  1. Wechseln Sie in das Menü Design > Editor.
  2. Öffnen Sie das Template footer.php aus dem Child-Theme-Ordner.
  3. Fügen Sie an der oben beschriebenen Stelle den Absatz mit den Pflichtlinks ein.
  4. Prüfen Sie, ob Sie alles stimmt.
  5. Klicken Sie auf die Schaltfläche Datei aktualisieren.
  6. Wechseln Sie ins Frontend und prüfen Sie, ob alles geklappt hat.

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

Die Pflichtlinks im Theme-Editor
Die Pflichtlinks im Theme-Editor

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.

Die Pflichtlinks im Frontend - mobile Ansicht
Mobil – alles okay

Falls was kaputt geht – keine Panik. FTP.

Wenn Sie bei der Bearbeitung irgendwo ein entscheidendes Semikolon vergessen haben und der Footer kaputt ist oder Sie vielleicht nur noch eine weiße Seite im Browser sehen, gibt es per FTP einen beruhigenden Notausgang:

  1. Stellen Sie eine FTP-Verbindung zum Webspace her.
  2. Wechseln Sie in den Child-Theme-Ordner.
  3. Geben Sie dem bearbeiteten Template mit dem Fehler einen anderen Dateinamen wie z. B. `footer_kaputt.php`.

Wenn das Template im Child-Theme-Ordner einen anderen Dateinamen hat, benutzt WordPress automatisch wieder das Original, die Website funktioniert wieder, und Sie können versuchen, in dem umbenannten Template den Fehler zu finden.


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.

ToDo: Die Pflichtlinks per CSS gestalten

  1. Wechseln Sie in den Theme-Editor und öffnen Sie die Datei style.css.
  2. Fügen Sie unter dem Kommentar das oben gezeigte CSS ein.
  3. Klicken Sie auf die Schaltfläche Datei aktualisieren.
  4. Wechseln Sie ins Frontend und prüfen Sie, ob alles geklappt hat.

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

Die Pflichtlinks im Frontend - Desktop-Ansicht
Die Pflichtlinks im Frontend – Desktop-Ansicht

Diesen Beitrag weiterempfehlen:

Schreibe einen Kommentar