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 !