Einleitung
Elementor ist ein äußerst flexibles und leistungsstarkes Page-Builder-Tool für WordPress. Allerdings gibt es Szenarien, in denen das Laden eines Templates im Bearbeitungsmodus unerwünscht ist – beispielsweise, um Ressourcen zu schonen oder störende Darstellungseffekte während der Bearbeitung zu vermeiden. In diesem Beitrag zeige ich Ihnen, wie Sie mithilfe eines kleinen Code-Snippets in Ihrer functions.php verhindern können, dass ein Elementor Template im Editormodus geladen wird.
Inhaltsverzeichnis
Überblick des Code-Snippets
Das folgende Code-Snippet definiert einen benutzerdefinierten Shortcode, der prüft, ob Elementor im Bearbeitungsmodus läuft. Falls ja, wird kein Template-Inhalt geladen. Andernfalls wird das gewünschte Template dynamisch eingebunden.
function conditional_elementor_template_shortcode($atts) {
// Attribute des Shortcodes extrahieren
$atts = shortcode_atts(
array(
'id' => '', // Template-ID
), $atts, 'custom_template'
);
// Überprüfen, ob Elementor im Bearbeitungsmodus ist
if ( \Elementor\Plugin::instance()->editor->is_edit_mode() ) {
// Geben Sie eine leere Ausgabe oder eine alternative Nachricht zurück
return '';
}
// Template-ID extrahieren
$template_id = $atts['id'];
// Template-Inhalt laden und zurückgeben
if ($template_id) {
return \Elementor\Plugin::instance()->frontend->get_builder_content_for_display( $template_id );
}
return ''; // Rückgabe leer, falls keine Template-ID angegeben ist
}
add_shortcode( 'custom_template', 'conditional_elementor_template_shortcode' );
Schritt-für-Schritt-Erklärung
1. Attribute-Extraktion
Der Shortcode erwartet ein Attribut id, welches die eindeutige Template-ID definiert. Mithilfe der Funktion shortcode_atts wird sichergestellt, dass, falls kein Wert übergeben wird, ein Standardwert (in diesem Fall ein leerer String) verwendet wird.
2. Bearbeitungsmodus-Prüfung
Bevor der Template-Inhalt geladen wird, prüft der Code mit der Methode is_edit_mode(), ob sich der Editor im Bearbeitungsmodus befindet. Diese Prüfung ist entscheidend, um zu vermeiden, dass das Template im Backend sichtbar ist – was insbesondere während der Bearbeitung störend wirken kann.
3. Laden des Templates
Falls der Bearbeitungsmodus nicht aktiv ist, wird die Template-ID aus den Shortcode-Attributen extrahiert und der entsprechende Inhalt mit der Methode get_builder_content_for_display() geladen. Diese Methode stellt sicher, dass das Template im Frontend korrekt angezeigt wird.
4. Einbindung als Shortcode
Schließlich wird der Shortcode custom_template registriert, sodass er an beliebiger Stelle innerhalb von Beiträgen oder Seiten verwendet werden kann.
Integration in Ihre WordPress-Seite
Um den Code in Ihre WordPress-Seite zu integrieren, gehen Sie wie folgt vor:
Öffnen Sie die functions.php
Navigieren Sie im WordPress-Dashboard zu Design > Theme-Editor und öffnen Sie die functions.php Ihres aktiven Themes.Fügen Sie den Code ein
Kopieren Sie das obige Code-Snippet und fügen Sie es in Ihre functions.php ein. Achten Sie darauf, dass keine Syntaxfehler entstehen.Speichern Sie die Datei
Nachdem Sie den Code eingefügt haben, speichern Sie die Änderungen. Der Shortcode wird nun automatisch registriert.
Verwendung des Shortcodes in Elementor
Nach der Integration können Sie den Shortcode innerhalb eines Elementor-Templates oder eines Beitrags verwenden. Verwenden Sie dazu einfach den folgenden Shortcode:
[custom_template id="123"]
Ersetzen Sie dabei 123 durch die tatsächliche ID des Templates, das Sie einbinden möchten. Im Bearbeitungsmodus wird der Inhalt des Templates nicht geladen, sodass Sie eine saubere Bearbeitungsoberfläche erhalten.
Fazit
Mit diesem Code-Snippet können Sie den Bearbeitungsmodus von Elementor optimieren, indem Sie verhindern, dass bestimmte Templates geladen werden, wenn Sie sich im Editormodus befinden. Dies verbessert nicht nur die Übersichtlichkeit während der Bearbeitung, sondern kann auch die Performance im Backend positiv beeinflussen.
Die einfache Integration in die functions.php und die flexible Nutzung über einen Shortcode machen diese Lösung zu einem nützlichen Werkzeug für jeden, der mit Elementor arbeitet.
Mit diesen Schritten können Sie Ihre WordPress-Seite noch effizienter gestalten und gleichzeitig den Arbeitsfluss im Elementor-Editor optimieren. Viel Erfolg bei der Umsetzung!