[Drk Typo3 Template Installieren Von
Addison Mauldin
Mit dem kostenlosen TYPO3 Template kann man sofort mit dem Erfassen von Inhalten beginnen, die Webseite ist in krzester Zeit online. Man muss sich nicht um Design, Templates oder TypoScript Code kmmern.
Das TYPO3 Template steht als kostenloser Download fr interessierte Anwender bereit. So kannst du das Template fr TYPO3 CMS auch bei anderen Providern installieren. In diesem Fall musst du dann leider auf unseren Support verzichten. Alternativ buchst du einfach unseren kostenlosen TYPO3 Developer Tarif unverbindlich fr 3 Monate. Dort ist das Template (wie in allen unseren Hosting Paketen) bereits vorinstalliert und du kannst sofort loslegen.
Es kann als Grundlage fr eine eigene Website verwendet werden und stellt ein "Best practice" Beispiel dar. Hier kannst du lernen, wie man ein TYPO3-Projekt aufsetzt. Es soll dabei keine Design-Vorlage sein, sondern eine Projektvorlage. Das Design kannst du beliebig an eigene Vorstellungen anpassen.
Das Template ist bei allen neuen TYPO3 Hosting-Paketen von jweiland.net im Preis enthalten und bereits vorinstalliert. Es kann von dieser Webseite kostenlos heruntergeladen und verwendet werden (Downloadlink siehe weiter oben)
Das Projekt wird kontinuierlich weiter entwickelt. Die aktuelle Version 1.0.9 des Templates vom Januar 2023 basiert auf TYPO3 Version 11.5 LTS und steht in den Cloud Hosting Paketen automatisch zur Verfgung.
Beachte jedoch: bestehende Installationen knnen nicht automatisch aktualisiert werden, da jeder Kunde selber nderungen an den Dateien des Musterprojekts durchfhren kann. Bei automatischen Updates wrden diese nderungen berschrieben werden.
Aus Sicherheitsgrnden solltest du nach der manuellen Installation den sogenannten Encryption Key ndern. Das ist eine lange zufllige Kombination von Buchstaben und Ziffern. Mit diesem Key werden die verschiedenen Verschlsselungen im TYPO3-System "gesalzen", das heit, es wird noch ein weiterer Zufallswert in die Verschlsselung eingebaut.
Einer der ersten Schritte bei der Anpassung des Musterprojekts sollte die nderung des Firmennamens sein. Dieser ist zum Beispiel ganz unten im Fubereich jeder Seite zu sehen. Natrlich kannst du statt einem Firmennamen hier auch deinen persnlichen Namen oder einen beliebigen anderen Text eingeben.
Das Bild im Kopfbereich kann beliebig ersetzt oder auch entfernt werden. Dazu findest du auf jeder Seite einen speziellen Bereich, wo du z.B. ein Inhaltselement vom Typ "Text & Medien" anlegen und damit ein Bild einbinden kannst.
Gerade bei Verwendung der horizontalen Navigation stt man schnell an Probleme, wenn man viele Seiten auf der ersten Menebene hat oder die Seitentitel relativ lang sind. Hier kann unter Umstnden dann das Layout gestrt werden, in dem die Navigation in eine zweite Zeile umbricht.
Sobald der zur Verfgung stehende Platz in der Navigation nicht mehr ausreicht um alle Menpunkte 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 Endgert, egal ob Desktop-PC, Laptop, Tablet oder Smartphone, immer perfekt dargestellt.
Im Dashboard kann man sich ber sogenannte Widgets verschiedene Informationen anzeigen lassen. TYPO3 bringt schon einige Widgets mit, wir haben im Musterprojekt ebenfalls ein kleines Widget integriert, das dich direkt zur Dokumentation fhrt (also auf diese Seite).
In TYPO3 11 LTS bentigt man im Prinzip keine zustzliche Extension mehr fr grundlegende SEO-Funktionen. So gehren die manuelle Anpassung des Seitentitels, die Steuerung der Indexierung durch Suchmaschinen sowie die Generierung des Canonical-Tags zu den Standardfunktionen.
Die Extension analysiert zum Beispiel den Text einer Seite auf Lesbarkeit und gibt auch Tipps zur Verbesserung. Auerdem wird geprft, 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 sorgfltig zu lesen.
In den Seiteneigenschaften jeder Seite kann man fr 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). Dafr gibt es den 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 bercksichtigt. So kann man sehr genau steuern, was fr Texte und Bilder in der Vorschau der beiden Plattformen angezeigt werden.
Im Musterprojekt fr TYPO3 11 nutzen wir das "Responsive Image Rendering". Das bedeutet: je nach Endgert, mit dem die Website betrachtet wird, wird ein in der Gre fr dieses Gert 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 natrlich wenig Sinn, groe Bilder (= groe Datenmengen) an Gerte auszuliefern, die die Bilder sowieso nur kleiner darstellen knnen.
Das bedeutet, du kannst 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 Mglichkeit, die Crop Varianten fr die verschiedenen Gerte zu synchronisieren. Das ist dann wichtig, wenn du fr alle Gerte den Bildausschnitt verndern willst. Bisher musste man das manuell machen.
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.
Fr jede Datei, die im Backend genutzt wird, knnen sogenannte Meta-Daten verwaltet werden. Meta-Daten knnen zum Beispiel ein "Alternativer Text" fr Bilder sein oder eine Copyright-Information. Teilweise werden diese Metadaten auch automatisch im Frontend ausgegeben, sofern Sie vorhanden sind.
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.
In den Meta-Daten von Dateien kannst du auch Informationen zum Ersteller und zum Urheberrecht (Copyright) hinterlegen. Sofern diese Felder befllt sind, werden diese Daten bei Bildern automatisch angezeigt.
Im Musterprojekt haben wir auch eine Suchfunktion fr die Website integriert. Dabei verwenden wir die Standard-Extension "indexed_search". (Es gibt noch weitere, teilweise leistungsfhigere Such-Extensions wie zum Beispiel "ke_search" oder "solr").
Das Musterprojekt wird in 2 Sprachen ausgeliefert (Deutsch, Englisch). Solltest du deine Website jedoch nur einsprachig betreiben, kannst du das Sprachmen ber eine Konstante ausblenden. Weiter unten findest du dann noch Videos, wie du weitere Sprachen hinzufgen oder nicht bentigte Sprachen entfernen kannst.
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 Mglichkeit, der Nutzung einzelner oder aller Cookies zuzustimmen, oder Cookies generell abzulehnen.
Mit TYPO3 lassen sich auch relativ komplexe E-Mailformulare umsetzen. Damit knnen sowohl einfache Kontaktformulare als auch mehrseitige Bestell-, Umfrage-, Bewerbungsformulare und vieles mehr realisiert werden.
Mit dem Musterprojekt erhltst du auch ein Beispielformular. Hier haben wir ein paar der verschiedenen Formularmglichkeiten exemplarisch eingebaut. Damit du das Formular nutzen kannst, sind aber ein paar Anpassungen notwendig.
Dazu mssen im Backendmodul "Formulare" die sogenannten Finisher des Formulars bearbeitet werden. Ein Finisher definiert eine Aktion, die ausgefhrt wird, wenn der Besucher der Website beim Formular auf die "Senden"-Schaltflche klickt.
Du kannst entweder ein existierendes E-Mailkonto verwenden oder ber dein Kundenmen (Plesk) ein eigenes Konto fr den Versand anlegen. Das kann auch eine Adresse im Format nor...@name-der-domain.de sein. Also eine Adresse, die nur fr den Versand genutzt wird, bei der aber bereits die Bezeichnung sagt, dass E-Mails, die an diese Adresse geschickt werden, nicht gelesen werden.
Das ist am Anfang auch sinnvoll, da du ja zuerst deine Inhalte in das Musterprojekt einpflegen mchtest. Erst, wenn die Demo-Inhalte entfernt und durch echte Inhalte ersetzt wurden, macht es Sinn, die Website durch Suchmaschinen indexieren zu lassen.
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.
Im verbundenen Modus sind die Inhaltselemente der Standardsprache eng mit den bersetzten Inhaltselementen verknpft. Wird das Originalelement gelscht, wird automatisch auch das bersetzte Element gelscht.
Dieser Modus ist sinnvoll, wenn die Inhalte fast 1:1 in andere Sprachen bersetzt werden sollen.
Im freien Modus besteht keine Verknpfung zwischen den originalen und den bersetzten Elementen. Wird das Originalelement gelscht, bleibt das bersetzte erhalten.
Dieser Modus sollte dann verwendet werden, wenn sich die Inhalte in den verschiedenen Sprachen in vielen Teilen unterscheiden.
Zustzlich kannst du die Anzeige des Sprachmens im Frontend ausschalten. Wechsle dazu im Backend in das Template-Modul, whle die Seite "Home" an, wechsle ggf. in den Konstanten-Editor und whle dort die Kategorie "jweiland.net Musterprojekt" aus. Wenn du ein Stck nach unten scrollst, findest du die Option, das Sprachmen ein- oder auszuschalten.
Natrlich kannst du beliebige weitere Sprachen hinzufgen. Dann mssen allerdings bei Bedarf auch die Texte im Consent Manager bersetzt werden. Dazu musst du per SSH oder FTP die Datei typo3conf/ext/jwmusterprojekt10/Resources/Private/Page/Partials/Klaro.html bearbeiten.
795a8134c1