WordPressの投稿画面にURLを張り付けると、埋め込みできるときとできないときがあり困ったという方もいるかと思います。
筆者の場合はURLを表示させたいのに、張り付けると勝手に埋め込みになってしまい困りました。
そのためここでは、どういったときに埋め込みになり、どういったときに埋め込みにならないのかを、ブロックエディターとクラシックエディター別に検証して確認してみましたので、
WordPressのサポートページを見てもよくわからなかったという方は、参考にしてみてください。
- 埋め込みできない！
- URLを表示させたいのに埋め込みになってしまう！
- サポートページどおりに実行しても埋め込みできない！
- ブログカードを表示させたい
【WordPress】基本的な埋め込み方法
基本的な埋め込み方法は、WordPressのサポートページにあります。
この内容をまとめると、埋め込み方法は下記とのことです。
- URLを独立した行に書く
- ハイパーリンクにしない（リンクをつけない）
また、どういったURLが自動変換されて埋め込みになるのかは、下記とのことでした。
デフォルトでは限られたサイトからの URL のみに有効です。安全対策のため、WordPress は内部のホワイトリストに一致する URL のみを埋め込みます。
（具体的な埋め込みができるメディアは上記サポートページをご確認ください。）
つまり、基本的な埋め込み方法をまとめると、下記となります。
- URLを独立した行に書いた場合＋URLのサイトが埋め込み機能を使える場合
- ハイパーリンクになっていない場合
このため、上記の方法を参考に、各パターンを検証すると、次のようになりました。
ブロックエディターの場合
まずは、ブロックエディターの場合の各パターンを検証しました。
そのまま張り付ける
- ブロック内の独立した行（ブロック内にURLのみ）
- 埋め込み機能ありのURL（Amazonなど）
★リンクなしの場合 →埋め込みになる
投稿画面、プレビューともに下記のような表示になりました。
★リンクありの場合 →ブログカードになる
■投稿画面↓
■プレビュー↓
改行（または別行に文字をいれる）orスペースを入れた後にURLを張り付ける
- ブロック内の独立した行（改行または別行に文字あり）
- 埋め込み機能ありのURL
★リンクありなし共通 → URLが表示される
■投稿画面↓
■プレビュー↓
クラシックエディターの場合
次に、クラシックエディターの場合の各パターンを検証します。
そのまま張り付ける
- ブロック内の独立した行（ブロック内にURLのみ）
- 埋め込み機能ありのURL
★リンクなしの場合 →埋め込みになる
★リンクありの場合 →ブログカードになる
どちらの場合も、ブロックエディターと同様の結果となりました。
スペースを入れた後、URLを張り付ける
- ブロック内の独立した行（ブロック内にURLのみ）
- 埋め込み機能ありのURL
★リンクなしの場合 →埋め込みになる
★リンクありの場合 →ブログカードになる
ブロックエディターの場合と異なり、そのまま張り付けた場合と同様の結果になりました。
投稿画面にURLを表示させることはできますが、プレビューを見てみると、埋め込み、またはブログカードになっていました。
改行して（または別行に文字を入れて）から、URLを張り付ける
- ブロック内の独立した行（改行または別行に文字あり
- 埋め込み機能ありのURL
【「Enter」で改行した（または別行に文字を入れた）場合】
★リンクなしの場合 →埋め込みになる
★リンクありの場合 →ブログガードになる
ブロックエディターの場合と異なり、Enterで改行してもそのまま張り付けるのと同様に、埋め込みまたはブログガードになりました。
【「Shift＋Enter」で改行した（または別行に文字を入れた）場合】
★リンクありなし共通 →URLが表示される
こちらの場合は、ブロックエディターの場合と同様に、URLが表示されました。
その他の場合
最後に、その他の場合について、検証しました。
埋め込み機能が使えないサイトのURLを張り付けた場合
→ 埋め込みエラーになる
埋め込み機能が使えないサイトのURLを張り付けてみたところ、埋め込みページがエラーとなって表示されました。
■投稿画面↓（上：ブロックエディター、下：クラシックエディター）↓
■プレビュー↓（ブロックエディター、クラシックエディター共通）
内部リンクを貼り付けた場合
★リンクありなし共通 →ブログカードになる
内部リンクのURLを張り付けた場合は、自動変換でブログカードが表示されました。
■投稿画面↓（上：ブロックエディター、下：クラシックエディター）
■プレビュー↓（ブロックエディター、クラシックエディター共通）
投稿画面では、クラシックエディターの場合はURLを表示させることができましたが、プレビューで見てみると、どちらのエディターでも自動変換でブログカードになっていました。
以上のことから、各パターンについてまとめたいと思います。
埋め込みできるパターン
検証の結果、埋め込みできるパターンはこちらとなりました。
【ブロックエディターの場合】
■そのままURLを張り付ける（リンクなし）
- ブロック内の独立した行（ブロック内にURLのみ）
- 埋め込み機能ありのURL
【クラシックエディターの場合】
■そのままURLを張り付ける、またはスペースを入れた後にURLを張り付ける
（リンクなし）
- ブロック内の独立した行（ブロック内にURLのみ）
- 埋め込み機能ありのURL
■「Enter」で改行して（または別行に文字を入れて）から、URLを張り付ける
（リンクなし）
- ブロック内の独立した行（改行、または別行に文字あり）
- 埋め込み機能ありのURL
URLで表示されるパターン
URLで表示されるパターンはこちらとなりました。
埋め込みではなく、URLを表示させたい方は、こちらを参考にしてください。
【ブロックエディターの場合】
■改行して（または別行に文字をいれて）orまたはスペースを入れてから、
URLを貼り付ける（リンクありなし共通）※「Shift＋Enter」で改行
- ブロック内の独立した行（改行、または別行に文字ありorスペースあり）
- 埋め込み機能ありのURL
【クラシックエディターの場合】
■「Shift＋Enter」で改行して（または別行に文字を入れて）から、URLを張り付ける（リンクありなし共通）
- ブロック内の独立した行（改行、または別行に文字あり）
- 埋め込み機能ありのURL
ブログカードになるパターン
ブログカードで表示されるパターンはこちらとなりました。
【ブロックエディターの場合】
■そのままURLを張り付ける（リンクあり）
- ブロック内の独立した行（ブロック内にURLのみ）
- 埋め込み機能ありのURL
【クラシックエディターの場合】
■そのままURLを張り付ける、又はスペースを入れた後にURLを張り付ける
（リンクあり）
- ブロック内の独立した行（ブロック内にURLのみ）
- 埋め込み機能ありのURL
■「Enter」で改行して（または別行に文字を入れて）から、URLを張り付ける
（リンクあり）
- ブロック内の独立した行（改行、または別行に文字あり）
- 埋め込み機能ありのURL
■内部リンクURLをそのまま貼り付ける
（ブロックエディター、クラシックエディター共通）（リンクありなし共通）
埋め込みエラーになるパターン
最後に、埋め込みエラーとなるパターンはこちらです。
■埋め込み機能が使えないURLをそのまま張り付ける
（ブロックエディター、クラシックエディター共通）（リンクありなし共通）
※クラシックエディターの場合は、Enterで改行しても、埋め込みエラーとなります。
まとめ
以上が、埋め込みについて各パターンを検証した結果でした。
今回の検証では、ブロックエディターとクラシックエディターの場合で少し違いがあったり、「ブロック内の独立した行」といっても、改行のありなしによって違っていたことがわかったため、そういった部分が冒頭のサポートページの内容だけではわかりにくく、混乱してしまう原因になっているのかと思います。
調べた筆者も、まとめている途中でわけがわからなくなり混乱しましたが、こちらの検証を参考に、各不具合が解消されれば幸いです。
コメント