Hier wird beschrieben, wie man in von mir benutzten Webseiten eine globale Topbar implementieren kann.

Die Vorlage habe ich von https://www.dokuwiki.org/ verwendet, die sieht einfach super aus :)

Der HTML-Code ist rein statisch.

Das CSS wird von einer URL heruntergeladen, damit man das CSS zentral pflegen kann.

Der HTML-Code wird in conf/ in eine Datei mit dem Namen footer.html eingefügt. Hier kommt der HTML-Code für die Topbar hinein und dort drin ist die Standard-CSS-Datei verlinkt.

Es existiert ein Child-Theme und in die Datei header.php wird die folgende Zeile eingefügt:

<?php include("natenomglobaltopbar.html"); ?>

Info: In meinem Fall ist es in der footer.php drin, weil ich diese schon verändert habe und nicht zusätzlich noch die header.php im Child-Theme haben will.

Die Datei „natenomglobaltopbar.html“ liegt im selben Verzeichnis wie die PHP-Datei und enthält neben der Standard CSS-Datei noch eine eigene speziell für WordPress, damit die Leiste immer zu sehen ist. Diese wird nach der Standard-CSS eingefügt, damit sie die alten Angaben überschreibt.

Das ist die Datei unter

<link rel="stylesheet" type="text/css" href="//files.natenom.com/cdn/natenomglobaltopbar/style_wordpress.css">

Im Template-Ordner wird in partials eine HTML-Datei erstellt mit dem HTML-Code. Dann einfach einbinden im Theme.

Beiträge über Hugo in meinem Blog.

Meine Webseite www.natenom.com benutzt Hugo und diese GlobalTopbar.