Willkommen beim WP Wegerl.at 'Lesemodus'!

Entspanntes Lesen und spannende Artikel warten auf dich.

Entdecke unsere besten Beiträge und genieße den Lesemodus.

@EWP, HTML / CSS und Webdesign

Footer ’site-info' in WP-Themes. – gezielt, prägnant, erfolgreich

Lesedauer so 4 Min.
Lernzeit ein wenig mehr 2024-April 2016-März

Bild von Johnny_px

Info echo

Ist der Classic-Editor schon zu kennen? –

"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Classic-Editor mit Advanced Editor Tools

"Advanced Editor Tools – Ausgezeichnet!"
Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …

"Advanced Editor Tools – ist sehr gut!"
Advanced Editor Tools immer NEU – Classic Widgets

Info echo

… die Welt gehört dem, der sie genießt.

– mit Advanced Editor Tools!
Advanced Editor Tools immer NEU! – Classic Widgets

Info echo

Aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Advanced Editor Tools immer NEU! Classic Widgets

Info echo

Antörnend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Advanced Editor Tools immer NEU! – Classic Widgets

Info echo

… Classic Widgets sind so praktisch!

"Classic Widgets – sind so grandiose!"
Advanced Editor Tools immer NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum – Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Advanced Editor Tools – ist so fein!"
Advanced Editor Tools immer NEU! – Classic Widgets

In den Fußzeilen als Footer-Information von WordPress-Themes findet sich oft ein site-info-Bereich, der die Credits für das verwendete Theme und für WordPress anzeigt. Standardmäßig enthält dieser Bereich den Text "Proudly powered by WordPress" (Stolz präsentiert von WordPress), der jedoch angepasst werden kann, um den eigenen Voraussetzungen zu entsprechen. Zusätzliche Informationen können ebenfalls hinzugefügt werden. Die Textfarbe und der Text selbst können einfach über CSS angepasst werden. Darüber hinaus können Anpassungen auch direkt in der footer.php vorgenommen werden.

Unter "Credits" versteht man …

Unter "Credits" versteht man im Allgemeinen die Anerkennung oder Nennung der Personen, Organisationen oder Quellen, die an der Erstellung oder Bereitstellung eines Projekts, einer Website, einer Software oder eines kreativen Werks beteiligt waren. Credits dienen dazu, die Leistungen und Beiträge der beteiligten Personen zu würdigen und ihnen Anerkennung zukommen zu lassen. Dies kann beispielsweise in Form von Namensnennungen, Logos, Links oder einer speziellen Rubrik auf der Website oder in einem Dokument erfolgen. Credits sind eine Möglichkeit, den Beitrag und die Zusammenarbeit verschiedener Personen oder Organisationen bei einem Projekt zu dokumentieren und zu würdigen.

Wer einfach das "Stolz präsentiert von WordPress" mitsamt dem Slash ausgeblendet haben will:

/* Stolz präsentiert von WP ausblenden */
.imprint {
    visibility: hidden;
}
.site-info span[role="separator"] {
    display: none;
}

Anmerkung: Der Hinweis zu WordPress mit Verlinkung könnte man lt. Netz auch ins Impressum schreiben.

Thread: Stolz präsentiert von WordPress im Footer entfernen.

In der Webentwicklung wird der Footer oft mit Navigationsleiste, Copyright-Hinweis, Impressum oder Kontaktinformationen assoziiert.

Inhaltsverzeichnis

Footer-Information in der Fußzeile anpassen, CSS

Eine ansprechende und gut gestaltete Site-Info kann dazu beitragen, dass Besucher die Website positiv im Gedächtnis behalten. Daher ist es empfehlenswert, auch diesem Bereich der Website besondere Aufmerksamkeit zu widmen und ihn entsprechend zu gestalten.

Farbe vom Text der Site-Info, Fußzeile (Stolz präsentiert von WordPress) ändern.

/* Site-Info WordPress, die Schriftfarbe */
.site-info > a {
    color: rgb(83,87,128, 0.6) !important;
}

.site-info > a:hover {
    color: #B15449 !important;
}

Code-Schnipsel zur Anpassung der Site-Info und Fußzeile in WordPress-Themes

Hier sind drei separate Code-Schnipsel, die jeweils verschiedene Aspekte der Site-Info und Fußzeile von WordPress-Themes behandeln.

/* Site-Info ausblenden und Fußzeile belassen" */
.site-info > a {
    display: none;
} 

/* Site-Info in der Fußzeile zentrieren */
.site-footer .site-info {
    text-align: center;
} 

/* Site-Info Text und Farbe anpassen */
.site-info:after {
    color: #b5b5b5;
    content: "Text(Name), gern by WordPress";
    display: inline;
}

Die Attributwerte individuell.

Ändern der Fußzeile über footer.php

Die Inhalte der Fußzeile eines WordPress-Themes können mithilfe der footer.php-Datei bearbeitet werden. Zum Beispiel kann der Standardtext "Proudly powered by WordPress" durch den Text "Entworfen mit WordPress" ersetzt werden, indem der entsprechende Text in der footer.php-Datei angepasst wird. Der Text Proudly powered by %s, wobei das %s für WordPress steht, kann je nach Bedarf weiter angepasst werden.

Hierzu dieser Hinweis (alle drei Seiten! – schöner Informationsverlauf), insbesondere die Einsicht zu den Dateien de_DE.mo und de_DE.po . – Also alleinig die Datei theme-de_DE.po zu editieren funktioniert nicht. Zur Bearbeitung der Datei theme-de_DE.mo findet sich das Tool POEDIT zurecht.

