वर्डप्रेस कस्टम विजेट छवि अपलोड

Question

मैं अपना खुद का वर्डप्रेस विजेट बनाने में व्यस्त हूं। वर्डप्रेस मीडिया लोडर को छोड़कर सब कुछ ठीक काम करता है। मैंने आठ बटन और आठ इनपुट टेक्स्ट फ़ील्ड बनाए हैं जिनमें अपलोड की गई छवि का यूआरएल होना चाहिए।

क्लिक ईवेंट को निकाल दिया नहीं जा रहा है, संभवतः क्योंकि वर्डप्रेस दो बार HTML आउटपुट करता है (एक बार उपलब्ध विगेट्स के बार में और बार में वर्तमान में सक्रिय विजेट्स में)।

क्या कोई देखता है कि मैं क्या गलत कर रहा हूं?

नीचे मुझे अपना कोड मिल गया।

मदद के लिए अग्रिम धन्यवाद!

<?php 
/* 
Plugin Name: Home_Rollover_Widget 
Plugin URI: 
Description: Home Rollover Widget 
Version: 1.0 
Author: 
Author URI: 
*/ 

// Initialize widget 
add_action('widgets_init', array('Home_Rollover_Widget', 'register')); 

/** 
* Home_Rollover_Widget 
* 
* @package 
* @author 
* @copyright 2012 
* @version $Id$ 
* @access public 
*/ 
class Home_Rollover_Widget extends WP_Widget 
{ 
    /** 
    * __construct() 
    * 
    * @return void 
    */ 
    public function __construct() 
    { 
     parent::__construct('home-rollover-widget'); 
    } 
    /** 
    * control() 
    * 
    * @return void 
    */ 
    public function control() 
    {  
     // Load upload an thickbox script 
     wp_enqueue_script('media-upload'); 
     wp_enqueue_script('thickbox'); 

     // Load thickbox CSS 
     wp_enqueue_style('thickbox'); 

     // Load all widget options 
     $data = get_option('Home_Rollover_Widget'); 
     ?> 

     <!-- Widget title --> 
     <p><label>Titel<input name="home_rollover_widget_title" type="text" value="<?php echo $data['home_rollover_widget_title']; ?>" /></label></p> 

     <?php 
     // If there's a title provided, update it. 
     if (isset($_POST['home_rollover_widget_title'])){ 
      $data['home_rollover_widget_title'] = attribute_escape($_POST['home_rollover_widget_title']); 
     } 

     // Show 8 input groups for image URL and text 
     for ($i = 1; $i <= 8; ++$i) 
     { 
      ?> 

      <p><a href="#" id="upload-button-<?php echo $i; ?>">UPLOAD IMAGE</a></p> 
      <p><label>IMAGE <?php echo $i; ?><input id="home_rollover_widget_image_url_<?php echo $i; ?>" name="home_rollover_widget_image_url_<?php echo $i; ?>" type="text" value="<?php echo $data['home_rollover_widget_image_url_'.$i]; ?>" /></label></p> 
      <p><label>TEXT <?php echo $i; ?><input name="home_rollover_widget_text_<?php echo $i; ?>" type="text" value="<?php echo $data['home_rollover_widget_text_'.$i]; ?>" /></label></p> 
      <?php 
      // If there's an URL provided, update it. 
      if (isset($_POST['home_rollover_widget_image_url_'.$i])){ 
       $data['home_rollover_widget_image_url_1'] = attribute_escape($_POST['home_rollover_widget_image_url_'.$i]); 
      } 

      // if there's a text provided, update it. 
      if (isset($_POST['home_rollover_widget_text_'.$i])) { 
       $data['home_rollover_widget_text_1'] = attribute_escape($_POST['home_rollover_widget_text_'.$i]); 
      } 

      ?> 

      <script type="text/javascript">    
       var formField = ''; 
       var imgUrl =''; 

       jQuery(document).ready(function() { 
        jQuery('#upload-button-<?php echo $i; ?>').click(function() { 
         alert('Clicked on upload button'); 
         formField = jQuery('#upload-button-<?php echo $i; ?>').attr('name'); 
         tb_show('', 'media-upload.php?type=image&amp&TB_iframe=1'); 
         return false; 
        }); 

        // send url back to plugin editor 
        window.send_to_editor = function(html) { 
         imgUrl = jQuery('img',html).attr('src'); 
         alert('Sending image url'+imgUrl+' to text field'); 
         jQuery('#home_rollover_widget_image_url_<?php echo $i; ?>').val(imgUrl); 
         tb_remove(); 
        }    
       }); 
      </script> 

      <hr /> 

      <?php  
     } 

     // Update widget data 
     update_option('Home_Rollover_Widget', $data); 
    } 

