Hoe miniaturen voor YouTube-video's in WordPress toevoegen

Heb je populaire sites gezien met hun YouTube-videominiaturen op de voorpagina van hun site? Als je een videokanaal uitvoert op sites zoals YouTube, Vimeo of anderen, kun je ook een videominiatuur weergeven voor alle berichten met video's op de voorkant en archiefpagina's van je blog. In dit artikel laten we je zien hoe je miniaturen voor YouTube-video's kunt toevoegen in WordPress.

Videominiaturen en WordPress Post-miniaturen

WordPress wordt geleverd met ingebouwde functionaliteit om aanbevolen afbeeldingen toe te voegen of miniaturen te plaatsen, en de meeste WordPress-thema's ondersteunen deze functie. Als je echter je video-inhoud van YouTube wilt markeren, dan wil je die inhoud laten zien met videominiaturen. Dit artikel helpt je daarbij door de standaardfunctie voor WordPress-miniaturen te gebruiken.

Instellen Video Thumbnails Plugin in WordPress

Het eerste wat u hoeft te doen, is de plugin voor Videominiaturen installeren en activeren. Nadat u de plug-in hebt geactiveerd, moet u naar Vestigingen »Videominiaturen om de plug-in-instellingen te configureren.

Op het instellingenscherm raden we aan dat u ervoor kiest om de miniatuur in uw mediabibliotheek op te slaan. Hierdoor worden externe HTTP-verzoeken op uw site beperkt en worden uw pagina's sneller geladen. Onder het berichttypengedeelte toont de plug-in berichten, pagina's en aangepaste berichttypen als je die op je website hebt staan. Selecteer de berichttypen die u met de plug-in wilt scannen op koppelingen naar video's. De laatste optie op deze pagina is om een ​​aangepast veld te kiezen. Sommige video-plug-ins voor WordPress slaan video-URL's op in een aangepast veld en als u dergelijke plug-ins gebruikt, moet u dat aangepaste veld hier invoeren. Klik daarna op de knop Wijzigingen opslaan.

Op de instellingenpagina ziet u ook de providers tab. Als u Vimeo gebruikt om uw video's te delen, moet u een app maken op Vimeo en vervolgens hier client-ID, clientgeheim, toegangstoken en geheime token-waarden voor toegang invoeren.

Op de Massa acties tabblad, kunt u uw gepubliceerde berichten scannen op video's en videominiaturen voor hen genereren. De plug-in biedt ook een knop om alle videominiaturen te wissen en ze als bijlage uit je berichten te verwijderen.

Videominiaturen maken in WordPress Posts

Nu u de plug-in heeft ingesteld, kunnen we een videominiatuur maken door een video-URL toe te voegen aan een WordPress-bericht. Om dat te doen, moet u een WordPress-bericht maken of bewerken en uw video-URL toevoegen in het gebied voor het bewerken van berichten. Nadat u het bericht heeft gepubliceerd, ziet u dat de plug-in een videominiatuur voor u heeft gegenereerd en deze aan uw bericht heeft toegevoegd.

Een videominnail weergeven in uw WordPress-thema

Videominiaturen plug-in maakt gebruik van WordPress Post Thumbnails-functionaliteit. De meeste WordPress-thema's zijn ingesteld om automatisch postminiatuurweergaven weer te geven. Dit betekent dat je thema automatisch de videominiatuur toont, samen met je berichtinhoud of uittreksel. Als uw thema de videominiaturen echter niet weergeeft, moet u uw themabestanden bewerken en deze code toevoegen aan de sjabloon waarin u de miniatuur wilt weergeven.

Een afspeelknop toevoegen aan de videominnail in WordPress

Nu je met succes videominiaturen hebt vastgelegd en weergegeven in je WordPress-berichten, wil je misschien je gewone miniaturen van afbeeldingen onderscheiden van je videominiaturen. Hierdoor weten uw gebruikers dat er een video in de post staat en kunnen ze op de afspeelknop klikken om de videopost te bekijken. We laten u zien hoe u voorwaardelijke tags kunt gebruiken om onderscheid te maken tussen videominiaturen en reguliere berichtminiaturen en een afspeelknop toe te voegen.

Om deze methode te gebruiken, moet u ervoor zorgen dat u uw videopost publiceert onder een specifieke categorie, bijvoorbeeld Video's. Dan zoals in de sjabloonbestanden van je thema index.php, archive.php, category.php of content.php zoek naar deze regel code:

Nu moeten we deze code vervangen door de volgende code:

Deze code voegt toe na de postminiatuur alleen voor berichten die zijn opgenomen onder de videocategorie. De volgende stap is om een ​​afbeeldingsbestand van te uploaden Media »Nieuw toevoegen scherm. Deze afbeelding wordt gebruikt als de afspeelknop. Nadat u het afbeeldingsbestand hebt geüpload, noteert u de locatie van het afbeeldingsbestand door op de knop te klikken Bewerk link naast de afbeelding.

De laatste stap is om de knop Afspelen weer te geven. We zullen CSS gebruiken om de afspeelknop op de videominiatuur weer te geven en te positioneren. Om dat te doen, moet u deze CSS-code kopiëren en in de stylesheet van uw thema of het thema van het kind plakken door op te klikken Uiterlijk »Editor.

 .playbutton background: url ('http://example.com/wp-content/uploads/playbutton.png') center center no-repeat; positie: absoluut; top: 50%; links: 50%; breedte: 74 px; hoogte: 74 px; marge: -35px 0 0 -35px; z-index: 10; ondoorzichtigheid: 0,6;  .playbutton: hover opacity: 1.0;  

Vergeet niet om de url van de achtergrondafbeelding te vervangen door de URL van het afbeeldingsbestand van de afspeelknop dat u eerder hebt geüpload. Dat is alles. Je videominiaturen moeten nu een afspeelknop hebben.

We hopen dat dit artikel je heeft geholpen om je YouTube-video's te markeren met thumbnails in WordPress. Voor feedback en vragen kunt u een reactie achterlaten of ons volgen op Twitter.