コピペで終了！WordPressテーマ「SANGO」でYouTube動画を自動でレスポンシブにするカスタマイズ方法

WordPressテーマとして人気のある「SANGO」

用意されているショートコードを使えばYouTube動画をレスポンシブ対応にはできます。

ただ、記事を書くたびにいちいちショートコードを追記するのは面倒なんですよね・・・。

また、過去記事にショートコードを追加していく作業も大変です。

ということで、わずか数行のコードを追加するだけでYouTube動画をレスポンシブにする方法を紹介します。

Coco

コピペするだけなので、PHPがわからない人でも大丈夫ですよー！

することはたった3つだけ
おわりに

することはたった3つだけ

YouTube動画をレスポンシブにする手順は以下の3つだけ。

プラグイン「コードスニペット」を使う
コードをコピペする
CSSをコピペする

何にも難しく考える必要はありません。順番に解説しますね。

1：まずは「コードスニペット（Code Snippets）」をインストール

厳密には「function.php」にコード（後述）を書き込めばいいのですが、PHPに詳しくない限り、もともと用意されているファイルをいじるのはあまりオススメしません。

少しでもミスったら画面が真っ白になってしまい、ユーザーはもちろん自分ですらFTPソフトを使用しないとアクセスできなくなります…。

WordPressのプラグイン「コードスニペット（Code Snippets）」なら、プラグイン上で「function.php」に書き込むコードを管理できるので便利です。

それでは、さっそくインストールしていきましょう！

WordPressのダッシュボードを開き、【プラグイン】→【新規追加】→【プラグインの検索】と移動しましょう。

（私の画面にはすでにSnippetsがありますが気にせず）

次の画面で「Code Snippets」と入力しましょう。

「Code Snippets」が表示されるので、【有効化】→【インストール】

（画面ではすでに有効になっていますが気にせず）

インストールが完了したら、あとはYouTube動画をレスポンシブにするコードを入れるだけです。

2：コードを追加しよう

では、コードスニペットに実際にコードを追加します。

ダッシュボードの「Snippets」を選択しましょう。

【Add New】をクリック

タイトルは何でもいいのですが、後で見てわかりやすく「YouTube動画をレスポンシブにする」としておきましょう。

そして、「Code」の部分に以下のコードをコピペしてください。

YouTube動画をdivタグで囲む

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');

他には何も入力しなくてOKです。

コードをコピペしたら、「Save Changes and Activate」をクリックします。

プログラミングがわからない場合は理解が大変かもしれませんが、これは「サイト内のすべてのYouTube動画をdivというタグで囲む」という作業をしています。

さて、お次は動画をレスポンシブにするCSSコードを追記していきましょう。これで最後なので、もうちょっとだけ頑張りましょう！

3：YouTube動画をレスポンシブにするCSSを追記

「divタグで囲んだYouTube動画をレスポンシブデザインにする」という作業をおこないます。

レスポンシブデザインにするには、CSSというウェブ上の見た目を変更する機能を使います。

WordPressの【外観】→【テーマ編集】へ行きましょう。そして、「style.css」に以下のコードを追記します。

YouTube動画をレスポンシブ対応にする

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

MEMO

子テーマを使っている方はそちらに追記しましょう。