TYPO3 Custom Elements mit Core Ways lernen

Bevor wir beginnen, lassen Sie mich kurz versuchen zu klären, was kundenspezifische TYPO3-Elemente sind. Für jede TYPO3-Website muss der TYPO3-Entwickler, je nach Geschäftsanforderungen, benutzerdefinierte Elemente erstellen. Hier ist das Beispiel.

Frontend-TYPO3-Vorlage

Schauen Sie sich unsere bekannteste Gratis TYPO3 Template T3 Agency Das gesamte Template wurde mit TYPO3-Kern- und benutzerdefinierten Elementen entwickelt, z.B. About, Banner mit CTA, etc.

Was sind TYPO3-Kernelemente?

Die TYPO3-Community ist großartig, sie sind immer begierig darauf, etwas Cooles zu erfinden. Um eigene TYPO3-Elemente zu erstellen, gibt es viele beliebte TYPO3-Erweiterungen unter TER.

Sie haben vielleicht Fragen, warum separate TYPO3-Erweiterungen für solche Core-Level-Aufgaben entwickelt wurden? Hier sind die Gründe wie unten aufgeführt.

• Für eine schnellere Entwicklung, da der TYPO3-Kernweg etwas zeitaufwändig ist und viele Schritte (von PHP, PageTSconfig, TypoScript, etc)
• folgt
• Einfache Wartung
• Zukünftige Erweiterbarkeit
• Komplikationslose Updates
• Und so weiter.

Schauen wir uns die nützlichsten, beliebtesten und modernsten TYPO3-Erweiterungen an, die für TYPO3 verfügbar sind, um benutzerdefinierte Elemente zu erstellen.

Fordern Sie Ihr Feedback ein

Wenn Sie möchten, dass ich einen detaillierten Blog für eine der unten aufgeführten Methoden schreibe, dann schreiben Sie mir in das Kommentarfeld unten. Und Unser Blog abonnieren Der TYPO3 Knowledge Hub.

1. TYPO3 Kern-Wege

Am liebsten halten wir natürlich an den TYPO3-Kernwegen für Leistung, Sicherheit und vor allem für zukünftige einfache Updates fest. Die Ziele dieses Artikels geben Ihnen einen Überblick über die Erstellung von benutzerdefinierten TYPO3-Elementen mit TYPO3-Kernwegen, lesen Sie einfach weiter!

2. Maske - Gernot Ploiner

Die TYPO3-Community ist großartig, sie sind immer begierig darauf, etwas Cooles zu erfinden. Um eigene TYPO3-Elemente zu erstellen, gibt es viele beliebte TYPO3-Erweiterungen unter TER.

Sie haben vielleicht Fragen, warum separate TYPO3-Erweiterungen für solche Core-Level-Aufgaben entwickelt wurden? Hier sind die Gründe wie unten aufgeführt.

• Für eine schnellere Entwicklung, da der TYPO3-Kernweg etwas zeitaufwändig ist und viele Schritte (von PHP, PageTSconfig, TypoScript, etc)
• folgt
• Einfache Wartung
• Zukünftige Erweiterbarkeit
• Komplikationslose Updates
• Und so weiter.

Schauen wir uns die nützlichsten, beliebtesten und modernsten TYPO3-Erweiterungen an, die für TYPO3 verfügbar sind, um benutzerdefinierte Elemente zu erstellen.

Fordern Sie Ihr Feedback ein

Wenn Sie möchten, dass ich einen detaillierten Blog für eine der unten aufgeführten Methoden schreibe, dann schreiben Sie mir in das Kommentarfeld unten. Und Unser Blog abonnieren Der TYPO3 Knowledge Hub.

1. TYPO3 Kern-Wege

Am liebsten halten wir natürlich an den TYPO3-Kernwegen für Leistung, Sicherheit und vor allem für zukünftige einfache Updates fest. Die Ziele dieses Artikels geben Ihnen einen Überblick über die Erstellung von benutzerdefinierten TYPO3-Elementen mit TYPO3-Kernwegen, lesen Sie einfach weiter!

2. Maske - Gernot Ploiner

Quelle

Schritt 1. SeiteTSconfig: Registerkarte Registrierung der TYPO3 "Benutzerdefinierte Elemente"

// typo3conf/myextension/Configuration/PageTSconfig/setup.typoscript

mod.wizards.newContentElement.wizardItems.extra {
    header = Custom Elements
    icon =
    elements {
        myextension_newcontentelement {
            iconIdentifier = my-icon-identifier
            title = LLL:EXT:my/Resources/Private/Language/Tca.xlf:myextension_newcontentelement.wizard.title
            description = LLL:EXT:myextension/Resources/Private/Language/Tca.xlf:myextension_newcontentelement.wizard.description
            tt_content_defValues {
                CType = myextension_newcontentelement
            }
        }
    }
    show := addToList(myextension_newcontentelement)
}

// typo3conf/ext/myextension/ext_localconf.php

$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
// use same identifier as used in TSconfig for icon
$iconRegistry->registerIcon(
   // use same identifier as used in TSconfig for icon
   'my-icon-identifier',
   \TYPO3\CMS\Core\Imaging\IconProvider\FontawesomeIconProvider::class,
   // font-awesome identifier ('external-link-square')
   ['name' => 'external-link-square']
);

Step 2. TCA tt_content: Benutzerdefinierte TYPO3-Elemente zur Dropdown-Liste "Typ" hinzufügen

// typo3conf/myextension/Configuration/TCA/Overrides/tt_content.php

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
   'tt_content',
   'CType',
    [
        'LLL:EXT:myextension/Resources/Private/Language/Tca.xlf:myextension_newcontentelement',
        'myextension_newcontentelement',
        'my-icon-identifier',
    ],
    'header',
    'after'
);

Step 3. TCA tt_content: Felder hinzufügen

// typo3conf/myextension/Configuration/TCA/Overrides/tt_content.php

$GLOBALS['TCA']['tt_content']['types']['myextension_newcontentelement'] = [
    'showitem' => '
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
            --palette--;;general,
            --palette--;;headers,
            bodytext;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:bodytext_formlabel,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
            --palette--;;frames,
            --palette--;;appearanceLinks,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,
            --palette--;;language,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
            --palette--;;hidden,
            --palette--;;access,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
            categories,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
            rowDescription,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
    ',
    'columnsOverrides' => [
        'bodytext' => [
            'config' => [
                'enableRichtext' => true,
                'richtextConfiguration' => 'default',
            ],
        ],
    ],
];

Step 4. TCA sys_template: Frontend-Vorlage einbinden

// typo3conf/myextension/Configuration/TCA/Overrides/sys_template.php

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
    'myextension',
    'Configuration/TypoScript',
    'My description of template'
);

Step 5. TypoScript: Register TYPO3 Custom Element

// typo3conf/myextension/Configuration/TypoScript/setup.typoscript

tt_content {
    myextension_newcontentelement =< lib.contentElement
    myextension_newcontentelement {
        templateName = NewContentElement
    }
}

Step 6. Fluid: Render TYPO3 Custom Element

// typo3conf/myextension/Resources/Private/Templates/NewContentElements.html/

<html data-namespace-typo3-fluid="true"
      xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<f:debug>{_all}</f:debug>
<h2>Woohoo! My First TYPO3 Custom Element</h2>
<div class=”container”>
{data.bodytext -> f:format.html()}
</div>
</html>

Step 7. (Optional) Möchten Sie eine coole Backend-Vorschau?