Créer un widget personnalisé pour afficher un diagramme sur wordpress
Cet article fait suite au précédent, dans lequel je donne un exemple de diagramme fait à partir de la bibliothèque js leader-line.js.
Construire un widget administrable
Dans cet article je vais créer un widget pour obtenir le même rendu : des blocs reliés entre eux avec des flèches. On donne ici la possibilité à l’utilisateur de remplir manuellement chaque bloc, grâce à des champs textarea avec possibilité d’inclure du html.
Le code du widget
Voici donc le widget en entier. Comme vous pouvez le voir, le widget est super long. C’est plutôt un affichage statique, pour répondre à une demande précise. Il n’est pas dynamique dans le sens où on pourrait ajouter ou supprimer des blocs à la volée, à la manière d’une ToDo List. J’offre pas non plus la possibilité de choisir le nombre et le sens des flèches. C’est vraiment un exemple simpliste et détaillé. Néanmoins, cela peut servir de base pour construire quelque chose de plus complexe.
Dans votre fichier functions.php ou un fichier dédié
class Cc_infographie_Widget extends WP_Widget{
function __construct() {
parent::__construct(
'cc_infographie_widget',
__( 'Cc Infographie Widget', 'text_domain' ),
array( 'description' => __( 'Cc Infographie Widget', 'text_domain' ), )
);
if ( is_active_widget( false, false, $this->id_base ) || is_customize_preview() ) {
add_action( 'wp_head', array( $this, 'infographie_style' ) );
}
}
public function infographie_style() {
/**
* Filters the Recent Comments default widget styles.
*
* @since 3.1.0
*
* @param bool $active Whether the widget is active. Default true.
* @param string $id_base The widget ID.
*/
wp_enqueue_script('leader-line');
wp_enqueue_script('leader-script');
}
public function widget( $args, $instance ) {
wp_enqueue_script('leader-line');
wp_enqueue_script('leader-script');
echo $args['before_widget'];
$col_1_title = apply_filters( 'widget_text', $instance['col_1_title'], $instance );
$col_2_title = apply_filters( 'widget_text', $instance['col_2_title'], $instance );
$col_3_title = apply_filters( 'widget_text', $instance['col_3_title'], $instance );
$red1_text = apply_filters( 'widget_text', $instance['red1_text'], $instance );
$red2_text = apply_filters( 'widget_text', $instance['red2_text'], $instance );
$red3_text = apply_filters( 'widget_text', $instance['red3_text'], $instance );
$blue1_text = apply_filters( 'widget_text', $instance['blue1_text'], $instance );
$blue2_text = apply_filters( 'widget_text', $instance['blue2_text'], $instance );
$blue3_text = apply_filters( 'widget_text', $instance['blue3_text'], $instance );
$blue4_text = apply_filters( 'widget_text', $instance['blue4_text'], $instance );
$orange1_text = apply_filters( 'widget_text', $instance['orange1_text'], $instance );
$red1_tool_tip_text = apply_filters( 'widget_text', $instance['red1_tool_tip_text'], $instance );
$red2_tool_tip_text = apply_filters( 'widget_text', $instance['red2_tool_tip_text'], $instance );
$red3_tool_tip_text = apply_filters( 'widget_text', $instance['red3_tool_tip_text'], $instance );
$blue1_tool_tip_text = apply_filters( 'widget_text', $instance['blue1_tool_tip_text'], $instance );
$blue2_tool_tip_text = apply_filters( 'widget_text', $instance['blue2_tool_tip_text'], $instance );
$blue3_tool_tip_text = apply_filters( 'widget_text', $instance['blue3_tool_tip_text'], $instance );
$blue4_tool_tip_text = apply_filters( 'widget_text', $instance['blue4_tool_tip_text'], $instance );
$orange1_tool_tip_text = apply_filters( 'widget_text', $instance['orange1_tool_tip_text'], $instance );
?>
<?php if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
;?>
<div class="flex-container">
<div class="flex-row">
<div class="flex-col-md-4 chart-block left">
<?php if($col_1_title) : ?>
<div class="col-title red-border">
<?php echo $col_1_title ;?>
</div>
<?php endif ;?>
<div class="inner-col">
<?php if($red1_text) : ?>
<div class="block red mt-auto" id="red1">
<?php echo $red1_text ;?>
</div>
<?php endif ;?>
<?php if($red1_tool_tip_text) : ?>
<div class="absolute-tool-tip red-border">
<?php echo $red1_tool_tip_text ;?>
</div>
<?php endif ;?>
<?php if($red2_text) : ?>
<div class="block red" id="red2">
<?php echo $red2_text ;?>
</div>
<?php endif ;?>
<?php if($red2_tool_tip_text) : ?>
<div class="absolute-tool-tip red-border">
<?php echo $red2_tool_tip_text ;?>
</div>
<?php endif ;?>
<?php if($red3_text) : ?>
<div class="block red" id="red3">
<?php echo $red3_text ;?>
</div>
<?php endif ;?>
<?php if($red3_tool_tip_text) : ?>
<div class="absolute-tool-tip red-border">
<?php echo $red3_tool_tip_text ;?>
</div>
<?php endif ;?>
</div>
</div>
<div class="flex-col-md-4 chart-block center">
<?php if($col_2_title) : ?>
<div class="col-title blue-border">
<?php echo $col_2_title ;?>
</div>
<?php endif ;?>
<div class="inner-col">
<?php if($blue1_text) : ?>
<div class="block blue mt-auto" id="blue1">
<?php echo $blue1_text ;?>
</div>
<?php endif ;?>
<?php if($blue1_tool_tip_text) : ?>
<div class="absolute-tool-tip blue-border">
<?php echo $blue1_tool_tip_text ;?>
</div>
<?php endif ;?>
<?php if($blue2_text) : ?>
<div class="block blue" id="blue2">
<?php echo $blue2_text ;?>
</div>
<?php endif ;?>
<?php if($blue2_tool_tip_text) : ?>
<div class="absolute-tool-tip blue-border">
<?php echo $blue2_tool_tip_text ;?>
</div>
<?php endif ;?>
<?php if($blue3_text) : ?>
<div class="block blue" id="blue3">
<?php echo $blue3_text ;?>
</div>
<?php endif ;?>
<?php if($blue3_tool_tip_text) : ?>
<div class="absolute-tool-tip blue-border">
<?php echo $blue3_tool_tip_text ;?>
</div>
<?php endif ;?>
<?php if($blue4_text) : ?>
<div class="block blue" id="blue4">
<?php echo $blue4_text ;?>
</div>
<?php endif ;?>
<?php if($blue4_tool_tip_text) : ?>
<div class="absolute-tool-tip blue-border">
<?php echo $blue4_tool_tip_text ;?>
</div>
<?php endif ;?>
</div>
</div>
<div class="flex-col-md-4 chart-block right">
<?php if($col_3_title) : ?>
<div class="col-title orange-border">
<?php echo $col_3_title ;?>
</div>
<?php endif ;?>
<div class="inner-col">
<?php if($orange1_text) : ?>
<div class="block orange mt-auto" id="orange1">
<?php echo $orange1_text ;?>
</div>
<?php endif ;?>
<?php if($orange1_tool_tip_text) : ?>
<div class="absolute-tool-tip orange-border">
<?php echo $orange1_tool_tip_text ;?>
</div>
<?php endif ;?>
</div>
</div>
</div> <!-- flex-rown -->
</div> <!-- flex-container -->
<?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'] ) : '';
if ( current_user_can('unfiltered_html') ) {
$instance['col_1_title'] = $new_instance['col_1_title'];
$instance['col_2_title'] = $new_instance['col_2_title'];
$instance['col_3_title'] = $new_instance['col_3_title'];
$instance['red1_text'] = $new_instance['red1_text'];
$instance['red2_text'] = $new_instance['red2_text'];
$instance['red3_text'] = $new_instance['red3_text'];
$instance['blue1_text'] = $new_instance['blue1_text'];
$instance['blue2_text'] = $new_instance['blue2_text'];
$instance['blue3_text'] = $new_instance['blue3_text'];
$instance['blue4_text'] = $new_instance['blue4_text'];
$instance['red1_tool_tip_text'] = $new_instance['red1_tool_tip_text'];
$instance['red2_tool_tip_text'] = $new_instance['red2_tool_tip_text'];
$instance['red3_tool_tip_text'] = $new_instance['red3_tool_tip_text'];
$instance['blue1_tool_tip_text'] = $new_instance['blue1_tool_tip_text'];
$instance['blue2_tool_tip_text'] = $new_instance['blue2_tool_tip_text'];
$instance['blue3_tool_tip_text'] = $new_instance['blue3_tool_tip_text'];
$instance['blue4_tool_tip_text'] = $new_instance['blue4_tool_tip_text'];
$instance['orange1_text'] = $new_instance['orange1_text'];
$instance['orange1_tool_tip_text'] = $new_instance['orange1_tool_tip_text'];
}else{
$instance['col_1_title'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['col_1_title']) ) ); // wp_filter_post_kses() expects slashed
$instance['col_2_title'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['col_2_title']) ) ); // wp_filter_post_kses() expects slashed
$instance['col_3_title'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['col_3_title']) ) ); // wp_filter_post_kses() expects slashed
$instance['red1_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['red1_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['red2_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['red2_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['red3_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['red3_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue1_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue1_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue2_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue2_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue3_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue3_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue4_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue4_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['orange1_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['orange1_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['orange1_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['orange1_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['red1_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['red1_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['red2_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['red2_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashe
$instance['red3_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['red3_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue1_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue1_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue2_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue2_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue3_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue3_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashed
$instance['blue4_tool_tip_text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['blue4_tool_tip_text']) ) ); // wp_filter_post_kses() expects slashed
}
return $instance;
}
public function form( $instance ) {
$title = '';
if( !empty( $instance['title'] ) ) {
$title = $instance['title'];
}
$instance = wp_parse_args( (array) $instance, array( 'text' => '' ) );
$orange1_text = format_to_edit($instance['orange1_text']);
$orange1_tool_tip_text = format_to_edit($instance['orange1_tool_tip_text']);
$blue4_tool_tip_text = format_to_edit($instance['blue4_tool_tip_text']);
$blue3_tool_tip_text = format_to_edit($instance['blue3_tool_tip_text']);
$blue2_tool_tip_text = format_to_edit($instance['blue2_tool_tip_text']);
$blue1_tool_tip_text = format_to_edit($instance['blue1_tool_tip_text']);
$red3_tool_tip_text = format_to_edit($instance['red3_tool_tip_text']);
$red2_tool_tip_text = format_to_edit($instance['red2_tool_tip_text']);
$red1_tool_tip_text = format_to_edit($instance['red1_tool_tip_text']);
$blue4_text = format_to_edit($instance['blue4_text']);
$blue3_text = format_to_edit($instance['blue3_text']);
$blue2_text = format_to_edit($instance['blue2_text']);
$blue1_text = format_to_edit($instance['blue1_text']);
$red3_text = format_to_edit($instance['red3_text']);
$red2_text = format_to_edit($instance['red2_text']);
$red1_text = format_to_edit($instance['red1_text']);
$col_3_title = format_to_edit($instance['col_3_title']);
$col_2_title = format_to_edit($instance['col_2_title']);
$col_1_title = format_to_edit($instance['col_1_title']);
?>
<label for="<?php echo $this->get_field_name( 'col_1_title' ); ?>"><strong><?php _e( 'Titre parcours 1 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('col_1_title'); ?>" name="<?php echo $this->get_field_name('col_1_title'); ?>"><?php echo $col_1_title; ?></textarea>
<label for="<?php echo $this->get_field_name( 'red1_text' ); ?>"><strong><?php _e( 'Parcours 1 Texte 1 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('red1_text'); ?>" name="<?php echo $this->get_field_name('red1_text'); ?>"><?php echo $red1_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'red1_text' ); ?>"><strong><?php _e( 'Parcours 1 Texte 1 Alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('red1_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('red1_tool_tip_text'); ?>"><?php echo $red1_tool_tip_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'red2_text' ); ?>"><strong><?php _e( 'Parcours 1 Texte 2:' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('red2_text'); ?>" name="<?php echo $this->get_field_name('red2_text'); ?>"><?php echo $red2_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'red2_tool_tip_text' ); ?>"><strong><?php _e( 'Parcours 1 Texte 2 alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('red2_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('red2_tool_tip_text'); ?>"><?php echo $red2_tool_tip_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'red3_text' ); ?>"><strong><?php _e( 'Parcours 1 Texte 3 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('red3_text'); ?>" name="<?php echo $this->get_field_name('red3_text'); ?>"><?php echo $red3_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'red3_tool_tip_text' ); ?>"><strong><?php _e( 'Parcours 1 Texte 3 alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('red3_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('red3_tool_tip_text'); ?>"><?php echo $red3_tool_tip_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'col_2_title' ); ?>"><strong><?php _e( 'Titre parcours 2 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('col_2_title'); ?>" name="<?php echo $this->get_field_name('col_2_title'); ?>"><?php echo $col_2_title; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue1_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 1 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue1_text'); ?>" name="<?php echo $this->get_field_name('blue1_text'); ?>"><?php echo $blue1_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue1_tool_tip_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 1 alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue1_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('blue1_tool_tip_text'); ?>"><?php echo $blue1_tool_tip_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue2_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 2 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue2_text'); ?>" name="<?php echo $this->get_field_name('blue2_text'); ?>"><?php echo $blue2_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue2_tool_tip_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 2 alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue2_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('blue2_tool_tip_text'); ?>"><?php echo $blue2_tool_tip_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue3_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 3 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue3_text'); ?>" name="<?php echo $this->get_field_name('blue3_text'); ?>"><?php echo $blue3_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue3_tool_tip_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 3 alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue3_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('blue3_tool_tip_text'); ?>"><?php echo $blue3_tool_tip_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue4_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 4 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue4_text'); ?>" name="<?php echo $this->get_field_name('blue4_text'); ?>"><?php echo $blue4_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue4_tool_tip_text' ); ?>"><strong><?php _e( 'Parcours 2 Texte 4 alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('blue4_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('blue4_tool_tip_text'); ?>"><?php echo $blue4_tool_tip_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue4_tool_tip_text' ); ?>"><strong><?php _e( 'Titre parcours 3 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('col_3_title'); ?>" name="<?php echo $this->get_field_name('col_3_title'); ?>"><?php echo $col_3_title; ?></textarea>
<label for="<?php echo $this->get_field_name( 'orange1_text' ); ?>"><strong><?php _e( 'Parcours 3 Texte 1 :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('orange1_text'); ?>" name="<?php echo $this->get_field_name('orange1_text'); ?>"><?php echo $orange1_text; ?></textarea>
<label for="<?php echo $this->get_field_name( 'blue4_tool_tip_text' ); ?>"><strong><?php _e( 'Parcours 3 Texte 2 alternatif :' ); ?></strong></label>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('orange1_tool_tip_text'); ?>" name="<?php echo $this->get_field_name('orange1_tool_tip_text'); ?>"><?php echo $orange1_tool_tip_text; ?></textarea>
<?php
}
}L’enregistrement du widget
On n’oublie pas de l’inclure dans une fonction d’enregistrement. Placez ceci avant, ou à la suite du code précédent.
add_action( 'widgets_init', 'text_domain_init' );
function text_domain_init() {
register_widget('Cc_infographie_Widget');
}Les appels aux scripts
Comme on travaille ici avec la bibliothèque leader-line.js il faut bien sûr la télécharger. Puis ne pas oublier de l’inclure dans ses appels de scripts. On va utiliser le script js uniquement pour notre widget, et pour éviter qu’il fasse buguer les autres pages du site sur lequel le widget n’est pas actif, on va simplement ici enregistrer nos scripts. On les appellera dans le widget directement. De cette façon, leader-line et notre fichier de fonction main.js ne seront appelés que dans le widget, grâce à la fonction is_active_widget.
Dans le fichier functions.php
function text_domain_scripts() {
wp_register_script( 'leader-line', get_stylesheet_directory_uri() . '/js/leader-line.min.js', array(),true );
wp_register_script( 'main', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'),true );
}
add_action( 'wp_enqueue_scripts', 'text_dmain_scripts' );Les fonctions leader-line
Voici le contenu de mon fichier main.js, pour y inclure les fonctions leader-line.
red1 = document.getElementById('red1'),
red2 = document.getElementById('red2');
red3 = document.getElementById('red3');
blue1 = document.getElementById('blue1');
blue2 = document.getElementById('blue2');
blue3 = document.getElementById('blue3');
blue4 = document.getElementById('blue4');
orange1 = document.getElementById('orange1');
// New leader line has red color and size 8.
new LeaderLine({start:red1, end:red2, color: 'red', size: 2});
new LeaderLine({start:red2, end:red3, color: 'red', size: 2});
new LeaderLine({start:blue1, end:blue2 , color: '#039BE5', size: 2});
new LeaderLine({start:blue2, end:blue3 , color: '#039BE5', size: 2});
new LeaderLine({start:blue3, end:blue4 , color: '#039BE5', size: 2});
new LeaderLine({start:blue2, end:red1 , color: '#039BE5', size: 2});
new LeaderLine({start:blue3, end:orange1, color: '#039BE5', size: 2});Le rendu final
A la fin, vous n’aurez plus qu’à remplir chaque champ textarea et votre diagramme va s’afficher. Voici un rendu statique. Cliquez sur le bouton 0.25X pour voir le rendu desktop directement dans la fenêtre.
See the Pen
HTML/CSS diagram with Leader-line.js and flexbox by yuyazz (@yuyazz)
on CodePen.
Je précise que ce widget a été conçu à la base pour s’intégrer dans une page, et non une sidebar. Il faut donc qu’il y ait un espace de widget dans votre page, le créer ou alors utiliser un page builder de type Elementor pour pouvoir importer le widget directement dans une page.
N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !
Mis à jour le Par Copier coller | Dans wordpress