賢威の投稿ページのアイキャッチ画像をYouTubeにする方法

※当サイトにはプロモーションが含まれています。

クライアント

賢威の投稿ページのアイキャッチ画像をYouTubeにしてくれ！

にゃテック

おけまるだにゃ。

ワードプレステーマの“SWELL”や“JIN:R”には、投稿ページのアイキャッチをYouTube動画に置き換える機能が用意されています。

しかし、WordPressテーマ「賢威」には、その機能は搭載されていません。

そこで今回は、賢威の投稿ページにおいて、特定のページだけアイキャッチをYouTubeの動画に差し替える方法をまとめてみました。

実際にアイキャッチをYouTubeにしている記事はこちら

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：6.7.x
PHPバージョン：8.3.x
サーバー：さくらインターネット

この記事の目次

賢威の投稿ページのアイキャッチ画像をyoutube動画にする方法

賢威の投稿ページのアイキャッチ画像をyoutube動画にする方法

賢威の投稿ページのアイキャッチ画像をyoutube動画にする方法についてです。

①親テーマにあるcontent-post.phpをダウンロードする

（WinSCPやFileZillaなどの）FTPソフトを使用して、ローカルホスト（自分のパソコン）に、親テーマにあるcontent-post.phpをダウンロードします。

なお、content-post.phpのファイルは、下記のフォルダに格納されていると思います（※さくらインターネットの場合）。

/home/（あなたが契約した名前）/www/（あなたが作成したフォルダ名）/wp-content/themes/keni80_wp_standard_all_202403231915/template-parts/content-post.php

content-post.phpをドラッグ＆ドロップ

※通常、賢威の親テーマは「keni80_wp_standard_all_（日付＋時間）」という形式になっています

WinSCPのダウンロード方法・使い方について

②content-post.phpの内容を編集する

content-post.phpの25～44行目付近に記載されている下記の箇所を探します。

賢威｜content-post.php

そして、次のコードに書き換えます。

PHP

<div class="article-body" itemprop="articleBody">
<?php
// 追加：YouTube URL（カスタムフィールド）を取得
$youtube_url = trim((string) get_post_meta(get_the_ID(), 'keni_nya_youtube', true));

if ($youtube_url) {
// YouTubeを優先表示（画像の代わり）
$embed = wp_oembed_get($youtube_url);

if ($embed) {
echo '<div class="article-visual article-visual--youtube">';
echo $embed;
echo '</div>';
} else {
// フォールバック：URLだけ出す（削除OK）
echo '<p><a href="'. esc_url($youtube_url) .'" target="_blank" rel="noopener">YouTubeを開く</a></p>';
}

} elseif (has_post_thumbnail() && keni_is_thumbnail()) {
// 既存：アイキャッチ画像表示
$url_thumbnail = keni_get_the_post_thumbnail_url();
$arr_image_size = keni_get_image_size($url_thumbnail);
$thumbnail_id = get_post_thumbnail_id(get_the_ID());
$image_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if (empty($image_alt)) $image_alt = strip_tags(get_the_title());
?>
<div class="article-visual" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="<?php echo esc_url($url_thumbnail); ?>" alt="<?php echo esc_attr($image_alt); ?>"
width="<?php echo esc_attr($arr_image_size['width']); ?>"
height="<?php echo esc_attr($arr_image_size['height']); ?>">
<meta itemprop="url" content="<?php echo esc_url($url_thumbnail); ?>">
<meta itemprop="width" content="<?php echo esc_attr($arr_image_size['width']); ?>">
<meta itemprop="height" content="<?php echo esc_attr($arr_image_size['height']); ?>">
</div>
<?php } ?>

実際に書き換えたコードを見るとこんな感じになります。

賢威｜content-post.php書き換え

③子テーマ内にtemplate-partsフォルダを作成する

FTPソフトを使用して、子テーマ内に「template-partsフォルダ」を作成します。

template-partsフォルダの作成

※作成するのは「子テーマ」の方です。また、ファイル名は半角です。

④修正したcontent-post.phpを子テーマにアップロードする

コードを追加（編集）した、content-post.phpを先程作成した「template-partsフォルダ内」にアップロードします。

content-post.phpをアップロード

にゃのらいと

アップロードが完了したら、この時点でサイトが正常に表示されているかを確認するにゃ。

もし、画面が真っ白になる・エラーが表示されるなどの不具合が発生した場合は、いまアップロードしたcontent-post.phpを削除してください。

親テーマのファイルには手を加えていないため、該当ファイルを削除すれば、基本的には元の状態に戻ります。

⑤CSSで埋め込むYoutubeの見た目を調整する

CSSを使って、アイキャッチ画像にしたYoutubeの（サムネイル）の見た目を調整します。

CSS

.article-visual--youtube {
position: relative;
padding-top: 56.25%; /* 16:9 */
}

.article-visual--youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

これらのCSSは、“この投稿のみに表示するCSS/JS”や“追加CSS”に記述します。