{"id":3150,"date":"2024-12-06T09:20:07","date_gmt":"2024-12-06T09:20:07","guid":{"rendered":"https:\/\/chiroiu.com\/?p=3150"},"modified":"2024-12-06T09:21:11","modified_gmt":"2024-12-06T09:21:11","slug":"visual-composer-galery-mit-kadence-galerie-ersetzen","status":"publish","type":"post","link":"https:\/\/chiroiu.com\/de\/blog\/visual-composer-galery-mit-kadence-galerie-ersetzen\/","title":{"rendered":"Visual Composer Galery mit Kadence Galerie ersetzen"},"content":{"rendered":"\n<p>Beim Wechsel von einem WordPress Page Builder zu einem anderen kann es schwierig sein, die Funktionalit\u00e4t beizubehalten und sicherzustellen, dass der Inhalt korrekt angezeigt wird. K\u00fcrzlich habe ich eine benutzerdefinierte L\u00f6sung implementiert, um Visual Composer (VC) Galerien in Kadence Blocks Advanced Gallery zu \u00fcberf\u00fchren und gleichzeitig \u00fcberfl\u00fcssige Shortcodes von Visual Composer zu bereinigen. Hier erkl\u00e4re ich, wie das funktioniert und wie du \u00e4hnliche Ergebnisse erzielen kannst.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was macht der Code?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>Ersetzen des <code>[vc_gallery]<\/code> Shortcodes durch Kadence Advanced Gallery<\/strong><\/h3>\n\n\n\n<p>Der <code>[vc_gallery]<\/code> Shortcode von Visual Composer wird so angepasst, dass er dynamisch eine Kadence Blocks Advanced Gallery generiert. Der Prozess l\u00e4uft wie folgt ab:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Extrahieren der Attribute (wie <code>images<\/code> und <code>interval<\/code>) aus dem <code>[vc_gallery]<\/code> Shortcode.<\/li>\n\n\n\n<li>Verwenden des <code>images<\/code>-Attributs, um Bilddetails (URLs, Abmessungen, Alt-Text, Beschriftungen) \u00fcber <code>wp_get_attachment_image_src<\/code> von WordPress abzurufen.<\/li>\n\n\n\n<li>Strukturieren dieser Daten in das JSON-Format, das von Kadence Blocks ben\u00f6tigt wird.<\/li>\n\n\n\n<li>Rendern des Blocks mit <code>do_blocks<\/code>, um die Advanced Gallery auszugeben.<\/li>\n<\/ul>\n\n\n\n<p>Das sorgt f\u00fcr eine nahtlose Kompatibilit\u00e4t mit Kadence Blocks, ohne dass manuelle \u00c4nderungen am Inhalt erforderlich sind. Dies ist insbesondere Vorteilhaft, wenn man ansonsten &gt;100 Blogposts h\u00e4ndisch umbauen m\u00fcsste \ud83d\ude42<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Entfernen \u00fcberfl\u00fcssiger Visual Composer Shortcodes<\/strong><\/h3>\n\n\n\n<p>Visual Composer hinterl\u00e4sst oft Shortcodes wie <code>[vc_row]<\/code>, <code>[vc_column]<\/code> und <code>[vc_column_text]<\/code>, die die Frontend-Darstellung st\u00f6ren k\u00f6nnen, wenn der Builder nicht mehr aktiv ist. Das Skript:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Definiert diese Shortcodes als &#8222;deaktiviert&#8220; mit einem Array (<code>DISABLED_SHORTCODES<\/code>).<\/li>\n\n\n\n<li>Verwendet regul\u00e4re Ausdr\u00fccke, um die Shortcode-Tags zu entfernen, w\u00e4hrend der Inhalt beibehalten wird.<\/li>\n\n\n\n<li>Unterst\u00fctzt sowohl \u00f6ffnende\/schlie\u00dfende als auch selbstschlie\u00dfende Varianten dieser Shortcodes.<\/li>\n<\/ul>\n\n\n\n<p>Diese Bereinigung stellt sicher, dass der Inhalt lesbar und funktional bleibt, ohne unn\u00f6tige VC-spezifische Markups.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum ist das n\u00fctzlich?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nahtloser \u00dcbergang<\/strong>: Erm\u00f6glicht die Migration von Visual Composer zu Kadence Blocks, ohne den Inhalt zu zerst\u00f6ren.<\/li>\n\n\n\n<li><strong>Sauberes Frontend<\/strong>: Entfernt \u00fcberfl\u00fcssige Shortcodes, die keinen Zweck mehr erf\u00fcllen.<\/li>\n\n\n\n<li><strong>Automatisierter Workflow<\/strong>: Das Skript \u00fcbernimmt die Konvertierung und Bereinigung automatisch und spart Zeit und Aufwand.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Das Ergebnis<\/h2>\n\n\n\n<p>Durch die Kombination dieser beiden Funktionen erreicht meine WordPress-Seite jetzt:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Automatische Umwandlung von <code>[vc_gallery]<\/code> in Kadence Advanced Gallery Blocks, wodurch ein modernes und ansprechendes Ergebnis entsteht.<\/li>\n\n\n\n<li>Entfernen \u00fcberfl\u00fcssiger <code>[vc_row]<\/code>, <code>[vc_column]<\/code> und <code>[vc_column_text]<\/code> Shortcodes, wodurch der Inhalt sauber und lesbar bleibt.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">So wird es verwendet<\/h2>\n\n\n\n<p>So kannst du diese L\u00f6sung auf deiner Website verwenden:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>F\u00fcge den bereitgestellten PHP-Code in die <code>functions.php<\/code> deines Themes oder in ein benutzerdefiniertes Plugin ein.<\/li>\n\n\n\n<li>Stelle sicher, dass das <a href=\"https:\/\/de.wordpress.org\/plugins\/kadence-blocks\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Kadence Blocks Plugin<\/a> installiert und aktiv ist.<\/li>\n\n\n\n<li>Teste das Frontend, um zu best\u00e4tigen, dass:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>[vc_gallery]<\/code> Shortcodes als Kadence Advanced Galleries dargestellt werden.<\/li>\n\n\n\n<li>\u00dcberfl\u00fcssige Visual Composer Shortcodes entfernt werden, wobei nur der innere Inhalt verbleibt.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p>Der Wechsel zwischen Page Buildern muss keine Herausforderung sein. Mit diesem PHP-Skript kannst du sicherstellen, dass deine Website funktional bleibt, w\u00e4hrend du zu Kadence Blocks \u00fcbergehst. Wenn du ein \u00e4hnliches Problem hast, probiere diesen Ansatz aus und modifiziere den Code wie du es brauchst. Du kannst bspw. eigene Parameter f\u00fcr die Kadence Gallery verwenden damit sie anders aussieht, etc.pp.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hier der Code um die vc_gallery mit der Kadence Bildergalerie zu ersetzen<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">&lt;?php\n\n\/\/ Override [vc_gallery] shortcode handler\nfunction render_kadence_gallery_from_vc_shortcode($atts) {\n    \/\/ Extract attributes from the shortcode\n    $attributes = shortcode_atts([\n        'interval' =&gt; '',\n        'images' =&gt; '',\n        'img_size' =&gt; 'large',\n        'css' =&gt; ''\n    ], $atts);\n\n    if (empty($attributes['images'])) {\n        return 'Error: No images found in the shortcode.';\n    }\n\n    \/\/ Parse image IDs\n    $image_ids = explode(',', $attributes['images']);\n    $gallery_items = [];\n\n    foreach ($image_ids as $image_id) {\n        $image_id = intval($image_id);\n        $full_image = wp_get_attachment_image_src($image_id, 'full');\n        $thumb_image = wp_get_attachment_image_src($image_id, 'thumbnail');\n        $large_image = wp_get_attachment_image_src($image_id, 'large');\n\n        if ($full_image) {\n            $gallery_items[] = [\n                'url' =&gt; $full_image[0],\n                'thumbUrl' =&gt; $thumb_image ? $thumb_image[0] : $full_image[0],\n                'lightUrl' =&gt; $large_image ? $large_image[0] : $full_image[0],\n                'id' =&gt; $image_id,\n                'width' =&gt; $full_image[1],\n                'height' =&gt; $full_image[2],\n                'alt' =&gt; get_post_meta($image_id, '_wp_attachment_image_alt', true),\n                'caption' =&gt; wp_get_attachment_caption($image_id) ?: '',\n            ];\n        }\n    }\n\n    if (empty($gallery_items)) {\n        return 'Error: No valid images found for the given IDs.';\n    }\n\n    \/\/ Build the Kadence block JSON\n    $kadence_block = [\n        'uniqueID' =&gt; uniqid(),\n        'ids' =&gt; array_map('intval', $image_ids),\n        'type' =&gt; 'slider',\n        'linkTo' =&gt; 'media',\n        'lightbox' =&gt; 'magnific',\n        'imagesDynamic' =&gt; $gallery_items,\n        'kbVersion' =&gt; 2,\n        'align' =&gt; 'none',\n    ];\n\n    \/\/ Generate the Kadence block\n    $kadence_block_html = '&lt;!-- wp:kadence\/advancedgallery ' . json_encode($kadence_block, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . ' \/--&gt;';\n\n    \/\/ Render the block\n    return do_blocks($kadence_block_html);\n}\n\n\/\/ Register the handler for [vc_gallery]\nadd_shortcode('vc_gallery', 'render_kadence_gallery_from_vc_shortcode');<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Dieser Code entfernt bestimmte Visual Composer Shortcodes und rendert weiterhin den Inhalt dazwischen<\/h2>\n\n\n\n<pre title=\"\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">&lt;?php\n\n\/\/ Function to disable specific [vc_row] shortcodes but retain their inner content\ndefine('DISABLED_SHORTCODES', ['vc_row', 'vc_column', 'vc_column_text']);\n\nfunction disable_specific_vc_shortcodes($content) {\n    foreach (DISABLED_SHORTCODES as $shortcode) {\n        \/\/ Pattern to match opening and closing shortcode tags and their content\n        $pattern = '\/\\[' . $shortcode . '(?:\\s+[^\\]]+)?\\](.*?)\\[\\\/' . $shortcode . '\\]\/is';\n        \/\/ Replace matched shortcodes with their inner content\n        $content = preg_replace($pattern, '$1', $content);\n\n        \/\/ Handle self-closing tags (e.g., [vc_column_text \/])\n        $self_closing_pattern = '\/\\[' . $shortcode . '(?:\\s+[^\\]]+)?\\\/\\]\/is';\n        $content = preg_replace($self_closing_pattern, '', $content);\n    }\n    return $content;\n}\n\nadd_filter('the_content', 'disable_specific_vc_shortcodes');\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Beim Wechsel von einem WordPress Page Builder zu einem anderen kann es schwierig sein, die Funktionalit\u00e4t beizubehalten und sicherzustellen, dass der Inhalt korrekt angezeigt wird. K\u00fcrzlich habe ich eine benutzerdefinierte L\u00f6sung implementiert, um Visual Composer (VC) Galerien in Kadence Blocks Advanced Gallery zu \u00fcberf\u00fchren und gleichzeitig \u00fcberfl\u00fcssige Shortcodes von Visual Composer zu bereinigen. Hier erkl\u00e4re [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"Visual Composer Galery mit Kadence Galerie ersetzen - Marc Chiroiu","description":"Beim Wechsel von einem WordPress Page Builder zu einem anderen kann es schwierig sein, die Funktionalit\u00e4t beizubehalten und sicherzustellen, dass der Inhalt kor"},"footnotes":""},"categories":[34,32],"tags":[],"class_list":["post-3150","post","type-post","status-publish","format-standard","hentry","category-codeschnippsel","category-wordpress-de"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"marc","author_link":"https:\/\/chiroiu.com\/de\/blog\/author\/marc\/"},"uagb_comment_info":0,"uagb_excerpt":"Beim Wechsel von einem WordPress Page Builder zu einem anderen kann es schwierig sein, die Funktionalit\u00e4t beizubehalten und sicherzustellen, dass der Inhalt korrekt angezeigt wird. K\u00fcrzlich habe ich eine benutzerdefinierte L\u00f6sung implementiert, um Visual Composer (VC) Galerien in Kadence Blocks Advanced Gallery zu \u00fcberf\u00fchren und gleichzeitig \u00fcberfl\u00fcssige Shortcodes von Visual Composer zu bereinigen. Hier erkl\u00e4re&hellip;","_links":{"self":[{"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/posts\/3150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/comments?post=3150"}],"version-history":[{"count":3,"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/posts\/3150\/revisions"}],"predecessor-version":[{"id":3153,"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/posts\/3150\/revisions\/3153"}],"wp:attachment":[{"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/media?parent=3150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/categories?post=3150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chiroiu.com\/de\/wp-json\/wp\/v2\/tags?post=3150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}