Kostenloses TYPO3 Template (Musterprojekt) für TYPO3 10 LTS

Kostenloses "Best Practice" Template, individuell anpassbar mit vielen Anleitungen.
Frei verfügbar als Download oder vorinstalliert im Hosting Paket mit Support von Experten

TYPO3 Version:10 LTS

Mit dem kostenlosen TYPO3 Template kann man sofort mit dem Erfassen von Inhalten beginnen, die Webseite ist in kürzester Zeit online. Man muss sich nicht um Design, Templates oder TypoScript Seite kümmern.  

So sieht es aus: Live-Version unseres TYPO3 Templates

Das TYPO3 Template steht Download für alle interessierten Anwender bereit. So können Sie das TYPO3 Template auch bei anderen Providern installieren. Allerdings können wir dann leider keinen technischen Support dafür bieten. Alternnativ können Sie unseren TYPO3 Developer Tarif kostenlos und unverbindlich für 3 Monate bestellen, dort ist das Template (wie in allen unseren Hosting Paketen) bereits vorinstalliert.

Aktuelle Version des TYPO3 Templates herunterladen (tar.gz Archiv)

Bei eigener Installation ist ein Backend Benutzer "typo3-admin" mit dem Passwort "muster" voreingestellt. 

TYPO3 10 LTS benötigt mindestens PHP 7.2, wir empfehlen für die Nutzung des Musterprojekts jedoch mindestens PHP 7.3.

Wir freuen uns über Anregungen und Verbesserungsvorschläge. 

Die Vorlage ist individuell anpassbar und kann mit weiteren Funktionen erweitert werden. 

Das Template bietet:

  • Responsive Webdesign, geeignet für Desktop, Smartphone und Tablet
  • optimiert für Suchmaschinen 
  • vorbereitet für Barrierefreiheit
  • Beispiele für alle Standard Inhaltselemente
  • optimiert für kurze Ladezeiten und Barrierefreiheit
  • aktueller Stand der Technik
  • optisch und funktional individuell anpassbar

Es kann als Grundlage für eine eigene Website verwendet werden und stellt ein "Best practice" Beispiel dar. Hier kann man auch lernen, wie man ein TYPO3-Projekt aufsetzt. Es soll dabei keine Design-Vorlage sein, sondern eine Projektvorlage. Das Design kann beliebig an eigene Vorstellungen angepasst werden.

Wir haben das Template bewusst schlank gehalten und nur die am häufigsten verwendeten Funktionen vorinstalliert:

  • Anzeige von aktuellen Meldungen (Extension: news)
  • suchmaschinenfreundliche, lesbare Web-Adressen (sprechende URLs)
  • Unterstützung bei der Suchmaschinenoptimierung der Website
  • Lightbox-Effekt für das Klick-Vergrößern von Bildern
  • Konfigurierbarer Cookie Consent Manager

Das Musterprojekt basiert auf der TYPO3 LTS-Version 10.4. Dadurch ist bis mindestens Ende April 2023 ein Betrieb ohne Relaunch möglich. Mit dem verlängerten Support (Extended Long Term Support, ELTS) gibt es Updates und Unterstützung bis Ende April 2026.  

Einige Informationen zur Geschichte der Vorlage.

So einfach ist das: In 5:47 zur eigenen Website

In diesem kurzen Video zeigen wir, wie schnell aus dem Muster-Template eine eigene Webseite werden kann. Zurücklehnen und staunen!

Was kostet das Musterprojekt?

Das Musterprojekt ist bei allen neuen TYPO3 Hosting-Paketen von jweiland.net im Preis enthalten und bereits vorinstalliert.

Wie sieht es mit Updates aus?

Das Projekt wird kontinuierlich weiter entwickelt. Die aktuelle Version 1.6.1 des Templates vom Juli 2020 basiert auf TYPO3 Version 10.4 LTS und steht im Hostingpaket automatisch zur Verfügung.

Beachten Sie jedoch: bestehende Installationen können nicht automatisch aktualisiert werden, da jeder Kunde selber Änderungen an den Dateien des Musterprojekts durchführen kann. Bei automatischen Updates würden diese Änderungen überschrieben werden.

Damit Sie bei Bedarf neue Funktionen oder Fehlerbehebungen selber nachrüsten können, protokollieren wir alle wichtigen Änderungen im Änderungsprotokoll.

Beispielwebseiten auf der Basis unseres Musterprojektes

Was ist neu in Version des Templates?

In der Version 10 des Musterprojekts haben wir nicht nur bestehende Funktionen verbessert, sondern auch viele neue Features hinzugefügt. Im folgenden Video sehen Sie ein paar dieser Neuerungen im Überblick.

Da wäre zum Beispiel

  • das neue Dashboard von TYPO3 10 LTS
  • eine Cookie Management Lösung, basierend auf dem Open Source-Skript "Klaro"
  • Reponsive Images und verschiedene Crop-Varianten für Bilder 
  • verbesserte und neue Navigationsvarianten (z.B. ein Megamenü)
  • Raster-Container für Inhalte (noch nicht im Video zu sehen, siehe separates Video dazu)
  • Auf-/Zuklappbare Inhaltselemente (nicht im Video zu sehen, siehe separates Video dazu)
  • und vieles mehr

Natürlich hat sich auch "unter der Haube" vieles getan, da wir in der Programmierung die neuen Möglichkeiten von TYPO3 10 LTS nutzen, wie zum Beispiel auch die neuen Asset Collectors.

Das Musterprojekt selbst installieren

Bei Bestellung eines Hosting Tarifs (auch beim kostenlosen Developer Tarif), wird das Mustertemplate von uns bereits fertig installiert. 

Falls Sie das Template in einem bestehenden Hosting Paket nachträglich installieren möchten, dann verwenden Sie am besten unser Setup-Tool (siehe folgendes Video). Das Setup-Tool nimmt bereits alle notwendigen Anpassungen vor.

