Har du sett populära webbplatser som använder sina YouTube-videominatyrer på startsidan av sin webbplats? Om du driver en videokanal på webbplatser som YouTube, Vimeo, eller andra, då kan du också visa en videominatyr för alla inlägg som innehåller videor på startsidan och arkivsidorna på din blogg. I den här artikeln visar vi hur du lägger till miniatyrer för YouTube-videor i WordPress.
Videominiatyrbilder och WordPress-inläggsminiatyrbilder
WordPress levereras med inbyggd funktionalitet för att lägga till utvalda bilder eller inläggsminiatyrer, och de flesta WordPress-teman stöder den här funktionen. Men om du vill lyfta fram ditt videoinnehåll från YouTube, då vill du visa det innehållet med videominatyrer. Den här artikeln hjälper dig att göra det genom att använda den standardmässiga WordPress-funktionen för inläggsminiatyrer.
Konfigurera plugin för videominiatyrbilder i WordPress
Först måste du installera och aktivera pluginet Video Thumbnails. Efter att ha aktiverat pluginet måste du gå till Inställningar » Video Thumbnails för att konfigurera pluginets inställningar.
På inställningsskärmen rekommenderar vi att du väljer att lagra miniatyren i ditt mediebibliotek. Detta minskar externa HTTP-förfrågningar på din webbplats, och dina sidor laddas snabbare. Under avsnittet inläggstyper kommer pluginet att visa inlägg, sidor och anpassade inläggstyper om du har några på din webbplats. Välj de inläggstyper som pluginet ska skanna efter videolänkar. Det sista alternativet på den här sidan är att välja ett anpassat fält. Vissa videoplugin för WordPress sparar videolänkar i ett anpassat fält, och om du använder sådana plugin, måste du ange det anpassade fältet här. Klicka sedan på knappen Spara ändringar.
På inställningssidan ser du även fliken Leverantörer. Om du använder Vimeo för att dela dina videor, måste du skapa en app på Vimeo och sedan ange klient-ID, klienthemlighet, åtkomsttoken och åtkomsttokenhemlighet här.
På fliken Massåtgärder kan du skanna dina publicerade inlägg efter videor och generera miniatyrbilder för dem. Pluginet tillhandahåller också en knapp för att rensa alla videominiatyrbilder och ta bort dem som bilagor från dina inlägg.
Skapa videominatyrer i WordPress-inlägg
Nu när du har konfigurerat pluginet, låt oss skapa en videominatyr genom att lägga till en videolänk i ett WordPress-inlägg. För att göra det behöver du skapa eller redigera ett WordPress-inlägg och lägga till din videolänk i inläggsredigeringsområdet. När du publicerar inlägget kommer du att se att pluginet har genererat en videominatyr åt dig och lagt till den i ditt inlägg.
Visa en videominiatyrbild i ditt WordPress-tema
Pluginet för videominatyrer använder WordPress funktion för inläggsminatyrer. De flesta WordPress-teman är inställda för att automatiskt visa inläggsminatyrer. Detta innebär att ditt tema automatiskt kommer att visa videominatyren tillsammans med ditt inläggsinnehåll eller utdrag. Om ditt tema dock inte visar videominatyrerna, måste du redigera dina temafiler och lägga till denna kod i mallen där du vill visa minatyren.
<?php the_post_thumbnail(); ?>
Hur man lägger till en play-knapp på videominatyrbilden i WordPress
Nu när du framgångsrikt har fångat och visat videominatyrer i dina WordPress-inlägg, kanske du vill skilja dina vanliga bildminatyrer från dina videominatyrer. Detta kommer att låta dina användare veta att det finns en video i inlägget, och de kan klicka på play-knappen för att se videoinlägget. Vi kommer att visa dig hur du använder villkorliga taggar för att skilja mellan videominatyrer och vanliga inläggsminatyrer och lägga till en play-knapp.
För att använda den här metoden måste du se till att du publicerar dina videopostningar under en specifik kategori, till exempel, Videor. Leta sedan i din temas mallfiler som index.php, archive.php, category.php, eller content.php efter den här kodraden:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Nu behöver vi ersätta den här koden med följande kod:
<?php if ( in_category( 'video' )) : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="playbutton"></span></a> <?php else : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> <?php endif; ?>
Den här koden lägger till <span class="playbutton"?></span> efter inläggstumnageln endast för inlägg som är arkiverade under kategorin video. Nästa steg är att ladda upp en bildfil från skärmen Media » Lägg till ny. Den här bilden kommer att användas som spelknapp. När du har laddat upp bildfilen, notera bildfilens plats genom att klicka på länken Redigera bredvid bilden.
Det sista steget är att visa uppspelningsknappen. Vi kommer att använda CSS för att visa och positionera uppspelningsknappen på videons miniatyrbild. För att göra det behöver du kopiera och klistra in denna CSS-kod i din temas eller barn-temas stilmall genom att klicka på Utseende » Redigerare.
.playbutton {
background: url('http://example.com/wp-content/uploads/playbutton.png') center center no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 74px;
height: 74px;
margin: -35px 0 0 -35px;
z-index: 10;
opacity:0.6;
}
.playbutton:hover {
opacity:1.0;
}
Glöm inte att ersätta bakgrundsbildens URL med URL:en till bildfilen för play-knappen som du laddade upp tidigare. Det var allt. Dina videominibildfiler bör nu ha en play-knapp på sig.
Vi hoppas att den här artikeln hjälpte dig att lyfta fram dina YouTube-videor med miniatyrbilder i WordPress. För feedback och frågor, lämna en kommentar eller följ oss på Twitter.
Peter
Det är fantastiskt att det fortfarande fungerar!
Vet dock någon varför den inte får en miniatyrbild från en YT-spellista?
Jag har flera inlägg med spellistor och bilden är alltid en grå "Video hittades inte"-bild
WPBeginner Support
Pluginet skapades för videor och inte hela spellistor, du skulle behöva kontakta pluginets författare för att inkludera spellistfunktionalitet.
Admin
eddie art
skulle detta fungera för att få en miniatyrbild på en video med iframe-inbäddningskod?
WPBeginner Support
Du skulle behöva kontrollera med pluginets support om det stöds.
Admin
Faisal Iqbal
Var ska jag lägga den koden i functions.php. Jag är ingen tekniker, snälla hjälp mig?
Mohammad
Hej
Jag försöker använda det här pluginet men det fungerar inte för mig och utvecklaren i supportforum svarar inte på de flesta olösta ämnen. På felsökningssidan när jag försöker "Test Markup for Video" får jag det här felet:
Miniatyr hittad, men den kanske inte finns på källservern. Om det ger ett fel när du öppnar URL:en nedan i din webbläsare, tillhandahåller källan en ogiltig URL. Miniatyr-URL:
vad är problemet?
Neon emmanuel
vad händer om jag vill ha tre parametrar, 1 en fallback när det inte finns någon miniatyrbild, 2 en fallback om det är en video (dvs. lägga till en play-knappsöverlägg på den), och 3 en fallback om det är en video med en överlagd play-ikon på den.
Bryan
Kommer någon av dessa koder att fungera för Adobe Muse/Dreamweaver?
john
Hej
Vi letar efter en utvecklare som kan implementera detta åt oss. Är du tillgänglig?
pamela sillah
Finns det något annat sätt för mig att göra detta UTAN plugins?? snälla hjälp
franck
Hej allihopa,
Vet någon hur man tar bort relaterade videor när en YouTube-video spelas upp till slutet i pluginet för videogalleriet från Huge IT?
Ernesto
Hur tar jag bort bilden inuti inlägget? Jag vill att videon ska visas och ingen bild
Quoterland
Tack, bra handledning.
Rihan
And wordpress 4.0 I add the video (youtube) URL in the post edit area and its showing me a video player
on the video thumb are i can see this text only (No video thumbnail for this post.) not working!
any Idea
thanks
WPBeginner Staff
Nej, din miniatyrbild kommer att visas på Facebook men den kommer inte att ha uppspelningsknappen på sig.
srem
Tyvärr vet jag inte varför koden inte visas.
Mauro Scarpa
Hej! Fantastisk webbplats och inlägg, jag har en fråga, om jag sedan vill dela mitt inlägg på Facebook, kommer det att visas med play-knappen också? Tack
Piet
Cool plugin och handledning. Istället för att visa en bild med en play-knapp, skulle jag vilja föreslå att använda en teckensnittsikon, till exempel från FontAwesome.
WPBeginner Staff
TCB: om du använder WordPress SEO-plugin kan du prova den här metoden. När pluginet för videominatyrer har hämtat miniatyrbilden för din video, måste du hitta dess plats i ditt mediebibliotek och kopiera URL:en. Ta sedan bort videominatyrbilden från inlägget. I WordPress SEO-metarutan i inläggseditorn klickar du på fliken sociala medier och klistrar in länken bredvid fältet för Facebook-bild.
TCB
Är det möjligt att använda videominiatyrbilden som inläggsbild på Facebook?
Det vore bra eftersom jag inte vill visa bilden som utvald bild.
Megha Verma
Jag har ett problem eftersom play-knappen bara visas på det första inlägget... på grund av absolut positionering... inte på andra inläggs bilder...
Sutherland Boswell
Bra handledning! Som utvecklare älskar jag att få feedback från användare och arbeta med enkla lösningar för de mest efterfrågade funktionerna. Att lägga över en play-knapp och få videon att faktiskt spelas upp när man klickar på miniatyren är två av de mest efterfrågade funktionerna, men de är båda starkt beroende av temat. Att lära sig att modifiera ett tema på egen hand kan vara givande, så var inte rädd för att ge det ett försök!
PS – Jag hoppas att alla kommer att kolla in proffsversionen!
Jesse
Hej Sutherland.
Jag har läst så mycket bra om ditt plugin och är angelägen om att prova det.
Men när du använder ditt plugin för att skanna efter videofiler hittar det alla 22 videor under sidan 'video' där de publiceras. Problemet är att det inte hittar några miniatyrbilder.
Efter att ha läst dina olika supportrepliker på liknande problem, samt dina instruktioner, försökte jag ta reda på om mitt tema (metric, av grandpixels) använder ett anpassat fält. Jag har inte lyckats hitta denna information.
Har du några förslag på hur man kan få detta att fungera?
Tack,
Jesse
Audee
Vad händer om jag bara vill visa inläggets miniatyrbild för inlägg som är arkiverade under video 'Inläggstyp'?
Tack för att du delade artikeln om detta plugin!
Sutherland Boswell
Du bör kunna följa handledningen, byt bara ut
1-click Use in WordPress
med
1-click Use in WordPress
Alex
Hej Sutherland Boswell,
jag använder din plugin för Detube-tema, problemet är att det inte finns någon <a href="”> kodrad i dessa filer: index.php, archive.php, category.php..
Har du någon idé eller ett sätt att få det att fungera i Detube-tema?
Tack på förhand!
Alex
Jag skulle vara så glad om någon har en idé och kan svara på min fråga. Jag har arbetat i många timmar för att få den här koden att fungera på Detube, men ingen framgång hittills...
Kan någon här snälla hjälpa mig?
Ahmad Rafi Maseer
HUR spelar man direkt i miniatyrbilden så att användaren inte behöver gå till inläggssidan för att spela upp videon???
WPBeginner Support
För det måste du redigera ditt tema och istället för att visa miniatyrbilden måste du bädda in videon.
Admin
Sue Anne
Tack SÅ mycket för den utmärkta instruktionen om att lägga till en video och en videominiatyr på min WordPress-blogg. Det tog ungefär 5 minuter och jag är ingen tekniker!
Pali Madra
Hej!
Fantastisk webbplats och ett av mina favorit inlägg.
Jag hade en relaterad fråga. Jag lägger till video genom att placera URL:en i HTML-koden för inläggen, men jag vill också visa en bildtext under den. Är det möjligt utan att använda ett plugin?
Tack på förhand
Matt
Fantastisk handledning. Tack så mycket för att du publicerade detta!
Tiguan
'span'-taggen måste placeras inuti miniatyrbildens hyperlänkar, annars kommer bildlänken över uppspelningsknappen att inaktiveras. Så den korrekta koden blir:
Det är dock en bra handledning.
WPBeginner Support
Tiguan, tack för att du uppmärksammade detta. Vi har uppdaterat handledningen.
Admin
adolf witzeling
Bra handledning.
gottfrid q.
> Detta kommer att låta dina användare veta att det finns en video i inlägget, och de kan klicka på play-knappen för att se videoinlägget.
Jag vill inte göra dig besviken, men knappen (snurr) har ingen klickmetod.
Hur exakt var den här knappen tänkt att fungera och hur implementerar man den?
Tack för din tid.
WPBeginner Support
Knappen kommer inte att spela upp videon direkt där, men den kommer att ta användaren till videosidan. Hela miniatyrbilden är länkad till inlägget som innehåller videon.
Admin
gottfrid q.
Måste 'span' placeras inuti miniatyrbildens hyperlänkar då?
Akash
Och. hur implementerar man en Play-knapp i GENESIS Theme? det finns ingen index.php, archive.php, category.php eller content.php-fil där för att lägga till koden.
Tack.
WPBeginner Support
Kontakta Genesis supportforum.
Admin
Mark McGinnis
Akash, lyckades du någonsin lista ut hur man implementerar med Genesis-temat? Jag har samma problem...
Tack!
Akash
Men vilken storlek kommer videominibilden att ha? Kommer den att vara densamma som miniatyrbilden som redan är inställd i bloggen?
WPBeginner Support
Den kommer att använda standardstorleken för miniatyrbilder. Du kan åsidosätta detta genom att lägga till din egen bildstorlek och använda den i din mall. Till exempel, om du skapar en ny miniatyrbildsstorlek och namnger den video-thumbnail, skulle du anropa den i din mall så här:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Admin