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 というプラグインが便利です。
参考にさせてもらったページ
- どや!?いつか使うかも知れない簡単に出来るWordPressカスタマイズまとめ | デザインどや!?
- お手軽WordPress Tips:wordpress.comのAPIを使ってスクリーンショットを取得する – かちびと.net
ありがとうございます!