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

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

1. Lade über das Datei Modul unter "Dateiliste" deine Logo-Datei hoch (Dateiformat JPG, PNG oder SVG empfohlen). Lege dafür bei Bedarf noch einen passenden Ordner an, um deine Dateien zu organisieren.
2. Klicke im Site Management Modul auf "TypoScript".
3. Klicke im Seitenbaum die Seite "Home" an.
4. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
5. Scrolle nach unten zum Abschnitt "Layout".
6. Klicke neben dem Feld "Logo" auf das Stiftsymbol um die Bearbeitung zu aktivieren.
7. Trage hier den Pfad zu deiner Logodatei ein (zum Beispiel fileadmin/logos/mein_logo.png).
8. Klicke oben auf die Schaltfläche "Speichern".

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

Führe folgende Schritte durch:

1. Klicke im Site Management Modul auf "TypoScript".
2. Klicke im Seitenbaum die Seite "Home" an.
3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
4. Klicke neben dem Feld "Firmenname" auf das Stiftsymbol um den Inhalt des Feldes bearbeiten zu können.
5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

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

Das TYPO3 Template 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 Konstanten-Editor 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
• Verwende eine Bilddatei im PNG oder JPG-Format. PNG wird empfohlen. Da im TYPO3 Template dynamisch verschiedene Varianten erstellt werden, funktionieren hier die klassischen ICO-Dateien nicht. Diese werden heutzutage aber auch nicht mehr benötigt.

Um die Dateien anzupassen, gehe wie folgt vor:

1. Klicke im Site Management Modul auf "TypoScript".
2. Klicke im Seitenbaum die Seite "Home" an.
3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
4. Scrolle nach unten bis zum Bereich "Layout".
5. Klicke auf das Stiftsymbol bei "App-/Favicon Quadratisch" bzw. "App-/Favicon Breit", um das Eingabefeld zu aktivieren.
6. In das Eingabefeld trägst du den Pfad zu deiner 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
7. Zum Abschluss klicke oben auf "Speichern".
8. Sollte die Änderung nicht sofort sichtbar sein, musst du den Frontend-Cache und auch deinen Browser-Cache löschen.

Im TYPO3 Template 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").

Führe folgende Schritte durch um die Suchfunktion auszublenden:

1. Klicke im Site Management Modul auf "TypoScript".
2. Klicke im Seitenbaum die Seite "Home" an.
3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
4. Unterhalb "Einstellungen für Navigation" das Feld "Suchfeld anzeigen" deaktivieren
5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Das TYPO3 Template wird mit einem festen Headerbereich ausgegeben. Das bedeutet, dass beim Scrollen der Webseite dieser immer sichtbar bleibt. Wenn dies nicht gewünscht ist, kann man dies deaktivieren.

Führe folgende Schritte durch um den Fixed Header zu deaktivieren:

1. Klicke im Site Management Modul auf "TypoScript".
2. Klicke im Seitenbaum die Seite "Home" an.
3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
4. Unterhalb "Layout" das Feld "Fester Headerbereich" deaktivieren
5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Beim Scrollen einer Seite blenden sich die Inhaltselemente langsam ein. Wenn dies nicht gewünscht ist, kann man es deaktivieren.

Führe folgende Schritte durch um das Einblenden der Inhalte zu deaktivieren:

1. Klicke im Site Management Modul auf "TypoScript".
2. Klicke im Seitenbaum die Seite "Home" an.
3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
4. Unterhalb "Layout" das Feld "Einblenden der Inhaltselemente" deaktivieren
5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

Das TYPO3 Template 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 du diesen Feed für deine News-Artikel nutzen möchtest, musst du diesen über den Konstanten-Editor konfigurieren. Außerdem kannst du über eine Konstante den Feed generell aus- oder einschalten.

Angepasst werden müssen:

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

Wenn das RSS Icon mit den Social Media Icons als Inhaltselement (Menü der Unterseiten mit Layout "Social Media Links von Seiten" ) ausgegeben werden soll, dann aktiviere im Kontstanten-Editor noch "RSS Icon in Social Media Icons Inhaltselement".

