最终目标是在Wordpress中为Elementor创建一个小部件,可以在选项卡内创建多个按钮。所以我想在转发器内部使用转发器。
我还没有所有功能或样式,只是列出页面上每个输入的基本设置。我的代码不起作用。插件显示正确,但所有元素或控件都会消失。
以下是代码:
<?php
namespace Elementor;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Elementor iatabs widget.
*
* Elementor widget that displays vertical or horizontal iatabs with different
* pieces of content.
*
* @since 1.0.0
*/
class Widget_AltTabs extends Widget_Base {
/**
* Get widget name.
*
* Retrieve iatabs widget name.
*
* @since 1.0.0
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return 'alttabs';
}
/**
* Get widget title.
*
* Retrieve tabs widget title.
*
* @since 1.0.0
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return __( 'AltTabs', 'elementor' );
}
/**
* Get widget icon.
*
* Retrieve tabs widget icon.
*
* @since 1.0.0
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return 'eicon-tabs';
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'elementor' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'list',
[
'label' => __( 'Repeater List', 'elementor' ),
'type' => Controls_Manager::REPEATER,
'fields' => [
[
'name' => 'list_title',
'label' => __( 'Title', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'List Title' , 'elementor' ),
'label_block' => true,
],
[
'name' => 'list_content',
'label' => __( 'Content', 'elementor' ),
'type' => Controls_Manager::WYSIWYG,
'default' => __( 'List Content' , 'elementor' ),
'show_label' => false,
],
[
'name' => 'list_buttons',
'label' => __( 'List Buttons', 'elementor' ),
'type' => Controls_Manager::REPEATER,
'fields' => [
[
'name' => 'button_text',
'label' => __( 'Button Text', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Click' , 'elementor' ),
'label_block' => true,
],
],
'default' => [
[
'button_text' => __( 'Button #1', 'elementor' ),
],
[
'button_text' => __( 'Button #2', 'elementor' ),
],
],
],
],
'default' => [
[
'list_title' => __( 'Title #1', 'elementor' ),
'list_content' => __( 'Item content. Click the edit button to change this text.', 'elementor' ),
],
[
'list_title' => __( 'Title #2', 'elementor' ),
'list_content' => __( 'Item content. Click the edit button to change this text.', 'elementor' ),
],
],
'title_field' => '{{{ list_title }}}',
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
if ( $list ) {
echo '<dl>';
foreach ( $settings['list'] as $item ) {
echo '<dt class="repeater-' . $item['_id'] . '">' . $item['list_title'] . '</dt>';
echo '<dd>' . $item['list_content'] . '</dd>';
foreach ($item['list_buttons'] as $button) {
echo $button['button_text'];
}
}
echo '</dl>';
}
}
/**
* Render tabs widget output in the editor.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
* @since 1.0.0
* @access protected
*/
protected function _content_template() { ?>
<# if ( settings.list ) { #>
<dl>
<# _.each( settings.list, function( item ) { #>
<dt class="repeater-{{ item._id }}"> {{ item.list_title }} </dt>
<dd> {{ item.list_content }} </dd>
<dd> {{ item.list_buttons[0].button_text }} </dd>
<# if ( item.list_buttons ) { #>
<dl>
<# _.each( item.list_buttons, function( i ) { #>
<dt class="repeater-{{ i._id }}"> </dt>
<dd> {{ i.button_text }} </dd>
<# }); #>
</dl>
<# } #>
<# }); #>
</dl>
<# } #>
<?php
}
}
Plugin::instance()->widgets_manager->register_widget_type( new Widget_AltTabs ); ?>
&#13;
以下是我收到的错误消息示例:
未捕获的TypeError:无法读取属性&#39;每个&#39;未定义的 在对象。 (editor.min.js版本= 2.0.15:2) 在Function.each(load-scripts.php?c = 0&amp; load [] =下划线,短代码,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload ,WP-plupload,jqu&安培;加载[] = ERY-UI-芯,jQuery的UI窗口小部件,jquery的-UI-鼠标,jQuery的UI可排序&安培;版本= 4.9Hz:10) at n.getStyleControls(editor.min.js?ver = 2.0.15:2) 在editor.min.js?ver = 2.0.15:2 在Function.m.each.m.forEach(load-scripts.php?c = 0&amp; load [] =下划线,短代码,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media -models,moxiejs,plupload,WP-plupload,jqu&安培;加载[] = ERY-UI-芯,jQuery的UI窗口小部件,jquery的-UI-鼠标,jQuery的UI可排序&安培;版本= 4.9:5) 在e.Collection.each(load-scripts.php?c = 0&amp; load [] =下划线,短代码,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media-models,moxiejs ,plupload,WP-plupload,jqu&安培;加载[] = ERY-UI-芯,jQuery的UI窗口小部件,jquery的-UI-鼠标,jQuery的UI可排序&安培;版本= 4.9Hz:18) 在对象。 (editor.min.js版本= 2.0.15:2) 在Function.each(load-scripts.php?c = 0&amp; load [] =下划线,短代码,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload ,WP-plupload,jqu&安培;加载[] = ERY-UI-芯,jQuery的UI窗口小部件,jquery的-UI-鼠标,jQuery的UI可排序&安培;版本= 4.9Hz:10) at n.getStyleControls(editor.min.js?ver = 2.0.15:2) 在n.renderStyles(editor.min.js?ver = 2.0.15:2)&lt;
我是编写Elementor小部件/插件的新手,所以我很难过。我将不胜感激任何帮助。谢谢!
答案 0 :(得分:0)
中继器控件不能支持嵌套的中继器
答案 1 :(得分:0)
我的解决方案
创建两个中继器,并将其与密钥绑定。祝你好运
protected function _register_controls() {
$this->start_controls_section(
'section_categories',
[
'label' => __( 'Categories', 'elementor' ),
]
);
$repeater = new Repeater();
$repeater->add_control(
'category_slug',
[
'label' => __( 'Category Slug', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'category-name', 'elementor' ),
'label_block' => true,
]
);
$repeater->add_control(
'category_title',
[
'label' => __( 'Category Title', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Category Title', 'elementor' ),
'label_block' => true,
]
);
$this->add_control(
'categories',
[
'label' => __( 'Contacts', 'elementor' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'title_field' => '{{{ category_title }}}',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_prices',
[
'label' => __( 'Prices', 'elementor' ),
]
);
$serviceRepeater = new Repeater();
$serviceRepeater->add_control(
'category_slug',
[
'label' => __( 'Category Slug', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'category-name', 'elementor' ),
'label_block' => true,
]
);
$serviceRepeater->add_control(
'service_title',
[
'label' => __( 'Service Title', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Service Title', 'elementor' ),
'label_block' => true,
]
);
$serviceRepeater->add_control(
'service_price',
[
'label' => __( 'Price', 'elementor' ),
'type' => Controls_Manager::TEXT,
'default' => __( '40,00', 'elementor' ),
'label_block' => true,
]
);
$this->add_control(
'services',
[
'label' => __( 'Services', 'elementor' ),
'type' => Controls_Manager::REPEATER,
'fields' => $serviceRepeater->get_controls(),
'title_field' => '{{{ service_title }}}',
]
);
$this->end_controls_section();
}
添加到渲染
foreach ($settings['categories'] as $category) {
echo $category['category_title'];
foreach($settings['services' as $service) {
if ($category['category_slug'] === $service['category_slug'] {
echo $category['service_title'];
}
}
}