Question

我正在使用Elementor Pro，并希望通过自定义的简码（https://docs.elementor.com/article/449-dynamic-shortcode）显示图像：

但是它不起作用。根本没有任何显示。既不在编辑器中，也不在前端中。同样，如果我删除短代码周围的括号[...]并仅尝试brand_banner，也不会。

它在前端不产生任何DOM输出，只是一个空的elementor-widget-wrap div：

<div class="elementor-element elementor-element-4f1547ad elementor-column elementor-col-50 elementor-inner-column" data-id="4f1547ad" data-element_type="column">
    <div class="elementor-column-wrap  elementor-element-populated">
        <div class="elementor-widget-wrap">
        </div>
    </div>
</div>

但是，如果我使用一个简单的文本编辑器小部件并放入简码，它将按预期工作：

DOM：

<div class="elementor-element elementor-element-37728dd elementor-widget elementor-widget-text-editor" data-id="37728dd" data-element_type="widget" data-widget_type="text-editor.default">
    <div class="elementor-widget-container">
        <div class="elementor-text-editor elementor-clearfix">
            <img src="https://some.domain.com/wp-content/uploads/banner-a.jpg"></div>
        </div>
    </div>
</div>

这是简码的代码：

public function shortcode_brand_banner( $atts )
{
    $brand = $this->getRandomBrandFromPool();
    $variantIndex = 1;
    $variantLabel = [ '0', 'a', 'b', 'c' ];
    // Return the rendered image HTML.
    return ( types_render_field( 'image-brand-' . $variantLabel[ $variantIndex ], [ 'post_id' => $brand->post->ID ] ) );
}

我认为可能是因为它不希望呈现图像HTML，而只是图像URL。因此，我将代码更改为此，但是它也不起作用：

public function shortcode_brand_banner( $atts )
{
    $brand = $this->getRandomBrandFromPool();
    $variantIndex = 1;
    $variantLabel = [ '0', 'a', 'b', 'c' ];
    // Only return image URL like "https://some.domain.com/wp-content/uploads/banner-a.jpg"
    $image = get_post_meta( $brand->post->ID, 'wpcf-image-brand-' . $variantLabel[ $variantIndex ] )[ 0 ];
    return ( $image );
}

我在这里做错了什么？如何通过动态简码显示图像？

Answer 1

要结束这个问题，长话短说：图像小部件永远都不应该支持“ Shortcode”功能，因为在内部该函数需要一个数组，而Shortcode无法返回该数组。

“简码”功能现已从“图像”小部件中删除。

请参阅： https://github.com/elementor/elementor/issues/7730

Answer 2

EDIT 2020：使用Elementor PRO的ShortCode图片网址

适用于希望使用Shortcode中的动态图像URI的人。

我已经为它完成了代码（您必须将其放在插件中）

use Elementor\Controls_Manager;
add_action( 'elementor/dynamic_tags/register_tags', function( $dynamic_tags ) {
        class Custom_Image_Tag extends Elementor\Core\DynamicTags\Data_Tag {

            public function get_name() {
                return 'shortcode-image';
            }

            public function get_categories() {
                return [ 'image' ];
            }

            public function get_group() {
                return [ 'site' ];
            }

            public function get_title() {
                return 'Shortcode Image';
            }

            protected function _register_controls() {
                $this->add_control(
                    'shortcode',
                    [
                        'label' => __( 'Shortcode', 'elementor-pro' ),
                        'type'  => Controls_Manager::TEXTAREA,
                    ]
                );
            }

            protected function get_value( array $options = [] ) {
                $settings = $this->get_settings();

                if ( empty( $settings['shortcode'] ) ) {
                    return;
                }
                
                return [
                    'url' => do_shortcode( $settings['shortcode'] ) // Your shortcode MUST return a full valid URL
                ];
            }
        }
        $dynamic_tags->register_tag( 'Custom_Image_Tag' );
});

图像小部件->动态->简码->无输出

2 个答案: