WP (WordPress)自作テーマチャレンジ : その後

昨年の初めての緊急事態宣言時に思い立ってWordPressの自作オリジナルテーマを作りました。

▼こちらが当時の記録
・WP (WordPress)自作テーマチャレンジ : Day-0
・WP (WordPress)自作テーマチャレンジ : Day-1 (トップページデザイン)
・WP (WordPress)自作テーマチャレンジ : Day-2 (トップページコーディング)
・WP (WordPress)自作テーマチャレンジ : Day-3 (WPテーマ用にコーディング)
・WP (WordPress)自作テーマチャレンジ : Day-4 (その他コーディング〜完成)

現在もこのブログに使っているのがそれなのですが、WordPress本体をアップデートしていくうちに、いつの間にかページに埋め込んでいたYouTube動画が白紙状態になっていたのに気づきました。
その期間中ページを訪れて頂いた方には申し訳ありませんでした…。

ブログの編集にビジュアルエディタ（Gutenberg: グーテンベルク）を使っているものの、作成したオリジナルテーマではそのあたりを考慮した記憶がなく、おそらくその辺りが原因だろうと目星はついていたので、調べて対策をしました。

薄々原因がわかっていたので簡単に調べがつくだろうと思っていたものの、検索するワードが的を得ていなかったのか、少々苦労しましたので記録しておきます。

対策した対象は、function.phpとstyle.css。

まずfunctions.phpについては、新たに下記のコードを追加しました。（追記する場所は、新たに行をもうければどこでも良い）

add_theme_support( 'responsive-embeds' );

以前に「埋め込んだYouTube動画のはみ出し」ということでゴニョゴニョしていましたが、YouTubeやTwitter、Instagramなどの埋め込み系はこれ一発で大丈夫なようですね。

次にstyle.css。

上のリンク先で記載していた下記のコードを、

.wp-block-embed-youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.wp-block-embed-youtube iframe,
.wp-block-embed-youtube object,
.wp-block-embed-youtube embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

下記のように書き換えました。

.wp-block-embed__wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

今のところこれで問題なく表示されるようになりました。

対策としては簡単な作業でしたが、この情報に至るまでにググっては諦めを繰り返し2、3日かかったという…。

そもそもまだGutenbergの作法をきっちりとおさえられていないので、そのうちにまた何か起こりましたらその時に。