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

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

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

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

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

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

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

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

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

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

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

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

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

• 方法1. WordPressで埋め込みの幅と高さを動的に設定する
• 方法2. CSSを使用して動的なoEmbedの幅と高さを設定する

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

この方法では、WordPressウェブサイトにカスタムコードを追加する必要があります。以前にこれを実行したことがない場合は、ウェブ上のスニペットをWordPressに貼り付ける方法に関するガイドをご覧ください。ウェブ上のスニペットを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クラスが見つかることがあります。これらのCSSクラスは、Inspectツールを使用して見つけることができます。

同様に、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でもフォローできます。