ワードプレス(WP)でリンクにスクリーンショットのサムネ画像をつける

タイトルのままですが、リンクにブラウザから見たサイトのキャプチャ画像を追加します。WPプラグインのBM Shotsとまったく同じ事をショートコードで行います。

なぜプラグインを使わないかというと、個人的にプラグインをあまり増やしたくないのと、プラグインより手軽にカスタマイズできるからです。

 

ソースコード

とても簡単なコードです。スクリーンショットの作成にはワードプレスの非公式APIを使います。これはBM Shotsと同じ方法です。しかし、このAPIはアンオフィシャルなので、今後の提供の保障はなく、いつ使えなくなっても文句は言えません。

その為、同じく無料でスクリーンショットのAPIを提供されているHeartRails CaptureさんのAPIもコメントアウトで付けました。もしHeartRailsさんのAPIを使う場合は、heightも指定できるように改造すると良いでしょう。

ショートコードの利点として、将来的にもし違うAPIが使いたくなったとしても、ショートコードのAPI参照部分だけを変更すればよいので、過去記事を遡って修正する必要はありません。

テーマフォルダ内のfunctions.phpに追加するコード

/*
URLからスクリーンショットのリンクを自動作成
[ss url="http://www.yahoo.co.jp/"]
[ss url="http://www.yahoo.co.jp/" width="600"]
[ss url="http://www.yahoo.co.jp/" class="alignleft"]
*/
function sc_screen_shot($atts) {
    extract(shortcode_atts(array(
        'url' => '',
        'width' => 300,
        'class' => '',
    ), $atts));

    $urlencode = urlencode($url);
    $width = intval($width);
    $img = "<img src=\"http://s.wordpress.com/mshots/v1/{$urlencode}?w={$width}\" alt=\"{$url}のスクリーンショット\" />";
    //$img = "<img src=\"http://capture.heartrails.com/{$width}x{$width}?{$url}\" />";
    
    return "<a href=\"{$url}\" class=\"sslink {$class}\" target=\"_blank\">{$img}</a>";
}
add_shortcode('ss', 'sc_screen_shot');

 

呼び出し方法

[ss url="http://google.com/" width="150"]

[ss url="http://google.com/"]

[ss url="http://google.com/" width="570"]

画像の配置(float)はclassでalignleftやalignrightを追加します。

[ss url="http://google.com/" class="alignleft"]

 

カスタマイズ

widthを指定しない場合のデフォルト値は300です。 また、リンクにはsslinkクラスとtarget=”_blank”属性が追加してありますが、 好みにあわせて変更してください。

上で触れましたが、もしHeartRailsさんのAPIを使う場合にheightも指定できるように改造するとしたら、sc_screen_shot関数はこのようになります。

function sc_screen_shot($atts) {
    extract(shortcode_atts(array(
        'url' => '',
        'width' => 300,
        'height' => 300, // 追加
        'class' => '',
    ), $atts));

    $urlencode = urlencode($url);
    $width = intval($width);
    $height= intval($height); // サニタイズ追加
    $img = "<img src=\"http://capture.heartrails.com/{$width}x{$height}?{$url}\" />"; // $heightに変更
    
    return "<a href=\"{$url}\" class=\"sslink {$class}\" target=\"_blank\">{$img}</a>";
}

このようにショートコードは少しハードルは高いものの、プラグインよりもカスタマイズが簡単なのでオススメです。