Folgende Schritte sind sind für die Installation notwendig:

  1. Eine neue Datenbank über das Kundenmenü anlegen
  2. Anmeldung per SSH auf dem Webserver (Anleitungen für Windows, MacOS und Linux)
  3. Installation mit dem Setup-Tool wie im Video gezeigt

Zur Installation bei einem anderen Provider erfolgt die Installation nach folgender Kurzanleitung:

  1. Datei mit dem Mustertemplate von dieser Webseite herunterladen und auf den Webspace übertragen
  2. Archiv (musterprojekt-10.4.5.tar.gz) entpacken
  3. Neue, leere Datenbank anlegen
  4. Parameter für Zugriff auf Datenbank in typo3conf/LocalConfiguration.php anpassen
  5. Datenbankdatei typo3conf/musterprojekt.sql in die neue, leere Datenbank importieren
  6. Symlink auf TYPO3 10.4.5 Quellcode anpassen/anlegen
  7. Domain auf Startverzeichnis zeigen lassen
  8. In TYPO3 Backend einloggen (User: typo3-admin, Passwort: muster)
  9. Passwort für den Backend Benutzer ändern
  10. Site-Konfiguration aufrufen und Domainnamen anpassen 

Encryption Key ändern

Aus Sicherheitsgründen sollten Sie nach der manuellen Installation den sogenannten Encryption Key ändern. Das ist eine lange zufällige Kombination von Buchstaben und Ziffern. Mit diesem Key werde verschiedenen Verschlüsselungen im TYPO3-System "gesalzen", das heisst, es wird noch ein weiterer Zufallswert in die Verschlüsselung eingebaut.

Gehen Sie wie folgt vor:

  1. Gehen Sie im Backend in den Bereich "Einstellungen (Settings)".
  2. Klicken Sie hier auf die "Installation Wide Options"
  3. Im Bereich [SYS] finden Sie das Eingabefeld für den Encryption Key, geben Sie hier eine lange Zufallskombination von Ziffern und Buchstaben ein
  4. Zum Speichern klicken Sie auf "Write Configuration"

Die Schritte sind im folgenden Video beschrieben.

Anmeldung am Backend und erste Schritte

Das Backend ist die Verwaltungsoberfläche Ihrer TYPO3-Website. Im Backend pflegen Sie die Inhalte der Seiten.

In das Backend gelangen Sie immer über ihre-domain.de/typo3.

Melden Sie sich dort mit Ihrem Benutzernamen und dem Passwort an.

Bei einem frisch installierten Musterprojekt ist der Benutzername immer typo3-admin. Aus Sicherheitsgründen sollten Sie den Benutzernamen und vor allem das Passwort direkt nach der ersten Anmeldung ändern. Wie das funktioniert, sehen Sie im folgenden Video.

Tipp: verwenden Sie unbedingt ein sicheres Passwort! Hier finden Sie ein paar Tipps zu sicheren Passwörtern.

Firmenname anpassen

Einer der ersten Schritte bei der Anpassung des Musterprojekts sollte die Änderung des Firmennamens sein. Dieser ist zum Beispiel ganz unten im Fußbereich jeder Seite zu sehen. Natürlich können Sie statt einem Firmennamen hier auch ihren persönlichen Namen oder einen beliebigen anderen Text eingeben.

Führen Sie folgende Schritte durch:

  1. Klicken Sie im linken Hauptmenü im Backend auf "Template".
  2. Klicken Sie im Seitenbaum die Seite "Home" an.
  3. Wählen Sie gegebenenfalls in der Auswahlbox, im Hauptbereich oben links, den "Konstanteneditor" aus.
  4. Wählen Sie als Kategorie "JWEILAND.NET MUSTERPROJEKT" aus.
  5. Klicken Sie neben dem Feld "Firmenname" auf das Stiftsymbol um den Inhalt des Feldes bearbeiten zu können.
  6. Klicken Sie zum Abschluss oben auf die Schaltfläche "Speichern"

Alle Schritte sehen Sie auch im folgenden Video.

Das Logo im Kopfbereich austauschen

Oben links auf jeder Seite finden Sie ein Logo, das auch immer automatisch auf die Startseite verlinkt ist. Um unser Beispiel-Logo auszutauschen, gehen Sie wie folgt vor:

  1. Laden Sie über das Modul "Dateiliste" ihre Logo-Datei hoch (Dateiformat JPG, PNG oder SVG empfohlen). Legen Sie dafür bei Bedarf noch einen passenden Ordner an, um Ihre Dateien zu organisieren.
  2. Klicken Sie im linken Hauptmenü im Backend auf "Template".
  3. Klicken Sie im Seitenbaum die Seite "Home" an.
  4. Wählen Sie gegebenenfalls in der Auswahlbox, im Hauptbereich oben links, den "Konstanteneditor" aus.
  5. Wählen Sie als Kategorie "JWEILAND.NET MUSTERPROJEKT" aus.
  6. Scrollen Sie nach unten zum Abschnitt "Layout".
  7. Klicken Sie neben dem Feld "Logo" auf das Stiftsymbol um die Bearbeitung zu aktivieren.
  8. Tragen Sie hier den Pfad zu Ihrer Logodatei ein (zum Beispiel fileadmin/logos/mein_logo.png).
  9. Klicken Sie oben auf die Schaltfläche "Speichern".

Favicon und Appicon austauschen

Favicons sind kleine Bilder, die z.B. in der Browsertitelzeile / Browsertab angezeigt werden. Üblicherweise wird hier ein Firmenlogo oder ähnliches verwendet.

Das Musterprojekt ist zur Verwendung individueller Favicons vorbereitet. Außerdem werden dabei auch sogenannte Touch-Icons (App-Icons) für Smartphones und Tablets erzeugt.

Beide Arten von Icons können ganz einfach über den Konstanteneditor ausgetauscht werden.

Bitte beachten:

  • Die Bilddatei für das Favicon und die Standard-Touch-Icons muss quadratisch sein.
  • Die zweite Variante des Bildes, die v.a. für Windows-Phones nützlich ist, benötigt ein Seitenverhältnis von 31:15, zum Beispiel: Breite 310 px, Höhe 150 px

Um die Dateien anzupassen, gehen Sie wie folgt vor:

  1. Wechseln Sie in das Backendmodul "Template".
  2. Wählen Sie im Seitenbaum die "Home"-Seite an (die Seite mit der Weltkugel).
  3. Im großen, rechten Bereich des Backends wechseln Sie über die obere Auswahl-Box in den "Konstanteneditor".
  4. In der Auswahlbox bei "Kategorie" wählen Sie "JWEILAND.NET MUSTERPROJEKT".
  5. Scrollen Sie nach unten bis zum Bereich "Layout".
  6. Klicken Sie auf das Stiftsymbol bei "App-/Favicon Quadratisch" bzw. "App-/Favicon Breit", um das Eingabefeld zu aktivieren.
  7. In das Eingabefeld tragen Sie den Pfad zu Ihrer Bilddatei ein. Diese kann unterhalb von fileadmin/ liegen oder auch in einer eigenen Extension:
    • Beispiel für fileadmin: fileadmin/meinverzeichnis/bilder/appicon-square.png
    • Beispiel für eine Extension: EXT:meineextension/Resources/Public/Icons/appicon-square.png
  8. Zum Abschluss klicken Sie oben auf "Speichern".
  9. Sollte die Änderung nicht sofort sichtbar sein, müssen Sie den Frontend-Cache und auch Ihren Browser-Cache löschen.

Das Bild im Kopfbereich austauschen

Über die Seiteneigenschaften kann ein Bild definiert werden, das im Kopfbereich der Seite ausgegeben wird. Wichtig ist, die Maße des Bildes korrekt über den Konstanteneditor zu hinterlegen.

Navigationsvarianten

Als Standard wird eine horizontale Navigation verwendet. Sofern eine Seite weitere Unterseiten hat, werden diese als ein sogenanntes "Drop-Down-Menü" angezeigt.

Zusätzlich können über den Konstanteneditor verschiedene Varianten aktiviert werden:

  • Horizontale Navigation (Standard)
  • Vertikale Navigation
  • Horizontale und vertikale Navigation

Zusätzlich kann über den Navigationstyp auch zwischen der Standardausgabe und einem sogenannten "Mega-Menü" umgeschaltet werden.

Im Video sehen Sie die verschiedenen Optionen und die notwendigen Schritte.

Viele Seiten in der Navigation? Kein Problem!

Gerade bei Verwendung der horizontalen Navigation stößt man schnell an Probleme, wenn man viele Seite auf der ersten Menüebene hat oder die Seitentitel relativ lang sind. Hier kann unter Umständen dann das Layout gestört werden, in dem die Navigation in eine zweite Zeile umbricht.

Es gibt zwar die Faustregel, dass man auf der ersten Ebene einer Navigation maximal 5-7 Seiten unterbringen soll, aber das lässt sich vielleicht nicht immer einhalten.

In Version 10 des Musterprojekts haben wir dafür eine Lösung eingebaut!

Sobald der zur Verfügung stehende Platz in der Navigation nicht mehr ausreicht um alle Menüpunkte in einer Zeile anzuzeigen, erscheint automatisch ein Link, unter dem dann die restlichen Seiten zu finden sind. So kann das Menü flexibel auf verschiedene Viewport-Breiten reagieren und wird auf jedem Endgerät, egal ob Desktop-PC, Laptop, Tablet oder Smartphone, immer perfekt dargestellt.

Wie das aussieht, sehen Sie im folgenden Video.

Bilder im Megamenü

In Megamenüs wird gerne mit Bildern gearbeitet. Deshalb haben wir auch diese Möglichkeit implementiert.

Wie Sie Bilder für die zweite Ebene des Menüs festlegen können und was es dabei zu beachten gibt sehen Sie im Video.

Seitenlayouts

Das Musterprojekt liefert verschiedene Seiten-Layouts mit um die Inhalte in einer gewissen Struktur darstellen zu können.

Mit den verschiedenen Layouts lassen sich ein Großteil der gängigen Layoutanforderungen abdecken. Wer es flexibler möchte: Wir haben auch Container-Elemente für flexible mehrspaltige Inhalte integriert.

Inhalte im Fußbereich bearbeiten

Im Fußbereich (Footer) der Website können beliebige Inhaltselemente ausgegeben werden. Diese werden zentral auf einer speziellen Seite gepflegt und automatisch auf der gesamten Website angezeigt.

Layout des Fußbereichs ändern

Für den Fußbereich wird standardmäßig ein 3-spaltiges Layout verwendet. In diesen Spalten können Sie beliebige Inhaltselemente platzieren.

Zusätzlich stehen Ihnen aber auch ein 2- und ein 1-spaltiges Layout zu Verfügung. Wie Sie das gewünschte Layout wählen können, sehen Sie im folgenden Video.

Die Seiten in der unteren Navigation

Im Fußbereich der Seite sehen Sie eine sogenannte "Meta-Navigation" mit Links auf verschiedene Seiten (Home, Kontakt, Impressum, Datenschutz).

In diesem Video sehen Sie, wie Sie die dort angezeigten Seiten bearbeiten können.

Was ist das Dashboard?

Das Dashboard ist ein neues Modul in TYPO3 10 LTS. Über sogenannte Widgets kann man sich hier verschiedene Informationen anzeigen lassen. TYPO3 bringt schon einige Widgets mit, wir haben im Musterprojekt ebenfalls ein kleines Widget integriert, das Sie direkt zur Dokumentation führt (also auf diese Seite).

Es gibt inzwischen auch im TYPO3 Extension Repository (TER) einige Erweiterungen, die zusätzliche Widgets zur Verfügung stellen.

Das Dashboard kann jeder Backend-Benutzer für sich individuell einrichten. Man kann bei Bedarf sogar mehrere Dashboards anlegen. 

