"/>

Un widget wordpress de téléchargement

Un widget pour partager vos documents

Dans ce petit tuto wordpress, je donne ici un exemple de widget simple pour donner la possibilité à l’utilisateur de télécharger un document.

Ce que va contenir notre widget

Notre widget va contenir:

  • Une image
  • Un lien
  • Le texte du lien ( ou titre du widget)

Voici le rendu visuel du widget en Front

un widget wordpress de telechargement

Et voici en backoffice dans l’onglet Apparence/ Widget:

un widget wordpress de telechargement

Le code du widget

Et voici le code du widget en entier, à mettre dans functions.php ou tout autre fichier dédié.

On utilise donc ici l’appel au script wordpress upload-media.js. Dans le code, on fait en sorte d’entourer à la fois l’image et le texte du lien vers le document.

class Cc_Formation_Pdf extends WP_Widget{
    /**
     * Constructor
     **/
   function __construct() {
   // Add Widget scripts
	   add_action('admin_enqueue_scripts', array($this, 'scripts'));
	 
	   parent::__construct(
	      'cc_formation_pdf', // Base ID
	      __( 'Cc Formation PDF', 'text_domain' ), // Name
	      array( 'description' => __( 'Cc Widget for PDF', 'text_domain' ), ) // Args
	   );
	}

    /**
     * Upload the Javascripts for the media uploader
     */
   public function scripts(){
	   wp_enqueue_script( 'media-upload' );
	   wp_enqueue_media();
	   wp_enqueue_script('upload-media', get_template_directory_uri() . '/js/upload-media.js', array('jquery'));
	}

    /**
     * Add the styles for the upload media box
     */
    public function upload_styles(){
        wp_enqueue_style('thickbox');
    }

   public function widget( $args, $instance ) {
  		 echo $args['before_widget'];
		?>

		<div class="npdf-thumbnail">
			<a href='<?php echo  $instance['pdf_link']  ?>'><img src='<?php echo $instance['image_pdf'] ?>'></a>
		</div>
		<?php if ( ! empty( $instance['title'] ) ) { ?>
				<a href='<?php echo  $instance['pdf_link']  ?>'>
				<?php	
				echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];?>
			</a>
			<?php } ;?>
	

		<?php
		echo $args['after_widget'];
	}
    public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		$instance['pdf_link'] = ( ! empty( $new_instance['pdf_link'] ) ) ? $new_instance['pdf_link']  : '';
		$instance['image_pdf'] = ( ! empty( $new_instance['image_pdf'] ) ) ? $new_instance['image_pdf'] : '';

		return $instance;
	}

    public function form( $instance ) {
	    $title = '';
	    if( !empty( $instance['title'] ) ) {
	        $title = $instance['title'];
	    }

	    $pdf_link = '';
	    if(isset($instance['pdf_link'] ) ) {
	        $pdf_link = $instance['pdf_link'];
	    }

		$image_pdf = '';
		if(isset($instance['image_pdf']))
		{
		    $image_pdf = $instance['image_pdf'];
		}
        ?>
        <p>
            <label for="<?php echo $this->get_field_name( '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_name( 'pdf_link' ); ?>"><?php _e( 'PDF Link:' ); ?></label>
             <input class="widefat" id="<?php echo $this->get_field_id( 'pdf_link' ); ?>" name="<?php echo $this->get_field_name( 'pdf_link' ); ?>" type="text" value="<?php echo esc_url( $pdf_link ); ?>" />
	      <button class="upload_image_button button button-primary">Upload PDF</button>
	  </p>
        <p>
	      <label for="<?php echo $this->get_field_id( 'image_pdf' ); ?>"><?php _e( 'Image PDF:' ); ?></label>
	      <input class="widefat" id="<?php echo $this->get_field_id( 'image_pdf' ); ?>" name="<?php echo $this->get_field_name( 'image_pdf' ); ?>" type="text" value="<?php echo esc_url( $image_pdf ); ?>" />
	      <button class="upload_image_button button button-primary">Upload Image</button>
	   </p>
        
   <?php
	}
}

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.