0
WordPressウィジェットを作成していて、管理者が入力できるプレーンテキストが含まれている必要があります。しかし、私もファイルをアップロードする必要があり、javascriptはjQueryが入力＃image_urlフィールドの値を変更しようとするまで、正常に動作します。それは正しい値を.val（）メソッドで設定するので、DOMには表示されないだけの値が含まれるため、変更は表示されません。また、失敗したので、変更することができないという根本的なだけで何かがあるカスタムウィジェットフォーム：入力フィールドの値を変更できません
var input = document.getElementById("image_url");
input.value = "herpderp";
：私はコンソールに行き、ちょうど標準のjQueryをし、そのような通常の文書APIを使用して入力フィールドを選択してみましたその入力フィールドの値は、jsfiddle.netのようなもので、上記のコードは100％正確に動作します。だから私の質問は、誰かがWordpressで入力フィールドを破壊するものを試してみたら？私は、私のhtmlが不正な形式であるかどうかをすでに確認していますが、それは大丈夫だと思います。私のコードは、任意の参考のために、以下の通りです：
file:my_theme/functions.php
include_once('widgets/intro.php');
function caribia_enqueue_styles()
{
$parent_style = 'parent-style';
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));
wp_enqueue_style('caribia-css', get_stylesheet_directory_uri() . '/css/caribia.css');
wp_enqueue_script('caribia-js', get_stylesheet_directory_uri() . '/js/caribia.js', array('jquery'));
}
function caribia_register_widgets() {
register_widget('Intro_Widget');
}
function load_wp_media_files() {
wp_enqueue_media();
}
add_action('wp_enqueue_scripts', 'caribia_enqueue_styles', 12);
add_action('admin_enqueue_scripts', 'caribia_enqueue_styles');
add_action('widgets_init', 'caribia_register_widgets');
add_action('admin_enqueue_scripts', 'load_wp_media_files');
file:my_theme/widgets/intro.php
<?php
/**
* Widget API: Intro_Widget class
*
* @package WordPress
* @subpackage Widgets
* @since 4.4.0
*/
/**
* Adds Foo_Widget widget.
*/
class Intro_Widget extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'intro_widget',
__('Intro widget', 'text_domain'),
array('description' => __('A intro widget, should output a image, header, sub-headers
and a description for each subheader', 'text_domain'),)
);
add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
}
/**
* Upload the Javascripts for the media uploader
*/
public function upload_scripts()
{
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('upload_media_widget', get_stylesheet_directory_uri() . '/js/upload-media.js', array('jquery'));
wp_enqueue_style('thickbox');
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget($args, $instance) {
echo $args['before_widget'];
echo "herpderp";
echo $args['after_widget'];
}
/**
* @param array $instance
* @return string Default return is 'noform'.
*/
public function form($instance) {
?>
<div>
<label for="image_url">Image</label>
<input type="text" name="image_url" id="image_url" class="regular-text">
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
</div>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update($new_instance, $old_instance) {
return $new_instance;
}
}
いくつかのjavascript：
jQuery(document).ready(function($) {
$(document).on('click','#upload-btn',function(e) {
var image = wp.media({
title: 'Upload Image',
multiple: false
}).open().on('select', function(e){
console.log('select was called');
var uploaded_image = image.state().get('selection').first();
console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
$('#image_url').val(image_url);
});
});
});