Créer un widget vidéo YouTube intégré léger pour l’élément
Avant de commencer ce tutoriel, Pourquoi créer un widget vidéo alors que le Widget vidéo element existe déjà? Ceci est négatif pour la vitesse de la page car le Widget vidéo element par défaut charge les images vidéo, mais il peut vous fournir de nombreux contrôles tels que la lecture automatique, la vidéo recommandée, les contrôles de lecteur, etc… Dans ce tutoriel, je vais vous montrer comment créer un widget vidéo qui ne charge que des vignettes vidéo, comme vous pouvez le voir sur la page d’accueil de ce site, ce qui vous permettra d’augmenter considérablement votre vitesse, surtout si vous avez beaucoup de vidéos sur la même page. Allons – y!
Étape 1 – invoquer le Widget la première étape consiste à invoquer le Widget vidéo de l’élément que nous allons créer. Je suppose que vous utilisez un sous – thème, mais vous pouvez certainement créer un nouveau plug – in si vous le souhaitez. Ajoutez le code suivant au fichier de fonctions. Php du sous – thème: class oceanwp _ Child subject {
\/ * *
Constructeur de classe de sujet principal
* \/
Fonction publique Construct () {
Enregistrer le Widget vidéo
Ajouter _ action (‘Element \/ widgets \/ widgets registered’, array (‘oceanwp Child Theme’, ‘widgets registered’);
Charger le script Widget vidéo
Ajouter _ action (‘Element \/ frontend \/ after Register scripts’, array (‘ oceanwp Child Theme ‘,’ Register scripts’);
Fin du constructeur
Enregistrer le Widget vidéo
Widgets de fonctions statiques publiques _ registered () {
Nous vérifions si le plug – in de l’élément est installé \/ activé.
If (defined (‘elementor _ path’) & amp Amp; La classe _ existe (‘elementor Widget u base’) {
Require _ once (get Stylesheet Directory (). ‘ Widget \/ vidéo. Php ‘);
}
}
Charger le script Widget vidéo
Fonctions statiques publiques Register _ scripts () {
Enregistrer le script vidéo
WP _ Register script (‘owp Video’, get Stylesheet Directory Uri (). ‘ Js \/ video. JS’, [‘jquery’, 1.0, True);
}
}
Nouveau thème oceanwp _ Child theme; La première fonction appelle le Widget vidéo, et la seconde fonction appelle le script JS requis pour ce Widget.
Étape 2 – créer un widget en cette seconde
Dans step, nous créons un widget d’élément. Créez un dossier Widget afin que vous puissiez ajouter d’autres widgets d’élément pour créer un sous – thème propre. Donc, créez un fichier vidéo. Php dans ce dossier, ouvrez le fichier dans un éditeur de texte et ajoutez le code suivant: & lt;? Php
Espace de noms des éléments;
Sortie en cas d’accès direct
Si (! Défini (‘abspath’)
Exportations
}
Classe owp _ Widget Video Extended Widget Base {
Fonction publique get _ Name () {
Retour à la vidéo owp;
}
Fonction publique get _ Title () {
Retour au Widget vidéo;
}
Fonction publique get _ icon () {
Retour à \
}
Fonction publique get _ script depends () {
Retourner [‘owp Video’];
}
Fonctions protégées _ Register Controls () {
$this – & gt; Section Start _ controls Section
« section _ video»,
[2]
« Étiquette» = & gt; » Vidéo \
[1]
);
$this – & gt; Add _ Control
« Video _ id»,
[2]
« Étiquette» = & gt; » Id vidéo»,
\
[1]
);
$this – & gt; Fin _ controls section ();
}
Fonction protégée render () {
$id = $this – & gt; Get _ Settings (‘Video id’) Turbine à gaz;
& lt; Div class = \
& lt; Div class = \
& lt; Div class = \
& lt \/ Div & gt;
& lt \/ Div & gt;
& lt;? Php
}
Fonctions protégées _ content template () {}
}
Plug – in:: Instance () – & gt; Widgets _ Manager – & gt; Register _ Widget type (New owp Widget Video (); Comme vous pouvez le voir, je n’utilise qu’une seule option pour obtenir l’ID vidéo, et je veux rendre ce Widget très simple. Vous pouvez également voir que j’ai appelé le script JS dans la fonction get _ script depends () à l’étape 1, qui n’est chargé que lorsque vous ajoutez ce Widget vidéo à la page.
Étape 3 – script JS le Code JS utilise toute la magie pour obtenir une vignette vidéo de YouTube en insérant l’ID vidéo du Widget et en la remplaçant par iframe lorsque vous cliquez sur la vignette. Créez un dossier JS dans le Sous – thème et créez un fichier vidéo. Dans JS
– conversion webkit: tous. 5S;
– transition de type O: tous. 5S;
Transition: tous. 5S;
}
– Oui. Owp YouTube player: Hover. Owp play I {
Opacité: 1;
}
Étape 5: ajoutez votre ID vidéo au Widget vidéo la dernière étape consiste à copier \/ coller votre ID vidéo dans notre Widget vidéo. Pour obtenir un ID, il est très facile d’ouvrir une vidéo YouTube dans votre navigateur, par exemple: https:\/\/www.youtube.com\/watch?v=jeZfDUWfbd8 L’id vidéo de ce lien est – il celui que vous avez vu immédiatement après l’avoir regardé? V =, donc jezfduwbd8.
Ouvrez maintenant l’éditeur d’éléments et vous verrez un nouveau Widget vidéo, ajoutez – le à la page ou au billet, et collez votre ID vidéo dans le champ ID vidéo. Remarque: Si vous ne trouvez pas le Widget, recherchez la vidéo et vous verrez le Widget vidéo, qui est notre Widget.
Tout ça! Maintenant, allez à l’avant du site et vous verrez une vignette de la vidéo qui apparaîtra lorsque vous cliquez dessus.
Conclusion comme vous pouvez le voir, il s’agit d’un widget simple, facile à créer et beaucoup mieux que d’ajouter du Code intégré YouTube qui charge directement des images vidéo. Si vous aimez ce tutoriel ou si vous en voulez plus, faites – le – moi savoir dans les commentaires.