Wie das funktioniert, sehen Sie im Video.

Suchmaschinenoptimierung (SEO)

In TYPO3 10 LTS benötigt man im Prinzip keine zusätzliche Extension mehr für grundlegende SEO-Funktionen. So gehören die manuelle Anpassung des Seitentitels, die Steuerung der Indexierung durch Suchmaschinen sowie die Generierung des Canonical-Tags zu den Standardfunktionen.

In den Seiteneigenschaften finden Sie einen Tab "SEO"

  • Titel für Suchmaschinen: hier können Sie den automatisch generierten Seitentitel (<title>-Tag im HTML) manuell überschreiben
  • Robot-Anweisungen:
    • Index dieser Seite: steuert, ob Suchmaschinen die aktuelle Seite indexieren oder nicht (Meta-Tag robots="noindex" oder "index" im HTML)
    • Dieser Seite folgen: steuert, ob Suchmaschinen-Bots den Links auf der aktuellen Seite folgen oder nicht (Meta-Tag robots="follow" oder "nofollow" im HTML)
  • Kanonischer Link: gibt die Ursprungs-URL der aktuellen Seite an. Wird automatisch gesetzt, kann aber bei Bedarf manuell überschrieben werden. 

Allerdings haben wir als Hilfe zur leichteren "On Page"-Suchmaschinenoptimierung die Extension "yoast_seo" hinzugefügt. "On Page" bedeutet: Maßnahmen, die man selber auf seiner Seite durchführen kann. 

Die Extension analysiert zum Beispiel den Text einer Seite auf Lesbarkeit und gibt auch Tipps zur Verbesserung. Außerdem wird geprüft, ob in den Seiteneigenschaften das Feld "Beschreibung" genutzt wird, denn daraus wird das wichtige description-Metatag generiert, oder ob der Titel der Seite in Ordnung ist. Die Extension hat noch weitere Funktionen, wir empfehlen, die Dokumention dazu sorgfältig zu lesen.

Social Media

TYPO3 10 LTS bringt ebenfalls die integrierte Unterstützung einiger Social Media-Funktionen mit.

In den Seiteneigenschaften jeder Seite kann man für Facebook und Twitter den Titel, die Beschreibung sowie ein Bild individuell anpassen. Dabei werden bestimmte Meta-Tags im HTML-Quellcode erzeugt (Open Graph und Twitter Cards). Dafür gibt es den neuen Bereich "Social Media" in den Seiteneigenschaften.

Wenn ein Besucher die Seite über Facebook oder Twitter teilt, werden diese Meta-Tags von diesen Plattformen ausgelesen und berücksichtigt. So kann man sehr genau steuern, was für Texte und Bilder in der Vorschau der beiden Plattformen angezeigt werden.

Crop Varianten für Bilder in Inhaltselementen

In Version 10 des Musterprojekts haben wir den Umgang mit Bildern im Frontend stark verbessert.

Zum einen nutzen wir jetzt das "Responsive Image Rendering". Das bedeutet: je nach Endgerät, mit dem die Website betrachtet wird, wird ein in der Größe für dieses Gerät optimiertes Bild ausgeliefert. Der Browser eines Smartphones bekommt also ein kleineres Bild geliefert als der Browser auf einem Desktop-Rechner. 

Dadurch wird die Performance der Website extrem verbessert, denn es macht natürlich wenig Sinn, große Bilder (= große Datenmengen) an Geräte auszuliefern, die die Bilder sowieso nur kleiner darstellen können.

Als Anwender müssen Sie sich aber darum überhaupt nicht kümmern, das erledigt TYPO3 vollautomatisch im Hintergrund.

Zum anderen haben wir die Möglichkeit integriert, verschiedene "Crop Varianten" zu nutzen.

Das bedeutet, Sie können einem Anwender mit Smartphone einen anderen Bildausschnitt liefern als einem Anwender mit Desktop-Rechner. Bei bestimmten Arten von Bildern kann das sehr sinnvoll sein (Beispiel im Video).

Ebenfalls integriert haben wir die Möglichkeit, die Crop Varianten für die verschiedenen Geräte zu synchronisieren. Das ist dann wichtig, wenn Sie für alle Geräte den Bildausschnitt verändern wollen. Bisher musste man das manuell machen. 

Was genau das ist, und wie das funktioniert, sehen Sie im folgenden Video.

Bildergalerie mit quadratischen Vorschaubildern

Um eine Bildergalerie mit TYPO3 umzusetzen, braucht man eigentlich keine Extension. Das geht auch sehr gut mit Bordmitteln.

Um die Darstellung solcher Galerien ein wenig zu verbessern, haben wir die Option eingebaut, quadratische Vorschaubilder der Bilder anzuzeigen. Das kann über das "Layout"-Feld der Inhaltselemente gesteuert werden.

Details im folgenden Video.

Meta-Daten von Dateien pflegen

Für jede Datei, die im Backend genutzt wird, können sogenannte Meta-Daten verwaltet werden. Meta-Daten können zum Beispiel ein "Alternativer Text" für Bilder sein oder eine Copyright-Information. Teilweise werden diese Metadaten auch automatisch im Frontend ausgegeben, sofern Sie vorhanden sind.

Es gibt zwei Wege, diese Meta-Daten zu pflegen:

  1. pro Inhaltselement an den dort verwendeten Dateien
  2. global über das Dateiliste-Backendmodul

Der globale Weg hat den Vorteil, dass Sie diese Daten nur einmal pro Datei pflegen müssen. Wenn Sie die Datei dann in einem Inhaltselement verwenden (auch mehrfach auf verschiedenen Seiten), werden automatisch die global gepflegten Meta-Daten verwendet.

Trotzdem haben Sie natürlich die Möglichkeit, pro Inhaltselement die globalen Meta-Daten bei Bedarf auch lokal zu überschreiben.

Wie das alles funktioniert, sehen Sie im folgenden Video.

Überblick über den Konstanteneditor

