Natenoms Wiki

Weil Teilen Spaß macht :)

Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

Übersetzungen dieser Seite:

Navigation


Lizenz dieses Wikis
Über dieses Wiki
Feed des Wikis
Impressum
Datenschutz


Was gerade in meinem Blog geschieht:

sammelsurium:globaltopbar

Inhaltsverzeichnis

Global Top Bar

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

Man kann diese auf allen meinem Webseiten oben in schwarz sehen.

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

Allgemein

HTML

Der HTML-Code ist rein statisch.

CSS

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

DokuWiki

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.

WordPress

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">

Hugo

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.

sammelsurium/globaltopbar.txt · Zuletzt geändert: 2018/04/02 12:36 (Externe Bearbeitung)