In meiner Version des Themes habe ich den Standardtext Proudly powered by %s durch Hardcoding in Powered by %s geändert. Der Form würde das nach Theme Update zu wiederholen sein. – Da ist es wohl am gescheitesten, die gesamte Datei auch in das Childs-Theme zu kopieren.

Die Snippets zur functions.php ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – bleibt das auch nach Theme-Update so.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Informationen in die Fußzeile setzen

In der Fußzeile einer Website können zusätzliche Informationen wie Copyright-Hinweise, das Jahr oder der Name des Unternehmens angezeigt werden. Diese Informationen können einfach über CSS in die gewünschte Position gebracht werden. Eine Möglichkeit ist, den Hinweis auf WordPress (ggf. mit der oben genannten Anpassung) und die zusätzlichen Informationen rechts auszurichten, indem man sie mit float: right versieht.

/* Site Info */
.site-info:after {
    float: right;
    color: rgb(151, 155, 179, 0.7) !important;
    content: "Ditmar Winkler, Website Jahr 2015–heute";
}

Website-Info und Footer-Navigation von Impressum und Datenschutz. – responsive.

Das Ziel ist es, sowohl die Website-Informationen als auch die Navigationselemente im Footer, wie Impressum und Datenschutz, zentriert zu positionieren und ein responsives Design zu gewährleisten. In diesem Beispiel wird das mit dem Twenty Fourteen Theme erreicht.

Die Platzierung erfordert die Integration des entsprechenden HTML-Codes in die footer.php-Datei und die Anpassung der Fußzeile mit CSS. Das 'Powered by WordPress' wird linksbündig, die Impressum- und Datenschutz-Navigation wird mittig und die Site-Info wird rechtsbündig angezeigt.

Für eine responsive Darstellung werden die drei Elemente untereinander angeordnet und automatisch bis zu einer Bildschirmbreite von 425px ausgerichtet. Der CSS-Code wird im Customizer als "Inline-Code" abgespeichert.

Inline-Code: Definition und Anwendung

Inline-Code bezieht sich auf Codefragmente oder Textelemente, die innerhalb eines Textes oder einer Beschreibung eingebettet sind und visuell hervorgehoben werden. Dieses Format kennzeichnet Codebeispiele, Variablen, Funktionen oder andere Programmierkonstrukte, um sie von normalem Text zu unterscheiden. Durch die direkte Platzierung des Codes im HTML oder in den Attributen wird sichergestellt, dass spezifische Anpassungen Vorrang haben und nicht durch allgemeine Theme-Stile überschrieben werden.

Der Inline-Code im Customizer bietet eine einfache und effiziente Möglichkeit, visuelle Änderungen vorzunehmen und sicherzustellen, dass diese Änderungen Vorrang haben und nicht durch das Theme beeinflusst werden. Dies ist besonders hilfreich, wenn spezifische Anpassungen erforderlich sind, um das gewünschte Design zu erreichen. Durch die direkte Platzierung des Codes im HTML oder in den Attributen wird gewährleistet, dass die spezifischen Anpassungen Vorrang haben und nicht durch allgemeine Theme-Stile überschrieben werden.

Insgesamt ermöglicht der Inline-Code im Customizer eine präzise und maßgeschneiderte Anpassung des Erscheinungsbilds einer Website, wodurch Benutzer die volle Kontrolle über das Design haben und sicherstellen können, dass ihre spezifischen Anforderungen erfüllt werden. Es ist jedoch wichtig, den Inline-Code mit Bedacht einzusetzen und sicherzustellen, dass er leicht wartbar bleibt und die Gesamtintegrität des Codes und des Designs nicht beeinträchtigt.

Zunächst das HTML: Der folgende Beispiel-HTML-Code kann in die footer.php eingefügt werden:

<div class="impr-datens">
				<a style="color: #A89E90; letter-spacing: 1px;" href="https://../impressum/">IMPRESSUM</a> / 
				<a style="color: #A89E90; letter-spacing: 1px;" href="https://../datenschutz/">DATENSCHUTZ</a></div>
				<span class="author-info" style="color: #A89E90;">Max Musterman, Website Jahr 2015-heute</span>

Infolge ist des Beispiels im Twenty Fourteen Theme abzuspeichern:

Im Anschluss ist es erforderlich, den Code mit CSS zu formatieren, um die Footer-Navigation gemäß der gewünschten Anordnung darzustellen. Um sicherzustellen, dass alles einwandfrei funktioniert, sollte dieser Teil als "Inline-Code" im Customizer gespeichert werden. Hier ist der entsprechende Code:

/* === Fußzeile, Footer; Inline-Code! === */

/* Formatierung */
.site-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Impressum / Datenschutz */
.impr-datens {
    flex: 1;
    text-align: center;
    font-size: 13px;
}

.impr-datens a:hover {
    color: #b15449 !important;
}

/* Powered by WordPress */
.site-info > a {
    font-size: 12px;
    color: #a89e90 !important;
    margin-right: 20px;
}

.site-info > a:hover {
    color: #2b2b2b !important;
}

/* Für Mobil abstand und untereinander */
@media (max-width: 425px) {
    .impr-datens {
        margin-top: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 425px) {
    .site-info {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* = ENDE Fußzeile, Footer. = */

Du kannst diesen Code verwenden und weitere Anpassungen vornehmen, um die gewünschte Darstellung der Footer-Navigation zu erzielen.