WordPressでoEmbedの幅と高さを動的に変更する方法

WordPressのウェブサイトに埋め込んだコンテンツを、画面サイズに関係なく完璧に見せたいと思いませんか？

デフォルトでは、WordPressは投稿やページに動画やその他のoEmbedを埋め込むのに優れた仕事をします。しかし、私たちの経験に基づくと、サイズをより細かく制御する必要がある場合があります。

埋め込みの幅と高さを動的に変更できることは、レスポンシブデザインにとって重要であり、スマートフォン、タブレット、デスクトップでウェブサイトが美しく表示されることを保証します。また、コンテンツのレイアウトを微調整して、より洗練された外観にすることもできます。 

この記事では、WordPressでoEmbedの幅と高さを動的に変更する方法を紹介します。

WordPressでoEmbedの幅と高さを動的に設定する理由

WordPressでは、oEmbedと呼ばれるテクノロジーを使用して、投稿やページにサードパーティのコンテンツを簡単に埋め込むことができます。

これにより、WordPressにYouTube動画、Facebook投稿、TikTok動画、ツイートなどを簡単に埋め込むことができます。最も良い点は、これらのコンテンツがWordPressサイトにホストされないため、サーバーリソースを節約し、WordPressのパフォーマンスを向上させることです。

デフォルトでは、WordPressは埋め込みコンテンツの高さと幅を投稿やページに合わせて自動的に調整するのに優れた仕事をします。

ただし、一部のユーザーはこのデフォルトの動作を変更したい場合があります。たとえば、フロントページと個々の記事で異なるデフォルトの埋め込み幅と高さを設定したい場合があります。

これは、カスタムホームページレイアウトを使用している場合や、独自のカスタムテーマのデザインに取り組んでいる場合に役立ちます。

それでは、WordPressでoEmbedコンテンツの動的な幅と高さを簡単に設定する方法を見てみましょう。

2つの異なる方法を紹介します。下のクイックリンクを使用して、関心のある方法に直接ジャンプできます。

方法1. WordPressで埋め込みの幅と高さを動的に設定する

この方法では、WordPressサイトにカスタムコードを追加する必要があります。これを初めて行う場合は、Web上のスニペットをWordPressに簡単に貼り付ける方法に関するガイドをご覧ください。

この方法では、WordPressの条件分岐タグを使用して、どのWordPressページが表示されているかを検出し、それに応じてoEmbedの幅と高さのデフォルトを変更します。

次のコードを、テーマのfunctions.phpファイル、サイト固有のプラグイン、またはコードスニペットプラグインに追加するだけです。

//Custom oEmbed Size
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

このコードは、WordPressコードスニペットプラグインのベストであるWPCodeを使用して追加することをお勧めします。これにより、テーマのfunctions.phpファイルを編集せずに、WordPressにカスタムコードを簡単に追加できます。

この方法では、サイトが壊れる心配はありません。さらに、WordPressテーマを変更しても、すべてのカスタマイズを維持できます。

開始するには、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。手順については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

プラグインを有効化したら、WordPress管理画面から「Code Snippets」→「+ Add Snippet」ページに移動します。

次に、「カスタムコードを追加（新規スニペット）」オプションを見つけて、「+ カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションからコードの種類として「PHPスニペット」を選択します。

その後、カスタムスニペットに名前を追加できます。これは、コードが何のためのものかを思い出すのに役立つものであれば何でも構いません。

次に、上記のコードスニペットを「コードプレビュー」ボックスにコピーして貼り付けます。

それが完了したら、画面上部のトグルを「Inactive」から「Active」に切り替え、「Save Snippet」ボタンをクリックするだけです。

さまざまなシナリオを検出するために、利用可能なWordPress条件タグのいずれかを使用できます。

ここでは、カスタムランディングページのoEmbedのデフォルト幅を変更する別の例を示します。

function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

ご覧のとおり、このコードは特定のページIDに対して異なるデフォルトの幅と高さを設定するだけです。

方法2. CSSを使用して動的なoEmbedの幅と高さを設定する

WordPressは、ウェブサイトのさまざまな領域にデフォルトのCSSクラスを自動的に追加します。

これらのCSSクラスは、ウェブサイトの特定の領域の埋め込みの外観を変更するために使用できます。

たとえば、WordPressテーマには、page-id、post-id、category、tagなどのCSSクラスがあり、他にも多数あります。Inspectツールを使用してこれらのCSSクラスを見つけることができます。

同様に、WordPressは投稿やページ内の埋め込みブロックにCSSクラスを追加します。ここでも、埋め込みブロックで使用されているクラスを見つけるためにインスペクトツールを使用します。

これらのCSSクラスを取得したら、それらを使用してoEmbedの動的な高さと幅を設定できます。たとえば、次のサンプルコードでは、特定の投稿IDのPinterest埋め込みブロックの動的な幅と高さを設定しています。

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

テーマカスタマイザーにカスタムCSSを追加することで、CSSコードを試すことができます。満足したら、変更を保存して公開することを忘れないでください。

これらの2つの方法で、WordPressでoEmbedの動的な幅と高さを簡単に設定する方法を学べたことを願っています。また、役立つWordPressのヒント、トリック、ハックを確認したり、WordPress向けの最高のソーシャルメディアプラグインの選択を確認したりすることもできます。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。