如何在我的小部件后端创建一个表单并将其显示在我的小部件末尾的特定区域?
How do I create a form inside my back end of widget and display it in a certain area for the end of my widget?
我使用了 youtube 视频:(https://www.youtube.com/watch?v=OJdIUU1pjl4&t=1261s) 来学习如何创建我的第一个自定义小部件。从这里我创建了一个带有前端显示和后端显示(表单)的 class 我想创建一个表单来 post 信息,然后保存到数据库中,稍后在前端。
我已经使用 update_option() 和 get_option() 通过选项页面完成了此操作,但是,这将是一个硬编码变量,因为有人可以在多个地方使用我的小部件,我会希望每个人都有一个独特的存储空间。
目前我有 php 个没有值的变量,因为我不确定如何制作我的表单 post 将详细信息保存到数据库。
//Back-end display of widget
public function form($instance) {
?>
<form method="post">
<label for="inner-text">Inside Text</label>
<input name="inner-text" type="text">
<label for="bg-image">Background Image</label>
<input name="bg-image" type="image">
</form>
<?php
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
//$bg_img & $inner_text are currently unassigned but would like to use the back end to assign them
<div class="bg-img" style="background: url('<?= $bg_img ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $inner_text ?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
我没有使用 get_option() 的原因是因为它是一个静态变量,不能为每个小部件设置唯一值。
使用get_field_name() & get_field_id() * $实例显示
//Back-end display of widget
public function form($instance) {
// DECLARE VARIABLES
$inner_text = '';
$widget_background = '';
if($instance) {
$inner_text = esc_textarea($instance['inner_text']);
$widget_background = esc_url($instance['widget_background']);
}
?>
<form method="post">
<label for="<?php echo $this->get_field_id('widget_background'); ?>"><?php _e('Widget Background URL', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('widget_background'); ?>" name="<?php echo $this->get_field_name('widget_background'); ?>" type="text" value="<?php echo $widget_background; ?>">
<label for="<?php echo $this->get_field_id('inner_text'); ?>"><?php _e('Inner text', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('inner_text'); ?>" name="<?php echo $this->get_field_name('inner_text'); ?>" type="text" value=""><?php echo $inner_text; ?></textarea>
</form>
<?php
}
// AUTOMATICALLY UPDATE THE STORED FIELDS
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['inner_text'] = strip_tags($new_instance['inner_text']);
$instance['widget_background'] = strip_tags($new_instance['widget_background']);
return $instance;
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
<div class="bg-img" style="background: url('<?= $instance['widget_background'] ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $instance['inner_text']?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
}
我使用了 youtube 视频:(https://www.youtube.com/watch?v=OJdIUU1pjl4&t=1261s) 来学习如何创建我的第一个自定义小部件。从这里我创建了一个带有前端显示和后端显示(表单)的 class 我想创建一个表单来 post 信息,然后保存到数据库中,稍后在前端。
我已经使用 update_option() 和 get_option() 通过选项页面完成了此操作,但是,这将是一个硬编码变量,因为有人可以在多个地方使用我的小部件,我会希望每个人都有一个独特的存储空间。
目前我有 php 个没有值的变量,因为我不确定如何制作我的表单 post 将详细信息保存到数据库。
//Back-end display of widget
public function form($instance) {
?>
<form method="post">
<label for="inner-text">Inside Text</label>
<input name="inner-text" type="text">
<label for="bg-image">Background Image</label>
<input name="bg-image" type="image">
</form>
<?php
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
//$bg_img & $inner_text are currently unassigned but would like to use the back end to assign them
<div class="bg-img" style="background: url('<?= $bg_img ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $inner_text ?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
我没有使用 get_option() 的原因是因为它是一个静态变量,不能为每个小部件设置唯一值。
使用get_field_name() & get_field_id() * $实例显示
//Back-end display of widget
public function form($instance) {
// DECLARE VARIABLES
$inner_text = '';
$widget_background = '';
if($instance) {
$inner_text = esc_textarea($instance['inner_text']);
$widget_background = esc_url($instance['widget_background']);
}
?>
<form method="post">
<label for="<?php echo $this->get_field_id('widget_background'); ?>"><?php _e('Widget Background URL', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('widget_background'); ?>" name="<?php echo $this->get_field_name('widget_background'); ?>" type="text" value="<?php echo $widget_background; ?>">
<label for="<?php echo $this->get_field_id('inner_text'); ?>"><?php _e('Inner text', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('inner_text'); ?>" name="<?php echo $this->get_field_name('inner_text'); ?>" type="text" value=""><?php echo $inner_text; ?></textarea>
</form>
<?php
}
// AUTOMATICALLY UPDATE THE STORED FIELDS
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['inner_text'] = strip_tags($new_instance['inner_text']);
$instance['widget_background'] = strip_tags($new_instance['widget_background']);
return $instance;
}
//front end display of widget
public function widget($args, $instance ) {
echo $args['before_widget'];
?>
<div class="bg-img" style="background: url('<?= $instance['widget_background'] ?>');">
<div class="container">
<div class="inner-rectangle">
<?= $instance['inner_text']?>
</div>
</div>
</div>
<?php
echo $args['after_widget'];
return;
}
}