YouTubeの動画サムネイルをサイトのフロントページに表示している人気のサイトをご覧になったことがありますか？ YouTube、Vimeoなどのサイトで動画チャンネルを運営しているなら、ブログのフロントページやアーカイブページに動画を含むすべての投稿に動画サムネイルを表示できます。この記事では、WordPressにYouTube動画のサムネイルを追加する方法を紹介します。
動画サムネイルとWordPress投稿サムネイル
WordPressにはアイキャッチ画像または投稿サムネイルを追加するための組み込み機能があり、ほとんどのWordPressテーマはこの機能をサポートしています。ただし、YouTubeからの動画コンテンツを強調したい場合は、動画サムネイルでそのコンテンツを表示したいでしょう。この記事では、デフォルトのWordPress投稿サムネイル機能を使用して、それを実現する方法を説明します。
WordPressで動画サムネイルプラグインを設定する
まず、Video Thumbnails プラグインをインストールして有効化する必要があります。プラグインを有効化した後、プラグインの設定を行うために 設定 » Video Thumbnails に移動する必要があります。
設定画面では、サムネイルをメディアライブラリに保存することをお勧めします。これにより、サイトへの外部HTTPリクエストが減り、ページの読み込みが速くなります。投稿タイプセクションの下には、プラグインが投稿、ページ、およびウェブサイトにカスタム投稿タイプがある場合はカスタム投稿タイプを表示します。プラグインに動画リンクをスキャンさせたい投稿タイプを選択してください。このページでの最後のオプションは、カスタムフィールドを選択することです。WordPress用のいくつかの動画プラグインは、カスタムフィールドに動画URLを保存します。そのようなプラグインを使用している場合は、ここにそのカスタムフィールドを入力する必要があります。その後、変更を保存ボタンをクリックしてください。
設定ページには、プロバイダータブも表示されます。動画の共有にVimeoを使用している場合は、Vimeoでアプリを作成し、クライアントID、クライアントシークレット、アクセストークン、アクセストークンシークレットの値をここに入力する必要があります。
一括操作タブでは、公開済みの投稿をスキャンして動画のサムネイルを生成できます。このプラグインには、すべての動画サムネイルをクリアして投稿の添付ファイルから削除するボタンも用意されています。
WordPress投稿で動画サムネイルを作成する
プラグインの設定が完了したので、WordPressの投稿に動画URLを追加して動画サムネイルを作成しましょう。そのためには、WordPressの投稿を作成または編集し、投稿編集エリアに動画URLを追加する必要があります。投稿を公開すると、プラグインが動画サムネイルを生成し、投稿に追加したことがわかります。
WordPressテーマで動画サムネイルを表示する
動画サムネイルプラグインは、WordPressの投稿サムネイル機能を使用します。ほとんどのWordPressテーマは、投稿サムネイルを自動的に表示するように設定されています。これは、テーマが動画サムネイルを投稿コンテンツまたは抜粋とともに自動的に表示することを意味します。ただし、テーマが動画サムネイルを表示しない場合は、テーマファイルを編集し、サムネイルを表示したいテンプレートにこのコードを追加する必要があります。
<?php the_post_thumbnail(); ?>
WordPressで動画サムネイルに再生ボタンを追加する方法
WordPress の投稿に動画サムネイルを正常にキャプチャして表示できるようになったので、通常の画像サムネイルと動画サムネイルを区別したい場合があります。これにより、ユーザーは投稿に動画があることを認識し、再生ボタンをクリックして動画投稿を表示できます。条件付きタグを使用して、動画サムネイルと通常の投稿サムネイルを区別し、再生ボタンを追加する方法を説明します。
この方法を使用するには、動画投稿を特定のカテゴリ（例：動画）の下に公開していることを確認する必要があります。次に、テーマのテンプレートファイル（index.php, archive.php, category.php, or content.phpなど）で、次のコード行を探します。
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
次に、このコードを次のコードに置き換える必要があります。
<?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; ?>
このコードは、<span class="playbutton"?></span> を、ビデオカテゴリに分類された投稿の投稿サムネイルの後に追加します。次のステップは、メディア » 新規追加画面から画像ファイルをアップロードすることです。この画像が再生ボタンとして使用されます。画像ファイルをアップロードしたら、画像の横にある編集リンクをクリックして、画像ファイルの場所をメモしてください。
最後のステップは、再生ボタンを表示することです。再生ボタンをビデオサムネイルに表示および配置するためにCSSを使用します。そのためには、**外観 » エディター**をクリックして、このCSSコードをテーマまたは子テーマのスタイルシートにコピー＆ペーストする必要があります。
.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;
}
背景画像のURLを、以前にアップロードした再生ボタン画像ファイルのURLに置き換えるのを忘れないでください。これで完了です。ビデオサムネイルファイルには再生ボタンが表示されるはずです。
この記事がWordPressでサムネイルを使ってYouTube動画を強調表示するのに役立ったことを願っています。フィードバックや質問については、コメントを残すか、Twitterでフォローしてください。
Peter
まだ動くなんて驚きです！
しかし、YTプレイリストからサムネイルが取得できない理由を知っている人はいますか？
プレイリストを含む投稿がいくつかありますが、画像は常に灰色の「ビデオが見つかりません」という画像です。
WPBeginnerサポート
そのプラグインは動画用に作成されており、プレイリスト全体用ではありません。プレイリスト機能を含めるには、プラグインの作者に問い合わせる必要があります。
管理者
eddie art
iframe埋め込みコードの動画にサムネイル画像を取得するために、これは機能しますか？
WPBeginnerサポート
それがサポートされているかどうかは、プラグインのサポートに確認する必要があります。
管理者
ファイサル・イクバル
functions.phpのどこにそのコードを貼り付ければいいですか？私は技術者ではありません。誰か助けてください！
モハメド
こんにちは
このプラグインを使おうとしていますが、うまくいきません。サポートフォーラムの開発者も未解決のトピックのほとんどに答えてくれません。「動画のマークアップをテストする」を試すと、デバッグページでこのエラーが表示されます：
サムネイルが見つかりましたが、ソースサーバーに存在しない可能性があります。以下のURLをウェブブラウザで開いてエラーが返される場合、ソースは無効なURLを提供しています。サムネイルURL：
問題は何ですか？
ネオン・エマニュエル
3つのパラメータが必要な場合はどうなりますか？1つはサムネイルがない場合のフォールバック、2つ目は動画の場合のフォールバック（つまり、再生ボタンのオーバーレイを追加する）、3つ目は動画にオーバーレイ再生アイコンが付いている場合のフォールバックです。
ブライアン
このコードはAdobe Muse/Dreamweaverでも機能しますか？
ジョン
こんにちは
こちらを実装していただける開発者を探しています。ご都合はいかがでしょうか？
パメラ・シラー
プラグインなしでこれを行う他の方法はありますか？？助けてください
franck
皆さん、こんにちは。
Huge IT のビデオギャラリープラグインで、YouTube 動画が最後まで再生されたときに、関連動画を削除する方法を知っている人はいますか？
Ernesto
エントリ内の画像を取り除くにはどうすればよいですか？ビデオ表示に入力したいのですが、画像は不要です。
Quoterland
ありがとうございます、素晴らしいチュートリアルです。
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スタッフ
いいえ、サムネイルはFacebookに表示されますが、再生ボタンは表示されません。
srem
コードが表示されない理由がわかりません。
Mauro Scarpa
こんにちは！素晴らしいウェブサイトと投稿です。質問があります。もし投稿をFacebookで共有したい場合、再生ボタン付きで表示されますか？ありがとうございます。
ピエト
クールなプラグインとチュートリアルです。再生ボタンの画像を表示する代わりに、例えばFontAwesomeのようなフォントアイコンを使用することを提案したいと思います。
WPBeginnerスタッフ
TCB：WordPress SEOプラグインを使用している場合は、この方法を試すことができます。ビデオサムネイルプラグインがビデオのサムネイル画像をフェッチしたら、メディアライブラリ内のその場所を見つけてURLをコピーする必要があります。その後、投稿からビデオサムネイル画像を削除します。投稿エディタのWordPress SEOメタボックスで、ソーシャルタブをクリックし、Facebook画像フィールドの隣にリンクを貼り付けます。
TCB
Facebookで投稿画像として動画のサムネイルを使用することは可能ですか？
これは素晴らしいことです。なぜなら、画像を表示画像として表示したくないからです。
メーガ・ヴァルマ
問題が発生しています。再生ボタンが最初の投稿にのみ表示され、絶対位置のため、他の投稿の画像には表示されません。
サザランド・ボスウェル
素晴らしいチュートリアルです！開発者として、ユーザーからのフィードバックを受け取り、最も要望の多い機能のための簡単なソリューションに取り組むのが好きです。再生ボタンをオーバーレイして、サムネイルをクリックしたときに実際に動画を再生できるようにすることは、最も要望の多い機能の2つですが、どちらもテーマに大きく依存します。自分でテーマをカスタマイズすることを学ぶのはやりがいのあることなので、ぜひ試してみてください！
PS – 皆さんにプロ版をチェックしてもらえると嬉しいです！
Jesse
こんにちは、サザーランドさん。
あなたのプラグインについて良い話をたくさん読みましたので、試すのが待ちきれません。
ただし、プラグインを使用して動画ファイルをスキャンすると、投稿されているすべての22個の動画が「video」ページの下に見つかります。問題は、サムネイルが見つからないことです。
あなたの様々なサポートへの返信や指示を読んだ後、私のテーマ（metric、grandpixels製）がカスタムフィールドを使用しているかどうかを調べようとしました。この情報を見つけることができませんでした。
これを機能させるための提案はありますか？
ありがとう、
Jesse
Audee
「動画」の投稿フォーマットに分類された投稿の投稿サムネイルのみを表示したい場合はどうなりますか？
このプラグインに関する記事を共有していただきありがとうございます！
サザランド・ボスウェル
チュートリアルに従えば、置き換えるだけで
1-click Use in WordPress
で
1-click Use in WordPress
Alex
Sutherland Boswell様
Detubeテーマであなたのプラグインを使用していますが、問題は、index.php、archive.php、category.phpなどのファイルに``コード行がないことです。
何かアイデアや、Detubeテーマで動作させる方法があれば教えていただけますか？
事前に感謝します！
Alex
誰かアイデアがあって、私の質問に答えてくれるととても嬉しいです。このコードをDetubeで動作させるために何時間も作業しましたが、今のところ成功していません…
どなたか助けていただけますか？
Ahmad Rafi Maseer
サムネイルで直接再生するにはどうすればよいですか？ユーザーは動画を再生するために投稿ページに移動する必要はありませんか？？
WPBeginnerサポート
そのためには、テーマを編集し、サムネイルを表示する代わりに動画を埋め込む必要があります。
管理者
Sue Anne
WordPressブログに動画と動画サムネイルを掲載する方法についての素晴らしい指示を本当にありがとうございました。技術者ではありませんが、約5分で完了しました！
Pali Madra
こんにちは！
素晴らしいウェブサイトで、私のお気に入りの投稿の一つです。
関連する質問があります。投稿のHTMLコードにURLを貼り付けて動画を追加していますが、その下にキャプションも表示したいと考えています。プラグインを使わずに可能でしょうか？
事前に感謝いたします
Matt
素晴らしいチュートリアルです。投稿していただきありがとうございます！
ティグアン
'span'は、サムネイルのハイパーリンクタグ内に配置する必要があります。そうしないと、再生ボタンの画像リンクが無効になります。したがって、正しいコードは次のようになります。
しかし、良いチュートリアルです。
WPBeginnerサポート
Tiguan、ご指摘ありがとうございます。チュートリアルを更新しました。
管理者
adolf witzeling
素晴らしいチュートリアルです。
gottfrid q.
> これにより、ユーザーは投稿に動画があることを知り、再生ボタンをクリックして動画投稿を表示できます。
がっかりさせたくないのですが、ボタン（スピン）にはクリックメソッドがありません。
このボタンは具体的にどのように機能するはずでしたか？また、どのように実装すればよいですか？
お時間をいただきありがとうございます。
WPBeginnerサポート
ボタンはそこでビデオを再生しませんが、ユーザーをビデオページに誘導します。サムネイル全体がビデオを含む投稿にリンクされています。
管理者
gottfrid q.
サムネイルのハイパーリンクタグの中に「span」を配置する必要があるのですか？
Akash
そして、GENESISテーマに再生ボタンを実装する方法は？コードを追加するためのindex.php、archive.php、category.php、またはcontent.phpファイルはそこにありません。
ありがとう。
WPBeginnerサポート
Genesisサポートフォーラムに問い合わせてください。
管理者
Mark McGinnis
Akash、Genesisテーマを使用して実装する方法はわかりましたか？私も同じ問題を抱えています…
ありがとうございます！
Akash
しかし、動画サムネイルのサイズはどうなりますか？ブログですでに設定されている画像サムネイルと同じサイズになりますか？
WPBeginnerサポート
デフォルトのサムネイルサイズが使用されます。独自の画像サイズを追加することでこれを上書きし、テンプレートで使用できます。たとえば、新しいサムネイルサイズを作成してvideo-thumbnailと名付けた場合、テンプレートでは次のように呼び出します。
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
管理者