Czy widziałeś popularne witryny wykorzystujące miniaturki filmów z YouTube na głównej stronie swojej witryny? Jeśli prowadzisz kanał wideo na witrynach takich jak YouTube, Vimeo lub innych, to ty również możesz wyświetlać miniaturkę filmu dla wszystkich wpisów zawierających filmy na stronie głównej i archiwalnej twojego bloga. W tym artykule pokażemy, jak dodać miniaturki filmów z YouTube w WordPress.
Miniaturki filmów i miniaturki wpisów WordPress
WordPress ma wbudowaną funkcję dodawania wyróżniających się obrazków lub miniaturek wpisów, a większość motywów WordPress obsługuje tę funkcję. Jeśli jednak chcesz wyróżnić swoją treść wideo z YouTube, to chciałbyś zaprezentować tę treść za pomocą miniaturek filmów. Ten artykuł pomoże ci to zrobić, korzystając z domyślnej funkcji miniaturek wpisów WordPress.
Konfiguracja wtyczki miniaturek filmów w WordPressie
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Video Thumbnails. Po włączaniu wtyczki należy przejść do Ustawienia ” Miniaturki filmów, aby skonfigurować ustawienia wtyczki.
Na ekranie ustawień zalecamy wybranie opcji przechowywania miniaturek w twojej bibliotece multimediów. Zmniejszy to liczbę zewnętrznych żądań http w twojej witrynie, a twoje strony będą wczytywać się szybciej. W sekcji typów treści wtyczka wyświetli wpisy, strony i niestandardowe typy postów, jeśli masz je w swojej witrynie internetowej. Wybierz typy treści, które wtyczka ma skanować w poszukiwaniu odnośników do filmów. Ostatnią opcją na tej stronie jest wybór własnego pola. Niektóre wtyczki wideo dla WordPress zapisują adresy URL filmów w niestandardowym polu, a jeśli korzystasz z takich wtyczek, musisz wpisz to niestandardowe pole tutaj. Następnie kliknij przycisk Zapisz zmiany.
Na stronie ustawień zobaczysz również kartę Dostawcy. Jeśli używasz Vimeo do udostępniania twoich filmów, musisz utworzyć aplikację na Vimeo, a następnie wpisz tutaj identyfikator klienta, sekret klienta, token dostępu i tajne wartości tokena dostępu.
Na karcie Masowe działania możesz skanować twoje opublikowane wpisy w poszukiwaniu filmów i generować dla nich miniaturki wideo. Wtyczka udostępnia również przycisk do czyszczenia wszystkich miniaturek filmów i usuwania ich jako załączników z twoich wpisów.
Tworzenie miniaturek filmów we wpisach WordPressa
Teraz, po skonfigurowaniu wtyczki, utwórzmy miniaturkę filmu, dodając adres URL filmu we wpisie WordPress. Aby to zrobić, musisz utworzyć lub edytować wpis WordPress i dodać adres URL twojego filmu w obszarze edycji wpisu. Po opublikowaniu wpisu zobaczysz, że wtyczka wygenerowała dla ciebie miniaturkę filmu i dodała ją do twojego wpisu.
Wyświetlanie miniaturki filmu w twoim motywie WordPressa
Wtyczka do wyświetlania miniaturek filmów wykorzystuje funkcjonalność WordPress Post Thumbnails. Większość motywów WordPress jest skonfigurowana do automatycznego wyświetlania miniaturek wpisów. Oznacza to, że twój motyw automatycznie wyświetli miniaturkę filmu wraz z treścią wpisu lub zajawką. Jeśli jednak twój motyw nie wyświetla miniaturek filmów, musisz edytować pliki motywu i dodać ten kod do szablonu, w którym chcesz wyświetlić miniaturkę.
<?php the_post_thumbnail(); ?>
.
Jak dodać przycisk odtwarzania do miniaturki filmu w WordPress?
Teraz, gdy z powodzeniem przechwyciłeś i wyświetliłeś miniaturki wideo w swoich wpisach WordPress, możesz chcieć odróżnić zwykłe miniaturki obrazków od miniaturek filmów. Dzięki temu twoi użytkownicy będą wiedzieć, że w wpisie znajduje się film i będą mogli kliknąć przycisk odtwarzania, aby zobaczyć wpis z filmem. Pokażemy ci, jak używać tagów warunkowych, aby odróżnić miniaturki filmów od zwykłych wpisów i dodać przycisk odtwarzania.
Aby skorzystać z tej metody, musisz upewnić się, że publikujesz swoje wpisy z filmami w określonej kategorii, na przykład Wideo. Następnie w plikach szablonu twojego motywu, takich jak index.php, archive.php, category.php lub treść. php poszukaj tej linii kodu:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
.
Teraz musimy zastąpić ten kod następującym kodem:
<?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; ?>
.
Ten kod dodaje <span class="playbutton"></span> po miniaturce wpisu tylko dla wpisów umieszczonych w kategorii filmów. Następnym krokiem jest przesłanie pliku obrazka z ekranu Media ” Utwórz nowy. Ten obrazek będzie używany jako przycisk odtwarzania. Po przesłaniu pliku obrazu, zanotuj lokalizację pliku obrazu, klikając odnośnik Edytuj obok obrazka.
Ostatnim krokiem jest wyświetlenie przycisku odtwarzania. Będziemy używać CSS do wyświetlania i pozycjonowania przycisku odtwarzania na miniaturce filmu. Aby to zrobić, musisz skopiować i wkleić ten kod CSS do arkusza stylów twojego motywu lub motywu potomnego, klikając Wygląd ” Edytor.
.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;
}
.
Nie zapomnij zastąpić adresu url obrazka tła adresem URL przesłanego wcześniej pliku z obrazkiem przycisku odtwarzania. To wszystko. Twoje miniaturki filmów powinny mieć teraz przycisk odtwarzania.
Mamy nadzieję, że ten artykuł pomógł ci wyróżnić twoje filmy z YouTube za pomocą miniaturek w WordPress. W przypadku uwag i pytań prosimy o pozostawienie komentarza lub śledzenie nas na Twitterze.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Peter says
It is amazing that it still works!
However does somebody know why it is not getting a thumbnail from a YT playlist?
i´ve several posts with playlist and the image is always a grey „Video is not found” image
WPBeginner Support says
The plugin was created for videos and not entire playlists, you would need to reach out to the plugin’s author for including playlist functionality.
Administrator
eddie art says
would this work to get a thumbnail image on an iframe embed code video?
WPBeginner Support says
You would need to check with the plugin’s support for if that is supported.
Administrator
Faisal Iqbal says
Where to put that code in functions.php. I am no techie please anybody help me?
Mohammad says
Hi
I try to use this plugin but it doesn’t work for me and the developer in support forums doesn’t answer most of the unsolved topics. In debugging page when I try „Test Markup for Video” I get this error:
Thumbnail found, but it may not exist on the source server. If opening the URL below in your web browser returns an error, the source is providing an invalid URL. Thumbnail URL:
what’s the problem?
Neon emmanuel says
what if i want three parameters, 1 a fall back when there is no thumbnail, two i fall back if it is video, (i.e) adding a play button overlay to it , and three a fall back it it is video with an overlay play icon on it.
Bryan says
Will any of this code work for Adobe Muse/Dreamweaver?
john says
Hi
We are looking for a developer who can implement this for us. Are you available ?
pamela sillah says
Is there any other way for me to do this WITHOUT plugins?? please help
franck says
Hi folks,
is anybody know how to remove related video when Youtube video is played till the end in video gallery plugin from Huge IT?
Ernesto says
How do I remove the image from inside the entrance? I want input into the video display and no image
Quoterland says
Thanks, great tutorial.
Rihan says
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 says
No, your thumbnail will appear on Facebook but it will not have the play button on it.
srem says
Sorry I don’t know why it not show code.
Mauro Scarpa says
Hi! Great website and post, i have a question, if then I want to share my post on facebook, will appear whit the play button also? Thanks
Piet says
Cool plugin and tutorial. Instead of showing a play button image, I would like to suggest using a font icon, for example from FontAwesome.
WPBeginner Staff says
TCB: if you are using WordPress SEO plugin then youc an try this method. Once the video thumbnail plugin has fetched the thumbnail image for your video, you need to find its location in your media library and copy the URL. After that remove the video thumbnail image from the post. In the WordPress SEO meta box on the post editor, click on the social tab, and paste the link next to the facebook image field.
TCB says
Is it possible to use the video thumbnail as post image on facebook?
That would be great because I don’t want to the show the picture as featured image.
Megha Verma says
I am facing a problem as the play button is showing only on the first post….due to absolute position….not on other post’s images…
Sutherland Boswell says
Great tutorial! As the developer I love to get feedback from users and work on easy solutions for the most requested features. Overlaying a play button and making the video actually play when clicking the thumbnail are two of the most requested features, but they’re both highly dependent on the theme. Learning to modify a theme on your own can be rewarding, so don’t be afraid to give it a shot!
PS – I hope everyone will check out the pro version!
Jesse says
Hi Sutherland.
I’ve read such good things about your plugin and I’m eager to try it.
However, when using your plugin to scan for video files, it finds all 22 videos under the 'video’ page which they are posted. The problem is it isn’t finding any thumbnails.
After reading your various support replies to similar issues, as well as your instructions, i sought to find out whether my theme (metric, by grandpixels) is using a custom field. I have been unsuccessful in finding this information.
Do you have suggestions on how to make this work?
Thanks,
Jesse
Audee says
What if I want to display post thumbnail only for posts filed under video 'Post Format’ ?
Thank you for sharing article about this plugin!
Sutherland Boswell says
You should be able to follow the tutorial, just replace
1-click Use in WordPress
with
1-click Use in WordPress
Alex says
Hi Sutherland Boswell,
i use your plugin for Detube theme, the problem is there is no <a href="”> code line in those files: index.php, archive.php, category.php..
Do you have any idea or a way to make it work in Detube theme?
Thanks in advance!
Alex says
i would be so glad if someone has an idea and could answer my question. I’ve been working for many hours to get this code works on Detube, but no succes untill now…
Could someone here please help me?
Ahmad Rafi Maseer says
HOw to play directly in thumbnail so the user should not go to post page to play the video???
WPBeginner Support says
For that you will have to edit your theme and instead of displaying the thumbnail you will have to embed the video.
Administrator
Sue Anne says
Thanks SO much for the great instruction on putting a video and video thumbnail on my WordPress blog. It took about 5 minutes and I’m no techie!
Pali Madra says
Hi!
Great website and one of my favorite post.
I had a related question. I’m adding video by placing the URL in the HTML code of the posts but I also want to show a caption below it. Is that possible without using a plugin?
Thanks in advance
Matt says
Fantastic tutorial. Thanks very much for posting this!
Tiguan says
The ‘span’ must be placed inside the thumbnail’s hyperlink tags, otherwise the image link over play button will be disabled. So the correct code will be:
However, it’s a nice tutorial.
WPBeginner Support says
Tiguan, thanks for pointing this out. We have updated the tutorial.
Administrator
adolf witzeling says
Great tutorial.
gottfrid q. says
> This will let your users know that there is a video in the post, and they can click on the play button to view the video post.
I don’t want to disappoint you, but the button (spin) don’t have any click method.
How exactly this button was supposed to work and how to implement it?
Thanks for your time.
WPBeginner Support says
The button will not play the video right there, however it will take the user to the video page. The whole thumbnail is linked to the post containing the video.
Administrator
gottfrid q. says
Must the 'span’ be placed inside the thumbnail’s hyperlink tags then?
Akash says
And. how to implement Play Button in GENESIS Theme? there is no index.php, archive.php, category.php, or content.php file there to add the code.
Thanks.
WPBeginner Support says
Contact Genesis support forums.
Administrator
Mark McGinnis says
Akash, did you ever figure out how to impliment using Genesis theme? I have the same issue…
Thanks!
Akash says
But what will be the size of the Video Thumbnail? Will it be same as the image thumbnail already set in the blog?
WPBeginner Support says
It will use the default thumbnail size. You can over ride this by adding your own image size and use it in your template. For example if you create a new thumbnail size and name it video-thumbnail you would call it in your template like this:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Administrator