如何在 wordpress 的可视化作曲家中显示自定义简码单个图像？答案

【问题标题】：How to display custom shortcode single image in visual composer in wordpress?如何在 wordpress 的可视化作曲家中显示自定义简码单个图像？
【发布时间】：2017-08-10 06:58:49
【问题描述】：

我正在尝试使用自定义短代码在可视化作曲家中显示我创建的自定义文件。当我使用标题和文本 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');
}

【问题讨论】：

详细说明您的问题
所有细节都提供有问题的代码。

标签： wordpress image shortcode visual-composer

【解决方案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');
}

享受，稍后感谢我

【讨论】：