Bludit: Menü-Beschriftung einfach anpassen
Wie sich Beschriftungen in Bludits (mobilem) Menü über das Plugin HTML-Code im Browser anpassen lassen — ohne Änderungen an Bludit oder dem verwendeten Theme.
Hintergrund
Im mobilen Menü meines Bludit-Blogs ist mir aufgefallen, dass dort statt der Icons aus der Desktop-Ansicht die Wörter „Github“ und „E-Mail-Adresse“ stehen. Aus ästhetischen Gründen würde ich aber „GitHub“ und „E-Mail“ präferieren. Beide Formulierungen kommen allerdings nicht vom Theme, sondern von Bludit selbst.
Quick Fix
Um weder Bludit noch Theme bearbeiten zu müssen, passe ich die Beschriftungen im Browser mit dem Plugin HTML-Code an (Admin → Plugins). Der folgende Codeblock kommt in das <head>-Feld:
<!--
Beschriftungen: Github -> GitHub, E-Mail-Adresse -> E-Mail
Erklärung: https://y-log.de/bludit-menü-beschriftung
-->
<script>
addEventListener('DOMContentLoaded', function () {
var map = { 'Github': 'GitHub', 'E-Mail-Adresse': 'E-Mail' };
document.querySelectorAll('.navbar-modern a, .profile-social a').forEach(function (a) {
if (map[a.title]) a.title = map[a.title];
var img = a.querySelector('img'); if (img && map[img.alt]) img.alt = map[img.alt];
var s = a.querySelector('span'); if (s && map[s.textContent.trim()]) s.textContent = map[s.textContent.trim()];
});
});
</script>map enthält links die Texte, die Bludit ausliefert, und rechts die gewünschten Formulierungen. Weitere Paare lassen sich einfach ergänzen, etwa 'Twitter': 'X' oder umgekehrt.
Die beiden Container im Selektor (.navbar-modern, .profile-social) stammen aus dem hier genutzten Theme (Blowfish) und decken die Navigationsleiste auf Unterseiten sowie den Hero-Bereich auf der Startseite ab. Wer ein anderes Theme nutzt, muss die Selektoren gegebenenfalls anpassen.
Die drei Zeilen in der Schleife sind kein Overkill, sondern drei Fundorte desselben Textes: der Tooltip am Link, das alt am Icon und der sichtbare Text im aufgeklappten mobilen Menü. Lässt man zwei davon weg, zeigt das Menü „GitHub“/„E-Mail“, während Tooltip und Screenreader weiterhin „Github“/„E-Mail-Adresse“ ausgeben.
DOMContentLoaded ist nötig, weil das Script im <head> ausgeführt wird, bevor die Seite aufgebaut ist — die gesuchten Elemente existieren zu diesem Zeitpunkt noch nicht.
Die Kommentierung mit <!-- [...] --> am Beginn des Codeblocks dient lediglich als Gedankenstütze und verlinkt auf diesen Post.
Einschränkungen
Der Fix ändert nichts am von Bludit ausgelieferten HTML. Ohne JavaScript werden weiterhin „Github“ und „E-Mail-Adresse“ angezeigt. Für die beiden Beschriftungen erscheint dies vertretbar: In den strukturierten Daten der Seite tauchen sie nicht auf, dort stehen nur die Profil-URLs.
[!NOTE] Ändert Bludit die Texte später selbst, passt die Zuordnung nicht mehr und es bleibt beim Original. Nach einem größeren Update lohnt sich also gegebenenfalls ein Blick ins Menü.