Comment ajouter une vidéo HTML5 à WordPress à l'aide de champs personnalisés

De manière générale, si vous demandez à 10 développeurs WordPress comment faire quelque chose, vous recevrez dix réponses différentes. Mais cela témoigne à la fois de la polyvalence du CMS et du fait qu'il existe plusieurs solutions à une tâche donnée.

Récemment, j'ai relevé le défi de mettre en place une vidéo HTML5 dans une page WordPress. Il se trouve dans un emplacement statique et devrait être remplacé de temps en temps. Bien qu'il soit acceptable d'utiliser le code court vidéo, dans ce cas, je voulais rendre les choses plus simples pour les personnes qui mettraient à jour la page. Je ne voulais pas qu'ils aient à apprendre ce qu'était un Shortcode ou comment l'utiliser.

Ainsi, la solution la plus simple (dans mon esprit, en tout cas) consistait à créer des champs personnalisés dans lesquels les fichiers vidéo associés pouvaient être téléchargés. À partir de là, le modèle du thème créerait automatiquement le code nécessaire pour afficher la vidéo. Voici comment je l'ai fait :

Exigences du projet

Vous aurez bien sûr besoin d'un site WordPress et d'un accès pour modifier votre thème (veuillez utiliser un thème enfant si vous ne le faites pas déjà). Une certaine familiarité avec PHP et HTML sera également d'une grande aide. Au-delà, vous devriez avoir :

• Un moyen de créer des champs personnalisés. La version gratuite d' Advanced Custom Fields (ACF) fera très bien l'affaire. Installez-le et activez-le sur votre site WordPress.
• Une vidéo – idéalement dans plusieurs formats. Bien que les fichiers MP4 soient désormais pris en charge sur tous les principaux navigateurs, ce n'est peut-être pas une mauvaise idée de fournir une version WEBM pour une couverture supplémentaire. Et, pendant que vous y êtes, un repli FLV pour ceux qui utilisent des navigateurs très anciens ne pourrait pas faire de mal. Vous voudrez vous assurer que chaque version de votre vidéo est définie sur la même résolution.
• Une image "affiche". Soit une capture d'écran ou un graphique personnalisé réalisé à la plus haute résolution à laquelle votre vidéo sera lue.

Étape 1 : Créer les champs personnalisés

Une fois que vous avez installé et activé la version gratuite d'ACF, accédez au menu Champs personnalisés dans WordPress, puis cliquez sur Ajouter nouveau.

Dans votre nouvel ensemble de champs (les nôtres sont appelés "champs vidéo"), vous devrez créer un champ Fichier ACF pour chaque format vidéo que vous prévoyez de télécharger, ainsi qu'un autre pour l'image de l'affiche. Dans notre configuration, nous avons des champs pour MP4, WEBM, FLV et une affiche. Pour chaque champ de fichier, assurez-vous de sélectionner le bouton radio dans Valeur de retour indiquant « URL du fichier ». Assurez-vous également de noter les noms de champs - nous en aurons besoin plus tard.

Ensuite, dans le paramètre ACF "Emplacement", attribuez vos nouveaux champs à la page ou à la publication de votre choix et enregistrez votre travail. Lorsque vous allez modifier cette page assignée, vous devriez voir les champs (vous devrez peut-être faire défiler un peu pour les trouver).

Étape 2 : Téléchargez des fichiers vidéo

Naviguez vers pour modifier la page ou le message où vous avez attribué vos nouveaux champs personnalisés. À partir de là, il s'agit de télécharger les bons fichiers. Une fois que vous avez téléchargé les fichiers requis, enregistrez votre page/publication.

Étape 3 : Modifier le modèle

Vient maintenant la partie amusante - ajouter un peu de magie PHP au modèle de votre thème. Si vous n'êtes pas familier avec la hiérarchie des modèles WordPress, le moment est peut-être venu de l'étudier.

Trouvez le bon fichier de modèle et l'emplacement où vous souhaitez placer la vidéo. Ensuite, copiez et collez l'extrait de code suivant et personnalisez-le en fonction de vos besoins :

 <?php
// Récupère les champs vidéo
$video_mp4 = get_field('mp4_video'); // Nom du champ MP4
$video_webm = get_field('webm_video'); // Nom du champ WEBM
$video_flv = get_field('flv_video'); // Nom du champ FLV
$video_poster = get_field('poster_image'); // Nom du champ de l'image de l'affiche
                

// Construire le Shortcode
$attr = tableau(
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'poster' => $video_poster,
'précharger' => 'auto'
);

// Affiche le Shortcode
echo wp_video_shortcode( $attr );
?>

La première section de code fait référence aux noms des champs personnalisés que nous avons créés à l'étape 1. Nous créons une variable PHP pour chaque champ (ils afficheront l'URL de leur fichier respectif), que nous devrons utiliser au milieu partie de code.

Dans cette section du milieu, nous avons un tableau d'attributs pour la fonction wp_video_shortcode . Notez qu'il existe un attribut pour chaque type de fichier. Nous choisissons également de précharger la vidéo, mais c'est complètement facultatif. Ici, vous pouvez également définir la largeur, la hauteur, la boucle et même (haleter) la lecture automatique de la vidéo si vous le souhaitez.

La section inférieure du code affiche le résultat de notre travail dans notre modèle.

Une fois que vous avez tout configuré de manière satisfaisante, vous voudrez enregistrer votre modèle et le télécharger sur votre site Web (ou simplement enregistrer si vous utilisez l'éditeur de thème WordPress intégré). Ensuite, vérifiez votre page sur le front-end pour vous assurer que la vidéo est correctement affichée.

WordPress a un lecteur vidéo HTML5 intégré directement dans le CMS et le lecteur par défaut semble et fonctionne assez bien. Mais vous pouvez styliser différentes options si vous souhaitez lui donner une touche plus personnelle. Inspectez le code de sortie avec les outils de développement de votre navigateur et notez les différentes classes CSS. Par exemple, l'élément conteneur a une classe .wp-video . Vous pouvez également consulter un didacticiel pour un examen plus approfondi des possibilités.

Les champs personnalisés simplifient le processus

L'utilisation de champs personnalisés peut apporter une multitude de nouvelles fonctionnalités et possibilités de conception à WordPress. Mais un élément central de leur génialité est qu'ils peuvent faciliter la gestion du contenu. Quelle que soit la personne qui ajoutera et modifiera le contenu, les champs personnalisés peuvent rationaliser l'ensemble du processus. Cela profite à tous, mais c'est particulièrement agréable pour les utilisateurs qui ne sont pas des développeurs experts.

L'ajout de fonctionnalités simples telles que les champs vidéo HTML5 ci-dessus peut réduire considérablement la courbe d'apprentissage d'un nouvel utilisateur. Au lieu d'avoir à réfléchir à ce qu'ils sont censés faire, il s'agit maintenant de télécharger quelques fichiers.

En fin de compte, ce petit travail supplémentaire à l'avance peut faire gagner du temps et des maux de tête à tout le monde pour la durée de vie du site Web.