自分のブログ記事へのリンクをアイキャッチ画像付きで作成する方法(改)

更新日 2018年3月5日
投稿日 2014年5月16日
著者阿部雅彦 (まさ)
カテゴリーブログ運用・カスタマイズ
タグ WordPress ブログ改造

この記事を読むのに必要な時間は約 9 分です。

今回はWordPressでブログを書いている方向けに。

記事の中で他のページを紹介したい場合に、ShareHtmlという便利なブックマークレットがあります。

このブックマークレットを使うと、以下のようにそのページのスクリーンショット付きのリンクを作成することができます。

ShareHtmlとFocusHtmlもリニューアルしました♪

AppHtmlに続きまして他のBookmarkletも順次リニューアル中です。今回はShareHtmlとFo…

iphone-diary.com

自ブログの過去記事へのリンク作成に使うための改造方法

ShareHtmlは、単純にテキストだけでリンクするよりも見た目も良いし、リンク先をイメージしやすいので非常にお気に入りのブックマークレット。使っていない方は是非使うと良いです。

そんな折、ShareHtmlを改造して、画像部分をスクリーンショットではなく、その記事のアイキャッチ画像にするための方法が紹介された記事を見つけました。

WordPressの内部リンクのアイキャッチ画像を簡単に取得できるショートコードを作りました！コピペでできます！

ShareHtmlで過去記事を紹介する時にサムネイルが毎回似たようになるのを回避したくてアイキャッチ画像を取得するように変更しました。簡単にできるので真似してくださいま…

tetokon.com

自分のブログ記事へのリンクにしか使えないようですが、スクリーンショットよりアイキャッチ画像の方が分かりやすいので、早速自分のブログ記事用のブックマークレットを作成してみました。それを利用したのが以下のリンクです。

1年前のこと思い出せますか？ – Evernoteにライフログ vol.0 | MasaLog

毎日を記録する12のノートブック – Evernoteにライフログまとめ | MasaLog

なんか、、、変。
私のWordPressの設定か利用方法に問題があるのかもしれませんが、アイキャッチ画像に利用している縦長・横長の画像をそのまま縮小されてしまったので、不格好になってしまいました。

WordPressでは、アップロードした画像に対して正方形に切り抜いた(トリミングした)画像が用意されています。その画像を使うにはどうしたらいいんだろう。。
参考：画像ファイルの大/中/サムネイルのサイズの設定 - WordPressの使い方

試行錯誤して紹介いただいていた方法をカスタマイズしました。その結果が以下のリンク。いい感じになりました。

1年前のこと思い出せますか？ – Evernoteにライフログ vol.0 | MasaLog

毎日を記録する12のノートブック – Evernoteにライフログまとめ | MasaLog

以下では、私が行った（再）改造の方法をご紹介します。元サイトの説明もご覧ください。

アイキャッチ画像を利用するためのShareHtmlの(再)改造方法

ショートコードを記述

まず、利用しているテーマフォルダーにある、fuctions.phpに以下を追記します。このコードを元々ご紹介いただいたものから変更しています。

[php gutter="false"]
/* アイキャッチ画像を渡す */
function get_my_thumbnail( $atts, $post_url = null )
{
$src_info = wp_get_attachment_image_src(get_post_thumbnail_id(url_to_postid($post_url)),'thumbnail');
return $src_info[0];
}
add_shortcode('my_thumbnail', 'get_my_thumbnail');
[/php]

ShareHtmlのブックマークレットを改造

次にShareHtmlのブックマークレットを改造します。こちらは、元サイトと変更ありません。ShareHtmlメーカーでお好みの書式でブックマークレットを作成した後、コードを同じように変更してください。

ちなみに私が利用しているブックマークレットは以下です。画像サイズを変えて、大中小の3パターン作っています。見栄えを考慮して微修正も加えています。("style%3D"margin-right%3A10px"をimgタグ内に追記)

[javascript]
javascript:(function(){var d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/sharehtml.js';if(!url.match(/\?/))url+='?t='+(new Date()).getTime();url+='&out='+'preview'+'&cnt='+'100'+'&sts='+' '+'&ste='+''+'&cts='+' '+'&cte='+''+'&fmt='+'<a href%3D"%24%7Bposturl%7D" target%3D"_blank" rel%3D"nofollow"><img class%3D"alignleft" align%3D"left" border%3D"0" src%3D"%5Bmy_thumbnail%5D%24%7Bposturl%7D%5B/my_thumbnail%5D" alt%3D"" width%3D"100" height%3D"100" style%3D"margin-right%3A10px" /></a><a style%3D"color%3A%230070C5%3B" href%3D"%24%7Bposturl%7D" target%3D"_blank" rel%3D"nofollow">%24%7Bposttitle%7D</a><a href%3D"http%3A//b.hatena.ne.jp/entry/%24%7Bposturl%7D" target%3D"_blank"><img border%3D"0" src%3D"http%3A//b.hatena.ne.jp/entry/image/%24%7Bposturl%7D" alt%3D"" /></a>%24%7Bpostselect%7D%24%7Bmemo%7D ';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})(); [/javascript]

まとめ

ShareHtmlは多用しているブックマークレット。ただ、スクリーンショットはインパクトが弱いので、自分のブログ記事限定でもアイキャッチ画像が使えるようになり非常にいい感じになりました。ショートコードを利用するとか、まったく発想になかったので勉強にもなりました。私もオリジナルで何かできないか、考えてみたいと思います。

photo credit: Amin Allen Tabrizi via photopin cc