「WordPress 4.4」、埋め込みカード機能を実装!デザインのカスタマイズや無効化する方法

Wordpress 4.4 oembed
先日、「WordPress 4.4」が正式にリリースされた。

普段はアップデート内容を気にすることはほとんど無いが、今回、アップデートしてからサイトの一部に表示崩れが発生してしまったため、一通りアップデート内容を調べてみることに。その結果、Wordpressの最新バージョンではURLを貼り付けるだけでリンクを生成してくれる埋め込みカード(Embed)機能が実装されていることが判明した!

この新機能を一言で解説すると「はてなブログの埋め込みカードのWordpress版」。この埋め込みカードのデザインをカスタマイズする方法や無効化する方法、そして代わりに利用できる内部または外部リンクの埋め込み方法などについてまとめたので、参考にどうぞ!

埋め込みリンクのデザインをカスタマイズする方法

今回調べたページの中で必要な情報がほとんどまとまっていたのが以下のページ。表示される埋め込みカードの機能解説だけではなく、デザインやレイアウトを変更する方法なども解説。

埋め込みカード機能を最大限活用したい人は一読あれ!



埋め込みリンクを無効化する方法

僕は元から別の埋め込みリンク形式を活用していたので、今回はWordpress純正のものはスルーすることに。そこで、すぐに無効化することを決意。

ぴんくいろにっきによると、functions.phpで無効化する場合は以下のコードを追記すればいいそう。ただし、未検証とのこと。

// 自動巡回をしないようにする
add_filter( 'embed_oembed_discover', '__return_false' );

// Embeds
remove_action( 'parse_query', 'wp_oembed_parse_query' );
remove_action( 'wp_head', 'wp_oembed_remove_discovery_links' );
remove_action( 'wp_head', 'wp_oembed_remove_host_js' );

未検証のコードを試すのが怖いという人は、無効化プラグインを利用しましょう。これを有効化した場合、内部リンクや埋め込みに対応した外部リンクの埋め込みを無効化する他、関係するJavaScriptファイルを全て無効化してくれる。有効化するだけで完了するので、不要な人は下記からどうぞ。



「はてなブログoEmbed API」を利用する表示

今回、僕がWordpress純正の埋め込みカード機能を見送ったのは「はてなブログoEmbed API」を利用したはてなブログカード風埋め込みカード機能を既に実装し、活用していたから。下記がその一例。


この埋め込み形式を利用している理由は大きく分けて2つ。1つはWordpressの埋め込みカードのように余計なblockquoteなどを出力しないということ。もう1つはリファラー(参照元)が自分のドメインになるということ。

下記ブログに書かれている方法を利用すればURLを貼り付けるだけでオシャレな内部リンクが簡単に生成できる。「Wordpress 4.4」対応についても追記して頂いているので、興味がある人は下記からどうぞ!

オススメ
wordpress-4_4-oembed.png

gori.meの最新情報をチェック!!

  1. iPhone-6s-In-Depth-Review-15.jpg
    「iPhone 6s」の電源が突然落ちる不具合、製造工程に問題があったと判明
  2. iphone6s-shutdown.png
    Apple、「iPhone 6s が突然シャットダウンする問題に対するプログラム」ページを公開、シリアル番号で確認可能に
  3. macbook-pro-2016-gpu-freaking-out
    「MacBook Pro (Late 2016)」のGPUに関する不具合、影響範囲が拡大中
  4. 25-more-hidden-ios10-features.png
    「iOS 10.2 Beta 5 / Public Beta 5」、配信開始
  5. delete-iphone-else-top.jpg
    【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法