[ 解決済 ] 【機能追加要望】カードに表示されるアイキャッチ部分に動画を表示したい

[橋本正人（masato-hashimoto）]

■ 期待する動作
「Lightning G3 Pro Unit」で「evergreen」を使って、不動産を紹介するサイトを作っています。投稿内で動画で物件を紹介することが多いので、カードを使った時にアイキャッチ画像が表示される部分に、YouTubeにアップした動画を表示したいです。もしかしたら現状でも何らかの方法を使えばできるのかもしれませんが、あれこれ調べてもわからなかったので、フォーラムに投稿させていただきました。

■ 自分で試した事
Lightningだけで動画をアイキャッチに表示させる方法がわからなかったので、「Featured Video Plus」というプラグインを入れて、アイキャッチに動画を表示させるようにしました。そうするとアイキャッチ画像がカードの上部に表示され、その下にYouTube動画のサムネイルが表示され、動画をクリックすると再生が始まりました。

これはこれで良いのですが、アイキャッチ画像がすごくズームアップされた感じになったので確認してみたら、動画の下の部分まで含めて縦長にアイキャッチ画像が引き延ばされた形で使用され、その下部の部分に別レイヤーで載せるような感じで動画が表示されていました。

アイキャッチ画像は横1280x縦720の16:9で作成していたのですが、このアイキャッチ画像を引き延ばされた形ではなく、通常の形に表示させるため、縦を倍にしてあえて横1280x縦1440にしたところ、いい感じで上にアイキャッチ画像、下に動画という形で表示されました（写真）。

ひとまずこれで初期の目的は達したのですが、「Featured Video Plus」というプラグインが「最終更新: 5年前」で、「使用中の WordPress バージョンで未検証」（バージョンは5.9を使用中）なので、できればもう少し最近のプラグインを使いたいと思ったのですがアイキャッチに動画を表示できるプラグインが他に見当たらなかったこともあり、ベクトル社さんのフォーラムに投稿して質問させていただいた次第です。

「Featured Video Plus」を使わずに、カード型のアイキャッチ部分に動画を表示することができる方法があれば、お教えくだされば幸いです。

どうぞよろしくお願いいたします。

• このトピックは橋本正人（masato-hashimoto）が2年、 5ヶ月前に変更しました。
• このトピックは橋本正人（masato-hashimoto）が2年、 5ヶ月前に変更しました。
• このトピックは橋本正人（masato-hashimoto）が2年、 5ヶ月前に変更しました。
• このトピックは石川＠Vektor,Inc.が2年、 5ヶ月前に変更しました。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

アイキャッチの差し替えではなく、
アイキャッチを非表示にして、別途差し込む形でご対応するのが一番良いと思います。
一番無難なのは各記事のカスタムフィールドに YouTube の埋め込みタグを登録して、それを投稿の情報に add_action で追加する形です。

投稿一覧の高度なカスタマイズ

• この返信は2年、 5ヶ月前に石川＠Vektor,Inc.が編集しました。
• この返信は2年、 5ヶ月前に石川＠Vektor,Inc.が編集しました。

[橋本正人（masato-hashimoto）]

石川さま、さっそくの返信、ありがとうございます。「アイキャッチを非表示にして別途差し込む形で対応し、各記事のカスタムフィールドに YouTube の埋め込みタグを登録して、それを投稿の情報に add_action で追加」とのこと、承知しました。方向性が見えてきて良かったです。少し時間がかかるかと思いますが、やってみます。解決できましたら、また報告させていただきます。

[石川＠Vektor,Inc.]

すみません、勘違いしていました。
投稿部分 add_action でなく、add_filter なのでもしかしたら、
フィルターフックで iframe が許可されていなくて地図表示が出来ないかもしれません。

確認してまた返信いたします。

[石川＠Vektor,Inc.]

Lightning 14.22.1 で iframe が使えるように変更いたしました。
子テーマのfunctions.phpなどに下記のように書けば表示されると思います。

add_filter(
	'vk_post_options',
	function ( $options, $post ) {

		// 表示したい投稿タイプを条件分岐で指定.
		if ( 'post' === get_post_type() ) {

			/************************************
			 * カスタムフィールドの値など独自に表示したい要素を一旦 $insert_html に格納する.
			 */
			$body_append_html = '<iframe width="560" height="315" src="https://www.youtube.com/embed/kQyF4FeSdP0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

			/************************************
			 * 投稿１件分の 最後に追加
			 * （最初に追加する場合は body_append の部分を body_prepend に変更 ）.
			 */
			$options['body_append'] .= $body_append_html;
		}

		return $options;
	},
	10,
	2
);

[橋本正人（masato-hashimoto）]

石川さま

ありがとうございます。お教えくださった内容を元に、Advanced Custom Fieldsでタイプ「oembed」のフィールドを「youtube_url」と名付けて作成し、各投稿でYouTubeのURLを入力して、以下のフィルターフックで表示させたら、投稿一覧に動画がある時だけ動画がカード下に表示されました！

<?php
add_filter(
‘vk_post_options’,
function ( $options, $post ) {
// 表示したい投稿タイプを条件分岐で指定.
if ( ‘post’ === get_post_type() ) {
/************************************
* カスタムフィールドの値など独自に表示したい要素を一旦 $insert_html に格納する.
*/
$body_append_html = ”;
// 動画がある場合
if ( $post->youtube_url ) {
$body_append_html = get_field( “youtube_url” );
}

/************************************
* 投稿１件分の 最後に追加
* （最初に追加する場合は body_append の部分を body_prepend に変更 ）.
*/
$options[‘body_append’] .= $body_append_html;
}

return $options;
},
10,
2
);

?>

ありがとうございました。Lightningもベクトル社の皆さまも、大好きです！！！
今後とも、どうぞよろしくお願いいたします。

• この返信は2年、 5ヶ月前に橋本正人（masato-hashimoto）が編集しました。

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