WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法
WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法
最終更新日:2018.10.22

WordPress4.4から標準で、プラグインを使わなくても記事内にURLを貼るだけでコンテンツが埋め込まれ、サムネイルとリンク・引用つきのブログカードが表示される「embed」が実装されました。
ちょー便利なのですがデフォルトだとサイズが大きすぎるのでコンパクトに変更するカスタマイズをしていきます。

カスタマイズできるのは自分のWordPressだけです。外部から読み込んだ記事は読み込み先のCSSや表示方法が適応されます!(iframeだから)

重い重いと人気のないembedですが便利なので要所でつかえたらいいなぁとおもいます。

カスタマイズしたソースファイルはzipにまとめていますので、下のダウンロードボタンからGETしてくださいね。

やり方

サイトのURLを記事内に貼り付けるだけ!

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

embedに対応しているサイト

実際に対応しているサイトのURLを記事内に貼り付けてみて表示を確認してみましょう。

■WordPress4.4系以上

WordPressは4.4系以上のバージョンから標準対応です。自分のブログは勿論、他のWordPressブログも「embed」に対応している場合は記事のURLを貼るだけでブログカードが表示されます。

https://3owebcreate.com/web/coding/mobile_first_layout

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

結果…

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

■YouTube(ユーチューブ

動画のURLを貼るとレスポンシブ対応された動画が簡単に貼り付けできます。共有→埋め込みタグをしなくてもURLでOKなのでとっても楽ちんです。

https://youtu.be/ha6Fy_LeWtI

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

結果…

ONE OK ROCK – Change -Japanese Ver.- [Official Music Video]

■twitter

つぶやきのURLを貼るときれいに表示してくれます。

https://twitter.com/nako_x/status/1013698780682579969

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

結果…

■はてぶ

記事のURLを貼ると表示されます!サイズが小さめになっていますね。

https://www.alkanet-books.com/entry/2018/07/02/063010

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

結果…

WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

カスタマイズしよう

上で見ていただいた貼り付けサンプル、WordPress記事を貼り付けた場合大きく
twitterはOKだけどはてなブックマークは逆に小さすぎるので横幅を揃え要素を整理しました。
WordPress(ワードプレス) URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法

レイアウト調整ファイルのダウンロード

このページでダウンロードできるzipファイルの中身です。

embed-content.php embedレイアウト調整ファイルです
style.css CSSファイルです

文字コードは【UTF-8】で作っています。

embed使用ブログカード変更Ver.1.0をダウンロードする(curl_embed_css.zip)

レイアウト調整手順

ダウンロードしたファイル【embed-content.php】を今設定してるテンプレートフォルダ
/wp-content/themes/●●●
にアップロードしてください。

CSSはiframeを横幅いっぱいに表示する内容になっています。
ダウンロードファイルの中にもありますがめちゃ短いので置いておきます。
style.css内にコピペしてください!

コピー


/*/////////////////////////////////////////////////
//ブログカードのレイアウト変更
/////////////////////////////////////////////////*/

.wp-embedded-content {
	margin:  0 auto;
	min-width: 100%;
	width: 100%;
}

ダウンロードファイル【embed-content.php】で何をやっているか

本来はwp-includes/theme-compat内にあるシステムファイルです。
これをテンプレートフォルダに持ってくると、ワードプレスが優先的に読み込んで設定を反映してくれます。

iframe内の読み込みHTMLファイルスタイルをいじるのでCSSは直に書き込んでいます。

■スマフォの時はユーザーエージェントを取得して抜粋を非表示にしています


<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>

コピー


<?php
      $ua = $_SERVER['HTTP_USER_AGENT'];
      if (!preg_match('/(iPhone|Android.*Mobile|Windows.*Phone)/', $ua)) {
        ?>
          <div class="wp-embed-excerpt"><?php echo mb_strimwidth(get_the_excerpt(), 0, 240, "...", "UTF-8"); ?></div>
        <?php
      }
      ?>

完成!

■WordPress

モバイルファースト、モバイルフレンドリーを意識してブログのスマートフォン表示を最適化しよう


PCは抜粋あり、スマフォ表示はタイトル表示のみになっています!

■はてぶ

まとめ

無事完了。すっきりさわやかになったかなと思います。
このembed機能はとっても便利なのですが、実行するたびにiframeという外部サイトを呼び出す処理をしているので表示が重たくなったりリンク元の記事が消えたり問題点もあります。
便利ですが同一記事で大量に使ったり、あまり多様せずポイントで使うのがよいかなぁとおもいます!

ナコ
はてぶのブログカード、文字トリミング勝手になってすごいな!