图像小工具 -> 动态 -> 简码 -> 无输出
Image Widget -> Dynamic -> Shortcode -> No output
我正在使用 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 );
}
我在这里做错了什么?如何通过动态短代码显示图像?
要结束这个问题,长话短说:图像小部件从来不应该支持 "Shortcode" 功能,因为函数内部需要一个数组,而 Shortcode 不能 return .
简码功能现已从图像小部件中删除。
2020 年编辑:使用 Elementor PRO
的 ShortCode 图像 URL
对于想要使用 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' );
});
我正在使用 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 );
}
我在这里做错了什么?如何通过动态短代码显示图像?
要结束这个问题,长话短说:图像小部件从来不应该支持 "Shortcode" 功能,因为函数内部需要一个数组,而 Shortcode 不能 return .
简码功能现已从图像小部件中删除。
2020 年编辑:使用 Elementor PRO
的 ShortCode 图像 URL对于想要使用 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' );
});