はてなブログの「ブログカード」を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ユーザーの方はぜひカスタマイズしてみてくださいな。


「WordPressカスタマイズ」新着記事

ソーシャルメディアのトータルシェア数を条件にして記事をランダム表示する方法

Avatar for ホシナ カズキ

ホシナ カズキ

チャット風の会話形式コンテンツをプラグインなしで実装する方法

Avatar for ホシナ カズキ

ホシナ カズキ

【WordPress】パーマリンクからカテゴリーベースを取り除く方法

Avatar for ホシナ カズキ

ホシナ カズキ

ディレクトリを切ってインストールしたWordPressをドメイン直下で表示させる方法

Avatar for ホシナ カズキ

ホシナ カズキ

「RSS Footer」が開発終了したならfunctions.phpで同じことやればいいじゃない

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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