In TYPO3 12 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 findest du einen Tab "SEO"

• Titel für Suchmaschinen: hier kannst du 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)

Wir haben als Hilfe zur leichteren "On Page"-Suchmaschinenoptimierung die Extension "yoast_seo"  im TYPO3 Template hinzugefügt. "On Page" bedeutet: Maßnahmen, die man selber auf seiner Seite durchführen kann. So erkennt der Redakteur sofort was getan werden muss, um die Webseite für Suchmaschinen zu optimieren.

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.

Zur Suchmaschinenoptimierung und Barrierefreiheit gehört auch, dass für jede Datei, die auf der Webseite eingebunden wird, die Meta-Daten ausgefüllt werden.
Für jede Datei, die im Backend genutzt wird, können diese 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 du diese Daten nur einmal pro Datei pflegen musst. Wenn du die Datei dann in einem Inhaltselement verwendest (auch mehrfach auf verschiedenen Seiten), werden automatisch die global gepflegten Meta-Daten genutzt.

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

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

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

News-Artikel unterscheiden sich von normalen Inhaltselementen dadurch, dass sie in der Regel zentral an einer Stelle in einem Verzeichnis, gesammelt werden. Die Ausgabe der Artikel auf der Website wird durch das Inhaltselement News mit verschiedenen Typen gesteuert.

Verschiedene Listen-Ansichten für News-Artikel

Die News-Extension liefert von Haus aus eine Listen-Ansicht für News-Artikel mit. Zusätzlich haben wir im TYPO3 Template 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 unterhalb des Reiters "Plug-In" unter "Erweiterungsoptionen" "Vorlage" "Template-Layout" gewählt werden.

Hinweis zur Extension news_administration: Wir binden keine kostenpflichtigen Extensions in unser SitePackage ein. Deshalb steht diese Funktion nicht zur Verfügung.

Obwohl TYPO3 in der Standardkonfiguration im Frontend gar keine Cookies setzt, haben wir ein Tool integriert, mit dem den Besuchern der Website ein sogenanntes "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 TYPO3 Template wird die Zustimmung zu Cookies von Youtube oder Vimeo abgefragt, da wir auf einer Demo-Seite auch ein Vimeo-Video einbinden.

Über den Konstanten-Editor kannst du das Verhalten des Cookie-Banners steuern. So kannst du es auch ganz deaktivieren, falls deine 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. Du musst nur in den Konstanten entsprechende Angaben ergänzen, um folgende Tools zu nutzen:

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

Den Cookie Consent Manager übersetzen

Natürlich kannst du beliebige weitere Sprachen hinzufügen. Dann müssen allerdings bei Bedarf auch die Texte im Consent Manager übersetzt werden. Dazu musst du per SSH oder FTP die Datei

typo3conf/ext/jwsitepackage12/Resources/Private/Page/Partials/Klaro.html

bearbeiten.

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.

Der Cache einer Seite wird automatisch gelöscht, wenn ein Redakteur auf einer Seite ein Inhaltselement neu speichert. 

Im Backend kann man den Seitencache als Redakteur löschen, indem man auf das Blitz Icon klickt.

Wenn du bisher das Musterprojekt 11 genutzt haben, kannst du natürlich ein Upgrade auf TYPO3 Version 12 durchführen. 

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

1. Du nutzt die Musterprojekt-Extension, Version 11 (jwmusterprojekt11), weiter in TYPO3 V12

Vorteile:

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

Nachteile:

• Du kannst die neuen Funktionen des Sitepackages für die Version12 (jwsitepackage12) nicht nutzen.

2. Du tauscht die Sitepackage Extension Version 11 (jwmusterprojekt11) gegen die Version 12 aus (jwsitepackage12).

Vorteile:

• Du hast ebenfalls eine aktuelle TYPO3-Version
• Du hast alle neuen Funktionen des Sitepackages V12 

Nachteile:

