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.
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)
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.
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 :
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.
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 pageLe widget Image
Ce widget permet d’afficher une image dans une des barres latérales définies dans le thème.
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)
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.
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) :
Afficher une image à partir de son adresse web
Cliquer sur le bouton :
Dans la fenêtre qui s’affiche, cliquer sur l’option :
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) :
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 :
Un visiteur se rendant sur le site peut désormais voir le widget dans la barre latérale :
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)
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) :
Le widget Vidéo
Ce widget permet d’afficher une vidéo dans une des barres latérales définies dans le thème.
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 le sous-menu « 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 le bouton
Cliquer en haut du cartouche 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
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) :
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) :
Cliquer sur le bouton pour que le widget soit ajouté au 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 thevideoshortcode 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’sisHostedVideomethod; 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 ) :
… qui est aussi reconnue lorsqu’on saisit son adresse web pour paramétrer le widget Vidéo :
… 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) :
Une solution consiste à recopier le code fourni par dailymotion pour intégrer une vidéo dans un widget Texte (code HTML « iframe ») :
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
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 :
Saisir un titre (1) puis cliquer sur le bouton (2) :
Pour l’exemple, nous utilisons l’option « Envoyer des fichiers / Choisir des fichiers ».
Cliquer sur le bouton :
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) :
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 :
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 :
Ne pas oublier de cliquer sur le bouton pour que le widget soit ajouté au 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 :
Saisir l’adresse web d’un fichier audio puis sur le bouton :
Insérer à partir de la bibliothèque de médias
Choisir l’onglet :
Bonjour,
Depuis les versions avec ces fameux widget, je n’ai jamais pu les activer sur mon site : quand je les ouvre pour y ajouter du code, il n’y a aucune zone de saisie ou d’ajout ! c’est juste bizarre.
Du coup, j’utilise un widget customizable mais ça ajoute un plugin dont je me passerais bien !
Avez vous déjà rencontrer ce problème ?
Merci d’avance
Bonjour,
Je n’ai jamais rencontré ce problème et il est forcément lié à une particularité de votre installation.
Première chose à faire : vérifier que toutes les mises à jour ont été effectuées : WordPress, thèmes et extensions). Vérifier aussi la version PHP.
Deuxième chose à faire : désactiver les extensions pour voir si le problème vient de là. Si oui, les réactiver une à une pour identifier l’extension qui pose problème.
Si cela ne solutionne pas le problème, je pourrai vous aider, mais pas avant ce soir.
Daniel