Пользовательский виджет Загрузка изображения Проблема
За день до завтра я разработал собственный виджет для своей недавней темы WordPress. В этом виджете есть поле загрузки изображения с некоторыми другими полями. Я сделал все, и виджет работает очень хорошо, за исключением одной проблемы. Когда я перетаскиваю виджет в боковую панель и предоставляю информацию, необходимую во всех полях, его внешний вид хорошо отображается во внешнем интерфейсе. Но после этого, когда я пытаюсь изменить изображение из этого виджета, кнопка сохранения остается сохраненной. Изображение не меняется.
Коды ниже:
class Themeslug_About_Widget extends WP_widget{
public function __construct(){
parent::__construct('author_info', esc_html__( 'About Info Box', 'blogista' ), array(
'description' => esc_html__( 'About Info Box contain brief about Author/ Company.', 'blogista' ),
));
}
public function widget( $args, $instance ){
echo $args['before_widget'];
echo $args['before_title'] . $instance['title'] . $args['after_title'];
?>
<img src="<?php echo $instance['author_box_image']; ?>" alt="<?php echo $instance['title']; ?>" />
<div class="widget-content">
<h3 class="title">
<a href="#"><?php echo $instance['author_name']; ?></a>
</h3>
</div>
<?php
echo $args['after_widget'];
}
public function form( $instance ){
$title = '';
if( !empty( $instance['title'] ) ) {
$title = $instance['title'];
}
$author_box_image = '';
if( ! empty( $instance['author_box_image'] ) ) {
$author_box_image = $instance['author_box_image'];
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:', 'blogista' ); ?></label>
<input type="text" value="<?php echo esc_attr( $title ); ?>" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" class="widefat">
</p>
<p>
<button class="button button-primary" id="author_info_image"><?php _e( 'Upload Image', 'blogista' ); ?></button>
<input type="hidden" name="<?php echo $this->get_field_name('author_box_image'); ?>" id="<?php echo $this->get_field_id('author_box_image'); ?>" class="image_link" value="<?php echo esc_url( $author_box_image ); ?>" >
<div class="image_show">
<img src="<?php echo $instance['author_box_image']; ?>" width="200" height="auto" alt="">
</div>
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? esc_attr( $new_instance['title'] ) : '';
$instance['author_box_image'] = ( ! empty( $new_instance['author_box_image'] ) ) ? esc_url( $new_instance['author_box_image'] ) : '';
return $instance;
}
}
function themeslug_admin_enqueue_scrits(){
wp_enqueue_media();
wp_enqueue_script( 'admin_custom_script', get_theme_file_uri() . '/js/libs/admin_scripts.js', array( 'jquery' ), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'themeslug_admin_enqueue_scrits' );
Затем добавили следующий код jQuery:
(function($){
$(document).ready(function(){
$('button#author_info_image').on("click",function( e ){
e.preventDefault();
var imageUploader = wp.media({
'title' : 'Upload Author Image',
'button' : {
'text' : 'Set The Image'
},
'multiple' : false
});
imageUploader.open();
imageUploader.on("select", function(){
var image = imageUploader.state().get("selection").first().toJSON();
var link = image.url;
$("input.image_link").val( link );
$(".image_show img").attr('src', link);
});
});
});
}(jQuery))
Сначала все работает нормально, но при попытке изменить изображение кнопка сохранения виджета остается сохраненной.
Пожалуйста помоги.
Заранее спасибо.
Решение
Я предложу вам следовать моему пути создания собственного виджета с использованием системы загрузки изображений.
public function widget( $args, $instance ) {
// Our variables from the widget settings
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Default title', 'text_domain' ) : $instance['title'] );
$image = ! empty( $instance['image'] ) ? $instance['image'] : '';
ob_start();
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
?>
<?php if($image): ?>
<img src="<?php echo esc_url($image); ?>" alt="">
<?php endif; ?>
<?php
echo $args['after_widget'];
ob_end_flush();
}
И функция формы будет:
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
$image = ! empty( $instance['image'] ) ? $instance['image'] : '';
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id( 'image' ); ?>"><?php _e( 'Image:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" type="text" value="<?php echo esc_url( $image ); ?>" />
<button class="upload_image_button button button-primary">Upload Image</button>
</p>
<?php
}
А вот и функция обновления:
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['image'] = ( ! empty( $new_instance['image'] ) ) ? $new_instance['image'] : '';
return $instance;
}
Как видите, я добавил кнопку под полем ввода изображения с классом «.upload_image_button», но пока она не будет работать, и чтобы она работала, нужно добавить наш пользовательский JavaScript администратора.
Сначала нужно создать файл javascript и поместить его в свою тему, давайте создадим файл с именем our_admin.js в assets / js в папке вашей темы.
Далее вам нужно будет зарегистрировать и поставить в очередь наш скрипт, чтобы он загрузился в панели администратора, поэтому давайте добавим несколько строк в функцию конструктора класса виджета:
function __construct() {
// Add Widget scripts
add_action('admin_enqueue_scripts', array($this, 'scripts'));
parent::__construct(
'our_widget', // Base ID
__( 'Our Widget Title', 'text_domain' ), // Name
array( 'description' => __( 'Our Widget with media files', 'text_domain' ), ) // Args
);
}
И тогда вам понадобится функция «scripts» в нашем классе виджетов:
public function scripts()
{
wp_enqueue_script( 'media-upload' );
wp_enqueue_media();
wp_enqueue_script('our_admin', get_template_directory_uri() . '/assets/js/our_admin.js', array('jquery'));
}
Как вы можете заметить, я добавил wp_enqueue_script («media-upload»); и wp_enqueue_media (); поставить в очередь скрипты медиа библиотеки.
И, наконец, вот js-скрипт, который вызовет всплывающее окно библиотеки мультимедиа WordPress и поместит выбранное изображение в поле ввода:
jQuery(document).ready(function ($) {
$(document).on("click", ".upload_image_button", function (e) {
e.preventDefault();
var $button = $(this);
// Create the media frame.
var file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select or upload image',
library: { // remove these to show all
type: 'image' // specific mime
},
button: {
text: 'Select'
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function () {
// We set multiple to false so only get one image from the uploader
var attachment = file_frame.state().get('selection').first().toJSON();
$button.siblings('input').val(attachment.url);
});
// Finally, open the modal
file_frame.open();
});
});
Теперь сравните ваш код, и вы увидите ошибку.
Я предложу использовать плагин, чтобы показать информацию об авторе, чтобы сэкономить ваше время.
Другие решения
Других решений пока нет …