Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
site-info
smilies.4-user.de

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

Bild von Johnny_px
Werbung

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.




Werbung

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.




Werbung

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.




Werbung

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.





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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.

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! – so bleibt das auch nach Theme-Update.
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";
}
ATDSPHOTO

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:

site-info

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.

Verleihe deiner Fußzeile mehr Bedeutung! Gestalte sie mit ansprechenden Hinweisen, um deine Website-Besucher zu erreichen.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024 April