はてなブログの「ブログカード」をWordPressのoEmbedに対応させる方法

スポンサーリンク

先月末にはてなブログがリリースした「ブログカード」。
はてなブログの記事をきれいに記事中に挿入できるという機能ですが、これがoEmbed APIに対応しているということで、WordPressでもURLを貼り付けたら挿入できるように対応させてみました。

Hatena Blog
Image via. はてなブログ

当ブログではSSL対応を実施しましたが、はてなブログカードはhttpsに対応しておらず、読み込むことができません。そのため記事中に掲載したはてなブログカードは非表示となっております。ご注意ください。

どういうものかというと、こういうもの。

はてなブログカード

※CSSでwidthmarginを調整してます。

(はてなブログで)自分の記事はもちろんのこと、はてなブログのリンクを挿入すると、こうしたカード形式に整形されたボックスとして展開され、記事タイトルや概要、アイキャッチ画像がまとめて表示されるわけですね。

こういうのいいなーってことで、はてなブログ開発ブログを見てみたら、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ユーザーの方はぜひカスタマイズしてみてくださいな。


「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく