Haben Sie schon einmal auf beliebten Websites gesehen, wie sie ihre YouTube-Videominiaturansichten auf der Titelseite ihrer Website anzeigen? Wenn Sie einen Videokanal auf Websites wie YouTube, Vimeo oder anderen betreiben, dann können auch Sie eine Videominiaturansicht für alle Beiträge, die Videos enthalten, auf der Vorder- und Archivseite Ihres Blogs anzeigen. In diesem Artikel zeigen wir Ihnen, wie Sie Miniaturansichten für YouTube-Videos in WordPress hinzufügen.
Videominiaturbilder und WordPress-Beitragsminiaturen
WordPress verfügt über integrierte Funktionen zum Hinzufügen von Featured Images oder Beitragsminiaturansichten, und die meisten WordPress-Themes unterstützen diese Funktion. Wenn Sie jedoch Ihre Videoinhalte von YouTube hervorheben möchten, dann möchten Sie diese Inhalte mit Videominiaturansichten präsentieren. Dieser Artikel hilft Ihnen dabei, indem er die Standardfunktion für Beitragsminiaturansichten von WordPress verwendet.
Einrichten des Video-Thumbnails-Plugins in WordPress
Als Erstes müssen Sie das Plugin Video Thumbnails installieren und aktivieren. Nach der Aktivierung des Plugins müssen Sie zu Einstellungen » Video Thumbnails gehen, um die Plugin-Einstellungen zu konfigurieren.
Auf dem Einstellungsbildschirm empfehlen wir Ihnen, die Miniaturansicht in Ihrer Mediathek zu speichern. Dies reduziert externe HTTP-Anfragen auf Ihrer Website und Ihre Seiten werden schneller geladen. Unter dem Abschnitt Beitragsarten zeigt das Plugin Beiträge, Seiten und benutzerdefinierte Beitragsarten an, falls Sie welche auf Ihrer Website haben. Wählen Sie die Beitragsarten aus, die das Plugin nach Videolinks durchsuchen soll. Die letzte Option auf dieser Seite ist die Auswahl eines benutzerdefinierten Feldes. Einige Video-Plugins für WordPress speichern Video-URLs in einem benutzerdefinierten Feld, und wenn Sie solche Plugins verwenden, müssen Sie dieses benutzerdefinierte Feld hier eingeben. Klicken Sie anschließend auf die Schaltfläche Änderungen speichern.
Auf der Einstellungsseite sehen Sie auch den Tab Anbieter. Wenn Sie Vimeo zum Teilen Ihrer Videos verwenden, müssen Sie eine App bei Vimeo erstellen und dann hier die Werte für Client-ID, Client-Secret, Zugriffstoken und Zugriffstoken-Secret eingeben.
Auf der Registerkarte Massenaktionen können Sie Ihre veröffentlichten Beiträge nach Videos durchsuchen und Video-Thumbnails für diese generieren. Das Plugin bietet auch eine Schaltfläche, um alle Video-Thumbnails zu löschen und sie als Anhang aus Ihren Beiträgen zu entfernen.
Erstellen von Videominiaturen in WordPress-Beiträgen
Nachdem Sie das Plugin eingerichtet haben, erstellen wir nun eine Video-Miniaturansicht, indem wir eine Video-URL in einen WordPress-Beitrag einfügen. Dazu müssen Sie einen WordPress-Beitrag erstellen oder bearbeiten und Ihre Video-URL in den Beitragsbearbeitungsbereich einfügen. Sobald Sie den Beitrag veröffentlichen, werden Sie sehen, dass das Plugin eine Video-Miniaturansicht für Sie generiert und zu Ihrem Beitrag hinzugefügt hat.
Anzeige eines Videominiaturbilds in Ihrem WordPress-Theme
Das Video-Thumbnails-Plugin verwendet die Funktionalität von WordPress Post Thumbnails. Die meisten WordPress-Themes sind so eingerichtet, dass sie automatisch Beitrags-Miniaturansichten anzeigen. Das bedeutet, dass Ihr Theme die Video-Miniaturansicht automatisch zusammen mit Ihrem Beitragsinhalt oder Auszug anzeigt. Wenn Ihr Theme die Video-Miniaturansichten jedoch nicht anzeigt, müssen Sie Ihre Theme-Dateien bearbeiten und diesen Code in die Vorlage einfügen, wo Sie die Miniaturansicht anzeigen möchten.
<?php the_post_thumbnail(); ?>
So fügen Sie einen Play-Button auf dem Video-Thumbnail in WordPress hinzu
Nachdem Sie nun erfolgreich Videovorschaubilder in Ihren WordPress-Beiträgen erfasst und angezeigt haben, möchten Sie möglicherweise Ihre regulären Bildvorschaubilder von Ihren Videovorschaubildern unterscheiden. Dies teilt Ihren Benutzern mit, dass sich ein Video im Beitrag befindet, und sie können auf die Wiedergabetaste klicken, um den Videobeitrag anzusehen. Wir zeigen Ihnen, wie Sie bedingte Tags verwenden, um zwischen Videovorschaubildern und regulären Beitrags-Vorschaubildern zu unterscheiden und eine Wiedergabetaste hinzuzufügen.
Um diese Methode zu verwenden, müssen Sie sicherstellen, dass Sie Ihre Videoposts unter einer bestimmten Kategorie veröffentlichen, z. B. Videos. Suchen Sie dann in den Vorlagendateien Ihres Themes wie index.php, archive.php, category.php oder content.php nach dieser Codezeile:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Jetzt müssen wir diesen Code durch den folgenden Code ersetzen:
<?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; ?>
Dieser Code fügt <span class="playbutton"?></span> nach dem Beitragsbild nur für Beiträge hinzu, die unter der Kategorie Video eingestuft sind. Der nächste Schritt ist der Upload einer Bilddatei vom Bildschirm Medien » Neu hinzufügen. Dieses Bild wird als Wiedergabeschaltfläche verwendet. Nachdem Sie die Bilddatei hochgeladen haben, notieren Sie sich den Speicherort der Bilddatei, indem Sie auf den Link Bearbeiten neben dem Bild klicken.
Der letzte Schritt ist die Anzeige des Play-Buttons. Wir werden CSS verwenden, um den Play-Button auf dem Video-Thumbnail anzuzeigen und zu positionieren. Dazu müssen Sie diesen CSS-Code in die Stylesheet Ihres Themes oder Child-Themes kopieren, indem Sie auf Darstellung » Editor klicken.
.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;
}
Vergessen Sie nicht, die URL des Hintergrundbilds durch die URL der zuvor hochgeladenen Play-Button-Bilddatei zu ersetzen. Das ist alles. Ihre Videovorschaubilder sollten nun einen Play-Button enthalten.
Wir hoffen, dieser Artikel hat Ihnen geholfen, Ihre YouTube-Videos mit Thumbnails in WordPress hervorzuheben. Für Feedback und Fragen hinterlassen Sie bitte einen Kommentar oder folgen Sie uns auf Twitter.
Peter
Es ist erstaunlich, dass es immer noch funktioniert!
Weiß aber jemand, warum es kein Vorschaubild von einer YT-Playlist erhält?
Ich habe mehrere Beiträge mit Playlists und das Bild ist immer ein graues „Video nicht gefunden“-Bild
WPBeginner Support
Das Plugin wurde für Videos und nicht für ganze Playlists erstellt. Sie müssten sich an den Autor des Plugins wenden, um die Playlist-Funktionalität einzubeziehen.
Admin
eddie art
Würde dies funktionieren, um ein Miniaturbild für ein Video mit einem Iframe-Einbettungscode zu erhalten?
WPBeginner Support
Sie müssten sich mit dem Support des Plugins in Verbindung setzen, um zu erfahren, ob dies unterstützt wird.
Admin
Faisal Iqbal
Wo soll dieser Code in functions.php eingefügt werden? Ich bin kein Technikexperte, kann mir bitte jemand helfen?
Mohammad
Hallo
Ich versuche, dieses Plugin zu verwenden, aber es funktioniert bei mir nicht und der Entwickler in den Support-Foren beantwortet die meisten ungelösten Themen nicht. Auf der Debugging-Seite erhalte ich beim Versuch „Test Markup for Video“ diesen Fehler:
Miniaturansicht gefunden, aber sie existiert möglicherweise nicht auf dem Quellserver. Wenn das Öffnen der unten stehenden URL in Ihrem Webbrowser einen Fehler zurückgibt, liefert die Quelle eine ungültige URL. Miniaturansicht-URL:
was ist das Problem?
Neon Emmanuel
Was ist, wenn ich drei Parameter möchte, 1 einen Fallback, wenn kein Thumbnail vorhanden ist, 2 einen Fallback, wenn es sich um ein Video handelt (d. h. ein Play-Button-Overlay hinzufügen), und 3 einen Fallback, wenn es sich um ein Video mit einem Overlay-Play-Icon handelt.
Bryan
Funktioniert einer dieser Codes für Adobe Muse/Dreamweaver?
John
Hallo
Wir suchen einen Entwickler, der dies für uns implementieren kann. Sind Sie verfügbar?
pamela sillah
Gibt es eine andere Möglichkeit, dies OHNE Plugins zu tun?? Bitte helfen Sie
franck
Hallo Leute,
Weiß jemand, wie man verwandte Videos entfernt, wenn ein YouTube-Video am Ende im Video-Galerie-Plugin von Huge IT abgespielt wird?
Ernesto
Wie entferne ich das Bild aus dem Eintrag? Ich möchte, dass die Eingabe in der Videodarstellung erfolgt und kein Bild
Quoterland
Danke, tolles 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
WPBeginner-Mitarbeiter
Nein, dein Vorschaubild wird auf Facebook angezeigt, aber es wird keinen Play-Button haben.
srem
Entschuldigung, ich weiß nicht, warum der Code nicht angezeigt wird.
Mauro Scarpa
Hallo! Tolle Website und Beitrag, ich habe eine Frage: Wenn ich meinen Beitrag dann auf Facebook teile, wird er dann auch mit dem Play-Button angezeigt? Danke
Piet
Tolles Plugin und Tutorial. Anstatt ein Play-Button-Bild anzuzeigen, möchte ich vorschlagen, eine Schriftikone zu verwenden, zum Beispiel von FontAwesome.
WPBeginner-Mitarbeiter
TCB: Wenn Sie das WordPress SEO-Plugin verwenden, können Sie diese Methode ausprobieren. Sobald das Video-Thumbnail-Plugin das Thumbnail-Bild für Ihr Video abgerufen hat, müssen Sie dessen Speicherort in Ihrer Mediathek finden und die URL kopieren. Entfernen Sie danach das Video-Thumbnail-Bild aus dem Beitrag. Klicken Sie im WordPress SEO-Metafeld des Beitragseditors auf den Social-Tab und fügen Sie den Link neben dem Feld für das Facebook-Bild ein.
TCB
Ist es möglich, das Video-Thumbnail als Beitragsbild auf Facebook zu verwenden?
Das wäre großartig, weil ich das Bild nicht als Beitragsbild anzeigen möchte.
Megha Verma
Ich habe ein Problem, da der Play-Button nur beim ersten Beitrag angezeigt wird... wegen der absoluten Positionierung... nicht bei den Bildern anderer Beiträge.
Sutherland Boswell
Tolles Tutorial! Als Entwickler erhalte ich gerne Feedback von Benutzern und arbeite an einfachen Lösungen für die am häufigsten nachgefragten Funktionen. Das Überlagern eines Play-Buttons und das tatsächliche Abspielen des Videos beim Klicken auf die Miniaturansicht sind zwei der am häufigsten nachgefragten Funktionen, aber beide hängen stark vom Theme ab. Das Erlernen der eigenen Modifikation eines Themes kann lohnend sein, also scheuen Sie sich nicht, es auszuprobieren!
PS – Ich hoffe, jeder wird sich die Pro-Version ansehen!
Jesse
Hallo Sutherland.
Ich habe so viel Gutes über Ihr Plugin gelesen und bin begierig darauf, es auszuprobieren.
Wenn Sie jedoch Ihr Plugin zum Scannen von Videodateien verwenden, findet es alle 22 Videos auf der 'Video'-Seite, auf der sie veröffentlicht sind. Das Problem ist, dass es keine Thumbnails findet.
Nachdem ich Ihre verschiedenen Support-Antworten auf ähnliche Probleme sowie Ihre Anweisungen gelesen hatte, versuchte ich herauszufinden, ob mein Theme (Metric, von Grandpixels) ein benutzerdefiniertes Feld verwendet. Ich konnte diese Informationen nicht finden.
Haben Sie Vorschläge, wie das funktionieren könnte?
Danke,
Jesse
Audee
Was ist, wenn ich nur das Beitrags-Thumbnail für Beiträge anzeigen möchte, die unter dem 'Post Format' Video abgelegt sind?
Danke für das Teilen des Artikels über dieses Plugin!
Sutherland Boswell
Sie sollten dem Tutorial folgen können, ersetzen Sie einfach
1-click Use in WordPress
mit
1-click Use in WordPress
Alex
Hallo Sutherland Boswell,
Ich benutze Ihr Plugin für das Detube-Theme. Das Problem ist, dass in diesen Dateien keine <a href="”> Codezeile vorhanden ist: index.php, archive.php, category.php..
Haben Sie eine Idee oder eine Möglichkeit, es im Detube-Theme zum Laufen zu bringen?
Danke im Voraus!
Alex
Ich wäre so froh, wenn jemand eine Idee hätte und meine Frage beantworten könnte. Ich habe viele Stunden daran gearbeitet, diesen Code auf Detube zum Laufen zu bringen, aber bisher ohne Erfolg...
Könnte mir hier bitte jemand helfen?
Ahmad Rafi Maseer
WIE kann man direkt im Thumbnail abspielen, damit der Benutzer nicht zur Beitragsseite gehen muss, um das Video abzuspielen???
WPBeginner Support
Dazu müssen Sie Ihr Theme bearbeiten und anstelle der Anzeige des Thumbnails das Video einbetten.
Admin
Sue Anne
Vielen Dank für die tolle Anleitung zum Einbinden eines Videos und einer Videominiaturansicht auf meinem WordPress-Blog. Es hat ungefähr 5 Minuten gedauert und ich bin kein Technikexperte!
Pali Madra
Hallo!
Tolle Website und einer meiner Lieblingsbeiträge.
Ich hatte eine verwandte Frage. Ich füge Videos hinzu, indem ich die URL in den HTML-Code der Beiträge einfüge, aber ich möchte auch eine Bildunterschrift darunter anzeigen. Ist das ohne Plugin möglich?
Danke im Voraus
Matt
Fantastisches Tutorial. Vielen Dank für die Veröffentlichung!
Tiguan
Der ‚span‘ muss innerhalb der Hyperlink-Tags der Miniaturansicht platziert werden, da sonst der Link über dem Play-Button deaktiviert wird. Der korrekte Code lautet also:
Es ist jedoch ein gutes Tutorial.
WPBeginner Support
Tiguan, danke, dass Sie darauf hingewiesen haben. Wir haben das Tutorial aktualisiert.
Admin
adolf witzeling
Tolles Tutorial.
gottfrid q.
> Dies wird Ihre Benutzer darüber informieren, dass sich ein Video im Beitrag befindet, und sie können auf die Wiedergabetaste klicken, um den Video-Beitrag anzusehen.
Ich möchte Sie nicht enttäuschen, aber der Button (Spin) hat keine Click-Methode.
Wie genau sollte dieser Button funktionieren und wie implementiere ich ihn?
Vielen Dank für Ihre Zeit.
WPBeginner Support
Der Button spielt das Video nicht direkt ab, sondern leitet den Benutzer zur Videoseite weiter. Das gesamte Thumbnail ist mit dem Beitrag verlinkt, der das Video enthält.
Admin
gottfrid q.
Muss der 'span' dann innerhalb der Hyperlink-Tags des Thumbnails platziert werden?
Akash
Und. wie implementiere ich einen Play-Button im GENESIS-Theme? Es gibt keine index.php, archive.php, category.php oder content.php Datei, um den Code hinzuzufügen.
Danke.
WPBeginner Support
Kontaktieren Sie die Genesis-Supportforen.
Admin
Mark McGinnis
Akash, hast du jemals herausgefunden, wie man es mit dem Genesis-Theme implementiert? Ich habe das gleiche Problem…
Danke!
Akash
Aber wie groß wird die Größe des Videothumbnail sein? Wird sie dieselbe sein wie die Bild-Thumbnail, die bereits im Blog eingestellt ist?
WPBeginner Support
Es wird die Standardgröße für Miniaturbilder verwendet. Sie können dies überschreiben, indem Sie Ihre eigene Bildgröße hinzufügen und diese in Ihrer Vorlage verwenden. Wenn Sie beispielsweise eine neue Miniaturbildgröße erstellen und sie video-thumbnail nennen, würden Sie sie in Ihrer Vorlage wie folgt aufrufen:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Admin