Widgets : Texte, Image, Vidéo et Son

La version 4.8 de WordPress propose de nouveaux widgets permettant d’afficher image ou vidéo, d’écouter un enregistrement audio et enrichit l’utilisation du widget Texte.

Le widget Texte

Ce widget permet d’afficher du texte dans une des barres latérales définies par le thème en utilisant quelques outils de mise en forme : afficher en gras ou en italique, afficher des listes à puces ou numérotées ou ajouter un lien vers une adresse web.

Pour décrire l’ajout d’un widget Texte, nous utilisons la méthode d’accès direct dans le menu de l’administration.
Il est bien évidemment possible d’utiliser le personnalisateur, comme montré pour les widgets « Vidéo » et « Son » dans cet article.

Se connecter à l’administration avec un compte permettant de gérer les widgets,
sélectionner le sous-menu « Widgets » du menu « Apparence » (1),
cliquer sur la barre « Texte » (2),
choisir la barre latérale dans laquelle s’affichera le widget (3),
Cliquer sur le Bouton  (4)

Ajouter un widgt Texte en choisissant la barre latérale où l'afficher
Ajouter un widget Texte

Paramétrer le widget Texte en saisissant un titre (1), utiliser les icônes (2) pour mettre en forme le texte (3) puis cliquer sur le bouton (4) pour valider le paramétrage du widget.

Saisir le titre et le contenu d'un widget Texte
Paramétrer un widget Texte

La mise en forme du texte d’un widget se fait de la même façon que pour mettre en forme les caractères dans un article et pour mettre en forme les paragraphes dans un article.
Il y a moins d’options pour mettre en forme le texte d’un widget que le texte d’un article, mais les options communes s’utilisent de la même façon.

Un visiteur se rendant sur le site peut désormais voir le widget dans la barre latérale :

Affichage du widgt Texte pour les visiteurs du site
Affichage du widget Texte

Saisir du HTML

Le HTML est le code permettant à un navigateur Internet (Firefox, Chrome, Internet Explorer…) d’afficher une page web. Le widget Texte permet d’écrire le code HTML correspondant à ce qui s’affichera dans le widget.

On peut par exemple visualiser le code généré pour afficher le texte du widget précédant :

cliquer sur l’onglet (1)
le code HTML correspondant au texte saisi (2) dans l’onglet s’affiche;
des icônes (3) facilitent la saisie du code HTML.

Affichage d'une fenêtre de saisie de code en HTML
Saisie HTML

Il est possible d’utiliser d’autres codes HTML que ceux qui sont proposés. Cela permet notamment afficher une image dans le widget Texte.

Par exemple, le code suivant :

permet d’afficher l’image suivante :

À noter : le widget Texte ne supporte ni les éléments oEmbed ni les codes raccourcis (shortcodes).

Haut de page

Le widget Image

Ce widget permet d’afficher une image dans une des barres latérales définies dans le thème.

Pour décrire l’ajout d’un widget Image, nous utilisons la méthode d’accès direct dans le menu de l’administration.
Il est bien évidemment possible d’utiliser le personnalisateur, comme montré pour les widgets « Vidéo » et « Son » dans cet article.

Se connecter à l’administration avec un compte permettant de gérer les widgets,
sélectionner le sous-menu « widgets » du menu « Apparence » (1),
cliquer sur la barre « Image » (2),
choisir la barre latérale dans laquelle s’affichera le widget (3),
Cliquer sur le bouton (4)

Ajouter un widget Image depuis l'adminisration
Ajouter un widget Image

Paramétrer le widget Image en saisissant un titre (1), ajouter une image (2) puis cliquer sur le bouton (3) pour valider le paramétrage du widget.

Dans le cartouche Image : saisir un titre et cliquer sur le bouton "Ajouter une image"
Paramétrer un widget Image

Pour ceux qui découvrent WordPress, les articles suivants vous aideront à comprendre comment manipuler les images dans WordPress (attention : certaines fonctions utilisables pour la rédaction d’un article ne sont pas disponibles pour le widget)  :

Insérer des images dans un article WordPress

Modifier les images dans WordPress.com

Afficher une image à partir de son adresse web

Cliquer sur le bouton bouton "Ajouter une image":

Cliquer sur le bouton "Ajouter une image" permet de lancer la procédure d'insertion d'une image dans la widget Image
Lancer l’ajout d’une image

Dans la fenêtre qui s’affiche, cliquer sur l’option :

Fenêtre permettant de choisir : saisir adresse web ou télécharger fichier image
Afficher une image en saisissant son adresse web

Saisir l’adresse de l’image à afficher dans la barre latérale (1),
Saisir Légende et Texte alternatif (2),
Définir le lien vers ce qui s’affichera si un visiteur clique sur l’image (3),
Cliquer sur (4) :

