php - 将“设计选项”选项卡添加到 Wordpress/WPBakery 中的自定义简码

Question

我的目标

我正在尝试为 Wordpress 创建一个自定义简码并将其与 WPBakery 集成。我需要这样的短代码来将任何 WPBakery 元素包装在<a>HTML 元素中并在后端编辑器中对其进行管理。

也许像这样的一些功能已经存在，但我发现只有一些代码改变了 vc 列，我更喜欢创建一个新的东西来更独立于网格结构。如果有人有其他解决方案，请告诉我。

当我的代码是这样的时候，这一切都有效，我得到了我想要的：后端编辑器和HTML 输出。

添加“设计选项”选项卡

接下来，我想扩展此简码的可能性并添加“设计选项”选项卡。我需要这个，这样我就不必使用 css 来给“按钮”我在文本周围创建了一些填充，同时删除了内列的这个可怕的填充，它没有链接。我自己遵循了这个WPBakery 指南，并编写了以下代码：

<?php
add_shortcode( 'cs_link', 'cs_link');

function cs_link($atts, $content = null) {

    $args = shortcode_atts(
        array(
        'link'          => '',
        'css' => '',
        ), $atts);

    $link = $args['link'];
    $css = $args['css'];

    $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts );

    ob_start();
    ?>

    <a href="<?php echo $link ?>" class="uti_no-text-dec <?php echo esc_attr( $css_class ); ?>">
        <?php echo do_shortcode($content); ?>
    </a><?php echo $this->endBlockComment('cs_link');

    return ob_get_clean();
}



//VISUAL COMPOSER
add_action( 'vc_before_init', 'vc_cs_link' );

if(!function_exists('vc_cs_link')){
function vc_cs_link() {

 vc_map( array(
  "name" => esc_html__( "Contenitore linkabile", "" ),
  "base" => "cs_link",
  //"icon" => get_template_directory_uri(). '/img/vc/carousel.png',
  "description" => esc_html__( "Un contenitore per linkare il suo contenuto", "" ),
  "category" => "Custom Shortcodes",
  "content_element" => true,
  "is_container" => true,
  "js_view" => 'VcColumnView',
  "params" => array(
     array(
        "type" => "textfield",
        "holder" => "div",
        "class" => "vc_admin_label admin_label_css_animation",
        "heading" => __( "Link", "my-text-domain" ),
        "param_name" => "link",
        "value" => __( "", "my-text-domain" ),
        "description" => __( "Inserisci l'URL.", "my-text-domain" ),
        ),
     array(
        'type' => 'css_editor',
        'heading' => __( 'Css', 'my-text-domain' ),
        'param_name' => 'css',
        'group' => __( 'Design options', 'my-text-domain' ),
        ),
      vc_map_add_css_animation( true ),
   ),
  ));
 }
}

//Your "container" content element should extend WPBakeryShortCodesContainer class to inherit all required functionality

if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
  class WPBakeryShortCode_Cs_Link extends WPBakeryShortCodesContainer {}
}

if ( class_exists( 'WPBakeryShortCode' ) ) {
  class WPBakeryShortCode_cs_link extends WPBakeryShortCode {}
}

?>

我得到的错误

但我得到两个错误：

1. 你可以在这里看到，说我不能声明类WPBakeryShortCode_cs_link，因为这个名字已经被使用了。我显然不能用同一个类扩展两个类，所以我不知道如何保留这两个功能（作为容器并具有“设计选项”）。

2. 删除扩展 WPBakery 类（容器类）的两种尝试之一，我收到有关以下代码部分的另一个错误：$css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts );. 该错误表明我在 wp-content/themes/dt-the7-child/shortcodes/short_block.php:15 的对象上下文中没有使用 $this。也许它接下来写的内容很有趣：

Uncaught Error: Using $this when not in object context in wp-content/themes/dt-the7-child/shortcodes/short_block.php:15
Stack trace:
#0 wp-includes/shortcodes.php(343): cs_link()
#1 [internal function]: do_shortcode_tag()
#2 wp-includes/shortcodes.php(218): preg_replace_callback()
#3 wp-content/plugins/js_composer/include/helpers/helpers.php(240): do_shortcode()
#4 wp-content/plugins/js_composer/include/templates/shortcodes/vc_column.php(94): wpb_js_remove_wpautop()
#5 wp-content/plugins/js_composer/include/classes/shortcodes/core/class-wpbakeryshortcode.php(271): require('/var/www/test.s...')
#6 wp-content/plugins/js_composer/include/classes/shortcodes/core/class-wpbakeryshortcode.php(244): WPBakeryShortCode->loadTemplate()
#7 wp-content/plugins/js_composer/include/classes/shortcodes/core/class-wpbakeryshortcode.php(366): WPBakeryShortCode->content()
#8 wp-content/plugins/js_composer/include/helpers/helpers.php(1317): WPBakeryShortCode->output()
#9 wp-includes/shortcodes.php(343): vc_do_shortcode()
#10 [internal function]: do_shortcode_tag()
#11 wp-includes/shortcodes.php(218): preg_replace_callback()
#12 wp-content/plugins/js_composer/include/helpers/helpers.php(240): do_shortcode()
#13 wp-content/plugins/js_composer/include/templates/shortcodes/vc_row.php(156): wpb_js_remove_wpautop()
#14 wp-content/themes/dt-the7/inc/shortcodes/vc_templates/vc_row.php(21): include('/var/www/test.s...')
#15 wp-content/plugins/js_composer/include/classes/shortcodes/core/class-wpbakeryshortcode.php(271): require('/var/www/test.s...')
#16 wp-content/plugins/js_composer/include/classes/shortcodes/vc-row.php(40): WPBakeryShortCode->loadTemplate()
#17 wp-content/plugins/js_composer/include/classes/shortcodes/core/class-wpbakeryshortcode.php(366): WPBakeryShortCode_Vc_Row->content()
#18 wp-content/plugins/js_composer/include/helpers/helpers.php(1317): WPBakeryShortCode->output()
#19 wp-includes/shortcodes.php(343): vc_do_shortcode()
#20 [internal function]: do_shortcode_tag()
#21 wp-includes/shortcodes.php(218): preg_replace_callback()
#22 wp-includes/class-wp-hook.php(292): do_shortcode()
#23 wp-includes/plugin.php(212): WP_Hook->apply_filters()
#24 wp-includes/post-template.php(253): apply_filters()
#25 wp-content/themes/dt-the7/page.php(31): the_content()

#26 wp-includes/template-loader.php(106): include('/var/www/test.s...')
#27 wp-blog-header.php(19): require_once('/var/www/test.s...')
#28 index.php(17): require('/var/www/test.s...')
#29 {main}
  thrown

---

我认为移动我正在创建的类中的所有代码来扩展 WPBakery 的一个，就像这样，可以解决第二个问题，但是这样短代码就不再存在了，我也没有得到任何输出。

标签： phpwordpresswpbakery