• Sofern du eigene Anpassungen an Dateien des Musterprojekts V11 durchgeführt hast (CSS, TypoScript, Fluidtemplates etc.), musst du diese Anpassungen manuell in die entsprechenden Dateien des Sitepackages V12 übernehmen. Ein automatische Migration ist nicht möglich.

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

Da unser SitePackage auf einem nicht öffentlichen Server liegt, kann das SitePackage derzeit nicht über packagist.org oder ein individuelles Repository heruntergeladen werden. Mit den folgenden Schritten können Sie aus dem SitePackage eine Composer-fähige Version erstellen:

1.) Laden Sie sich das SitePackage tar.gz herunter oder verwenden Sie das tar.gz, das sich bereits auf Ihrem Server befindet.

2.) Da TYPO3 12 mindestens PHP 8.1 benötigt, passen Sie die PHP-Version für die Konsole entsprechend an.

3.) Installieren Sie TYPO3 12.4

composer create-project typo3/cms-base-distribution:"^12" site-package

4.) Wechseln Sie in das Verzeichnis site-package:

cd site-package

5.) Fügen Sie das Paket indexed-search hinzu:

composer req typo3/cms-indexed-search:^12.4

6.) Erstellen Sie die Verzeichnisstruktur für nicht composer-basierte Extensions:

mkdir -p Source/Extensions

7.) Entpacken Sie das SitePackage:

tar -xzf sitepackage-12.4.8.tar.gz

8.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/typo3conf/ext/jwsitepackage12 in das soeben erstelle Verzeichnis Source/Extensions

9.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/typo3conf/sites in das Verzeichnis typo3cms/site-package/config

10.) Editieren Sie die Datei typo3cms/site-package/config/sites/main/config.yaml und passen Sie die erste Zeile an Ihren Domainnamen an.

11.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/typo3conf/system in das Verzeichnis typo3cms/site-package/config

12.) Editieren Sie die Datei typo3cms/site-package/config/system/settings.php und passen Sie die Datenbank Parameter an.

13.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/fileadmin in das Verzeichnis typo3cms/site-package/public

14.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/uploads in das Verzeichnis typo3cms/site-package/public

15.) Fügen Sie das Verzeichnis Source/Extensions als Repository in die typo3cms/site-package/composer.json hinzu:

"repositories": {
	"0": {
		"type": "path",
		"url": "./Source/Extensions/*",
		"options": {
			"reference": "none",
			"versions": {
				"jweiland/sitepackage": "1.0.6"
			}
		}
	}
},

16.) Im Verzeichnis typo3cms/site-package installieren Sie nun das SitePackage mit Composer:

composer req jweiland/sitepackage:^1.0

17.) Im entpackten SitePackage befindet sich in sitepackage-12-lts/typo3conf eine sql Datei, die Sie mittels Shell oder PhpMyAdmin in Ihre Datenbank einspielen.

18.) Passen Sie den Domain-Pfad im Kundenmenü an das Verzeichnis an. Achten Sie darauf, dass Sie auf den Unterordner typo3cms/site-package/public verweisen.

19.) Öffnen Sie nun die URL [domain]/typo3/install.php und loggen Sie sich in das InstallTool von TYPO3 ein

19a.) Falls Sie das Passwort nicht kennen, dann einfach irgendein Passwort eintragen. Nach Login erscheint ein Hash-Wert, der mit "$" anfängt. Den bitte kopieren

19b.) Erstellen Sie die Datei additional.php im Verzeichnis typo3cms/site-package/config/system

19c.) Fügen Sie folgendes in die additional.php ein:

<?php

$GLOBALS['TYPO3_CONF_VARS']['BE']['installToolPassword'] = 'HierKommtDerHashWertRein';

19d.) Jetzt können Sie sich mit dem eben eingetragenen Passwort im InstallTool anmelden

20.) Klicken Sie auf Environment

21.) Klicken Sie auf "Check directory status"

22.) Scrollen Sie nach unten und klicken Sie den "Fix" button.

23.) Im Bereich Maintenance klicken Sie bitte noch auf Flush Cache

Das SitePackage ist nun als Composer-Paket installiert. Sie können nun Ihre Webseite laden und mit dem SitePackage arbeiten.