Czy widziałeś popularne strony używające miniatur filmów z YouTube na stronie głównej? Jeśli prowadzisz kanał wideo na stronach takich jak YouTube, Vimeo lub innych, możesz również wyświetlać miniaturę wideo dla wszystkich postów zawierających filmy na stronach głównych i archiwalnych swojego bloga. W tym artykule pokażemy, jak dodać miniatury filmów z YouTube w WordPressie.
Miniatury wideo i miniatury postów WordPress
WordPress posiada wbudowaną funkcjonalność do dodawania obrazów wyróżniających lub miniatur postów, a większość motywów WordPressa obsługuje tę funkcję. Jednak jeśli chcesz wyróżnić swoje treści wideo z YouTube, będziesz chciał zaprezentować te treści za pomocą miniatur wideo. Ten artykuł pomoże Ci to zrobić, korzystając z domyślnej funkcjonalności miniatur postów w WordPressie.
Konfiguracja wtyczki Video Thumbnails w WordPress
Najpierw musisz zainstalować i aktywować wtyczkę Video Thumbnails. Po aktywacji wtyczki musisz przejść do Ustawienia » Video Thumbnails, aby skonfigurować ustawienia wtyczki.
Na ekranie ustawień zalecamy wybranie opcji przechowywania miniatury w bibliotece multimediów. Zmniejszy to liczbę zewnętrznych żądań HTTP na Twojej stronie, a strony będą ładować się szybciej. W sekcji typów postów wtyczka wyświetli posty, strony i niestandardowe typy postów, jeśli masz je na swojej stronie internetowej. Wybierz typy postów, dla których wtyczka ma skanować linki do filmów. Ostatnią opcją na tej stronie jest wybór niestandardowego pola. Niektóre wtyczki wideo dla WordPressa zapisują adresy URL filmów w niestandardowym polu, a jeśli korzystasz z takich wtyczek, musisz tutaj wprowadzić to niestandardowe pole. Następnie kliknij przycisk Zapisz zmiany.
Na stronie ustawień zobaczysz również zakładkę Dostawcy. Jeśli używasz Vimeo do udostępniania swoich filmów, musisz utworzyć aplikację na Vimeo, a następnie wprowadzić tutaj wartości identyfikatora klienta, sekretu klienta, tokena dostępu i sekretu tokena dostępu.
Na karcie Masowe Akcje możesz przeskanować opublikowane posty w poszukiwaniu filmów i wygenerować dla nich miniatury filmów. Wtyczka udostępnia również przycisk do wyczyszczenia wszystkich miniatur filmów i usunięcia ich jako załączniki z postów.
Tworzenie miniatur wideo w postach WordPress
Teraz, gdy skonfigurowałeś wtyczkę, utwórz miniaturę wideo, dodając adres URL filmu na stronie WordPress. Aby to zrobić, musisz utworzyć lub edytować wpis na WordPress i dodać adres URL swojego filmu w obszarze edycji wpisu. Po opublikowaniu wpisu zobaczysz, że wtyczka wygenerowała dla Ciebie miniaturę wideo i dodała ją do Twojego wpisu.
Wyświetlanie miniatury wideo w Twoim motywie WordPress
Wtyczka miniatur wideo wykorzystuje funkcjonalność miniatur wpisów WordPress. Większość motywów WordPress jest skonfigurowana tak, aby automatycznie wyświetlać miniatury wpisów. Oznacza to, że Twój motyw automatycznie wyświetli miniaturę wideo wraz z treścią lub fragmentem wpisu. Jednak jeśli Twój motyw nie wyświetla miniatur wideo, musisz edytować pliki swojego motywu i dodać ten kod do szablonu, w którym chcesz wyświetlić miniaturę.
<?php the_post_thumbnail(); ?>
Jak dodać przycisk odtwarzania na miniaturze wideo w WordPress
Teraz, gdy pomyślnie przechwyciłeś i wyświetliłeś miniatury wideo w swoich postach WordPress, możesz chcieć odróżnić swoje zwykłe miniatury obrazów od swoich miniatur wideo. Pozwoli to Twoim użytkownikom wiedzieć, że w poście znajduje się film i mogą kliknąć przycisk odtwarzania, aby obejrzeć post z filmem. Pokażemy Ci, jak używać tagów warunkowych do rozróżniania między miniaturami wideo a zwykłymi miniaturami postów i dodawania przycisku odtwarzania.
Aby użyć tej metody, musisz upewnić się, że publikujesz swoje posty wideo w określonej kategorii, na przykład Wideo. Następnie w plikach szablonu motywu, takich jak index.php, archive.php, category.php lub content.php, znajdź tę linię 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 miniaturze posta tylko dla postów z kategorii wideo. Następnym krokiem jest przesłanie pliku obrazu z ekranu Media » Dodaj nowy. Ten obraz będzie używany jako przycisk odtwarzania. Po przesłaniu pliku obrazu, zanotuj lokalizację pliku obrazu, klikając link Edytuj obok obrazu.
Ostatnim krokiem jest wyświetlenie przycisku odtwarzania. Użyjemy CSS do wyświetlenia i pozycjonowania przycisku odtwarzania na miniaturze wideo. Aby to zrobić, musisz skopiować i wkleić ten kod CSS do arkusza stylów swojego 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 obrazu tła adresem URL pliku obrazu przycisku odtwarzania, który wcześniej przesłałeś. To wszystko. Twoje pliki miniatur wideo powinny teraz mieć na nich przycisk odtwarzania.
Mamy nadzieję, że ten artykuł pomógł Ci wyróżnić Twoje filmy na YouTube za pomocą miniatur w WordPress. Aby uzyskać opinie i pytania, zostaw komentarz lub śledź nas na Twitterze.
Peter
Niesamowite, że to wciąż działa!
Jednak czy ktoś wie, dlaczego nie pobiera miniatury z listy odtwarzania YT?
Mam kilka postów z listami odtwarzania i obraz zawsze jest szary "Film nie znaleziony".
Wsparcie WPBeginner
Plugin został stworzony dla filmów, a nie całych list odtwarzania, musiałbyś skontaktować się z autorem pluginu w sprawie dodania funkcjonalności list odtwarzania.
Admin
eddie art
czy to zadziała, aby uzyskać miniaturę obrazu na osadzonym filmie w kodzie iframe?
Wsparcie WPBeginner
Musiałbyś sprawdzić u wsparcia pluginu, czy jest to obsługiwane.
Admin
Faisal Iqbal
Gdzie umieścić ten kod w functions.php. Nie jestem technikiem, proszę, pomóżcie mi!
Mohammad
Cześć
Próbuję użyć tego pluginu, ale u mnie nie działa, a deweloper na forach wsparcia nie odpowiada na większość nierozwiązanych tematów. Na stronie debugowania, gdy próbuję „Test Markup for Video”, otrzymuję ten błąd:
Miniatura znaleziona, ale może nie istnieć na serwerze źródłowym. Jeśli otwarcie poniższego adresu URL w przeglądarce internetowej spowoduje błąd, źródło podaje nieprawidłowy adres URL. Adres URL miniatury:
Jaki jest problem?
Neon emmanuel
co jeśli chcę trzy parametry, 1 zapasowy, gdy nie ma miniatury, 2 zapasowy, jeśli to wideo (tj. dodanie nakładki przycisku odtwarzania), i 3 zapasowy, jeśli to wideo z ikoną odtwarzania na nim.
Bryan
Czy którykolwiek z tych kodów zadziała dla Adobe Muse/Dreamweaver?
Jan
Cześć
Szukamy developera, który mógłby nam to zaimplementować. Czy jesteś dostępny?
pamela sillah
Czy jest jakiś inny sposób, abym mógł to zrobić BEZ wtyczek?? proszę o pomoc
franck
Witajcie,
Czy ktoś wie, jak usunąć powiązane filmy po zakończeniu odtwarzania filmu na YouTube wtyczki galerii wideo od Huge IT?
Ernesto
Jak usunąć obrazek z wnętrza wpisu? Chcę, aby wyświetlało się wideo i żaden obrazek.
Quoterland
Dzięki, świetny tutorial.
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
Zespół WPBeginner
Nie, Twój miniatura pojawi się na Facebooku, ale nie będzie miała przycisku odtwarzania.
srem
Przepraszam, nie wiem, dlaczego kod się nie wyświetla.
Mauro Scarpa
Cześć! Świetna strona i post, mam pytanie, jeśli potem będę chciał udostępnić swój post na Facebooku, czy pojawi się również z przyciskiem odtwarzania? Dzięki
Piet
Świetny plugin i tutorial. Zamiast wyświetlać obraz przycisku odtwarzania, sugerowałbym użycie ikony czcionki, na przykład z FontAwesome.
Zespół WPBeginner
TCB: jeśli używasz wtyczki WordPress SEO, możesz spróbować tej metody. Gdy wtyczka miniatur wideo pobierze miniaturę wideo, musisz znaleźć jej lokalizację w swojej bibliotece multimediów i skopiować adres URL. Następnie usuń miniaturę wideo z posta. W polu meta wtyczki WordPress SEO w edytorze posta kliknij zakładkę społecznościową i wklej link obok pola obrazka na Facebooku.
TCB
Czy można użyć miniatury filmu jako obrazu posta na Facebooku?
To byłoby świetne, ponieważ nie chcę pokazywać tego obrazu jako obrazu wyróżnionego.
Megha Verma
Mam problem, ponieważ przycisk odtwarzania pojawia się tylko w pierwszym poście... z powodu absolutnego pozycjonowania... nie na obrazach innych postów.
Sutherland Boswell
Świetny tutorial! Jako deweloper uwielbiam otrzymywać opinie od użytkowników i pracować nad prostymi rozwiązaniami dla najczęściej zgłaszanych funkcji. Nakładanie przycisku odtwarzania i faktyczne odtwarzanie wideo po kliknięciu miniatury to dwie z najczęściej zgłaszanych funkcji, ale obie są w dużej mierze zależne od motywu. Nauka samodzielnego modyfikowania motywu może być satysfakcjonująca, więc nie bój się spróbować!
PS – Mam nadzieję, że wszyscy sprawdzą wersję pro!
Jesse
Cześć Sutherland.
Czytałem tak wiele dobrych rzeczy o Twojej wtyczce i nie mogę się doczekać, aby ją wypróbować.
Jednak podczas używania wtyczki do skanowania plików wideo, znajduje ona wszystkie 22 filmy na stronie „wideo”, na której są opublikowane. Problem polega na tym, że nie znajduje żadnych miniatur.
Po przeczytaniu Twoich różnych odpowiedzi w pomocy technicznej na podobne problemy, a także Twoich instrukcji, starałem się dowiedzieć, czy mój motyw (metric, by grandpixels) używa niestandardowego pola. Nie udało mi się znaleźć tej informacji.
Czy masz sugestie, jak to zrobić?
Dzięki,
Jesse
Audee
Co jeśli chcę wyświetlić miniaturę posta tylko dla postów sklasyfikowanych jako 'Format posta' wideo?
Dziękuję za udostępnienie artykułu o tej wtyczce!
Sutherland Boswell
Powinieneś być w stanie podążać za samouczkiem, po prostu zastąp
1-click Use in WordPress
z
1-click Use in WordPress
Alex
Witaj Sutherland Boswell,
używam twojego pluginu do motywu Detube, problem polega na tym, że nie ma linii kodu <a href="”> w tych plikach: index.php, archive.php, category.php..
Czy masz jakiś pomysł lub sposób, aby to zadziałało w motywie Detube?
Z góry dziękuję!
Alex
Byłbym bardzo wdzięczny, gdyby ktoś miał pomysł i mógł odpowiedzieć na moje pytanie. Pracowałem wiele godzin, aby ten kod działał na Detube, ale do tej pory bez sukcesu...
Czy ktoś tutaj może mi pomóc?
Ahmad Rafi Maseer
JAK odtwarzać bezpośrednio na miniaturze, aby użytkownik nie musiał przechodzić na stronę wpisu, aby odtworzyć wideo???
Wsparcie WPBeginner
W tym celu będziesz musiał edytować swój motyw i zamiast wyświetlać miniaturę, będziesz musiał osadzić wideo.
Admin
Sue Anne
DZIĘKUJĘ BARDZO za świetną instrukcję dotyczącą umieszczania wideo i miniatury wideo na moim blogu WordPress. Zajęło to około 5 minut i nie jestem żadnym technikiem!
Pali Madra
Cześć!
Świetna strona i jeden z moich ulubionych postów.
Mam podobne pytanie. Dodaję wideo, umieszczając adres URL w kodzie HTML postów, ale chcę też wyświetlić podpis pod nim. Czy jest to możliwe bez używania wtyczki?
Z góry dziękuję
Matt
Fantastyczny tutorial. Bardzo dziękuję za opublikowanie tego!
Tiguan
'span' musi być umieszczony w tagach hiperłącza miniatury, w przeciwnym razie link do obrazu z przyciskiem odtwarzania zostanie wyłączony. Zatem poprawny kod będzie wyglądał następująco:
Jednak to fajny tutorial.
Wsparcie WPBeginner
Tiguan, dziękuję za zwrócenie na to uwagi. Zaktualizowaliśmy samouczek.
Admin
adolf witzeling
Świetny tutorial.
gottfrid q.
> Pozwoli to Twoim użytkownikom wiedzieć, że w poście znajduje się film i mogą kliknąć przycisk odtwarzania, aby obejrzeć post z filmem.
Nie chcę Cię rozczarować, ale przycisk (spinner) nie ma żadnej metody kliknięcia.
Jak dokładnie ten przycisk miał działać i jak go zaimplementować?
Dziękuję za Twój czas.
Wsparcie WPBeginner
Przycisk nie odtworzy wideo w tym miejscu, ale przeniesie użytkownika na stronę wideo. Cała miniatura jest połączona z postem zawierającym wideo.
Admin
gottfrid q.
Czy „span” musi być umieszczony w tagach hiperłącza miniatury?
Akash
I. jak zaimplementować przycisk Play w motywie GENESIS? nie ma tam pliku index.php, archive.php, category.php ani content.php, do którego można dodać kod.
Dzięki.
Wsparcie WPBeginner
Skontaktuj się z forami wsparcia Genesis.
Admin
Mark McGinnis
Akash, czy udało Ci się dowiedzieć, jak zaimplementować to w motywie Genesis? Mam ten sam problem…
Dzięki!
Akash
Ale jaki będzie rozmiar miniatury wideo? Czy będzie taki sam jak miniatura obrazu już ustawiona na blogu?
Wsparcie WPBeginner
Użyje domyślnego rozmiaru miniatury. Możesz to nadpisać, dodając własny rozmiar obrazu i używając go w swoim szablonie. Na przykład, jeśli utworzysz nowy rozmiar miniatury i nazwiesz go video-thumbnail, wywołasz go w swoim szablonie w następujący sposób:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Admin