サイト改善

YouTubeの「iframe」を「アイキャッチ画像」へ変更してサイトを軽く!【前半】

みなさんこんにちは、すぎです!

前回のこちら

の記事にてYouTubeがサイトを重くしている可能性をみて、アイキャッチに変えようと思います。

※1週間前から咳が続いています。YouTubeが撮影できずすみません。。

ACF(カスタムフィールドを設定)

メニューからカスタムフォールドを選びます。

出したい情報をまとめます。

・YouTubeタイトル
・YouTubeリンク
・アイキャッチ画像
・動画へのリンク

この辺りでしょうか。

タイトル・・・記事のタイトル
リンク・・・すでにACFで実装済み

なので、アイキャッチ画像と、動画へのリンクを追加できるようにします。

まずは「フィールドを追加」から。

フィールドタイプ・・・画像(これは画像を登録したいときに使います。)
フィールドラベル・・・サムネイル画像(これは管理画面の見た目です。)
フィールド名・・・コーディングで呼び出すためのテキストです。
戻り値・・・今回は画像URLにしてください。

設定したら、保存してください。

ここまでで、サムネイル用のACFの設定は完了です。今度は、クリックしたリンク先の設定をします。

もう一度「フィールドを追加」

以下のように設定してください。
フィールドタイプ・・・リンク(リンクを設定したいときに使用。)
フィールドラベル・・・リンク(管理画面に表示)
フィールド名・・・コーディングのときに呼び出すために使用
返り値・・・今回は「リンクURL」としてください。

設定できたら、右上の「変更内容を保存」をクリックしてください。
これでACF側の設定は完了です。

投稿にアイキャッチなどを設定していく

次に、カスタム投稿画面を触ります。

今登録されている全ての投稿に対し、サムネイルとリンクを付与していきます。

全ての動画にリンクとアイキャッチを入れ終えました。

サムネイルについてはデフォルトで設定していなかったものがあったので、それは設定していないようで作っているものを出力しようと思います。

今回はここまでにします。

次回から、ソースコードに反映してTOPページに表示していきます。

ここまでお読みいただきありがとうございました。