W artykule:
Filmy są jednym z najlepszych sposobów na zwiększenie zaangażowania użytkowników. Niedawno jeden z naszych użytkowników zapytał nas o sposób tworzenia nakładek przycisków udostępniania na filmach podobnych do popularnej witryny UpWorthy. W tym artykule pokażemy, jak dodać przyciski udostępniania jako nakładkę na filmy z YouTube w WordPress.
Przykład jak by to wyglądało:
Dodawanie przycisków udostępniania jako nakładki na filmy z YouTube
Można było to zrobić na kilka sposobów. Większość sposobów wymaga wklejenia fragmentów kodu HTML za każdym razem, gdy dodajesz film. Zamiast tego zdecydowaliśmy się stworzyć shortcode, który automatyzowałby ten efekt nakładki.
Wystarczy skopiować i wkleić następujący kod do wtyczki specyficznej dla witryny lub funkcji motywu.plik php:
/// WPBeginner ' s YouTube Share Overlay Buttons
function wpb_yt_buttons ($atts) {
// Get The video ID from shortcode
extract (shortcode_atts(array (
'video'=>"
), $atts));
// Wyświetl wideo
$string = '<div id="Video-container"><iframe src="//www.youtube.com/embed/". $video . '"height=" 315"width=" 560" allowfullscreen=""frameborder="0" ></iframe>';
// Dodaj przycisk Facebook share
$ string . facebook-facebook"><a href = "<url>"><a href="<url>" > <a href=" <url>" > < a href="<url>" > < a href= "<url>" > < a href= "<url>" > < a href = "<url>" > < a href = "<url>" > < a href = "<url> https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $ video .'"target = "_blank">
Facebook < / a></li>";
// Dodaj przycisk Tweet
$ string .< li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check + this + video & url = http%3A//www.youtube.com/watch%3fv%3D'. $video .'">Tweet< / a> < / li>< / ul>';
// Zamknij kontener wideo
$ string .= "</div>";
// Return output
return $ string;
}
// Add Shortcode
add_shortcode ('wpb-yt', 'wpb_yt_buttons');
Ten kod tworzy shortcode, który automatycznie dodaje linki do filmów na Twitterze i Facebooku. Przyciski te są widoczne tylko wtedy, gdy użytkownik przesunie kursor myszy nad filmem. Możesz go użyć, aby dodać dowolny inny kanał mediów społecznościowych.
Aby użyć tego krótkiego kodu, wystarczy dodać identyfikator wideo YouTube do krótkiego kodu w ten sposób:
[wpb-yt video = "qzOOy1tWBCg"]
Możesz uzyskać identyfikator wideo YouTube z ciągu URL. O tak.:
Teraz, gdy dodasz film, będziesz mógł zobaczyć swój film z YouTube i zwykłe linki tekstowe, aby udostępnić film na Facebooku lub Twitterze. Zauważysz, że te linki nie są w ogóle stylizowane.
Tak więc styluje te linki, aby utworzyć przyciski, więc wygląda nieco ładniej. Ukryjemy te przyciski i sprawimy, że pojawią się tylko wtedy, gdy użytkownik naciśnie kursor myszy na kontenerze wideo. Aby to zrobić, dodaj następujący CSS do arkusza stylów motywu podrzędnego.
# share-video-overlay {
pozycja: względna;
/ align = "left" / 40px;
top: - 190px;
list-style-type: brak;
wyświetlacz: blok;
nieprzezroczystość: 0;
filtr: Alfa (krycie=0);
- webkit-transition: nieprzezroczystość .4s, Góra .25s;
- moz-Przejście: nieprzezroczystość .4s, Góra .25s;
- o-przejście: nieprzezroczystość .4s, Góra .25s;
Przejście: nieprzezroczystość .4s, Góra .25s;
z-index: 500;
}
# share-video-overlay: hover {
nieprzezroczystość:1;
filtr: Alfa (nieprzezroczystość=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
# facebook {
color: # ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a: link, .facebook a: aktywny, .facebook a: visited {
color: # fff;
tekst-Dekoracja: Brak;
}
# twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a,twitter a: link, .twitter a: aktywny, .twitter a: odwiedzone, .twitter a: hover {
color: # FFF;
tekst-Dekoracja: Brak;
}
To wszystko. Teraz powinieneś nakładać przyciski udostępniania na swoje filmy z YouTube w WordPress.
Dodawanie przycisków udostępniania jako nakładki dla Playlist wideo YouTube w WordPress
Po opublikowaniu tego artykułu wielu naszych czytelników zapytało, jak ten kod można zmodyfikować, aby działał dla list odtwarzania YouTube,a także filmów. Jeśli osadzasz filmy z YouTube, a także listy odtwarzania w witrynie WordPress, powinieneś użyć tego kodu.
/*
* Przyciski Nakładki WPBeginner ' s Share
* Filmy i playlisty na YouTube
*/
function wpb_yt_buttons ($atts) {
// Get the video and playlist ids from shortcode
extract (shortcode_atts(array (
'video'=>",
'playlist'=>",
), $atts));
// Sprawdź, czy id Listy odtwarzania zawiera shortcode
jeśli (!$playlist == " ) :
// Wyświetl listę odtwarzania wideo
$string = '<div id="Video-container"><iframe src="//www.youtube.com/embed/". $video . '?list=". $playlist . '"height=" 315"width=" 560" allowfullscreen=""frameborder="0" ></iframe>';
// Dodaj przycisk Facebook
$ string . facebook-facebook"><a href = "<url>"><a href="<url>" > <a href=" <url>" > < a href="<url>" > < a href= "<url>" > < a href= "<url>" > < a href = "<url>" > < a href = "<url>" > < a href = "<url> https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $ video . '%26list%3D'. $playlist . '"target="_blank" >Facebook</a>< / li>';
// Dodaj przycisk Twitter
$ string .< li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check + this + video & url = http%3A//www.youtube.com/watch%3fv%3D'. $video . '%26list%3D'. $playlist . '">Tweet< / a> < / li>< / ul>';
// Zamknij kontener wideo
$ string .= "</div>";
// Jeśli nie podano identyfikatora listy odtwarzania
else :
// Wyświetl wideo
$ string .= '<div id = "Video-container" > < iframe src="//www.youtube.com/embed/". $video . '"height=" 315"width=" 560" allowfullscreen=""frameborder="0" ></iframe>';
// Dodaj przycisk Facebook
$ string . facebook-facebook"><a href = "<url>"><a href="<url>" > <a href=" <url>" > < a href="<url>" > < a href= "<url>" > < a href= "<url>" > < a href = "<url>" > < a href = "<url>" > < a href = "<url> https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $ video .'"target = "_blank">
Facebook < / a></li>";
// Dodaj przycisk Twitter
$ string .< li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check + this + video & url = http%3A//www.youtube.com/watch%3fv%3D'. $video .'">Tweet< / a> < / li>< / ul>';
// Zamknij kontener wideo
$ string .= "</div>";
endif;
// Return output
return $ string;
}
// Add shortcode
add_shortcode ('wpb-yt', 'wpb_yt_buttons');
Korzystając z powyższego kodu Możesz również dodać listę odtwarzania z nakładanymi przyciskami udostępniania. Aby wyświetlić playlistę, musisz podać ID wideo i id Listy odtwarzania w krótkim kodzie, takim jak ten:
[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]
Możesz uzyskać identyfikatory wideo i listy odtwarzania, odwiedzając listę odtwarzania na YouTube i kopiując ID Listy z adresu URL, w ten sposób:
Dodawanie linku Post WordPress w nakładce przycisku udostępniania na filmach z YouTube
Po opublikowaniu tego artykułu niektórzy z naszych użytkowników zapytali, czy chcieliby udostępnić przyciski udostępniania, aby udostępnić link do posta WordPress zamiast linku wideo z YouTube. Aby to zrobić, musisz zastąpić adres URL wideo w przyciskach udostępniania linkiem permalink posta WordPress. Użyj tego kodu w swoich funkcjach.wtyczka PHP lub site-specific:
/// WPBeginner ' s YouTube Share Overlay Buttons
function wpb_yt_buttons ($atts) {
// Get The video ID from shortcode
extract (shortcode_atts(array (
'video'=>"
), $atts));
// Wyświetl wideo
$string = '<div id="Video-container"><iframe src="//www.youtube.com/embed/". $video . '"height=" 315"width=" 560" allowfullscreen=""frameborder="0" ></iframe>';
// Get post permalink and encode URL
$permalink_encoded = urlencode(get_permalink());
// Dodaj przycisk Facebook share
$ string . facebook-facebook"><a href = "<url>"><a href="<url>" > <a href=" <url>" > < a href="<url>" > < a href= "<url>" > < a href= "<url>" > < a href = "<url>" > < a href = "<url>" > < a href = " <url> https://www.facebook.com/sharer/sharer.php?u='. $permalink_encoded.'"target = "_blank">
Facebook < / a></li>";
// Dodaj przycisk Tweet
$ string .< li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check + this + video & url='. $permalink_encoded.'">Tweet< / a> < / li>< / ul>';
// Zamknij kontener wideo
$ string .= "</div>";
// Return output
return $ string;
}
// Add Shortcode
add_shortcode ('wpb-yt', 'wpb_yt_buttons');
Możesz dowolnie modyfikować CSS lub fragmenty skrótów, aby spełnić swoje potrzeby. Aby jeszcze bardziej zoptymalizować swoje filmy, możesz sprawić, że filmy z YouTube będą responsywne za pomocą wtyczki FitVids jQuery. Możesz także wyłączyć powiązane filmy, które pojawiają się na końcu filmu. lub nawet tworzyć polecane obrazy z miniatur wideo YouTube.
Mamy nadzieję, że ten artykuł pomógł Ci dodać niestandardowe przyciski udostępniania jako nakładkę na filmy z YouTube w WordPress. Daj nam znać, które kanały społecznościowe planujesz dodać do swoich filmów, zostawiając komentarz poniżej.
