はてなブログの「ブログカード」をWordPressのoEmbedに対応させる方法
先月末にはてなブログがリリースした「ブログカード」。
はてなブログの記事をきれいに記事中に挿入できるという機能ですが、これがoEmbed APIに対応しているということで、WordPressでもURLを貼り付けたら挿入できるように対応させてみました。
当ブログではSSL対応を実施しましたが、はてなブログカードはhttpsに対応しておらず、読み込むことができません。そのため記事中に掲載したはてなブログカードは非表示となっております。ご注意ください。
どういうものかというと、こういうもの。
※CSSでwidthとmarginを調整してます。
(はてなブログで)自分の記事はもちろんのこと、はてなブログのリンクを挿入すると、こうしたカード形式に整形されたボックスとして展開され、記事タイトルや概要、アイキャッチ画像がまとめて表示されるわけですね。
こういうのいいなーってことで、はてなブログ開発ブログを見てみたら、oEmbed APIに対応しているというじゃありませんか。
WordPressはoEmbedに対応していて、なおかつWordPressが標準で対応するサイト以外にも追加することができるので、ちょっくらfunctions.phpに一文追加して対応させてみました。
//hatena oEmbed対応
wp_oembed_add_provider('http://.+hate.+', 'https://hatenablog.com/oembed');
はい。たったこれだけの記述を加えるだけで、はてなブログの「ブログカード」に対応することができます。素晴らしきかなWordPress。
ただ、これだとはてなブログでも独自ドメインを使ったものについては、どうもうまく表示されないんですよね。
http://*と記述して試してみたところ、独自ドメインのはてなブログでもブログカードになりました(上のクックパッドがそれ)。
使い方は至って簡単で、WordPressで記事を書くときに、リンクしたいブログがはてなブログなら、記事のURLをそのままペーストするだけです。他に何もいらない。
ただ、投稿後に再編集したりすると整形されてURLがpタグで囲まれて機能しなくなる恐れがあるので、そのあたりは注意してください。
外部リンクと内部リンクのスタイルも合わせてみた
で。もうひとつおまけにちょろちょろっと作業しました。
当ブログでは、記事内で外部サイトや当ブログ内の記事を紹介するときに、サムネイル付きのリンクで紹介することがあるんですが、これをブログカードのスタイルに近づけてみました。こんな感じ。
せっかくはてなブログのブログカードを貼り付けられるようにしたわけですし、はてなブログのブログカードが羨ましいのでスタイルに統一感を持たせておきたいよなーってことで。
サムネイルサイズなんかはちょっと違いますし、ブログカードと違って取得できる情報には限界がありますから、まったく同じスタイルというわけにはいきませんけどね。
でも、なかなかいい感じでないでしょうか?
ブログカードを使ってみたい! というWordPressユーザーの方はぜひカスタマイズしてみてくださいな。