WordPressでサムネイル付リンクを記事内に設置する方法
※当サイトはWeb広告を利用しています
ブログカードってご存知ですか？
はてながブログ向けのツールとしてリリースしてからというもの、最近いろんなブログで見かけるようになった記事内に設置できるリンクツールです。
サムネイルとタイトル、テキストなどを表示してくれるので、ただのテキストリンクより視認性がいいですね。
どんなブログにもマッチするシンプルなデザインもいいです。しかも、コードとURLを貼るだけで設置もカンタンなんです。
めちゃくちゃ便利で使い勝手もいいのですが、「はてなが提供しているツール」というのを忘れて多用してしまうと後で面倒なことにもなりかねません。
しかし、このようなサムネイル付のリンクを設置してみたいというニーズはあるでしょう。
今回は、Wordpressで、はてなブログカードのようなサムネイル（画像）付のリンクを記事内に設置する方法を紹介します。
目次
はてなブログカードをWordPressで利用する方法
まずは手っ取り早く、はてなブログカードをWordPressで利用する方法から紹介します。
WordPressの投稿や固定ページで記事を書くときに、以下のコードを記述してください。http://sample.jp/となっているところのURLは、リンク先ページのものを入れます。
<iframe style="width:100%;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" src="http://hatenablog.com/embed?url=http://sample.jp/" width="300" height="150" frameborder="0" scrolling="no"></iframe>
参考：はてなブログのブログカードがOGPに対応! はてなブログ以外もブログカードスタイルになるぞ | mbdb (モバデビ)
これだけです。正しく表示されているか確認してみましょう。内部・外部リンク共にOKです。
画像はOGPが設定されているページのみ表示されます。OGPが設定されていなければ、画像は表示されずタイトルとテキストのみ表示されます。
ちなみに、WordPress以外のブログでも同様に利用できますよ。
気に入ったのであれば、積極的に使うのもよしですが、いくつか問題点があるので、次の項も見てください。
はてなブログカードの問題点
めっちゃ便利なはてなブログカードですが、問題点が2つあります。それは、
（1）はてながサービスを終了すると機能しなくなる
（2）リンクの参照元がhatenablog.comになる
ということ。
（1）は、単純。これは、はてなのサービスですので、はてなが終了したり、はてなブログカードが仕様を変更したりすると、機能しなくなる恐れがあります。そうなると、何も表示されなくなるかコードだけが表示される状態になってしまいます。
（2）は、アクセスアップを目指すブロガーであればちょっと深刻です。コードを見ると分かるのですが、iframeが使われていますよね。つまり、はてなのサービスが、iframeで外部から読み込まれているだけなんです。
そして、URLの部分が、http://hatenablog.com/embed?url=の後にリンク先のURLになっていますよね。これが問題で、Google Analyticsなどのアクセス解析ツールで、見たときにの参照元が、http://hatenablog.comになってしまうんです。
これは、Aさんのブログにリンクを貼って、そこから大量にアクセスがあったとしても、ＡさんのGoogle Analyticsに表示される参照元は、http://hatenablog.comになってしまうので、自分のブログの存在に気づいてもらえないのです。
Aさんが熱心なブロガーであれば、何かアクションを返してくれる可能性もあり、何か損した気持ちになりませんか？
同様に内部リンクであったとしても、どのリンクが有効に機能したか分からなくなるのです。
僕はこれが、なんだかなぁという理由で、はてなブログカードを利用するのをやめました。
スポンサードリンク
内部リンクはこれでOK！サムネイル付リンクを設置する方法
WordPressで、はてなブログカードのようなサムネイル付リンクを設置するには、ふく丼さんと寝ログさんが、自作して公開してくれているものが参考になります。
※ただし、内部リンクの場合のみ有効です。外部リンクについては次の項で。
【ふく丼さん】ショートコードを貼るだけ
ショートコードは、あらかじめfunctions.phpに、実装したいコードを記述しておいて、それを簡単なコードで呼び出すことができる、便利な方法です。具体的には、
以下のような感じです。
※上の例は、タイトル下の説明文を外しています。ディフォルトでは自動で入ります。
さらにtitle属性や任意の説明文を表示させることも可能な優れもの。
詳しい実装方法は、【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード｜ふく丼を参照してください。
【寝ろぐさん】URLを貼るだけ
寝ログさんの方は、URLを貼るだけで自動的にサムネイル付リンクが表示されます。究極にシンプルでいいですね。
寝ログさんが配布しているWordPressのテーマ「Simplicity」には、この機能が標準で実装されているようです。
詳しい実装方法は、URLを記入するだけ！はてなブログカード風にWordPress記事も表示させるカスタマイズ方法｜寝ログを参照してください。
どちらも素晴らしいですね。CSSを修正すればデザインも変更できます。
僕は、ふく丼さんのショートコードの方を利用させてもらっています。URLだけなのは、シンプルで楽なのですが、ショートコードの方が分かりやすいかなぁと思ったからです。
とはいえ、微々たるところで、ほんとにどちらも素晴らしいです。お二人ともありがとうございます！
気に入った方を使ってみてはいかがでしょうか。
外部リンクでもサムネイル付リンクを実装する
外部リンクの場合は、外部サイトの情報を引っ張ってこないといけないので、自作するには難易度が上がります。
しかし、ふく丼さんは、これもショートコードで、実現可能にしてくれています。
詳しい実装方法は、【WordPress】iframeを使わずにはてなのブログカード風に外部リンクをデザインするショートコード｜ふく丼を参照してください。
ただ、実装するのにプラグインを使うのが、引っかかったので僕は実装していません。
今のところは、
内部リンク→ショートコード
外部リンク→テキストリンク
で、リンクを実装しています。
ショートコードを簡単に投稿画面に入れる方法
ショートコードが簡単とはいえ、いちいち入力するのは面倒ですよね。そんなときは、プラグイン「AddQuicktag」を使います。
これを利用すると、あらかじめ設定しておいたコードをボタン一つで、簡単に記述できるようになるんです。
もちろん、ショートコード以外にも使えるのでめっちゃ便利ですよ。必須のプラグインだと思います。
サムネイル付リンクをどこで使うか
まずは、もちろん記事中に使います。視認性がよくなるし、スマートフォンでは、クリックしやすくなるのではないでしょうか。
それと、記事の最後にブログカードを使って手動で「こんな記事もおすすめです」を入れています。実装例は、この記事の最後をみてください。
人気記事は、自動でも表示させているのですが、的外れな記事が出てしまうこともあります。
手動なら別カテゴリの記事やとことんマッチしている記事を表示できるので、気に入っています。（手動なのでリンク先のURLが変わると大変ですがw）
これも「AddQuicktag」を設定しておけば簡単に記述できます。
まとめ
はてなブログカードのようなサムネイル付リンクを設置するにはいくつかの方法があります。
気に入ったもので設置してみてください。