Compléter le paramétrag de l'image
Paramétrer l’image

Retour au paramétrage du widget où l’image s’affiche (1) avec des boutons permettant de modifier ou remplacer l’image du widget (2); cliquer sur le bouton pour valider le paramétrage :

Visualisation de l'image dans le paramétrage du widget
L’image affichée dans le widget

Un visiteur se rendant sur le site peut désormais voir le widget dans la barre latérale :

Visualisation du widget image pour un visiteur du site
Visualisation du widget image sur le site

On remarque le lien, défini lors du paramétrage du widget, entre l’image et le site « https://wpfr.net ». Dans notre exemple, un visiteur qui cliquera sur l’image sera redirigé vers le site « wpfr.net ».

Afficher une image stockée dans son ordinateur

Après avoir cliqué sur le bouton (1),
et sélectionné l’option (2),
glisser / déposer un fichier local dans la fenêtre ou cliquer sur le bouton pour faire apparaître l’explorateur de fichier (3)

Fenêtre proposant un glisser / dépose ou un bouton pour charger un fichier image
Ajouter une image depuis son ordinateur

Afficher une image de sa bibliothèque de média

Après avoir cliqué sur le bouton  (1),
et sélectionné l’option (2),
sélectionner une image de la bibliothèque de médias (3)
cliquer sur le bouton (4) :

Fenêtre proposant de sélectionner une image parmi celles disponibles dans la bibliothèque
Sélection de l’image à télécharger
Haut de page

Le widget Vidéo

Ce widget permet d’afficher une vidéo dans une des barres latérales définies dans le thème.

Pour ce widget, nous utilisons le personnalisateur.
Il est bien évidemment possible d’utiliser la méthode d’accès direct décrite pour les widgets « Texte » et « Image« .
Le personnalisateur permet de visualiser directement  le widget comme pourra le voir un visiteur du site.
Je conseille vivement d’utiliser cette méthode pour gérer le widget Vidéo, car j’ai pu constater  certains problèmes d’affichage. Le personnalisateur permet de s’en apercevoir avant de mettre en ligne.

Se connecter à l’administration avec un compte permettant de gérer les widgets,
sélectionner le sous-menu « Personnaliser » du menu « Apparence » (1)

Cliquer sur "Apparence" puis "Personnaliser" pour accéder au personnalisateur
Accéder au personnalisateur

cliquer sur le sous-menu « Widgets » :

Sélectionner le sous-menu "Widgets"
Choisir la personnalisation des widgets

Choisir la barre latérale où sera positionné le widget (rappel : une barre latérale peut se trouver n’importe où dans la page et non pas seulement sur le côté comme c’était le cas dans les premières versions de WordPress d’où ce nom) :

Cliquer sur une des barres latérales proposées
Choisir la « barre latérale »

Cliquer sur le bouton

Cliquer sur le sous-menu "Ajouter un widget"
Ajouter un widget

Cliquer en haut du cartouche du widget Vidéo :

Apparition d'une colonne permettant de choisir le widget à ajouter
Choix du widget Vidéo

Le paramétrage du widget apparaît dans la colonne de gauche :
Saisir un titre pour le widget
cliquer sur le bouton buton d'ajout de vidéo

Saisir titre et cliquer sur le bouton "Ajouter une vidéo"
Paramétrer un widget vidéo

Cliquer sur le bouton (1)
saisir l’adresse web de la vidéo (2)
une image de la vidéo apparaît pour confirmer qu’elle est bien accessible (3)
cliquer sur le bouton (4) :

Dans la zone de saisie, indiquer l'adresse web de la vidéo
Insertion avec une adresse web

En retour sur l’affichage des widgets de la barre latérale précédemment sélectionnée,
l’image de la vidéo apparaît dans la colonne des widgets (1),
une prévisualisation du widget vidéo apparaît dans la visualisation du site côté visiteurs (2),
des boutons sont disponibles pour modifier le paramétrage (3) :

Affichage du widget ajouté
widget ajouté dans le personnalisateur

Cliquer sur le bouton bouton publier widgtpour que le widget soit ajouté au site :

Cliquer sur le bouton"Enregistrer et publier" situé en haut et à gauche de la fenêtre du personnalisateur
Publier le widget vidéo sur le site

Quels types de vidéo sont disponibles ?

Il est indiqué qu’il est possible d’intégrer des vidéos téléchargées ou d’afficher les vidéos de YouTube ou, Viméo. Il est aussi possible d’intégrer des vidéos depuis un fournisseur oEmbed, mais à la condition d’étendre les fonctionnalités standard du widget Vidéo :

