"/>

Un widget pour votre site wordpress : mise en avant d’un article

Comment créer un widget pour mettre du contenu en avant

Dans ce tuto, on va créer un simple widget qui va nous servir à afficher une vignette ou « card ».

On va ici offrir la possibilité à l’utilisateur de :

  • télécharger une image
  • insérer un titre
  • insérer du texte
  • insérer un lien (et le texte du lien)

Voici le rendu en front :

un widget de mise en avant pour wordpress

Et voici les options en backoffice

un widget de mise en avant pour wordpress

Ce widget va donc utiliser l’upload-media de wordpress. Voici le code du widget en entier.

class Cc_Formation_Widget extends WP_Widget{
  
   function __construct() {

	   add_action('admin_enqueue_scripts', array($this, 'scripts'));
	 
	   parent::__construct(
	      'cc_formation_widget', // Base ID
	      __( 'Cc Formation Widget', 'text_domain' ), 
	      array( 'description' => __( 'Cc Widget with media files', 'text_domain' ), ) 
	   );
	}

    
   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'));
	}
    public function upload_styles(){
        wp_enqueue_style('thickbox');
    }


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

		<div class="nf-thumbnail">
		<img src='<?php echo $instance['image'] ?>'>
		</div>
		<?php if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
		}
		;?>
		<div class='nf-days'>
			<?php echo wpautop( esc_html( $instance['days'] ) ) ?>
		</div>
		<div class='nf-description'>
			<?php echo wpautop( esc_html( $instance['description'] ) ) ?>
		</div>
		
		<div class='widget-btn'>
			<a href='<?php echo site_url(); ?>/<?php echo esc_url( $instance['link_url'] ) ?>'><?php echo esc_html( $instance['link_title'] ) ?></a>
		</div>

		<?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['description'] = ( ! empty( $new_instance['description'] ) ) ? strip_tags( $new_instance['description'] ) : '';
		$instance['days'] = ( ! empty( $new_instance['days'] ) ) ? strip_tags( $new_instance['days'] ) : '';
		$instance['link_title'] = ( ! empty( $new_instance['link_title'] ) ) ? strip_tags( $new_instance['link_title'] ) : '';
		$instance['link_url'] = ( ! empty( $new_instance['link_url'] ) ) ? strip_tags( $new_instance['link_url'] ) : '';
		$instance['image'] = ( ! empty( $new_instance['image'] ) ) ? $new_instance['image'] : '';

		return $instance;
	}

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

	    $description = '';
	    if( !empty( $instance['description'] ) ) {
	        $description = $instance['description'];
	    }
	     $days = '';
	    if( !empty( $instance['days'] ) ) {
	        $days = $instance['days'];
	    }

	    $link_url = '';
	    if( !empty( $instance['link_url'] ) ) {
	        $link_url = $instance['link_url'];
	    }

	    $link_title = '';
	    if( !empty( $instance['link_title'] ) ) {
	        $link_title = $instance['link_title'];
	    }

		$image = '';
		if(isset($instance['image']))
		{
		    $image = $instance['image'];
		}
        ?>
        <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( 'description' ); ?>"><?php _e( 'Description:' ); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id( 'description' ); ?>" name="<?php echo $this->get_field_name( 'description' ); ?>" type="text" ><?php echo esc_attr( $description ); ?></textarea>
        </p>
		
		<p>
            <label for="<?php echo $this->get_field_name( 'days' ); ?>"><?php _e( 'Durée:' ); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id( 'days' ); ?>" name="<?php echo $this->get_field_name( 'days' ); ?>" type="text" ><?php echo esc_attr( $days ); ?></textarea>
        </p>

        <p>
            <label for="<?php echo $this->get_field_name( 'link_url' ); ?>"><?php _e( 'Link URL:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'link_url' ); ?>" name="<?php echo $this->get_field_name( 'link_url' ); ?>" type="text" value="<?php echo esc_attr( $link_url ); ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_name( 'link_title' ); ?>"><?php _e( 'Link Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'link_title' ); ?>" name="<?php echo $this->get_field_name( 'link_title' ); ?>" type="text" value="<?php echo esc_attr( $link_title ); ?>" />
        </p>

        <p>
	      <label for="<?php echo $this->get_field_id( 'image' ); ?>"><?php _e( 'Image:' ); ?></label>
	      <input class="widefat" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" type="text" value="<?php echo esc_url( $image ); ?>" />
	      <button class="upload_image_button button button-primary">Upload Image</button>
	   </p>
        
   <?php
	}
}

Il faudra bien sûr penser à l’inclure dans une fonction d’enregistrement

add_action( 'widgets_init', 'cc_init' );
function cc_init() {
	register_widget('Cc_Formation_Widget' );
}

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.