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

Vogel 'Blaue Felsdrossel' von Johnny_px

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter. Info

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle. Info

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

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

Snippets functions.php, CSS und JavaScript: das Child-Theme. Spezifisch, CSS+JS: das Plug-in Header Footer Code Manager. Zum Workflow und Browser Cache siehe 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 oder im Child-Theme in separater Datei mit höherer Priorität.

Hier ist der entsprechende Code:

/* === Fußzeile, Footer === */

/* 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.

Hier ist unser CSS für die Fußzeile:

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

/* Formatierung */
.site-info {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(
        90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(241, 248, 255, 1) 100%
    );
    background: -webkit-linear-gradient(
        90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(241, 248, 255, 1) 100%
    );
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(241, 248, 255, 1) 100%
    );
    position: relative;
}

.site-info {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #fff, #d1d6da, #fff) 1;
    border-image-slice: 1;
    box-shadow: 0px 1px 0px 0px #fff, 0px 1px 0px 0px #d1d6da,
        0px -1px 0px 0px #fff, 0px -1px 0px 0px #d1d6da; /* Box-Shadow für obere Border */
}

.site-info {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #fff, #d1d6da, #fff) 1;
    border-image-slice: 1;
    box-shadow: 0px 1px 0px 0px #fff, 0px 1px 0px 0px #d1d6da;
    /*border-image: linear-gradient(to right, #fff, #D1D6DA) 1;*/
}

[nighteyeplgn="active"] .site-info {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #2b2b2b, #d1d6da, #2b2b2b) 1;
    border-image-slice: 1;
    box-shadow: 0px 1px 0px 0px #2b2b2b, 0px 1px 0px 0px #d1d6da;
}

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

/* Powered by WordPress */
.site-info > a {
    font-size: 12px;
    color: #535780;
    margin-right: 102px;
}

.site-info > a:hover {
    color: #49a7d6;
}

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

.impr-datens a {
    letter-spacing: 1px;
    color: #535780;
}

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

.author-info a {
    color: #535780 !important;
}

.author-info a:hover {
    color: #cd5606 !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;
    }
}

/* CSS-Regel, um das Pop-up zu verstecken */
.popup {
    display: none !important;
    visibility: hidden !important;
}

/* = ENDE Fußzeile, Footer. = */