Question

我正在尝试使用自定义短代码在视觉编辑器中显示由我创建的自定义文件。当我使用标题和文本area_html时，这个自定义短代码运行正常，但现在我想在这个排序代码中添加单个图像，但结果我没有得到图像，它显示alt属性，在后端方面我是显示存储在自定义短代码字段中的单个图像。我在这里包括我的代码。

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）单独的函数名文件中的代码

<?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标签中，在main 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中的可视化作曲中显示自定义短代码单张图像？

1 个答案: