Joomla: Im Menü eine anklickbare Telefonnummer ausgeben

Ich benötigte heute bei einem Kundenprojekt die Telefonnummer des Unternehmens im Bereich des Hauptmenüs. Am besten gleich so, dass sie auf einem Smartphone einfach angetippt werden kann und die Nummer direkt gewählt wird. Für den Besucher ist beides, also die Anzeige sowie die Funktionalität dahinter, extrem angenehm und steigert natürlich die Usability erheblich. Oft verstecken KMUs ihre Kontaktdaten irgendwo im Footer oder "zwingen" den Nutzer dazu erst auf der Homepage (umständlich) nach dieser Kontaktmöglichkeit zu suchen. Helft hier dem Besucher und macht es ihm so einfach wie möglich. Da der eine oder andere sicher ebenfalls eine Telefonnummer im Hauptmenü für sein Joomla-Projekt nutzen möchte, hier die von mir eingesetzte Lösung.

Schritt für Schritt Anleitung

Navigiert hierfür im Administrationsbereich des Joomla-Systems zu den Menüs. Wählt hier das Hauptmenü und fügt einen neuen Menüpunkt hinzu. Der Menütitel sollte die Telefonnummer selbst - kann sicher aber auch das Wort "Telefon" oder "Jetzt anrufen!" usw. sein - und wählt als Menütyp "Externe URL".

Hier tragt ihr die Telefonnummer mit der Landesvorwahl und ohne der führenden "0" der Ortsvorwahl ein. Davor muss das Wörtchen "tel:" stehen. Wichtig: Bitte alles ohne Leer- und Sonderzeichen!

In meinem Beispiel ist die "0123 / 45 67 890" die Telefonnummer der Firma aus Deutschland (+49). Daraus wird der Eintrag im Feld Link:

tel:+491234567890

Im Quellcode sieht das dann wie folgt aus: [html] <a href="tel:+491234567890">0123 / 45 67 890</a> [/html]

Kontrollieren und verschönern

Nach dem Speichern und dem erneuten Laden der Website erscheint nun am Ende des Menüs die Telefonnummer, welche zudem anklickbar ist. Gegebenenfalls einmal den Cache hierfür leeren. Auf dem Smartphone findet nach dem Antippen des Eintrags automatisch das Wählen der im Quellcode hinterlegten Nummer statt. Ebenso auf Desktop-Rechnern, wenn eine entsprechende App hierfür eingerichtet ist.

Über Linktyp / CSS-Style lässt sich für diesen Menüeintrag noch eine CSS-Klasse festlegen. Das vereinfacht ein eventuell gewünschtes anderes Styling für die Ausgabe der Telefonnummer. Außerdem bietet sich hier die Verwendung eines Telefon-Icons, zum Beispiel per FontAwesome, an. Hat alles geklappt? Gibt es Fragen? Dann bitte einfach hier die Kommentar-Funktion nutzen oder mich über Facebook ansprechen.