2020年4月4日 WP5.4
WP5.4にしてみたところ、ブロックエディタがかなり良くなっていました。
PDFのダウンロードリンク、表にthが追加、など完全に実用域。これはもう真面目に取り組まなくては。
thが上にしか付けられない、、、あいかわらず、表はかゆいところに手が届かないです。
で、ユーチューブ動画の表示もテーマ依存ではなくきれいに表示してくれます。
下記の関数と思いっきりバッティングするので、ブロックエディタを使う場合は下記関数で適用されるCSSに細工が必要です。
ブロックエディタで編集すると「wp-block-embed__wrapper」みたいなクラスが付くので、こんな感じでリセットすると良いようです。
.wp-block-embed__wrapper .iframe-yt {
position: static;
padding-top: 0;
height: auto;
}IEは「position: initial」「position: unset」などではリセットできませんので、「static」と明示します。
動画表示の整形方法
「ユーチューブの動画を埋め込みたい！」という要望はとても多いのですが、お客様にとって簡単、スマートな方法がなかなか無いです。
ビジュアルエディタにURLを貼ればとりあえずプレーヤーは表示されますが、縦横比が維持されないケースが多いと思います。
縦横比はCSSで制御することになりますが、iframeをdivなどで囲むしかないっぽいのが痛い。
<div class="movie-iframe">動画url</div>クラスも含めてお客様が記述するのはなかなかハードルが高い、、、
１：入力フォームを用意
カスタムフィールドでURLを入れるフォームを用意してあげれば簡単ですが、表示される場所が固定されてしまいます。
動画紹介の投稿がそれなりにあるのならフォーマットが決まっていた方が良いと思いますが、ブログの中にたまーに登場する、程度だとこれは窮屈。
２：ユーチューブのURLを自動で囲んじゃう
ビジュアルエディタにユーチューブの動画URLが挿入されたら、自動で「class=”iframe-yt”」などで囲んでしまう方法。
/* ---------- ユーチューブ urlを自動で囲う ---------- */
function yt_url( $the_content ){
if( is_singular() ){
$the_content = preg_replace( '/<iframe title=/i', '<p class="iframe-yt"><iframe title=', $the_content );
$the_content = preg_replace( '/<iframe loading="lazy" title=/i', '<p class="iframe-yt"><iframe loading="lazy" title=', $the_content );
$the_content = preg_replace( '/<\/iframe>/i', '</iframe></p>', $the_content );
}
return $the_content;
}
add_filter( 'the_content', 'yt_url' );※ビジュアルエディタの「ユーチューブのURLが挿入されたら、自動でiframe～/iframeで囲う」機能を利用しています。
※ACFプラグインのWysiwigカスタムフィールドでは動作しないようです。なんでだ？
the_contentだからか、、、
※pで囲っているのは、divだとURLを複数記述した際にHTML構文が崩れるためです。
※URLの貼り付けのみに対応したのは、iframeの場合「貼り付けろ」と提示されるソースコードが一定ではなく、動作しない場合があるためです。すべてのiframeに適用してしまうと、マップやアフェリエイトのiframeにも作用してしまいますので。
※「iframe title=」で始まる構文を見つけてdivを挿入する動作です。同じ構文のiframeがあるとユーチューブでなくとも挿入するので、ブログカードなどで誤動作しちゃいます。
「youtube」などの単語があったら、という条件を付ければいいと思いますが、jsなりjQueryなりが必要になりそうです。
※WP5.5xくらい？からデフォルトで「 loading=”lazy”」が入るようになった気がするので対応
やっぱりちょっと不安定。ショートコードにした方が良いかな。
