WordPress 投稿の埋め込み(Embed)機能の表示方法

WordPress 投稿の埋め込み(Embed)機能の表示方法

WordPress の投稿の埋め込み(Embed)機能の表示やカスタマイズする方法を紹介します。
例えば、投稿の引用記事の紹介やまとめ記事を作りたいときに便利な機能です。

  1. 埋め込み(Embed)機能とは?
  2. 埋め込み(Embed)機能の使い方
  3. 埋め込み(Embed)機能をレスポンシブに対応する方法
  4. 埋め込み(Embed)タグの機能を無効にする方法

埋め込み(Embed)機能とは?

埋め込み機能とは、ショートコードを使用して動画や画像などのコンテンツを投稿に埋め込む(Embed)機能のことです。
この機能を使うことで、投稿のまとめ記事や、引用投稿の紹介が簡単に制作することができます。

埋め込み(Embed)の使い方

埋め込み(Embed)機能の使い方を紹介します。
投稿に他の投稿の情報を埋め込む場合は [ embed ]〜URL〜[ /embed ] ショートコードを使用します。
例えば、この投稿に他の投稿の情報を埋め込む場合は次のコードを本文内に追加します。
[ embed ]https://hirashimatakumi.com/blog/30.html[ /embed ]
※かっこ内の半角スペースは表示用に入れているものなので、実際のコードにスペースは入りません。
埋め込まれると次のように表示されます。

※サイト軽量化のために当サイトでは embed の読み込みをやめました。

ちなみに、埋め込まれる情報は次の通りです。

・タイトル
・抜粋
・アイキャッチ画像
・サイトロゴ
・サイトタイトル
・コメント数
・共有ダイアログ

埋め込み(Embed)機能をレスポンシブに対応する方法

埋め込み(Embed)機能をレスポンシブに対応するには、該当するクラスに max-width: 100%; を指定します。

.wp-embedded-content {
max-width: 100%;
}

使用するテーマや WordPress のバージョンによっては適宜調整を加える必要があります、ご注意ください。

埋め込み(Embed)タグの機能を無効にする方法

WordPress 4.4 以降は埋め込み(Embed)機能を使用しない場合でも head タグ内には表示用のコードが挿入されてしまいます。
コードを非表示にする場合は次のコードを functions.php に追加します。

/*【出力カスタマイズ】Embed 関連のタグを非表示 */
remove_action('wp_head','rest_output_link_wp_head'); // API リンクタグを非表示
remove_action('wp_head','wp_oembed_add_discovery_links'); // 埋め込み用のディスカバリリンクの非表示
remove_action('wp_head','wp_oembed_add_host_js'); // 埋め込み用の JavaScript の非表示

まとめ

WordPress の投稿の埋め込み(Embed)機能の表示やカスタマイズする方法を紹介しました。