[ WordPress ] URL を書くだけで、サイトのキャプチャを取得するショートコード

URL を書くだけで、サイトのキャプチャを取得する WordPress のショートコードを試してみました〜。

導入手順は次のとおりです。

functions.php にコードを追加する

functions.php に次のようなコードを追加します。

// URL からサイトのキャプチャを撮るショートコード
function wpr_snap($atts, $content = null) {
    extract(shortcode_atts(array(
        "snap" => 'http://s.wordpress.com/mshots/v1/',
        "url" => 'http://bowz.info/',
    ), $atts));
    $img = '<img src="'.$snap.urlencode($url).'?w=120" alt="'.$url.'" class="alignleft"/>';
    return '<a href="'.$url.'">'.$img.'</a>';
}
add_shortcode("s", "wpr_snap");

// 幅 640px の場合
function wpr_snap_m($atts, $content = null) {
    extract(shortcode_atts(array(
        "snap" => 'http://s.wordpress.com/mshots/v1/',
        "url" => 'http://bowz.info/',
    ), $atts));
    $img = '<img src="'.$snap.urlencode($url).'?w=640" alt="'.$url.'" width="640"/>';
    return '<a href="'.$url.'">'.$img.'</a>';
}
add_shortcode("m", "wpr_snap_m");

上のコードは、リンク付きで、スタイルもサイズも固定です。

※ URL が未指定時は、このサイトのキャプチャがでます。

記事の中にショートコードを記述する

投稿記事の本文中に、次のようなショートコードを記述するとサムネイルを表示することができます。

[s url="http://bowz.info/"]

上のサンプルは便宜上全角の括弧を使っていますが、実際は全て半角で記述します。

Markdown 書式と同時に使っても正常に動作しているみたいです。

動作サンプル

http://bowz.info/

この画像は、上記のコードで表示させています。

何か日本語フォント部分がキャプチャできてない。。。(^_^;)
うちのサイトの CSS フォント設定がまずいんだろうか??

[m url=”http://www.yahoo.co.jp”]

ちなみに、Yahoo! JAPAN はこんな感じ。

探してみると、同じような機能のプラグインがすでにありました〜 (^_^;)

今回のカスタマイズと同じ事ができる Browser Shots というプラグインがありました。オプションで色々設定できるしこちらの方が便利かも?

また、ショートコードを簡単に入力するには、AddQuicktag というプラグインが便利です。

参考にさせてもらったページ

ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。