Visual Composer Galery mit Kadence Galerie ersetzen

Beim Wechsel von einem WordPress Page Builder zu einem anderen kann es schwierig sein, die Funktionalität beizubehalten und sicherzustellen, dass der Inhalt korrekt angezeigt wird. Kürzlich habe ich eine benutzerdefinierte Lösung implementiert, um Visual Composer (VC) Galerien in Kadence Blocks Advanced Gallery zu überführen und gleichzeitig überflüssige Shortcodes von Visual Composer zu bereinigen. Hier erkläre ich, wie das funktioniert und wie du ähnliche Ergebnisse erzielen kannst.

Was macht der Code?

1. Ersetzen des `[vc_gallery]` Shortcodes durch Kadence Advanced Gallery

Der [vc_gallery] Shortcode von Visual Composer wird so angepasst, dass er dynamisch eine Kadence Blocks Advanced Gallery generiert. Der Prozess läuft wie folgt ab:

Extrahieren der Attribute (wie images und interval) aus dem [vc_gallery] Shortcode.
Verwenden des images-Attributs, um Bilddetails (URLs, Abmessungen, Alt-Text, Beschriftungen) über wp_get_attachment_image_src von WordPress abzurufen.
Strukturieren dieser Daten in das JSON-Format, das von Kadence Blocks benötigt wird.
Rendern des Blocks mit do_blocks, um die Advanced Gallery auszugeben.

Das sorgt für eine nahtlose Kompatibilität mit Kadence Blocks, ohne dass manuelle Änderungen am Inhalt erforderlich sind. Dies ist insbesondere Vorteilhaft, wenn man ansonsten >100 Blogposts händisch umbauen müsste 🙂

2. Entfernen überflüssiger Visual Composer Shortcodes

Visual Composer hinterlässt oft Shortcodes wie [vc_row], [vc_column] und [vc_column_text], die die Frontend-Darstellung stören können, wenn der Builder nicht mehr aktiv ist. Das Skript:

Definiert diese Shortcodes als „deaktiviert“ mit einem Array (DISABLED_SHORTCODES).
Verwendet reguläre Ausdrücke, um die Shortcode-Tags zu entfernen, während der Inhalt beibehalten wird.
Unterstützt sowohl öffnende/schließende als auch selbstschließende Varianten dieser Shortcodes.

Diese Bereinigung stellt sicher, dass der Inhalt lesbar und funktional bleibt, ohne unnötige VC-spezifische Markups.

Warum ist das nützlich?

Nahtloser Übergang: Ermöglicht die Migration von Visual Composer zu Kadence Blocks, ohne den Inhalt zu zerstören.
Sauberes Frontend: Entfernt überflüssige Shortcodes, die keinen Zweck mehr erfüllen.
Automatisierter Workflow: Das Skript übernimmt die Konvertierung und Bereinigung automatisch und spart Zeit und Aufwand.

Das Ergebnis

Durch die Kombination dieser beiden Funktionen erreicht meine WordPress-Seite jetzt:

Automatische Umwandlung von [vc_gallery] in Kadence Advanced Gallery Blocks, wodurch ein modernes und ansprechendes Ergebnis entsteht.
Entfernen überflüssiger [vc_row], [vc_column] und [vc_column_text] Shortcodes, wodurch der Inhalt sauber und lesbar bleibt.

So wird es verwendet

So kannst du diese Lösung auf deiner Website verwenden:

Füge den bereitgestellten PHP-Code in die functions.php deines Themes oder in ein benutzerdefiniertes Plugin ein.
Stelle sicher, dass das Kadence Blocks Plugin installiert und aktiv ist.
Teste das Frontend, um zu bestätigen, dass:

[vc_gallery] Shortcodes als Kadence Advanced Galleries dargestellt werden.
Überflüssige Visual Composer Shortcodes entfernt werden, wobei nur der innere Inhalt verbleibt.

Fazit

Der Wechsel zwischen Page Buildern muss keine Herausforderung sein. Mit diesem PHP-Skript kannst du sicherstellen, dass deine Website funktional bleibt, während du zu Kadence Blocks übergehst. Wenn du ein ähnliches Problem hast, probiere diesen Ansatz aus und modifiziere den Code wie du es brauchst. Du kannst bspw. eigene Parameter für die Kadence Gallery verwenden damit sie anders aussieht, etc.pp.

Hier der Code um die vc_gallery mit der Kadence Bildergalerie zu ersetzen

<?php

// Override [vc_gallery] shortcode handler
function render_kadence_gallery_from_vc_shortcode($atts) {
    // Extract attributes from the shortcode
    $attributes = shortcode_atts([
        'interval' => '',
        'images' => '',
        'img_size' => 'large',
        'css' => ''
    ], $atts);

    if (empty($attributes['images'])) {
        return 'Error: No images found in the shortcode.';
    }

    // Parse image IDs
    $image_ids = explode(',', $attributes['images']);
    $gallery_items = [];

    foreach ($image_ids as $image_id) {
        $image_id = intval($image_id);
        $full_image = wp_get_attachment_image_src($image_id, 'full');
        $thumb_image = wp_get_attachment_image_src($image_id, 'thumbnail');
        $large_image = wp_get_attachment_image_src($image_id, 'large');

        if ($full_image) {
            $gallery_items[] = [
                'url' => $full_image[0],
                'thumbUrl' => $thumb_image ? $thumb_image[0] : $full_image[0],
                'lightUrl' => $large_image ? $large_image[0] : $full_image[0],
                'id' => $image_id,
                'width' => $full_image[1],
                'height' => $full_image[2],
                'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true),
                'caption' => wp_get_attachment_caption($image_id) ?: '',
            ];
        }
    }

    if (empty($gallery_items)) {
        return 'Error: No valid images found for the given IDs.';
    }

    // Build the Kadence block JSON
    $kadence_block = [
        'uniqueID' => uniqid(),
        'ids' => array_map('intval', $image_ids),
        'type' => 'slider',
        'linkTo' => 'media',
        'lightbox' => 'magnific',
        'imagesDynamic' => $gallery_items,
        'kbVersion' => 2,
        'align' => 'none',
    ];

    // Generate the Kadence block
    $kadence_block_html = '<!-- wp:kadence/advancedgallery ' . json_encode($kadence_block, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . ' /-->';

    // Render the block
    return do_blocks($kadence_block_html);
}

// Register the handler for [vc_gallery]
add_shortcode('vc_gallery', 'render_kadence_gallery_from_vc_shortcode');

Dieser Code entfernt bestimmte Visual Composer Shortcodes und rendert weiterhin den Inhalt dazwischen

<?php

// Function to disable specific [vc_row] shortcodes but retain their inner content
define('DISABLED_SHORTCODES', ['vc_row', 'vc_column', 'vc_column_text']);

function disable_specific_vc_shortcodes($content) {
    foreach (DISABLED_SHORTCODES as $shortcode) {
        // Pattern to match opening and closing shortcode tags and their content
        $pattern = '/\[' . $shortcode . '(?:\s+[^\]]+)?\](.*?)\[\/' . $shortcode . '\]/is';
        // Replace matched shortcodes with their inner content
        $content = preg_replace($pattern, '$1', $content);

        // Handle self-closing tags (e.g., [vc_column_text /])
        $self_closing_pattern = '/\[' . $shortcode . '(?:\s+[^\]]+)?\/\]/is';
        $content = preg_replace($self_closing_pattern, '', $content);
    }
    return $content;
}

add_filter('the_content', 'disable_specific_vc_shortcodes');