带有媒体上传按钮的自定义Wordpress窗口小部件,在每个窗口小部件上插入相同的图像
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有媒体上传按钮的自定义Wordpress窗口小部件,在每个窗口小部件上插入相同的图像相关的知识,希望对你有一定的参考价值。
我是一个菜鸟,制作了自己的自定义小部件,我想制作一个自定义小部件来显示网站的特色服务,包括图像,标题,描述和链接按钮。我在stackoverflow上看了很多,最终得到了几乎可以正常工作的东西。问题是媒体按钮起作用,该字段起作用,但是当我单击“使用此图像”时,它将在找到的每个输入(在小部件桌面内部)中都使用“ image1”类放置相同的图像url,因此每个小部件都具有同一张图片。
如果有人可以帮助我修复它,我将非常感激。抱歉,西班牙语单词很抱歉,但是与我要解决的操作相关的任何内容都没有使用它们。这是我拥有的functions.php代码:
// START CUSTOM WIDGET
class services_widget extends WP_Widget {
// Create Widget
function services_widget() {
parent::WP_Widget(false, $name = 'Servicios Destacados - Widget', array('description' => 'Widget para mostrar servicios destacados en la página principal'));
}
// Widget Content
function widget($args, $instance) {
extract( $args );
$photo = $instance['photo'];
$titulo = $instance['titulo'];
$descripcion = $instance['descripcion'];
$enlace = strip_tags($instance['enlace']);
$textoenlace = strip_tags($instance['textoenlace']);
?>
<div class="servicio-destacado <?php echo $this->id; ?>">
<div class="servicio-imagen" style="background-color:#eaeaea;background-image: url('<?php echo $photo; ?>');"></div>
<div class="titulo"><?php echo $titulo; ?></div>
<div class="line"></div>
<div class="descripcion"><?php echo $descripcion; ?></div>
<a href="<?php echo $enlace; ?>" class="enlace boton"><?php echo $textoenlace; ?></a>
</div>
<?php
}
// If widget content needs a form
function form($instance) {
//widgetform in backend
$photo = $instance['photo'];
$titulo = $instance['titulo'];
$descripcion = $instance['descripcion'];
$enlace = strip_tags($instance['enlace']);
$textoenlace = strip_tags($instance['textoenlace']);
?>
<div class="servicio-widget">
<p>
<label for="<?php echo $this->get_field_id('photo'); ?>"><strong>Imagen</strong>: </label>
<input class="widefat image1" type="text" name="<?php echo $this->get_field_name('photo'); ?>" id="<?php echo $this->get_field_id('photo'); ?>" value="<?php echo attribute_escape($photo) ;?>">
</p>
<p>
<button class="image_upload1">Seleccionar o cambiar imagen</button>
</p>
<p>
<label for="<?php echo $this->get_field_id('titulo'); ?>"><strong>Título</strong>: </label>
<input class="widefat" id="<?php echo $this->get_field_id('titulo'); ?>" name="<?php echo $this->get_field_name('titulo'); ?>" type="text" value="<?php echo attribute_escape($titulo); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('descripcion'); ?>"><strong>Descripción</strong>: </label>
<textarea class="widefat" id="<?php echo $this->get_field_id('descripcion'); ?>" name="<?php echo $this->get_field_name('descripcion'); ?>" type="text" value="<?php echo attribute_escape($descripcion); ?>"><?php echo attribute_escape($descripcion); ?></textarea>
</p>
<p>
<label for="<?php echo $this->get_field_id('textoenlace'); ?>"><strong>Texto del botón</strong>: </label>
<input class="widefat" id="<?php echo $this->get_field_id('textoenlace'); ?>" name="<?php echo $this->get_field_name('textoenlace'); ?>" type="text" value="<?php echo attribute_escape($textoenlace); ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('enlace'); ?>"><strong>Enlace</strong>: </label>
<input class="widefat" id="<?php echo $this->get_field_id('enlace'); ?>" name="<?php echo $this->get_field_name('enlace'); ?>" type="text" value="<?php echo attribute_escape($enlace); ?>" />
</p>
</div>
<?php
}
// Update and save the widget
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['photo'] = ( ! empty( $new_instance['photo'] ) ) ? $new_instance['photo'] : '';
return $instance;
}
}
register_widget('services_widget');
/*
photo upload option in widget
*/
function photo_upload_option($hook) {
if( $hook != 'widgets.php' )
return;
//enque Javasript Media API
wp_enqueue_media();
wp_enqueue_script( 'uploadphoto', get_template_directory_uri() . '/upload_image.js', array('jquery') );
}
add_action('admin_enqueue_scripts', 'photo_upload_option');
// END CUSTOM WIDGET
这是upload_image.js的代码:
jQuery(function($){
// Set all variables to be used in scope
var frame,
addImgLink = $('.image_upload1'),
imgIdInput = $('.image1');
// ADD IMAGE LINK
addImgLink.on( 'click', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return;
}
// Create a new media frame
frame = wp.media({
title: 'Select or Upload Image',
button: {
text: 'Use this Image'
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected in the media frame...
frame.on( 'select', function() {
// Get media attachment details from the frame state
var attachment = frame.state().get('selection').first().toJSON();
// Send the attachment URL to our custom image input field.
//imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );
// Send the attachment url to our input field
imgIdInput.val( attachment.url );
});
// Finally, open the modal on click
frame.open();
});
});
答案
这里是在小部件中创建图像上传器的完整代码
function.php
<?php
// Register sidebar
if (function_exists('register_sidebar')) {
register_sidebar(
array(
'name' => 'Left Sidebar',
'id' => 'left-sidebar',
'description' => 'Widget Area',
'before_widget' => '<div id="one" class="two">',
'after_widget' => '</div>',
)
);
}
// Register widget
add_action('widgets_init', 'ctUp_ads_widget');
function ctUp_ads_widget() {
register_widget( 'ctUp_ads' );
}
// Enqueue additional admin scripts
add_action('admin_enqueue_scripts', 'ctup_wdscript');
function ctup_wdscript() {
wp_enqueue_media();
wp_enqueue_script('ads_script', get_template_directory_uri() . '/js/widget.js', false, '1.0.0', true);
}
// Widget
class ctUp_ads extends WP_Widget {
function ctUp_ads() {
$widget_ops = array('classname' => 'ctUp-ads');
$this->WP_Widget('ctUp-ads-widget', 'EOTW', $widget_ops);
}
function widget($args, $instance) {
echo $before_widget;
?>
<h1><?php echo apply_filters('widget_title', $instance['text'] ); ?></h1>
<img src="<?php echo esc_url($instance['image_uri']); ?>" />
<?php
echo $after_widget;
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['text'] = strip_tags( $new_instance['text'] );
$instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
return $instance;
}
function form($instance) {
?>
<p>
<label for="<?php echo $this->get_field_id('text'); ?>">Text</label><br />
<input type="text" name="<?php echo $this->get_field_name('text'); ?>" id="<?php echo $this->get_field_id('text'); ?>" value="<?php echo $instance['text']; ?>" class="widefat" />
</p>
<p>
<label for="<?= $this->get_field_id( 'image_uri' ); ?>">Image</label>
<img class="<?= $this->id ?>_img" src="<?= (!empty($instance['image_uri'])) ? $instance['image_uri'] : ''; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
<input type="text" class="widefat <?= $this->id ?>_url" name="<?= $this->get_field_name( 'image_uri' ); ?>" value="<?= $instance['image_uri']; ?>" style="margin-top:5px;" />
<input type="button" id="<?= $this->id ?>" class="button button-primary js_custom_upload_media" value="Upload Image" style="margin-top:5px;" />
</p>
<?php
}
}
javascript按钮上传
jQuery(document).ready(function ($) {
function media_upload(button_selector) {
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
$('body').on('click', button_selector, function () {
var button_id = $(this).attr('id');
wp.media.editor.send.attachment = function (props, attachment) {
if (_custom_media) {
$('.' + button_id + '_img').attr('src', attachment.url);
$('.' + button_id + '_url').val(attachment.url);
} else {
return _orig_send_attachment.apply($('#' + button_id), [props, attachment]);
}
}
wp.media.editor.open($('#' + button_id));
return false;
});
}
media_upload('.js_custom_upload_media');
});
查看要在其中显示此文件的文件:
if ( is_active_sidebar('left-sidebar') ) {
dynamic_sidebar('left-sidebar');
}
另一答案
[如果您是WordPress开发中的新手,我强烈建议您尝试使用autocoder.io。这是一项新的免费服务,您可以在不使用任何编码的情况下创建完全相同的元素
以上是关于带有媒体上传按钮的自定义Wordpress窗口小部件,在每个窗口小部件上插入相同的图像的主要内容,如果未能解决你的问题,请参考以下文章