WordPressで記事埋め込み「Embed」する方法。記事の中にアイキャッチ付きリンクはURLを記載するだけ！

WordPressを利用していると、自分の過去の記事や他サイトの記事をアイキャッチ画像付きでリンクを貼って表示したいことありませんか？よく見かけるのがTwitterなんかで記事紹介されているように。一般的に「ブログカード」「Embed」と言われている機能ですね。

文字だけのリンクだと味気ないのでカード風にリンクを貼ると見栄えが良くなりますよね。そんな時に利用したい機能となります。

また、YouTubeなんかの画像を記事に貼付けしてリンクする場合でも利用できる機能です。ただ、この機能は相手側が外部に対して埋込機能を解放していない場合には上手く動作しないので、外部サイト全てに適用できる訳ではありません。

実はこれ簡単にできるんですよ。記事の中に過去の自分の記事をアイキャッチ画像付きで記事概要を埋込みしリンクを貼ることや他サイトの記事を埋込して記事紹介すること。条件はWordPressのバージョン4.4以降となります。今日この記事を書いている現在時点のWordPressのバージョンは4.8.2となります。かなり前から標準装備されていたことになりますね。

この記事埋込機能「Embed」ですが、余りにも簡単なためやり方を知ると拍子抜けしてしまいます。

記事の埋込はURLを記載するだけ！

通常サイトへのリンクって記事を編集するときに、「<a href=○○○○>」みたいにリンクを記載すると思います。昔からHTMLでサイト作成してきた人にとっては当たり前のように使ってきたリンクタグ。

しかしWordPressの記事埋込機能「Embed」は今までの概念を覆すかのようなビックリする程、簡単に利用することができます。自分もこのことを知った時に愕然としました。何せタグの記述すら必要なかったのだから。

記事の編集画面で「URL」を記述すれば良いだけです！

え！っと思うでしょ。

実際の例でご紹介いたします！

本サイトの過去の記事「WordPress【twenty seventeen】トップページのヘッダー画像の高さを簡単に変更・カスタマイズする方法」を例にします。

通常の文字列だけのリンク例

上の記事の文字列リンクは「テキスト」エディタで下の様に記述するのは、サイト運営者なら殆どの人が知っていると思います。

<a href="https://digital-life.club/hp/wordpress/twenty-seventeen-top-page-header-image-hight" target="_blank" rel="noopener">WordPress【twenty seventeen】トップページのヘッダー画像の高さを簡単に変更・カスタマイズする方法</a>

埋込機能「Embed」の利用例

下の様に「ビジュアル」もしくは「テキスト」エディタに「URL」だけを記述。

https://digital-life.club/hp/wordpress/twenty-seventeen-top-page-header-image-highpret

このように記述すると下の様に表示されます。

WordPress【twenty seventeen】トップページのヘッダー画像の高さを簡単に変更・カスタマイズする方法

どうですか？

これ「ビジュアル」エディタの場合ですと「URL」を記述した瞬間に表示イメージが表示されます。

※記事作成日時点のカードイメージが変わっている可能性があります。

埋込機能が上手く動作しない場合

自分もこの記事を記載中に何度か遭遇したのですが、「URL」の貼付けだけで「カード表示」されるはず。しかしどうも上手く動作しないパターンがあるようです。

• 「ビジュアル」エディタで正しく表示されていたのに、「テキスト」エディタで「URL」前後のスペースや改行を削除すると正しく表示されないくなる！
• 自分で知らぬ間に埋込機能を作動しないようにカスタマイズしている

なんとなくですが、［Embed]を明示的に記載した方が良いかもしれませんね。今回は明示的に記述していませんが。

とても便利な機能です。カードデザインが気に入らない場合は、CSS（スタイルシート）をカスタマイズする必要がありそうですね。