    /** 
    * widget() 
    * 
    * @param mixed $args 
    * @return void 
    */ 
    function widget($args) 
    {   
     // Load all widget options 
     $data = get_option('Home_Rollover_Widget');   
     ?> 

     <h4><?php echo $data['home_rollover_widget_title']; ?></h4> 

     <div id="all"> 
      <?php 
      // Loop though the widget elements 
      for ($i = 1; $i <= 8; ++$i) 
      { 
       // Find image URL 
       $imageUrl = $data['home_rollover_widget_image_url_'.$i]; 

       // Check for first slash, if not present, add it. 
       if (substr($imageUrl, 0, 1) != '/') { 
        $imageUrl = '/'.$imageUrl; 
       } 
       ?> 
       <ul> 
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?><?php echo $imageUrl; ?>" /><h4><?php echo $data['home_rollover_widget_text_'.$i]; ?></h4></a></li>  
       </ul> 
       <?php 
      } 
      ?> 
     </div> 
     <?php 
    } 

    /** 
    * register() 
    * 
    * @return void 
    */ 
    function register() 
    { 
     // Register for sidebar 
     register_sidebar_widget('Home Rollover Widget', array('Home_Rollover_Widget', 'widget')); 

     // Register for control panel 
     register_widget_control('Home Rollover Widget', array('Home_Rollover_Widget', 'control')); 
    } 
} 

Answer 1

मैंने इस उदाहरण के लिए विजेट को थोड़ा सा सरल बना दिया है, क्योंकि मुझे लगता है कि आप विजेट के नए उदाहरण बना सकते हैं। यह वस्तुओं को सॉर्ट करने के अतिरिक्त लाभ की भी अनुमति देता है। मैंने जेएस को दूसरी फाइल में ले जाया क्योंकि कोड को दोहराने की जरूरत नहीं है।

विजेट वर्ग

class Home_Rollover_Widget extends WP_Widget 
{ 

    public function __construct() 
    { 
    parent::__construct(
     'home-rollover-widget', 
     'Home Rollover Widget', 
     array(
     'description' => 'Home rollover widget' 
    ) 
    ); 
    } 

    public function widget($args, $instance) 
    { 
    // basic output just for this example 
    echo '<a href="#"> 
     <img src="'.esc_url($instance['image_uri']).'" /> 
     <h4>'.esc_html($instance['image_uri']).'</h4> 
    </a>'; 
    } 

    public function form($instance) 
    { 
    // removed the for loop, you can create new instances of the widget instead 
    ?> 
    <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="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br /> 
     <input type="text" class="img" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>" /> 
     <input type="button" class="select-img" value="Select Image" /> 
    </p> 
    <?php 
    } 


} 
// end class 

// init the widget 
add_action('widgets_init', create_function('', 'return register_widget("Home_Rollover_Widget");')); 

// queue up the necessary js 
function hrw_enqueue() 
{ 
    wp_enqueue_style('thickbox'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
    // moved the js to an external file, you may want to change the path 
    wp_enqueue_script('hrw', '/wp-content/plugins/home-rollover-widget/script.js', null, null, true); 
} 
add_action('admin_enqueue_scripts', 'hrw_enqueue'); 

न्यू js फ़ाइल: ईवेंट हैंडलर संलग्न करने के लिए .click() के बजाय .on() विधि का उपयोग करें।

var image_field; 
jQuery(function($){ 
    $(document).on('click', 'input.select-img', function(evt){ 
    image_field = $(this).siblings('.img'); 
    tb_show('', 'media-upload.php?type=image&TB_iframe=true'); 
    return false; 
    }); 
    window.send_to_editor = function(html) { 
    imgurl = $('img', html).attr('src'); 
    image_field.val(imgurl); 
    tb_remove(); 
    } 
}); 

Answer 2

इस स्क्रिप्ट ने मुझे बहुत मदद की। बाद में, मुझे पता चला कि यह मेरी पोस्ट में मीडिया अपलोड के साथ गड़बड़ कर रहा है क्योंकि शायद यह मीडिया अपलोडर स्क्रिप्ट को दो बार बुला रहा था। इस तरह विजेट केवल विगेट्स 'पृष्ठ में और पूरे व्यवस्थापक में नहीं अपलोड करने वाले स्क्रिप्ट कॉल

// queue up the necessary js 
function hrw_enqueue($hook) { 

if($hook != 'widgets.php') 
    return; 

    wp_enqueue_style('thickbox'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
    // I also changed the path, since I was using it directly from my theme and not as a plugin 
    wp_enqueue_script('hrw', get_template_directory_uri() . '/js/script.js', null, null, true); 
} 
add_action('admin_enqueue_scripts', 'hrw_enqueue'); 

: मैं इसे

if($hook != 'widgets.php') 
    return; 

इस तरह जोड़कर हल किया।