[WordPress] Gutenberg対応 埋め込みブロックのYouTubeにオプションを追加する

WordPress本体PHP, YouTube

趣味と実益を兼ねて以前から作っては放置を繰り返している私の音楽系サイトですが、ドメインまで取得して本格的に新規サイトとして始めるんだったらやはり先の事を考えてGutenbergに対応した形で作った方がいいだろう、と思い立ってからはや数ヶ月が経過しました…

今の気持ちをぶっちゃけるとGutenbergを標準エディタにするとか本当に厄介な事をしてくれたもんだというのが正直なところですが、Gutenbergがダメダメかと言うとそういうわけでは無く、むしろこれはこれでありなんじゃないかと思っています。ただ、AMP同様に時期尚早だったんじゃないかとか、ユーザーが選択出来る形にすればまた話は違ったんじゃないかというだけで。

そんな話はさておき、当エントリーではGutenbergの埋め込みブロックを使って挿入したYouTubeにオプションを追加する方法について書いてみたいと思います。

埋め込みブロックのYouTubeにオプションを追加する

現在のYouTubeでは関連動画を非表示にする事が出来なくなりましたが、それでもrel=0のオプションをつける事によって同じチャンネル内の動画に範囲を限定する事は可能なので、全く関係無い動画を関連動画として表示されるよりは遥かにマシだろうと思い、これまでは埋め込み用のコードに手作業でオプションを追加して貼り付けていました。

その件に関してはこちらのエントリーが参考になれば幸いです。

動画を貼り付けるだけなら短縮URLでも出来ますが、オプションをつけるとエラーになったり追加したはずのオプションが消されてしまったりするんですよね。

今後はGutenbergの埋め込みブロックを使用する方向で

Gutenbergにはメディアを簡単に埋め込めるよう専用のブロックが用意されています。

WordPress Gutenberg 埋め込みブロック

埋め込みたいメディアの種類を選択した後はURLをコピペして埋め込みボタンをクリックするだけという手軽さ。慣れると非常に便利なので私としてもこれを利用しない手は無いと思っています。

WordPress Gutenberg 埋め込みブロック YouTube

なのにわざわざカスタムHTMLブロックを使って埋め込み用のコードを貼り付けるのってやっぱ何か違いますよね?でもこの方法だと関連動画のオプションがつけられない、さてどうしたもんでしょ…

という事でようやく本題に入りますが、本文中にYouTubeの動画が貼り付けてあった場合に自動でオプションを追加してくれるようカスタマイズしてみました。てか何で今までこの方法を思いつかなかったんだろう…

functions.phpにコピペで追加

当エントリーで紹介する方法はかなり簡素化してあるので、使用しているテーマや環境によっては不具合が出る可能性もある事をご了承下さい。

作業としては以下のコードをfunctions.phpの最後にコピペで追加するだけです。

本文中のYouTubeにrel=0のオプションを追加する
function add_youtube_option( $ret ) {
	return str_replace( '?feature=oembed', '?rel=0', $ret );
}
add_filter( 'the_content', 'add_youtube_option', 11 );

万が一WordPressが真っ白になっても「またやっちまったョ HAHAHA!」てな感じで慌てず騒がずクールに対応して下さいね?たぶんそんな事にはならないと思いますけど…

LuxeritasとLightningで正常に機能する事を確認しています。尚、Cocoonにはデフォルトでこの機能が実装されているようなのでオプションによっては二重になる事に注意です。

カスタマイズ内容の簡単な説明

Gutenbergの埋め込みブロックを使用してYouTubeの動画を挿入した場合、短縮URLでも動画ページのURLでも以下のフォーマットに変換されるようです。

埋め込みブロックでYouTubeを挿入した場合のURL

src="https://www.youtube.com/embed/12345678901?feature=oembed"

そこで先ほどのコードでは単純に本文中の「?feature=oembed」という文字列を「?rel=0」に置き換えるという事をしています。

もし、このカスタマイズによって動画がうまく表示されなくなった場合は、該当箇所をまるっと置換するのではなく以下のような形にすれば恐らく大丈夫ではないかと思います。

feature=oembedを残す場合

return str_replace( '?feature=oembed', '?feature=oembed&rel=0', $ret );

本来なら正規化を使って間違いなくYouTubeの埋め込みコードである事を確認した上でやるべきなのかもしれませんが、出来るだけコードをシンプルにしたかったという事とこのパラメータはYouTube以外では使われていないようなのでOKだろうという事でそうしています。

striposやpreg_matchを使えばそうした形で実装出来ると思いますが、私のサイトではこれで十分対応出来ているのであえてそこまではしていません。

ヒントはLuxeritasの公式サイトから

実はこの方法はLuxeritasのフィルターフックを使って実装したものを、テーマを限定しないで汎用的に使えるよう少しだけカスタマイズしたものだったります。

参考フィルターフック | Luxeritas Theme

カスタマイズと言ってもthk_contentをthe_contentに置き換えただけなんですけどね…尚、指定可能なパラメータについてはこちらのページを参照して下さい。

参考YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFrame Player API

当エントリーのコードに追加して更にオプションを増やす事も可能です。

YouTube以外にも応用出来そうです

YouTube以外でもこの方法を応用して埋め込みブロックで挿入したメディアにオプションを追加する事は可能だと思いますので、うまく活用していただければ幸いです。