Hur man lÀgger till miniatyrer för YouTube-videor i WordPress

Hur man lÀgger till miniatyrer för YouTube-videor i WordPress

Har du sett populÀra webbplatser som anvÀnder deras YouTube-videominiatyrer pÄ förstasidan av deras webbplats? Om du driver en videokanal pÄ webbplatser som YouTube, Vimeo eller andra kan du ocksÄ visa en videominiatyr för alla inlÀgg som innehÄller videor pÄ bloggens framsida och arkiv. I den hÀr artikeln visar vi dig hur du lÀgger till miniatyrer för YouTube-videor i WordPress.

Videominiatyrbilder och WordPress-miniatyrbilder

WordPress levereras med inbyggd funktionalitet för att lÀgga till utvalda bilder eller posta miniatyrer, och de flesta WordPress-teman stöder den hÀr funktionen. Men om du vill markera ditt videoinnehÄll frÄn YouTube, vill du visa upp innehÄllet med miniatyrbilder. Den hÀr artikeln hjÀlper dig att göra det genom att anvÀnda standardfunktionen för WordPress-inlÀggsminiatyr.

Konfigurera insticksprogram för videominiatyrer i WordPress

Det första du behöver göra Àr att installera och aktivera plugin för videominiatyrbilder. NÀr du har aktiverat plugin-programmet mÄste du gÄ till InstÀllningar »Videominiatyrbilder för att konfigurera plugininstÀllningarna.

StÀlla in videominiatyrer

PÄ instÀllningsskÀrmen rekommenderar vi att du vÀljer att lagra miniatyrbilden i ditt mediebibliotek. Detta minskar externa http-förfrÄgningar pÄ din webbplats och dina sidor laddas snabbare. Under avsnittet om inlÀggstyper kommer plugin-programmet att visa inlÀgg, sidor och anpassade inlÀggstyper om du har nÄgra pÄ din webbplats. VÀlj de inlÀggstyper du vill att plugin-programmet ska söka efter videolÀnkar. Det sista alternativet pÄ denna sida Àr att vÀlja ett anpassat fÀlt. Vissa video-plugins för WordPress sparar video-URL: er i ett anpassat fÀlt, och om du anvÀnder sÄdana plugins mÄste du ange det anpassade fÀltet hÀr. Klicka sedan pÄ knappen Spara Àndringar.

PÄ instÀllningssidan ser du ocksÄ fliken. 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 Ätkomsttokenhemliga vÀrden hÀr.

LÀgga till referenser för Vimeo-appen

PÄ fliken kan du skanna dina publicerade inlÀgg för videor och skapa videominiatyrer för dem. Plugin ger ocksÄ en knapp för att rensa alla miniatyrbilder och ta bort dem som bilagor frÄn dina inlÀgg.

Skanna inlÀgg för att skapa videominiatyrer

Skapa videominiatyrbilder i WordPress-inlÀgg

Nu nÀr du har stÀllt in plugin, lÄt oss skapa en videominiatyr genom att lÀgga till en video-URL i ett WordPress-inlÀgg. För att göra det mÄste du skapa eller redigera ett WordPress-inlÀgg och lÀgga till din video-URL i inlÀggsredigeringsomrÄdet. NÀr du har publicerat inlÀgget ser du att plugin-programmet har genererat en videominiatyr till dig och lagt till det i ditt inlÀgg.

LĂ€gga till en video i WordPress Post och generera en videominiatyr

Visar en videominiatyr i ditt WordPress-tema

Plugin för videominiatyrer anvÀnder WordPress Post Thumbnails-funktionalitet. De flesta WordPress-teman Àr instÀllda för att automatiskt visa inlÀggsminiatyrer. Det betyder att ditt tema automatiskt visar videominiatyren tillsammans med ditt inlÀggs innehÄll eller utdrag. Men om ditt tema inte visar videominiatyrerna mÄste du redigera dina temafiler och lÀgga till den hÀr koden i mallen dÀr du vill visa miniatyren.


<?php the_post_thumbnail(); ?>

Hur man lÀgger till en uppspelningsknapp pÄ videominiatyren i WordPress

Nu nÀr du framgÄngsrikt har tagit och visat videominiatyrer i dina WordPress-inlÀgg kanske du vill skilja dina vanliga miniatyrbilder frÄn dina videominiatyrer. Detta kommer att lÄta dina anvÀndare veta att det finns en video i inlÀgget, och de kan klicka pÄ uppspelningsknappen för att se videoposten. Vi visar dig hur du anvÀnder villkorliga taggar för att skilja mellan miniatyrer och vanliga miniatyrer och lÀgga till en uppspelningsknapp.

För att anvÀnda den hÀr metoden mÄste du se till att du publicerar dina videoposter under en viss kategori, till exempel videor. Sedan i ditt temas mallfiler som index.php, archive.php, category.php eller content.php leta efter den hÀr raden kod:


<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

Nu mÄste 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 efter miniatyren av inlÀgget endast för inlÀgg som lagras under videokategori. NÀsta steg Àr att ladda upp en bildfil frÄn Media »LÀgg till nytt skÀrm. Den hÀr bilden kommer att anvÀndas som uppspelningsknapp. NÀr du har laddat upp bildfilen noterar du platsen för bildfilen genom att klicka pÄ lÀnken bredvid bilden.

Det sista steget Àr att visa uppspelningsknappen. Vi kommer att anvÀnda CSS för att visa och placera uppspelningsknappen pÄ videominiatyren. För att göra det mÄste du kopiera och klistra in den hÀr CSS-koden i ditt temas eller underordnade temas stilark genom att klicka pÄ Utseende »Redaktör.


.playbutton {
    background: url('https://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 webbadressen för bakgrundsbilden med URL-adressen till den uppspelningsfil som du laddade upp tidigare. Det Àr allt. Dina videominiatyrfiler ska nu ha en uppspelningsknapp.

Vi hoppas att den hÀr artikeln hjÀlpte dig att markera dina YouTube-videor med miniatyrbilder i WordPress. För feedback och frÄgor vÀnligen lÀmna en kommentar eller följ oss pÄ Twitter.