Tutorials

Hinzufügen von Share-Schaltflächen als Überlagerung auf YouTube-Videos in WordPress

Videos sind eine der besten Möglichkeiten, um die Einbindung der Benutzer zu fördern. Kürzlich hat uns einer unserer Benutzer nach einer Möglichkeit gefragt, Overlays für Freigabetasten für Videos zu erstellen, die der beliebten Website UpWorthy ähneln. In diesem Artikel zeigen wir Ihnen, wie Sie Freigabeknöpfe als Overlay für YouTube-Videos in WordPress hinzufügen.

Beispiel wie es aussehen würde:

Hinzufügen von Share-Schaltflächen als Überlagerung in YouTube-Videos

Es gab mehrere Möglichkeiten, dies zu erreichen. Bei den meisten Methoden müssen Sie jedes Mal, wenn Sie ein Video hinzufügen, ein Stück HTML-Code einfügen. Anstatt dies zu tun, haben wir uns entschlossen, einen Shortcode zu erstellen, der diesen Overlay-Effekt automatisiert.

Kopieren Sie einfach den folgenden Code und fügen Sie ihn in ein standortspezifisches Plugin oder in die Datei functions.php Ihres Themas ein:

 /// WPBeginners YouTube Share Overlay Buttons-Funktion wpb_yt_buttons ($ atts) // Abrufen der Video-ID aus dem Shortcode-Extrakt (shortcode_atts (array ('video' => "), $ atts)); // Video $ string = 'anzeigen //; Facebook-Share-Button hinzufügen $ string. = ' Facebook
'; // Tweet-Schaltfläche hinzufügen $ string. = 'Tweet
'; // Video-Container schließen $ string. = ''; // Ausgabe zurückgeben return $ string;  // Shortcode hinzufügen add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Dieser Code erstellt einen Shortcode, der automatisch Links zu Twitter und Facebook-Links zu Ihren Videos hinzufügt. Diese Schaltflächen sind nur sichtbar, wenn der Benutzer die Maus über das Video bewegt. Sie können es verwenden, um jeden anderen Social-Media-Kanal hinzuzufügen.

Um diesen Shortcode zu verwenden, müssen Sie lediglich die YouTube-Video-ID wie folgt in den Shortcode einfügen:

[wpb-yt video = "qzOOy1tWBCg"]

Sie können die YouTube-Video-ID über die URL-Zeichenfolge abrufen. So was:

Wenn Sie jetzt ein Video hinzufügen, können Sie Ihr YouTube-Video und Links zu Klartext sehen, um das Video auf Facebook oder Twitter zu teilen. Sie werden feststellen, dass diese Links überhaupt nicht gestaltet sind.

Lassen Sie uns diese Verknüpfungen so gestalten, dass sie Schaltflächen erstellen, sodass sie ein bisschen schöner aussehen. Diese Schaltflächen werden auch ausgeblendet und nur dann angezeigt, wenn ein Benutzer die Maus in den Videocontainer nimmt. Fügen Sie dem Stylesheet Ihres untergeordneten Themes das folgende CSS hinzu.

 # share-video-overlay position: relativ; rechts: 40px; oben: -190px; Typ des Listentyps: keine; Bildschirmsperre; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); -webkit-Übergang: Deckkraft .4s, obere 0,25s; -Moz-Übergang: Deckkraft .4s, obere 0,25s; -o-Übergang: Deckkraft .4s, obere .25s; Übergang: Deckkraft .4s, obere .25s; z-Index: 500;  # share-video-overlay: hover Deckkraft: 1; Filter: Alpha (Deckkraft = 100);  .share-video-overlay li margin: 5px 0px 5px 0px;  #facebook color: #ffffff; Hintergrundfarbe: # 3e5ea1; Breite: 70px; Polsterung: 5px;  .facebook a: link, .facebook a: aktiv, .facebook a: besuchte color: #fff; Textdekoration: keine;  #twitter Hintergrundfarbe: # 00a6d4; Breite: 70px; Polsterung: 5px;  .twitter a, .twitter a: link, .twitter a: aktiv, .twitter a: besucht, .twitter a: hover color: #FFF; Textdekoration: keine;

Das ist alles. Jetzt sollten Sie Ihre YouTube-Videos in WordPress mit Share-Schaltflächen überlagern.

Hinzufügen von Share-Schaltflächen als Überlagerung für YouTube-Video-Playlisten in WordPress

Nach der Veröffentlichung dieses Artikels haben viele unserer Leser gefragt, wie dieser Code für YouTube-Wiedergabelisten und Videos geändert werden kann. Wenn Sie YouTube-Videos sowie Wiedergabelisten in Ihre WordPress-Site einbetten, sollten Sie stattdessen diesen Code verwenden.

 / * * WPBeginners Share Overlay-Schaltflächen * auf YouTube-Videos und Playlisten * / function wpb_yt_buttons ($ atts) // Liefert die Video- und Playlist-IDs aus dem Shortcode-Extrakt (shortcode_atts (array ('video' =>, 'playlist' => ",), $ atts)); // Prüfen Sie, ob eine Playlist-ID mit einem Shortcode versehen ist, wenn (! $ Playlist == "): // Video-Playlist anzeigen $ string = ''; // Hinzufügen der Facebook-Schaltfläche $ string. = 'Facebook
'; // Twitter-Schaltfläche hinzufügen $ string. = 'Tweet
'; // Video-Container schließen $ string. = ''; // Wenn keine Wiedergabelisten-ID angegeben ist, sonst: // Video anzeigen $ string. = ''; // Facebook-Button hinzufügen $ string. = ' Facebook
'; // Twitter-Schaltfläche hinzufügen $ string. = 'Tweet
'; // Video-Container schließen $ string. = ''; endif; // Ausgabe zurückgeben return $ string;  // Shortcode add_shortcode hinzufügen ('wpb-yt', 'wpb_yt_buttons');

Mit dem obigen Code können Sie auch eine Wiedergabeliste mit überlagernden Share-Schaltflächen hinzufügen. Um Ihre Wiedergabeliste anzuzeigen, müssen Sie die Video-ID und die Wiedergabelisten-ID im Kurzcode wie folgt angeben:

[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]

Sie können Ihre Video- und Wiedergabelisten-IDs abrufen, indem Sie die Wiedergabeliste auf YouTube besuchen und die Listen-ID von der URL kopieren:

Hinzufügen eines WordPress-Post-Links in der Share-Schaltfläche bei YouTube-Videos

Nachdem wir diesen Artikel veröffentlicht haben, haben einige unserer Nutzer gebeten, dass die Share-Schaltflächen den Link ihres WordPress-Beitrags anstelle des YouTube-Videolinks freigeben möchten. Dazu müssen Sie die Video-URL in den Share-Schaltflächen durch den Permalink des WordPress-Beitrags ersetzen. Verwenden Sie diesen Code in Ihrer functions.php oder Ihrem standortspezifischen Plugin:

 /// WPBeginners YouTube Share Overlay Buttons-Funktion wpb_yt_buttons ($ atts) // Abrufen der Video-ID aus dem Shortcode-Extrakt (shortcode_atts (array ('video' => "), $ atts)); // Video $ string = 'anzeigen '; // Post Permalink abrufen und URL kodieren $ permalink_encoded = urlencode (get_permalink ()); // Facebook-Share-Button hinzufügen $ string. =' Facebook
'; // Tweet-Schaltfläche hinzufügen $ string. = 'Tweet
'; // Video-Container schließen $ string. = ''; // Ausgabe zurückgeben return $ string;  // Shortcode hinzufügen add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Fühlen Sie sich frei, die CSS- oder Shortcode-Snippets an Ihre Bedürfnisse anzupassen. Um Ihre Videos weiter zu optimieren, können Sie Ihre YouTube-Videos mit dem FitVids jQuery-Plugin ansprechen. Sie können auch verwandte Videos deaktivieren, die am Ende des Videos angezeigt werden. Sie können sogar aus YouTube-Video-Miniaturansichten ausgewählte Bilder erstellen.

Wir hoffen, dass Ihnen dieser Artikel dabei geholfen hat, benutzerdefinierte Share-Schaltflächen als Überlagerung für YouTube-Videos in WordPress hinzuzufügen. Teilen Sie uns mit, welche Social-Media-Kanäle Sie Ihren Videos hinzufügen möchten, indem Sie unten einen Kommentar hinterlassen.

« Hinzufügen von Sicherheitsfragen zum WordPress-Anmeldebildschirm Hinzufügen eines Shortlink-Menüelements in der WordPress-Admin-Leiste »