初学者がWordpressでyoutubeの動画をレスポンシブに自動でしてみた。

どうも　Wordpress歴2日のぽこひで　です(･∀･)b

今やっていることが、あるブログのSEOをしっかりして、集客率をどう上げるかー？みたいなのをやってる感じで昨日はタイトルの構成を変えたり、初心者ながら細々と頑張ってます。そのブログがyoutubeの動画一つごとに一記事かいて発信してるみたいな感じで、内容をかなりぼかしましたが、各記事に必ずと言ってもいいほどyoutubeの動画が貼り付けられてるのでそれをレスポンシブにしてみようと思います。

最初の僕

「youtubeのiframeをレスポンシブにするなんて簡単やんけ」

「iframeをブロックで囲んでやってそれを4:3とかの比率にして中身100%にすればええやん。」

<div class="iframe_wrapper">
  <iframe ....... ></iframe>
</div>

.iframe_wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.iframe_wrapper > iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

「これで一発やん？」　と思っていたら...

このブログ、初心者が更新するんですよね。

初心者がわざわざ記事投稿するときに

<iframe ....>

</iframe>

すら書いてくれない。ましてや、divでclass付きで書いてくれなんて頼めたもんじゃない。youtubeのリンクを直張りのときもあるくらい。というわけで早速迷いました(ー'`ー ; )

「よし！javascriptで動的にiframeタグを見つけてそれをclass付きdivで囲んでやろう！Σ(･∀･三･∀･)ｺﾚﾊｷﾀ!」

ググる...

「どうやってWordpressに自作javascript入れるん。。無理(´･ω･`)」

てなわけで色々悩んで、とりあえず記事部分を出力してる部分を見つけるかーって適当に管理画面のphpファイルを探していたら見つけた！この辺は玄人はどうやって見つけてるかわからないけど、初心者だったので初心者なりに、記事ページを囲んでるclass名を適当に覚えておいて各phpファイルを開いてctrl + f で文字列検索して見つけました。面倒だよね。早く構造理解します。。

早速そのソースコードを読んでみると...　

「あれ？なんか　the_content()って入力してる部分じゃね？」ってなったので、ｷﾀ━━(ﾟ∀ﾟ)━(∀ﾟ )━(ﾟ　 )━(　　)━(　ﾟ)━( ﾟ∀)━(ﾟ∀ﾟ)━━!!!

たしか、get_the_content()で記事の中身を取得できるから、その中身をゴリゴリPHP書いて正規表現でiframeの場所を見つけて、それをdivで囲んじゃおう！よーしやったれー！

<?php
  $content = get_the_content();
  // ここでcontent内のiframeをdivで囲む作業
?>

<?php echo $content; ?>

「これでいいだろ。更新　→　ブラウザリロード。。。(; ￣ェ￣)んっ？」

...

さっきまでなんか文字の大きさちっさくなった。なんでや。

ググる...

the_content関数にはいろんなfilterがかかってるらしく、ただの文字列をpタグで囲んでくれたり、youtubeの直張りリンクを勝手にiframeの埋め込み形式にしてくれたりするらしい！

「なんやねん！それ！初心者に優しいやん！！あれ？これってことは、昨日やってadd_filterで新しく追加すればいんじゃね？」

てなわけでかきました。

<?php
    add_filter ('the_content', 'the_custom_content', 9);
    function the_custom_content($content) {
        $pattern = '/(<iframe .+?><\/iframe>)/';
        $replace = '<div class="iframe_wrapper">${1}</div>';
        return preg_replace($pattern, $replace, $content);
    }
?>

はいーこれでなんとか完成しました。なんかadd_filterで関数にfilterをかけても、その実行順序がどう決まってるのかはよくわかんないけど、入ってきた$contentを見てみるとすでにiframe化されたのでラッキーと思いながら、iframeを見つけてやってそれをシンプルにdivで囲んで返してるだけ。これでdivで自動で囲めたのであとは最初に書いたcssを適用させたら...レスポンシブになりました！！

ていう地味に嬉しかった話です。まだ自分のwordpressスキルが低すぎて発信するほどの気づきが得られないけど、初学者っぽい気づきはちょこちょこ得られるからやっててなんか楽しい。