WordPress4.4から標準で、プラグインを使わなくても記事内にURLを貼るだけでコンテンツが埋め込まれ、サムネイルとリンク・引用つきのブログカードが表示される「embed」が実装されました。
ちょー便利なのですがデフォルトだとサイズが大きすぎるのでコンパクトに変更するカスタマイズをしていきます。
重い重いと人気のないembedですが便利なので要所でつかえたらいいなぁとおもいます。
カスタマイズしたソースファイルはzipにまとめていますので、下のダウンロードボタンからGETしてくださいね。
プラグイン無し［テンプレート＋CSS］
でカスタマイズします。
「embed」のやり方
サイトのURLを記事内に貼り付けるだけ！
embedに対応しているサイト
実際に対応しているサイトのURLを記事内に貼り付けてみて表示を確認してみましょう。
■WordPress4.4系以上
WordPressは4.4系以上のバージョンから標準対応です。自分のブログは勿論、他のWordPressブログも「embed」に対応している場合は記事のURLを貼るだけでブログカードが表示されます。
結果…
■YouTube(ユーチューブ
動画のURLを貼るとレスポンシブ対応された動画が簡単に貼り付けできます。共有→埋め込みタグをしなくてもURLでOKなのでとっても楽ちんです。
結果…
ONE OK ROCK – Change -Japanese Ver.- [Official Music Video]
つぶやきのURLを貼るときれいに表示してくれます。
結果…
雨がゲリってる！
— ナコ (@nako_x) July 2, 2018
■はてぶ
記事のURLを貼ると表示されます！サイズが小さめになっていますね。
結果…
カスタマイズしよう
上で見ていただいた貼り付けサンプル、WordPress記事を貼り付けた場合大きく
twitterはOKだけどはてなブックマークは逆に小さすぎるので横幅を揃え要素を整理しました。
レイアウト調整ファイルのダウンロード
このページでダウンロードできる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という外部サイトを呼び出す処理をしているので表示が重たくなったりリンク元の記事が消えたり問題点もあります。
便利ですが同一記事で大量に使ったり、あまり多様せずポイントで使うのがよいかなぁとおもいます！
