如何在 wordpress 的 visual composer 中显示自定义短代码单个图像？

Question

我正在尝试使用自定义短代码在 visual composer 中显示我创建的自定义文件。当我使用标题和文本 area_html 时，这个自定义短代码运行很好，但现在我想在此排序代码中添加单个图像，但结果我没有得到图像，它显示 alt 属性在 back-end 方面，我展示了我存储在自定义短代码字段中的单个图像。在这里我包括我的代码。

1) 用于创建自定义简码的代码

vc_map( array(
    'name' => __( 'trionn_header' ),
    'base' => 'trionn_header',
    'category' => ( 'trionn code' ),
    'params' => array(
                "type" => "attach_image",
            "holder" => "img",
            "class" => "",
            "heading" => __( "Hintergrundbild", "my-text-domain" ),
            "param_name" => "image_url",
            "value" => __( "", "my-text-domain" ),
            "description" => __( lade eins hoch", "my-text-domain" )
        )
) );

2) 代码在单独的 function-name 文件中

<?php
/* Ordered List shortcode */
if (!function_exists('trionn_header')) {
    function trionn_header($atts, $content) {
           $atts = shortcode_atts(
            array(
                'image_url' => ''
            ), $atts, 'trionn_header'
        );

        $imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 

        $html = '<img src="' . $imageSrc[0] .'" alt="' . $atts['title'] . '"/>';
        return $html;
        }

    add_shortcode('trionn_header', 'trionn_header');
}

Answer 1

我找到了您问题的解决方案，请在您的代码中试试这个

在 param 标签中，在主要参数属性之后写入此数组：

array(
                "type" => "attach_image",
                "heading" => "Image",
                "param_name" => "image",
                'admin_label' => true
            )

将以下代码粘贴到您的 function_name 文件中：

<?php
// Trionn header custom code // 
if (!function_exists('trionn_header')) {

    function trionn_header($atts, $content = null) {
        $args = array(
            'title' => __( 'This is the custom shortcode' ),
            'title_color' => '#000000',
            'content' => 'your discrption here',
            "image"             => "",
        );

        extract(shortcode_atts($args, $atts));

        //init variables
        $html               = "";
        $image_classes      = "";
        $image_src          = $image;

        if (is_numeric($image)) {
            $image_src = wp_get_attachment_url($image);
        }


        // generate output for heading and discription
        $html = '<h1 class="trionn header ' . $atts['style']. '" style="color: ' . $atts['title_color'] . '">'. $atts['title'] . '</h1>'.   "<div class=content>" . $content . "</div>";

        // generate output for single image
        $html .= "<img itemprop='image' class='{$image_classes}' src='{$image_src}' alt='' style='{$images_styles}' />";

        return $html;
    }
    add_shortcode('trionn_header', 'trionn_header');
}

享受，稍后谢谢

如何在 wordpress 的 visual composer 中显示自定义短代码单个图像？

How to display custom shortcode single image in visual composer in wordpress?

wordpress

image

shortcode

visual-composer