Viele Funktionen des Musterprojekts lassen sich bequem im Backend über den Konstanteneditor steuern. Im folgenden Video erhalten Sie einen Überblick über die verschiedenen Bereiche und Optionen. 

Auf bestimmte Funktionen gehen wir zusätzlich in weiteren Videos genauer ein.

Das Kontaktformular bearbeiten und anpassen

Mit TYPO3 lassen sich auch relativ komplexe E-Mailformulare umsetzen. Damit können sowohl einfache Kontaktformulare als auch mehrseitige Bestell-, Umfrage, Bewerbungsformulare und vieles mehr realisiert werden.

Mit dem Musterprojekt erhalten Sie auch ein Beispielformular. Hier haben wir ein paar der verschiedenen Formularmöglichkeiten exemplarisch eingebaut. Damit Sie das Formular nutzen können, sind aber ein paar Anpassungen notwendig.

Im folgenden Video zeigen wir, wie Sie vorhandene Eingabefelder entfernen und auch neue Felder hinzufügen können.

Den Formularempfänger anpassen

Damit die Nachrichten, die über das Kontaktformular verschickt werden, auch bei Ihnen ankommen, muss der richtige Empfänger im Formular definiert werden.

Dazu müssen im Backendmodul "Formulare" die sogenannten Finisher des Formulars bearbeitet werden. Ein Finisher definiert eine Aktion, die ausgeführt wird, wenn der Besucher der Website beim Formular auf die "Senden"-Schaltfläche klickt.

Damit die verschickten E-Mails aber auch tatsächlich beim Empfänger ankommen, gibt es auch bei der Konfiguration des entsprechenden Finishers ein paar wichtige Punkte zu beachten.

Alle Details dazu im folgenden Video.

TYPO3 für den E-Mailversand korrekt konfigurieren

Generell empfehlen wir, für den Versand von E-Mails aus TYPO3 heraus ein existierendes E-Mailkonto zu verwenden. Darüber kann der Versand per SMTP durchgeführt werden.

Sie können entweder ein existierendes E-Mailkonto verwenden oder über Ihr Kundenmenü ein eigenes Konto für den Versand anlegen. Das kann auch eine Adresse im Format noreply@name-der-domain.de sein. Also eine Adresse, die nur für den Versand genutzt wird, bei der aber bereits die Bezeichnung sagt, dass E-Mails, die an diese Adresse geschickt werden, nicht gelesen werden.

Hier finden Sie eine Videoanleitung zur Konfiguration von E-Mailadressen im Kundenmenü.

Zur Konfiguration in TYPO3 benötigen Sie dann folgende Angaben:

  • Server für den Postausgang SMTP: sslout.de
  • Port: 465
  • Benutzername: ihre E-Mailadresse
  • Passwort ihrer E-Mailadresse

Die notwendigen Schritte sehen Sie im folgenden Video.

Seiten und Inhalte übersetzen

Mehrsprachige Websites sind mit TYPO3 kein Problem. Hier handelt es sich von Anfang an um eine Kernfunktion von TYPO3. Gleichzeitig ist TYPO3 hier, wie auch in vielen anderen Bereichen, extrem flexibel.

Um jetzt die Inhalte einer Website mehrsprachig zur Verfügung zu stellen, sind im Prinzip zwei Schritte notwendig:

  1. Für die Seite selber muss eine Übersetzung angelegt werden
  2. Die Inhaltselemente auf dieser Seite müssen übersetzt werden.

Hierbei bietet TYPO3 zwei verschiedene Modi an:

  1. den verbundenen Modus (Connected Mode)
  2. den freien Modus (Free Mode)

Im verbundenen Modus sind die Inhaltselemente der Standardsprache eng mit den übersetzten Inhaltselementen verknüpft. Wird das Originalelement gelöscht, wird automatisch auch das übersetzte Element gelöscht.
Dieser Modus ist sinnvoll, wenn die Inhalte fast 1:1 in andere Sprachen übersetzt werden sollen.

Im freien Modus besteht keine Verknüpfung zwischen den originalen und den übersetzten Elementen. Wird das Originalelement gelöscht, bleibt das übersetzte erhalten. 
Dieser Modus sollte dann verwendet werden, wenn sich die Inhalte in den verschiedenen Sprachen in vielen Teilen unterscheiden.

Im folgenden Video werden die notwendigen Schritte erläuter.

Weitere Sprachen hinzufügen

Das Musterprojekt wird vonkonfiguriert mit Deutsch und Englisch als Frontend-Sprachen ausgeliefert. Aber selbstverständlich können Sie bei Bedarf auch weitere Sprachen hinzufügen.

Folgende Schritte sind notwendig:

  1. Auf der obersten "Seite" (ID 0) im Seitenbaum einen Datensatz vom Typ "Website-Sprache" anlegen und entsprechend konfigurieren
  2. in der Seitenkonfiguration die gewünschten Sprachen hinzufügen und hier konfigurieren

Das folgende Video zeigt alle notwendigen Schritte.

Nicht benötigte Sprachen entfernen

Sollten Sie die Mehrsprachigkeit für Ihre Website nicht benötigen, können Sie überflüssige Sprachen im Backend auch einfach löschen.

  1. In der Site Configuration die nicht benötigen Sprachen entfernen. Eine Standardsprache (im Musterprojekt Deutsch) muss erhalten bleiben!
  2. Auf der obersten "Seite" (ID 0) die Datensätze vom Typ "Website Sprache" löschen

Zusätzlich können Sie die Anzeige des Sprachmenüs im Frontend ausschalten. Wechseln Sie dazu im Backend in das Template-Modul, wählen die Seite "Home" an, wechseln ggf. in den Konstanten-Editor und wählen dort die Kategorie "jweiland.net Musterprojekt" aus. Wenn Sie ein Stück nach unten scrollen, finden Sie die Option, das Sprachmenü ein- oder auszuschalten.

Die Suchfunktion ausblenden

