TYPO3 Code Snippets für Entwickler
TYPO3 Entwickler teilen Ihr Wissen gerne mit Kolleginnen und Kollegen. Wir tun dies auch. Und veröffentlichen deswegen einige Codeschnippsel aus unserer eigenen Produktion.
Konfiguration von Extensions und Google Fonts lokal
Dabei handelt es bei zwei Beispielen um die Konfiguration von Extensions, mit denen man recht schnell die DSGVO (Datenschutzgrundverordnung) und die EU Cookie Richtlinie umsetzen kann. Wie kann man Google Fonts lokal einbinden? Und wie binde ich Titel und Beschreibung eines Beitrags aus meiner Extension in die entsprechenden Tags beim TYPO3 Webseite ein, um SEO betreiben zu können? Weiter unten stehen Antworten auf diese Fragen.
Unsere Code Schnippsel im Detail
TypoScript Constants
Bei der Einbindung von Extensions ist es oft ein Vorteil, Konstanten in TYPO3 zu setzen. Zu einem kann man auf diese Weise Speicherorte für bestimmte Daten definieren. Ein oft angewendeter Fall ist aber, dass man Standardvorlagen in einer Extension hat und einige von diesen bearbeitet, um eigene Designs zu erzielen. Wenn Sie eigene Suchpfade für Fluid Templates, Layout und Partials angeben, können Sie Ihr eigenes Layout leicht umsetzen, ohne die originale Extension zu verändern.
Extension Cookieman
Die Extension Cookieman kommt bei mehreren unserer Webseiten zum Einsatz und ist unsere Empfehlung für die Konfiguration eines Cookie Banner. Der große Vorteil dieser Extension ist, dass sie für sich selbst steht und relativ einfach zu konfigurieren ist, wobei man Erfahrung in TypoScript voraussetzen muss.
Extension Cookie Consent
Mit den Richtlinien zum Datenschutz nach EU und deutscher Gesetzgebung ist es unerlässlich geworden, jeden Besucher auf seiner Webseite auf den Gebrauch von Cookies hinzuweisen. Eine Lösung für TYPO3 bietet sich mit der Installation einer Extension an. In dieser Seite finden Sie nun eine Beispielkonfiguration für die Extension Cookie Consent.
Google Fonts lokal einbinden
Google Fonts sind eine willkommene Bereichung für das Design jeder Webseite, ob mit TYPO3 oder Wordpress. Wenn man die Schriftarten direkt vom Google Server einbindet, bekommt man jedoch Probleme mit dem Datenschutz: Bei jedem Besucher bekommt Google die IP-Adresse den Besuchers übermittelt.
Es gibt jedoch die Möglichkeit, Google Fonts lokal auf dem eigenen Webserver zu speichern. Wie das mit TYPO3 funktioniert, zeigen wir Ihnen in diesem Artikel unserer TYPO3 Snippets.
Font Awesome Icons
Die Icons von Font Awesome haben sich bewährt, um damit das Design einer TYPO3 Webseite zu verbessern. Die CSS Sourcen kann man von einer externen Quelle einbinden. Da dies Probleme mit dem Datenschutz bringt, sollte man die Dateien für die Font Awesome Icons lokal einbinden.
Wir zeigen Ihnen TypoScript und CSS Code, um Font Awesome Icons lokal in Ihre TYPO3 Webseite einzubinden.
Title und META Tags in Extension füllen
Der <TITLE>-Tag und die META Description in einer Webseite sind von enormer Wichtigkeit für SEO und soziale Netzwerke. Wenn man eine Standardseite in TYPO3 erstellt, kann man beide seit der Version 9.5 von TYPO3 bequem über die Seiteneigenschaften füllen. Bei einer Extension muss man aber selbst dafür sorgen, dass entsprechende Daten in die Webseite gespielt werden. Dafür gibt es Schnittstellen des TYPO3 Core.
Breadcrumb Navigation mit VHS Viewhelper
Eine Breadcrumb Navigation oder Brotkrümelnavigation dient der Orientierung menschlicher Besucher auf einer Webseite: Man sieht den Klickpfad, auf dem man zur aktuellen Seite gelangt ist. Um SEO zu betreiben, ist es aber zudem sinnvoll, der Parallelnavigation auch eine Struktur auf Basis des Rich Text Formats von Schema.Org mitzugeben. Wie man diesen Punkt der Suchmaschinenoptimierung in einer TYPO3 Webseite umsetzt, zeigen wir Ihnen mit Hilfe des Source Code für den VHS Viewhelper.
Canonical Link mit TypoScript
TYPO3 bietet seit der Version 9.5 mehrere Möglichkeiten für erfolgreiche SEO. Es gibt dabei eine Reihe von Maßnahmen, die technisch und weitgehend automatisch im Hintergrund ablaufen. Eine dieser Maßnahmen ist die Erzeugung eines Canonical Link in einer Extension über TypoScript. Wir stellen Ihnen in unserem TYPO3 Tutorial mehrere TypoScript Code Snippets zur Suchmaschinenoptimierung vor.
Canonical Link mit Event Listener
Die Erzeugung des Canonical Link bei TYPO3 kann über das integrierte Symfony Framework und die in PHP geschriebene API geschehen. Wie man dies umsetzt, stellt dieser Artikel des TYPO3 Tutorials dar.
TYPO3 img srcset
Die Bilder für eine TYPO3 Webseite kann man per CSS einfach so skalieren, dass sie auf mobilen Endgeräten wie bei Desktop Rechnern gleichermaßen passend aussehen. Was aber ist mit den Ladezeiten? Um dem Browser die passende Auswahl eines Bildes zu überlassen, hat man das img srcset erfunden. Wie man dieses Konzept in einer TYPO3 Webseite umsetzt, zeigen wir Ihnen in diesem Kapitel unserer TYPO3 Snippets.
Progressive Web App (PWA)
Progressive Web App (PWA) bezeichnet eine Konfiguration von Webseiten, um diese für Browser und Endgeräte wie Smartphones den jeweiligen Anforderungen entsprechend benutzerfreundlich zu konfigurieren. Wie man an die notwendigen Dateien für sein TYPO3 Projekt im Internet kommt und wie man diese in TypoScript einbindet, schildern wir in diesem Artikel.
Frontend Login: Links zu Einloggen und Ausloggen
TYPO3 bietet die Möglichkeit, Seiten für eingeloggte Benutzer freizuschalten. Nicht eingeloggten Besuchern kann man einen Link zum Einloggen anbieten. Wie aber gestaltet man dies technisch in der Navigation?
Wir haben einen Tipp für Sie, wie Sie mit den Bordmitteln von TYPO3 für den Frontend Login eine Navigation mit alternierenden Links aufbauen können.
TYPO3 Code Snippets im Wiki Agentur IBK
Jede Menge weitere Code Snippets zu TYPO3 finden Sie im Wiki unserer Agentur: