ブログ構築の手順は【総合まとめ】から!

[ 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" => 'https://example.com/',
    ), $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" => 'https://example.com/',
    ), $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="https://example.com/"]

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

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

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

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

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

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

ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です