- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是一个制作自己的自定义小部件的菜鸟,我想制作一个自定义小部件来显示网站的特色服务,包括图像、标题、描述和链接按钮。我在 stackoverflow 上看了很多,最终我得到了一些几乎可以工作的东西。问题是媒体按钮有效,该字段有效,但是当我单击“使用此图像”时,它会将相同的图像 url 放在它找到的每个输入(在小部件桌面内)上,类为“image1”,所以每个小部件都有相同的图像。
如果有人可以帮助我修复它,我将不胜感激。提前为西类牙语单词道歉,但它们没有用于与我要修复的操作相关的任何内容。这是我拥有的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
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();
});
});
最佳答案
这是在小部件中创建图像上传器的完整代码
函数.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
}
}
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');
}
关于php - 带有媒体上传按钮的自定义 Wordpress 小部件在每个小部件上插入相同的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59113029/
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
已经提出了类似的问题,但由于它总是取决于,我单独询问我的具体情况。 我有一个网站页面,显示来自数据库的一些数据,要从该数据库生成数据,我必须执行一些相当复杂的多连接查询。 数据每天(每晚)更新一次。
我正在使用 MongoDb 和 MySQL 的 python 连接器 pymongo 和 pymysql 测试 MongoDb 和 MySQL,特别是插入功能。 pymongo版本是3.4,pymys
从 C# 应用程序插入大型数组(10M 元素)的最快方法是什么? 到目前为止,我使用的是批量插入。 C# 应用程序生成一个大文本文件,我使用 BULK INSERT 命令加载它。出于好奇,我编写了一个
我编写了一个枚举类型,当我为它运行我创建的 JUnit 测试时会出现以下语法错误: java.lang.Error: Unresolved compilation problems: Synt
我正在尝试创建一个程序,它将单词列表作为输入,并将它们排序为二叉树,以便能够找到它们,例如像字典。这是我到目前为止所做的,但是 newEl -> el = input; 出现段错误,我知道这是因为它试
你好 我有编译这个问题 \begin{equation} J = \sum_{j=1}^{C} \end{equation} 我不断收到错误 missing $ inserted 这很奇怪,因
我需要使用 LINQ to SQL 将记录插入到没有主键的表中。 table 设计得很差;我无法控制表结构。该表由几个 varchar 字段、一个文本字段和一个时间戳组成。它用作其他实体的审计跟踪。
我正在尝试使用 itextsharp 创建 Pdf。我添加了一张包含两列的表格,其中一列包含文本和其他图像。我想要恒定的图像大小 如果另一个单元格中的文本增加并且其他单元格中的图像大小不同,我的图像会
我想把 calory 作为 fruits 的第一个值,我做不到,有人能帮忙吗? $sql = 'INSERT INTO fruits VALUES('', ?, ?, ?)'
我有一个包含季度观察结果的 data.frame。我现在想插入每月值(首选三次,线性很好)。中间目标应该是使用 DATE 创建一个 data.frame作为所有每月观察的索引和缺失值。 谷歌搜索表明我
我想知道是否有办法在值列表中使用“插入”。我正在尝试这样做: insert into tblMyTable (Col1, Col2, Col3) values('value1', value
我想让人们能够在他们的网站中插入单个 Javascript 行,这实际上允许我插入包含我网站内容的固定大小的 IFRAME。它实际上是一个小部件,允许他们搜索我的网站或接收其他信息。这可能吗? 最佳答
我有一个包含时间的表,列名为 time,数据类型为 Date。 在 asp.net 中,我想要一个查询插入日期,另一个查询则在 2 个日期之间进行选择。 我已经尝试过这个: string data =
这是我的代码: create or replace trigger th after insert on stock for each row declare sqty number;
这是一个带有具体示例的通用问题。 我有一个包含三个字段(流派 ID (PK IDENTITY)、流派和子流派)的表。该表对(流派,子流派)组合具有唯一约束。 我想知道如何修改存储过程以在表中不存在时插
因此,我正在遍历二叉树,节点包含字符串,以及读取文件时该字符串是否出现多次。我只查找读取文件时出现次数最多的前 10 个单词,因此本质上我只是比较 int 值。 我的问题是我正在尝试找出一种有效的方法
我有一张机票和行李 map , 每张门票必须是唯一的,并且必须与 map 上的位置相对应 是否可以仅更改行李(m_bagage->秒)而不更改 key ? std::unordered_map m_c
我正在使用 jdbc 驱动程序做一个示例项目。我的问题是,如果我在 2 文本字段中输入空值。 null 不应该加载到数据库中吗?有没有办法避免在数据库中插入空字段?任何帮助将不胜感激。 //Execu
我想知道 SSIS 中是否有特定的插入或更新选项。 如果我想让程序检查它是更新还是插入,我是否必须做一些编码?或者是否可以启用一个选项,以便它会自行检查 PK 是否存在,然后更新,否则插入? 亲切的问
我是一名优秀的程序员,十分优秀!