The video widget allows for embeddable video formats to be selected from the media library or linked to externally by URL. In addition, URLs to YouTube or Vimeo may also be provided since the video shortcode logic supports rendering them via MediaElement.js. It is possible for plugins to add support for additional oEmbed providers via extending the video widget control’s isHostedVideo method; for more, see the Jetpack PR for adding VideoPress support. [extrait du Field guide 4.8]

En pratique j’ai rencontré des difficultés avec dailymotion et… WordPress TV.

Ainsi, avec dailymotion, une vidéo qui fonctionne parfaitement en oEmbed dans un article ( elle est reconnue lorsqu’on saisit l’adresse web ) :

Les vidéos dailymotion s'affichent dans les articles simplement en saisissant l'url
Vidéo ajoutée dans un article uniquement avec son adresse web

… qui est aussi reconnue lorsqu’on saisit son adresse web pour paramétrer le widget Vidéo :

Lorsque l'adresse web de la vidéo dailymotion est saisie, elle s'affiche correctement
Ajouter une vidéo dailymotion par son adresse web

… n’est pourtant pas affichée lorsqu’on l’ajoute au widget (ni dans la barre des widgets et ni dans la prévisualisation côté visiteurs) :

L'affichage de la vidéo est remplacée par des liens vers la vidéo
Vidéo non affichée

Une solution consiste à recopier le code fourni par dailymotion pour intégrer une vidéo dans un widget Texte (code HTML « iframe ») :

Ajout de l'iframe fourni par dailymotion dans un widget Texte
« iframe » d’affichage d’une vidéo

Vidéo stockée sur son serveur

C’est possible, mais ne comptez pas sur moi pour vous aider à le faire.

Afficher une vidéo nécessite de la puissance de calcul et de la bande passante. Mieux vaut utiliser des diffuseurs spécialisés qui disposent des infrastructures techniques nécessaires.

Le widget Son

Pour ce widget, nous utilisons le personnalisateur.
Il est bien évidemment possible d’utiliser la méthode d’accès direct décrite pour les widgets « Texte » et « Image« .
Le personnalisateur permet de visualiser directement  le widget comme pourra le voir un visiteur du site.

Les opérations d’ajout d’un widget Son avec le personnalisateur commencent comme pour l’ajout d’un widget Vidéo… jusqu’au point où on choisit le widget à ajouter :

Arès avoir choisi la barre latérale et demandé à ajouter un widget, cliquer sur le cartouche "Son"
Choix du widget son

Saisir un titre (1) puis cliquer sur le bouton (2) :

Saisir le titre puis cliquer pour ajouter le son
Paramétrage du widget son

Pour l’exemple, nous utilisons l’option « Envoyer des fichiers / Choisir des fichiers ».
Cliquer sur le bouton :

Cliquer sur le bouton "Choisir des fichiers"
Télécharger un fichier son

Dans l’explorateur de fichier qui s’affiche, sélectionner le répertoire (1), cliquer sur le titre du fichier audio (2) qui sera lu par le widget Son et valider ce choix (3) :

dans la fenêtre de l'explorateur, sélectionner le fichier son à insérer dans le widget
Sélection d’un fichier son à télécharger

Attention : le fichier ne doit pas dépasser la limite de chargement définie pour le site WordPress.

Une fois le fichier téléchargé, cliquer sur le bouton :

Le fichier choisi est pré sélectionné, valider le choix en cliquant sur le bouton "Ajuter au widget"
Ajout d’un fichier son dans le widget « Son »

Un lecteur audio s’affiche dans la colonne de paramétrage des widgets (1) et dans la zone de prévisualisation du site (2). Dans cette dernière zone, il est possible de vérifier la bonne lecture du fichier audio :

Un nouveau widget Son apparaît das le personnalisateur
Affichage du lecteur audio

Ne pas oublier de cliquer sur le bouton bouton publier widgtpour que le widget soit ajouté au site :

Cliquer sur le bouton en haut de la colonne de gauche
Publication du widget sur le site

Insérer à partir d’une adresse web

L’opération s’effectue comme pour une vidéo... sauf qu’on saisit l’adresse d’un fichier audio.

Cliquer sur l’option :

Dans la fenêtre permettant de choisir le moyen de récupérer le fichier audio (adresse web, envoi de fichiers ou bibiothèque de médias), cliquer sur "Insérer à,partir d'une adresse web" n haut de la colonne de gauche
Cliquer sur « Insérer à partir d’une adresse web »

Saisir l’adresse web d’un fichier audio puis sur le bouton :

saisir l'adresse web du fichier audio et cliquer sur le bouton "Ajouter au widget"
Saisir l’adresse web et valider

Insérer à partir de la bibliothèque de médias

Choisir l’onglet onglet Bibliothèque de médias :

Dans la fenêtre d'insertion de fichiers audios, cliquer sur l'onglet "Bibliothèque de médias"
Choisir un des fichiers audio proposés
Haut de page

Laisser un commentaire

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