他サイトへのリンクを「はてなブログ」の「ブログカード」形式で表示するプラグインを作ってみました。（ver0.1）
[2015/08/09追記]設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。
みんなどうやっているんだろう？Σ(ﾟロﾟ)oﾞ
このブログでは、他サイトさんへのリンクを貼ったりする場合に、「WP-Note」を使用していました。
↓こういう感じの表示
説明文も手入力なので、打ち間違えて無いかも心配。
ところで、いろいろなサイトを見ていると、サムネイルが付いているリンクを貼っているブログが沢山あります。
はてなブックマークの数が表示されているサイトもよく見かけます。
「はてなブログ」を使っている場合、「ブログカード」という形式でリンク挿入ができるようです。
WordPressでこういうことが出来るプラグインが無いか探してみました。
サイトのスクリーンショットを取得するBrowser Shots
まず行きあったのが「Browser Shots」というプラグインです。
どうやら、「Browser Shots」は、「サムネイル付リンクを設置するプラグイン」では無くて、「指定したサイトのスクリーンショットを取得するプラグイン」ということらしいです。
リンクやサイト名、説明文は書かないといけません。
WordPressブログカード
内部リンクをはてなブログカード風に表示するWordPressカスタマイズ方法がありました。
ぱっと見、はてなブログカードですΣ(ﾟロﾟ)oﾞ
URLを直書きすればブログカード風に表示してくれるようです。
理想通りではありましたが、内部リンクのみの対応でした。
URLを直書きするのは記述する時には手軽で良いのですが、あとで検索や置き換えをしたい場合に検索しづらいと感じました。
はてなブログカードっぽいブックマークレット
「えじの自由帳」さんのところに、「はてなブログカード風リンクを作成するブックマークレット」がありました。
ブックマークバーに登録しておけば、リンク元サイトを表示して、ブックマークレットを開くだけで、はてなブログカード風のリンクになるHTMLタグを生成してくれます。
ブックマークレットはちょっと敬遠（食わず嫌い）していたところがあったのですが、思いの他使いやすかったです。
記事内に貼ればOKですが、WordPressのビジュアルエディターではHTMLタグをそのまま貼れないので、テキスト側に切り替える必要があります。
はてなブログカードのHTMLタグ生成ブックマークレット
はてなブログカードをiframeで表示する方法を書いている方がこちら。
そして、そのコードを生成するブックマークレットを書いている方がこちらです。
はてなブログカードを貼る、という目的ならばこれで十分な気がします。
しかし結局HTMLタグを貼る手間はなくならず。
なら、プラグインにしてしまおう
oEmbed（メディア埋め込み機能）を使えば、URLを直書きしたのをブログカードにしてくれるようになるみたいですが、直書きだとWordPress管理画面の投稿一覧などから検索したり、「Search Regex」で検索したりが難しいです。
ショートコードならば「角括弧」込みでショートコードを検索することが出来るので、他のプラグインに乗り換えるときなどに置き換えがラクそうです。
ビジュアルエディタからでもそのまま入力できるのも良いですね。
そんなこんなでfunctions.phpに記述を追加してみました。
function shortcode_HatenaBlogCards($attr) {
$url = $attr['url']; // 指定URL
$title = $attr['title']; // title
$tag = '<iframe class="embed-card embed-webcard" scrolling="no" frameborder="0" src="http://hatenablog.com/embed?url='.rawurlencode($url).'" title="'.$title.'" style="width:100%;height:155px;max-width:500px;margin:10px 0px;"></iframe>';
return $tag;
}
// ショートコード設定
add_shortcode( 'BLOGCARD' , 'shortcode_HatenaBlogCards');
add_shortcode( 'blogcard' , 'shortcode_HatenaBlogCards');
追加する箇所は、
//テーマカスタマイザーで編集しない方は削除して下さい（ここから）
と書いてある、この行の直前でしょうか。
インストールするタイプのプラグインも用意してみた
↓敢えて旧バージョンを利用される方のために、「popo-HatenaBlogCards ver 0.1」のリンクも残しておきます。
functions.phpは修正を間違えると、「WordPress全体が動かなくなって管理者画面にも入れない！Σ(ﾟロﾟ)oﾞ」とかなりがちです。
一応、インストールファイルも用意してみました。
WordPressプラグインとかまともに作っていないので、試作品扱いでお願いします。
↓ZIPファイルダウンロード
サイトからのダウンロードは終了しました。プラグインディレクトリからのインストールをお願いします。
※ver0.1は最新版ではありません。記事先頭から最新版へのリンクをたどってください。
＜WordPressへのインストール手順＞
- 上記のリンクから、「popo-HatenaBlogcards
-20150221.zip」をダウンロードする。 - WordPress管理画面の「プラグイン」→「新規追加」を開く。
- ［プラグインのアップロード］ボタンを押す。
- 「ファイルを選択」を押す。
- ダウンロードしたZIPファイルを選んで、［開く］を押す。
- ［今すぐインストール］を押す。
- インストールが終わったら、「プラグインを有効化」を押す。
- 「インストール済みプラグイン」の一覧で有効化になっていることを確認する。
あとは、記事中にショートコードを記述するだけです。
リンク先をはてブのブログカードで表示してみる [blogcard url="https://popozure.info/20150221/6741"]
↓結果
ブログカードだと「新しいウィンドウで開く」になっているので、サイト内リンクの場合にもウィンドウが開いてしまいます。
[2015/04/11 追記]→内部リンクの挙動を変更したバージョンを公開しました
その内、自前のリンクカードにしたい
iframeでブログカードを表示するのが規約的に大丈夫なのか今ひとつ分からなかったものの、oEmbedに対応していたりして、結局同じことをやっているのでは無いかと思うので大丈夫と判断してみました。
当ブログに使っているのは更に、自サイト内や自記事の場合、ブログカード風の表示に切り替えたりするように直したプラグインを使用していたりします。
↑サイト内の場合、青っぽく、表示中の記事の場合、暗い青にしてみました。
サイト内の場合、get_post関数とかget_post_thumbnail関数とか使ったり、「寝ログ」さんのget_the_custom_excerpt関数で本文抜粋したりしてます。
その内、ソースがキレイになって、管理画面とか作って、選択ができるようになったらアップするかも…。（いつまでもアップ出来ないフラグ）
レイアウトとかもオリジナルのものにしたいなぁ…。
コメント
[…] 以前私はWordPress はてなブログカード ver0.1（旧） という初期のバージョンを使用していましたが、今回のバージョンアップは超絶進化しています。 […]
初めまして。rubyと申します。
rubylogというブログを運営しているのですが、内部リンクのブログカード風の物が作れず、困っておりました。
今は似たようなものを使っておりましたが、この公開いただいたプラグインに変更してみようと思います。
また、いろいろと読ませていただきたい記事ばかりなので、今後ともどうぞよろしくお願いします！
rubyさん、コメントありがとうございます。
内部リンクも新しくウィンドウ／タブを開くVer0.1と、開かないVer0.25があります。
自分もWordPressのショートコートを使用するタイプのものを探していたものの、なかなか見つからず困ったので、お役に立てれば何よりです。
こちらは記事更新もプログラム更新も気まぐれですが、よろしくお願いします♪
ぽぽろんさん
返信コメントありがとうございました。
「はてなブログカード『似』」のリンクカードの暫定版をご使用なのですね！
そのようなものがあるなら、公開をしていただければありがたいです。
おかえりなさいさん、使用していただいるようでありがとうございます。
早速、内部リンクは新しいタブを開かないバージョンを以下の記事で公開しました。
よろしければお試しください。
http://poporon.poponet.jp/20150411/7078
おかえりなさいさん、コメントありがとうございます。
そして、返信遅れましてすいません。
さて、「HatenaBlogCard」プラグインを使用してのブログカードの表示部分については、「はてなブログカード」の仕組みをそのまま使用しているため、クリックしたときに新規タブで開かないようにすることはできないのです。
実は当ブログでは、外部リンク時には「はてなブログカード」、内部リンク時には「はてなブログカード『似』」のリンクカードを表示させるプラグインを使用しています。
暫定版ではありますが、ご希望があれば、そちらを公開することはできるかも知れません(^-^)o
はじめまして。「おかえりなさい」と言います。
プラグイン「HatenaBlogcard」を使用させていただいています。
内部リンクも外部リンクも綺麗に表示できて喜んでいます。
よろしければお1つ教えて頂きいのですが、このプラグイン経由でリンクを開くときにブラウザーのタブを新しく開かないようにすることは可能でしょうか？
よろしくお願いします。