Im Musterprojekt haben wir auch eine Suchfunktion für die Website integriert. Dabei verwenden wir die Standard-Extension "indexed_search". (Es gibt noch weitere, teilweise leistungsfähigere Such-Extensions wie zum Beispiel "ke_search" oder "solr").

Sollten Sie diese Suchfunktion jedoch nicht benötigen, können Sie sie über eine Konstante im Konstanten-Editor des Template-Backendmoduls einfach ausschalten.

Den Cookie Consent Manager konfigurieren

Obwohl TYPO3 in der Standardkonfiguration im Frontend gar keine Cookies setzt, haben wir ein Tool integriert, mit dem den Besuchern der Website ein sogenannte "Cookie-Banner" angezeigt wird. Sofern Cookies durch die Seite gesetzt werden sollen, haben die Besucher damit die Möglichkeit, der Nutzung einzelner oder aller Cookies zuzustimmen, oder Cookies generell abzulehnen.

In einem neu installierten Musterprojekt wird die Zustimmung zu Cookies von Youtube oder Vimeo abgefragt, da wir auf einer Demo-Seite auch ein Vimeo-Video einbinden.

Über den Konstanteneditor können Sie das Verhalten des Cookie-Banners steuern. So können Sie es auch ganz deaktivieren, falls Ihre Website keine Drittanbieter-Cookies setzt.

Hinweis: Cookies zur Anmeldung im Backend oder Frontend sind technisch notwendige Cookies, auf die nicht gesondert hingewiesen werden muss.

Außerdem haben wir den Cookie Manager schon für gängige Tools vorkonfiguriert. Sie müssen nur in den Konstanten entsprechende Angaben ergänzen, um folgende Tools zu nutzen:

  • Matomo
  • Google Analytics
  • Facebook Pixel
  • Twitter
  • Youtube / Vimeo

Inhaltselemente auf- und zuklappbar anzeigen

Eine in Kundenprojekten oft gewünschte Funktion haben wir jetzt auch fest im Musterprojekt integriert: die Möglichkeit, Inhaltselemente im Frontend auf- und zuklappbar darzustellen.

Gerade bei langen Texten oder vielen Inhalten auf einer Seite haben Sie so eine Option, die Texte übersichtlicher zu gestalten.

Außerdem haben wir die Möglichkeit integriert, Inhaltselemente nur auf Smartphones, also kleinen Bildschirmen, auf- und zuklappbar darzustellen. Auf größeren Bildschirmen werden diese Inhaltselemente "normal" dargestellt.

Verschiedene Konfigurationen für den Texteditor

Der Text-Editor (CKEditor) lässt sich sehr gut konfigurieren und mit zusätzlichen Funktionen erweitern.

Neben der Standard-Konfiguration liefern wir im Musterprojekt noch weitere Konfigurationen mit, um verschiedene Funktionen wie ein Syntax Highlighting oder einen Wort-Zähler zu nutzen.

Hinweis: aktuell (Stand: Mitte Juli 2020) liefern wir noch 4 getrennte Konfigurationen aus. In Kürze werden wir diese Konfigurationen jedoch in einer einzigen, erweiterten Konfiguration zusammenfassen und so die Nutzung noch einmal erleichtern.

Auswählen können Sie die verschiedenen Konfigurationen in den Seiteneigenschaften der "Home"-Seite, unter dem Reiter "Ressourcen" im Feld "Page TSconfig".

Die Seiten-Konfiguration (Überblick)

Über das Modul "Seite" im Bereich "Seitenverwaltung" lassen sich einige Grundeinstellungen für die Website vornehmen. Hier können Sie zum Beispiel den Seitentitel ändern, der im Frontend in der Titelzeile des Browser angezeigt wird. Oder Sie können die verwendeten Sprachen konfigurieren und vieles mehr.

WICHTIG: Indexierung der Website durch Suchmaschinen erlauben

Ein neu installiertes Musterprojekt kann nicht durch Google oder andere Suchmaschinen indexiert werden. Das wird durch Einträge in einer Datei namens robots.txt verhindert.

Das ist am Anfang auch sinnvoll, da Sie ja zuerst Ihre Inhalte in das Musterprojekt einpflegen möchten. Erst, wenn die Demo-Inhalte entfernt und durch echte Inhalte ersetzt wurden, macht es Sinn, die Website durch Suchmaschinen indexieren zu lassen.

Steuern können Sie das durch einen Eintrag in der Seiten-Konfiguration.

Im folgenden Video sehen Sie die notwendigen Schritte.

News-Artikel anlegen und verwalten

Mit der mitgelieferten Erweiterung "News" lassen sich Nachrichten-, Blog-Artikel oder ähnliches pflegen.

News-Artikel unterscheiden sich von normalen Inhaltselemente dadurch, dass sie in der Regel zentral an einer Stelle, bzw. in einem Ordner, gesammelt werden. Die Ausgabe der Artikel, also wo auf der Website und in welcher Form, wird über sogenannte Plugins gesteuert.

Ein News-Artikel besteht mindestens aus einer Überschrift, normalerweise dann noch aus einem Teaser-Text und dem eigentlich Nachrichten-Text. Zusätzlich können Artikeln zum Beispiel noch Bilder, Dateien, relevante Links und mehr hinzugefügt werden.

Das Video zeigt Ihnen, wie Sie vorhandene Artikel pflegen und Neue anlegen können.

Verschiedene Listen-Ansichten für News-Artikel

Die News-Extension liefert von Haus aus eine Listen-Ansicht für News-Artikel mit. Zusätzliche haben wir im Musterprojekt zwei weitere Darstellungsarten konfiguriert:

  • eine reduzierte Listenansicht, die zum Beispiel auf der Startseite der Website für die neuesten Meldungen genutzt werden kann
  • eine Karten-Ansicht, die als Alternative zur Standard-Ansicht genutzt werden kann.

In jedem News-Plugin kann die gewünschte Darstellungsart gewählt werden.

Den RSS-Feed für News konfigurieren

