WordPress「埋め込み」「カスタムHTML」ブロックの使い方

目次

リンクで貼るか、埋め込むかの違い

外部サービスを紹介する場合、
WordPressでは大きく分けて「リンクで貼る」か、「埋め込む」かの2つの方法があります。

まずは、この違いを理解しておくことが重要です。

リンクで貼る場合

URLをリンクとして貼った場合、
クリックすると外部サービスのページへ移動します。

YouTubeであれば未ログインでも再生できますが、
Instagramの場合は、ログインを求められることがあります。

この方法は、
・表示が軽い
・将来の仕様変更の影響を受けにくい
というメリットがあります。

埋め込む場合

埋め込みを行うと、
ページ内に動画や投稿が表示され、
その場で内容を見ることができます。

YouTubeやX(旧Twitter)は、
WordPress標準の「埋め込みブロック」で対応しています。

Instagram・Facebookは、
公式が提供している埋め込み用HTMLコードを、
カスタムHTMLブロックに貼り付ける方法で表示できます。

ただしこの方法は、
Instagram側の仕様変更により、
将来表示されなくなる可能性があります。

なぜ「埋め込み」関連のブロックが複数あるのか

WordPressで外部サービスを表示しようとすると、

  • 「埋め込み(Embed)ブロック」
  • 各サービス専用の埋め込みブロック
  • カスタムHTMLブロック

と、似たようなブロックが複数表示されます。

見た目は似ていますが、役割と使う場面が違います。
まずは全体像を整理しましょう。


埋め込みブロックと専用ブロックの違い

結論から言うと、多くの場合どちらを使っても結果はほぼ同じです。

埋め込みブロックの正体

埋め込みブロックは、
oEmbed(オーエンベッド) という仕組みを使っています。

URLを貼るだけで、

WordPressが「対応サービスかどうか」を判定し、

自動で表示してくれる仕組み

YouTube や X(旧Twitter)などは、
この oEmbedに公式対応している ため、

  • 「埋め込み」ブロック
  • YouTube埋め込み・X埋め込みなどの専用ブロック

どちらを使っても表示結果はほぼ同じになります。


埋め込みブロックが使えないサービスがある理由

すべての外部サービスが、
oEmbedに対応しているわけではありません。

また、過去に対応していたが、現在は制限されているサービスもあります。

「埋め込みブロックが無い」「貼っても表示されない」場合、
多くはWordPressの不具合ではなく、外部サービス側の仕様が理由です。

なぜInstagram・Facebookは埋め込みブロックが使えないのか

Instagram・Facebookは、
Meta社がoEmbedの仕様を変更したため、

  • 開発者アカウント
  • アプリID
  • 認証トークン

を必要とする形になりました。

そのため、
WordPress標準の「埋め込みブロック(URLを貼るだけ)」では利用できません。

これは不具合ではなく、外部サービス側の仕様変更によるものです。

なお、ここで言われている「使えない」とは、
URLを貼るだけで自動変換される oEmbed が使えないという意味です。

Instagramには、別途
公式が提供している「埋め込み用HTMLコード」があり、
それを カスタムHTMLブロックに直接貼り付ける方法であれば、
プラグインを使わずに表示できる場合があります。

ただしこの方法は、
Instagram公式の表示スクリプト(embed.js)に依存するため、
将来にわたって表示が保証されるものではありません。

そのため、InstagramやFacebookは、
メインコンテンツとして常に表示する用途には向かず、
補足的な紹介やリンクとして利用するのが現実的です。

なぜGoogleマップ・公式LINEはカスタムHTMLなのか

Googleマップや公式LINEは、
そもそもoEmbedに対応していません。

提供されているのは、

  • iframe
  • JavaScript

による埋め込みです。

この場合、
HTMLコードをそのまま貼り付けられる
「カスタムHTMLブロック」を使う必要があります。



まとめ|サービス別・使うブロックの考え方

サービス使うブロック理由
YouTube / X埋め込み or 専用ブロックoEmbed対応
InstagramカスタムHTML oEmbed制限
FacebookカスタムHTML oEmbed制限
GoogleマップカスタムHTMLoEmbed非対応
公式LINEカスタムHTMLiframe / JS

この記事では、
2ページ目に しまだ事務所の運営サイト一覧 を「見本記事」として掲載し、
3ページ目で「見本記事に使っているブロックの使い分けと実装方法」を解説します。

1 2 3
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SWELLとConoHaを使えば、専門知識がなくても誰でも簡単にホームページを作成できます。
当事務所では、開業準備でお忙しい方に代わり、ホームページの立ち上げや初期設定を代行いたします。

「自分で育てるホームページ」を持つことで、集客力を高めながら広告宣伝費の削減にもつながります。
慣れてきたら、イベント告知や新商品の紹介など、目的に合わせて複数のサイトを運営することも可能です。

SNS(XやInstagram)は即効性がありますが、情報がすぐに流れてしまうのが難点です。
その点、ホームページは“あなたの情報を積み上げていく資産”になります。
信頼性の高い発信拠点として、ぜひ自分だけのホームページを育てていきましょう。

コメント

コメントする

CAPTCHA


目次