我正在尝试创建一个自定义WordPress小部件, 以允许用户选择图像, 链接和标题。该小部件将在侧栏中显示为广告图像。这是代码:
PHP:
<
?phpclass Ad extends WP_Widget {public function __construct() {
parent::__construct(
'widget-ad', 'Advertisement', array(
'description' =>
'Advertisement Widget', 'classname'=>
'widget-ad', ) );
}public function widget( $args, $instance ) {
...
}public function form( $instance ) {
$title= ! empty( $instance['title'] ) ? $instance['title'] : '';
$url= ! empty( $instance['url'] ) ? $instance['url'] : '';
$image_url= ! empty( $instance['image_url'] ) ? $instance['image_url'] : '';
?>
<
p>
<
label
for="<
?php echo esc_attr( $this->
get_field_id( 'title' ) );
?>
">
Title:
<
/label>
<
input
class="widefat"
id="<
?php echo esc_attr( $this->
get_field_id( 'title' ) );
?>
"
name="<
?php echo esc_attr( $this->
get_field_name( 'title' ) );
?>
"
type="text"
value="http://www.srcmini.com/<
?php echo esc_attr( $title );
?>">
<
/p>
<
p>
<
label
for="<
?php echo esc_attr( $this->
get_field_id( 'url' ) );
?>
">
URL:
<
/label>
<
input
class="widefat"
id="<
?php echo esc_attr( $this->
get_field_id( 'url' ) );
?>
"
name="<
?php echo esc_attr( $this->
get_field_name( 'url' ) );
?>
"
type="text"
value="http://www.srcmini.com/<
?php echo esc_attr( $url );
?>"
dir="ltr">
<
/p>
<
p>
<
img
class="image-fluid"
id="<
?php echo esc_attr( $this->
get_field_id( 'image_url' ) ) . "-img";
?>
"
src="http://www.srcmini.com/<
?php echo esc_url( $image_url );
?>"
/>
<
input type="text"
id="<
?php echo esc_attr( $this->
get_field_id( 'image_url' ) );
?>
"
name="<
?php echo esc_attr( $this->
get_field_name( 'image_url' ) );
?>
"
value="http://www.srcmini.com/<
?php echo esc_url( $image_url );
?>" />
<
br>
<
a href="http://www.srcmini.com/#" class="button js-select-media"
data-target="<
?php echo esc_attr( $this->
get_field_id( 'image_url' ) );
?>
">
Select Image
<
/a>
<
a href="http://www.srcmini.com/#" class="button js-remove-media"
data-target="<
?php echo esc_attr( $this->
get_field_id( 'image_url' ) );
?>
">
Remove Image
<
/a>
<
/p>
<
?php
}public function update( $new_instance, $old_instance ) {
$instance= array();
$instance['title']= ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['url']= ( ! empty( $new_instance['url'] ) ) ? strip_tags( $new_instance['url'] ) : '';
$instance['image_url']= ( ! empty( $new_instance['image_url'] ) ) ? strip_tags( $new_instance['image_url'] ) : '';
return $instance;
}
}/**
* Register Widget
*/
add_action( 'widgets_init', function() {
register_widget( 'Ad' );
});
JavaScript:
$(document).ready(() =>
{// Open WP media selector
$(document).on('click', '.js-select-media', (e) =>
{
e.preventDefault();
const target_id = $(e.target).data('target');
const input_element = $('#' + target_id);
const img_element = $('#' + target_id + '-img');
const image = wp.media({
title: 'Select An Image', multiple: false, library: {
type: 'image'
}, button: {
text: 'Select'
}, }).open().on('select', (e) =>
{
const image_url = image.state().get('selection').first().toJSON().url;
input_element.val(image_url).trigger('change');
img_element.attr('src', image_url);
});
});
// Remove selected Image
$(document).on('click', '.js-remove-media', (e) =>
{
e.preventDefault();
const element = $(e.target);
const target_id = element.data('target');
$('#' + target_id).val('').trigger('change');
$('#' + target_id + '-img').attr('src', '');
});
问题:
在WordPress网站的管理区域中, 当我选择图像或删除选定的图像时, 小部件的” 保存” 按钮未启用(它未检测到图像输入字段的值更改)。我尝试了一切。我不知道怎么了
#1浏览完WordPress文件(PHP和JS)后, 我遇到了一个似乎负责保存小部件(使用Ajax请求)的函数。
位置:
website-root\wp-admin\js\widgets.js
它在window对象上定义了一个名为wpWidgets的对象, 因此它在全局范围内可用。在529行上, wpWidgets定义了一个带有此签名的函数:
save : function( widget, del, animate, order ) { ... }
widget参数是widget类的div元素。
【WordPress自定义小部件图像选择器-禁用” ??保存” 按钮】因此, 在我的JavaScript中, 我这样调用它来手动保存小部件:
wpWidgets.save( input_element.closest('div.widget'), 0, 1, 0 );
推荐阅读
- 从wp-config禁用后,wordpress调试通知仍然显示
- WordPress自定义主题(插件将不会加载或仅显示代码)
- WordPress自定义主题未出现在仪表板中
- WordPress-按条项列出的自定义帖子类型的自定义分类页面
- WordPress的-自定义分类-没有归档
- WordPress自定义logo未在所有页面上显示
- 每个用户的WordPress自定义链接
- 以太网链路聚合和VRRP
- 技术分享| 音视频多频道使用的正确姿势