Das Musterprojekt liefert für News-Artikel einen RSS-Feed aus. Besucher können diesen Abonnieren, um so immer über neue Artikel auf dem Laufenden zu bleiben.

Wenn Sie diesen Feed für Ihre News-Artikel nutzen möchten, müssen Sie diesen über den Konstanteneditor konfigurieren.

Angepasst werden müssen:

  • Der Titel des RSS-Feeds
  • Die Beschreibung
  • Der Domainname der Website, inklusive Protokoll (http oder https)

Außerdem können Sie über eine Konstante den Feed generell aus- oder einschalten.

Was ist der Cache und warum muss er ab und zu gelöscht werden

Um die Auslieferung einer Website zu beschleunigen, verwendet TYPO3 verschiedene Cache-Mechanismen. Bei dem Cache handelt es sich um eine Art Zwischenspeicher, damit TYPO3 nicht bei jedem Frontend-Aufruf die angeforderte Seite neu erzeugen muss.

Ab und zu ist es aber notwendig, diesen Cache manuell zu löschen. Wie das genau funktioniert und warum das nötig ist, erfahren Sie im Video.

Überblick über die Musterprojekt-Extension (Sitepackage)

Beim Musterprojekt handelt es sich um im Prinzip um eine TYPO3-Extension. Dabei spricht man auch von einem "Sitepackage", da hier alle Dateien gebündelt sind, die zum Betrieb der Website notwendig sind.

Solche notwendigen Dateien sind zum Beispiel

  • CSS-Dateien
  • JavaScript-Dateien
  • Bilder und Icons
  • HTML-Vorlagen (Fluidtemplates)
  • Konfigurationsdateien für TypoScript und TSconfig
  • und mehr

Obwohl sich vieles im Musterprojekt über Konstanten einstellen lässt, sind weitergehende Änderungen oft nur durch bearbeiten dieser Dateien möglich.

In diesem Video erhalten Sie einen Überblick über das Sitepackage und lernen die Aufbau einer solchen Extension kennen.

Änderungen am CSS vornehmen

In diesem Video lernen Sie, wie Sie bestimmte Elemente der Website per CSS verändern können. Als einfaches Beispiel sehen Sie, wie man die Farbe und Schriftart der Überschriften ändert.

Außerdem lernen Sie, wie Sie herausfinden können, in welcher CSS-Datei die Definitionen für Elemente zu finden sind.

Für dieses Kapitel benötigen Sie zumindest grundlegende Kenntnisse in CSS.

Um die Dateien bearbeiten zu können, müssen Sie sich per SSH oder (S)FTP mit dem Webserver verbinden. Eine Bearbeitung aus dem Backend heraus ist nicht direkt möglich.

Dafür gibt es mehrere Methoden:

Der Benutzer "redakteur" - was sind eigentlich "Redakteure"?

Neben der Rolle des Administrators, der alle Rechte am TYPO3-System hat, kann man auch noch Backend-Benutzer mit eingeschränkte Rechten anlegen.

Diese Benutzer können zum Beispiel Seiten und Inhalte bearbeiten, können aber keine Änderungen an der Systemkonfiguration vornehmen, oder auch keine TYPO3-Erweiterungen installieren.

In der Regel spricht man hier von "TYPO3-Redakteuren".

Das Musterprojekt liefert einige Backend-Benutzergruppen sowie einen Beispielbenutzer mit dem Benutzernamen "redakteur" als Beispiel mit.

In diesem Video lernen Sie den Unterschied zwischen einem Administrator und einem Redakteur kennen.

Die Rechte des Redakteurs anpassen

Die Zugriffsrechte eines Redakteurs können weitgehend angepasst werden.

Generell gilt die Regel: ein Redakteur sollte nur die Module und Eingabefelder sehen, die er für seine Arbeit braucht. Ansonsten sind gerade unerfahrene Anwender schnell mit den vielen Möglichkeiten überfordert.

Die Rechte werden weitestgehend über die Benutzergruppen konfiguriert. Wir haben im Musterprojekt diese Gruppen sehr modular aufgebaut. So findet man sich leichter zurecht, wenn man die Rechte für bestimmte Bereiche oder Funktionen anpassen will.

Eine Übersicht über die Möglichkeiten zeigt Ihnen das folgende Video.

Einen neuen Redakteur anlegen

Sie können bei Bedarf weitere Redakteure selbst anlegen.

Die Rechte des Benutzers können Sie durch die Zuweisung der Benutzergruppen steuern.

Die neue Website live schalten

Wenn Sie mit der Anpassunge des Musterprojeks fertig sind, möchten Sie Ihre neue Website natürlich live schalten, sodaß auch Besucher in den Genuß der Website kommen können. 

Folgende Schritte sind dafür notwendig:

  1. Passen Sie in der Seitenkonfiguration den Einstiegspunkt an.
    Hier muss die Domain eingetragen werden, unter der die Website erreichbar sein soll. Tragen Sie den Domainnamen inklusive des Protokolls ein, also http oder https
  2. In der Domainverwaltung im Kundenmenü müssen Sie den Zielpfad der Domain anpassen.
    Hier muss das Verzeichnis auf dem Server ausgewählt werden, in dem das Projekt liegt.
    Setzen Sie ggf. noch die PHP-Version auf 7.3LATEST, die Edition auf EXTENDED und die "Sicheren Einstellungen" auf "Ja"
  3. Um die Indexierung der Website durch Suchmaschinen zu ermöglichen, passen Sie in der Seitenkonfiguration die Einstellungen für die robots.txt an.
    Beachten Sie dafür bitte die Videoanleitung auf dieser Seite hier.
  4. Sofern Sie ein SSL-Zertifikat für die Domain haben, muss eine automatische Umleitung von http auf https aktiviert werden.
    Dazu müssen Sie in der Datei .htaccess im Projektverzeichnis auf dem Server die letzten beiden Zeilen aktivieren, indem Sie das Raute-Symbol am Beginn der jeweiligen Zeilen entfernen.

Tägliches Backup der Website einrichten

Das neue Projekt sollte in das tägliche Backup integriert werden. So haben Sie jederzeit die Möglichkeit, die Website aus einem Backup wiederherzustellen, falls zum Beispiel versehentlich Seiten oder Dateien gelöscht wurden.

Sofern das Musterprojekt durch uns eingerichtet wurde, ist dieser Schritt nicht notwendig! Durch uns installierte Musterprojekte sind immer schon im Backupskript eingebunden.

Sollten Sie das Musterprojekt selbst installiert haben, müssen die folgenden Schritte durchgeführt werden:

  1. Bearbeiten Sie die Datei "daily" auf dem Server. Sie finden die Datei im Verzeichnis typo3cms/system/backup/
  2. Ergänzen Sie bei den vorbereiteten Zeilen (z.B. bei projekt3)
    1. das Verzeichnis, in dem das Projekt liegt
    2. den Namen der Datenbank
    3. den Namen des Datenbankbenutzers
    4. das Passwort für die Datenbank
      WICHTIG: das Passwort muss mit einfachen Anführungszeichen umschlossen sein!
  3. Aktivieren Sie die entsprechende Zeile für das Datenbank-Backup durch entfernen des Raute-Symbols am Zeilenanfang
  4. Aktivieren Sie die 3 Zeilen für das Datei-Backup, indem Sie ebenfalls die Raute am Zeilenbeginn entfernen

Nachdem Sie die Änderungen gespeichert haben, können Sie das Backup testen, indem Sie in Ihrem Kundenmenü den Cronjob starten, der das daily-Skript aufruft.

Alle Schritte werden im folgenden Video ausführlich erklärt.

Upgrade von Version 9 auf Version 10

Wenn Sie bisher das Musterprojekt 9 genutzt haben, können Sie natürlich ein Upgrade auf TYPO3 10 durchführen. 

Nach dem erfolgreichen Upgrade gibt es dann zwei Möglichkeiten:

  1. Sie nutzen die Musterprojekt-Extension, Version 9 (jwmusterprojekt9), weiter in TYPO3 10
  2. Sie tauschen die Musterprojekt-Extension Version 9 gegen die Version 10 aus (jwmusterprojekt10).

Zu 1)

Vorteile:

  • Sie haben eine aktuelle TYPO3 Version
  • Falls Sie an den Dateien des Musterprojekts 9 eigene Anpassungen durchgeführt haben (CSS, TypoScript, Fluidtemplates etc.) sind diese Anpassungen nach wie vor vorhanden und die Website funktioniert im Frontend einfach weiter wie zuvor

Nachteile:

  • Sie können die neuen Funktionen des Musterprojekts 10 nicht nutzen (Responsive Image Rendering, neue Navigationsarten, mehrspaltige Container für Inhalte, Cookie Manager)

zu 2)

Vorteile:

  • Sie haben ebenfalls eine aktuelle TYPO3-Version
  • Sie haben alle neuen Funktionen des Musterprojekts 10 (s.o.)

Nachteile:

  • Sofern Sie eigene Anpassungen an Dateien des Musterprojekts 9 durchgeführt haben (CSS, TypoScript, Fluidtemplates etc.), müssen Sie diese Anpassungen manuell in die entsprechenden Dateien des Musterprojekts 10 übernehmen. Ein automatische Migration ist nicht möglich.

Beide Varianten haben also Vor- und Nachteile, und Sie müssen für sich selber entscheiden, welche Variante Sie wählen. Natürlich können wir Sie dabei unterstützen!

In den folgenden Videos zeigen wir an einem Beispiel ein komplettes Upgrade vom Musterprojekt 9 auf 10, inklusive Austausch der Musterprojekt-Extension.

Änderungsprotokoll (Changelog)

Hier dokumentieren wir alle Änderungen, die wir im Lauf der Zeit am TYPO3 Template vornehmen. So können Anwender ihre eigene Installation immer auf dem laufenden Stand halten. Künftige TYPO3 Updates werden so deutlich einfacher.

Version 1.6.3

2020-08-24 [BUGFIX] Delete double class definition

Changed file:
* EXT:jwmusterprojekt10/Resources/Private/Page/Partials/Header.html

2020-08-24 [TASK] Rename mp9forms.yaml

Renamed file:
* EXT:jwmusterprojekt10/Configuration/Forms/mp9forms.yaml => EXT:jwmusterprojekt10/Configuration/Forms/exampleform.yaml

Changed file:
* EXT:jwmusterprojekt10/Configuration/TypoScript/Extensions/Form/Setup/ext.form.typoscript

Version 1.6.2

2020-07-21 [BUGFIX] Reactivate missing buttons in RTE

Changed files:
* EXT:jwmusterprojekt10/Configuration/RTE/custom.yaml

Version 1.6.1

2020-07-17 [TASK][FOLLOWUP] Merge the different CKEditor configurations into one

Removed unnecessary configuration files

Removed files:
* EXT:jwmusterprojekt10/Configuration/RTE/codesnippets.yaml
* EXT:jwmusterprojekt10/Configuration/RTE/wordcount-codesnippet.yaml
* EXT:jwmusterprojekt10/Configuration/RTE/wordcount.yaml

Version 1.6.0

2020-07-17 [TASK] Merge the different CKEditor configurations into one

Changed files:
* EXT:jwmusterprojekt10/ext_localconf.php
* EXT:jwmusterprojekt10/Configuration/RTE/custom.yaml
* EXT:jwmusterprojekt10/Configuration/TCA/Overrides/pages.php
* EXT:jwmusterprojekt10/Configuration/TypoScript/General/Setup/001_page.typoscript

Version 1.5.2

2020-07-16 [TASK] Add extensions as dependencies

Changed files:
* EXT:jwmusterprojekt10/composer.json
* EXT:jwmusterprojekt10/ext_emconf.php

Version 1.5.1

2020-07-06 First Release