2015年8月6日

Blog card wordpress title

当ブログでは、他の記事にリンクする場合いつもサムネなしのテキストリンクを使っています。


ですが、ほかのブログで「はてなブログ風のブログカード」なるサムネとディスクリプション付きのリンクを見てから、うちもそれを利用してみたいなーと思っていました。

最終的にはうまくいったのですが、他サイトで紹介されている方法ではうまくいかなかったりいろいろ苦労したので、その軌跡をメモしておきたいと思います。

WordPressでブログカード風のリンクを貼りたい方は、参考にどうぞ!

スポンサード リンク

「WordPressでも使えるはてなブログカード」の問題点

元々、「ブログカード」ははてなブログの機能として出てきたもの。

それを以下の記事では、iframeで埋め込むことでWordPressなど他のブログでも表示できるようにされていました。

さらに、そのリンクをブックマークレットで簡単に作れるよう改良される方も登場。



以上の方法を使えばWordPressでもブログカードを貼り付けることはできるのですが、問題はこのブログカードがはてなブログを経由していること。

はてなブログが仕様を変えれば表示できなくなりますし、直接貼りたいリンクが常にはてなブログ経由になるのもなんだか気持ち悪い。相手先にこちらからリンクしたことが伝わらないなど、実際にいくつか問題もあります。


というわけで、はてなブログを経由しない方法をさらに探してみることに。

スポンサード リンク

はてなブログを経由せずブログカード表示できるプラグイン「Celtispack」

そうして探しているうちに見つけたのが以下の記事。

こちらで紹介されているプラグイン「Celtispack」をダウンロード→インストールし、設定の「oEmbed extend」にチェックを入れて有効化。

あとはURLをそのまま本文中に貼り付ければ、ブログカード表示に!


……なるはずだったのですが、うまくいかない。なぜだ。

もう少し探してみる。

「ふく丼」さんで紹介されていたショートコードで解決!

見つかりましたよ。

やり方は上記ブログに書いてある通りで、

① 前述の「Celtispack」プラグインを導入、oEmbed extendを有効にする
PHP Open Graph LibraryのParser.phpをfunctions.phpと同じディレクトリにアップロード
③ Parser.phpを開いて、23行目の「class Parser {」を「class Parser1 {」と1を足しておく
 ※Celtispackプラグイン内の関数とかぶらないための措置。もしかしたらもっといいやり方があるかも
④ 上記ブログの「functions.phpに追加するコード【改良版】」をfunctions.phpに追記
 ※functions.phpは重要なファイルなので、必ずバックアップを取ってから!
⑤ 目的のページを

という形で貼り付け

以上です。

OGPを二重に貼っているとエラーになる

実は、私の場合それでも以下のエラーが出てうまく表示できませんでした。

Warning: preg_match() expects parameter 2 to be string, array given in /home/ushigyu2014/ushigyu.net/public_html/wp-content/themes/blue-grace/functions.php on line 684

Fatal error: Call to undefined method Celtispack_thumbnail::getmake_thumbnail_size() in /home/ushigyu2014/ushigyu.net/public_html/wp-content/themes/blue-grace/functions.php on line 688

ちょっとよくわからなかったので上記ブログ「ふく丼」の@yoshitake_fさんにコメントで質問してみたところ、丁寧に教えていただき解決!どうもOGPが二重に出力されているのがエラーの原因らしい。


私の場合、Jetpackプラグインの「パブリサイズ共有」をオンにしていることで意図しないOGP情報が自動生成され、手動のものとバッティングしていることがわかりました。

以下の記事の情報をもとに、それを削除。

無事、ブログカードを表示することができました!いかがでしょうか。

少しでも安く国内旅行に行くために、私がいつもチェックしているツアーや航空券、宿などの旅行予約サイトをリストアップしてみました。お気に入りに登録しておくと便利ですよ!

あとがき

実際にブログカードを使うかテキストのみのリンクにするかは、今後いろいろ試しながら決めていこうかと思います。とりあえず表示できてよかった。
先人のブログに感謝です。


なお、サムネ付きでリンクを貼るといえばShareHtmlという便利なブックマークレットもあります。デフォルトではサムネイルとタイトルのみですが、知識のある方ならここにディスクリプションを付け加えるなどカスタマイズして使ってみてもいいかも。

⇒もっと 「WordPress・ブログ更新」に関する記事をチェックする!
このエントリーをはてなブックマークに追加

▼ フォローして更新情報をチェック! ▼

管理人

ブログ更新情報
LINE@
5195 follow us in feedly