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

レスポンシブ

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

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

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

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

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

Coco

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

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

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

  1. プラグイン「コードスニペット」を使う
  2. コードをコピペする
  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
子テーマを使っている方はそちらに追記しましょう。

レスポンシブになっているか確認しよう

実際に確認しましょう。以下は、レスポンシブにする前の画面です。動画が縦に大きく、横にはみ出てちゃってますね。

レスポンシブにするまえのYouTube動画

そして、上記のコードを設定すると・・・

レスポンシブにした後のYouTube動画

はい、レスポンシブになりました!これでスマホから見てもデザインが崩れていないはずです。

おわりに

以上、『WordPressテーマ「SANGO」でYouTube動画を自動でレスポンシブにするカスタマイズ方法』でした!

今の時代、サイトへのアクセスの、7〜8割はスマホ経由です。
しっかりレスポンシブ対応にしておきたいところですね。

Coco

私は「テックアカデミー」というオンラインスクールのPHPコースを学んだのですが、初心者にもわかりやすく解説してくれるのでオススメです。