Question

我找到了一个教程http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/，它展示了如何使用标题字段创建基本的WP Widget。

任何人都可以帮助我向Widget添加两个字段，以便我可以收集：

标题
内容
链接

我想我知道如何使用它并设计它。

非常感谢！

Dvent

Answer 1

要添加到文件中的代码

如果您想为内容添加文字区域，可以将以下行放入function form($instance)：

printf(
    '<textarea class="widefat" rows="16" cols="20" id="%1$s" name="%2$s">%3$s</textarea>',
    $this->get_field_id( 'content' ),
    $this->get_field_name( 'content' ),
    $content
);

$content是您之前插入的内容。

对于文本字段，您可以将以下行放入samen函数中：

printf( '<p>
        <label for="%1$s">%2$s</label>
        <input class="widefat" id="%1$s" name="%3$s" type="text" value="%4$s" />
    </p>',
    $this->get_field_id( 'link' ),
    __( 'Title:', $this->language ),
    $this->get_field_name( 'link' ),
    esc_attr( $link )
);

$link是您之前插入的内容。

将以下行添加到function update($new_instance, $old_instance)：

$instance['content'] = $new_instance['content'];
$instance['link']    = $new_instance['link'];

将以下行添加到function widget($args, $instance)：

$content = empty( $instance['content'] ) ? '' : wpautop( $instance['content'] );
$link    = empty( $instance['link'] ) ? '' : esc_attr( $instance['link'] );

if ( ! empty( $content ) )
    echo $content;

if ( ! empty ( $link ) )
    echo "<a href='$link'>$link</a>";

如果您不想自动将<p>添加到您的内容中，只需删除wpautop。

功能的作用

function form($instance)显示后端窗口小部件形式
function update($new_instance, $old_instance)会在保存窗口小部件时清理它们 function widget($args, $instance)显示小部件的前端显示

因此，如果您想要更改窗口小部件设置窗口的显示，请修改function form($instance)的内容。

希望它有所帮助！

Answer 2

非常感谢您的帮助，有一个小问题：当您保存内容时，所有内容都会从表单中消失。所以我修复了这样解析开头的新字段：$instance array

const { register, setValue, control } = useForm({
 mode: "onBlur",
 });
 
 <Controller
  as={
     <ComboBox
       options={options}
       optionsListMaxHeight={200}
       enableAutocomplete
       className="contractComboBox"
     />
   }
   control={control}
   name="combo"
 />;

然后制作 printf() 内容

自定义Wordpress小部件 - 3个文本字段

2 个答案: