【WordPress】プラグインなしでスクリーンショットを表示する方法Browser Shotsと互換あり

 2015/03/26

キャプチャ

WordPressでスクリーンショットを表示するのに非常に重宝するプラグインBrowser Shots。しかし、最近のプラグインアップデートに伴い画像の縦幅が勝手に指定されるようになってしまいました。以前、超簡単にキャプチャとサイト名を一緒に表示する方法という記事でご紹介していた方法では、縦長の間延びしたキャプチャ画像が表示されてしまいます。(プラグイン自体を直接修正する方法を追記済み。)

頻繁にアップデートのあるプラグインではないのですが、更新した際に修正するのをうっかり忘れてしまいそうなので、プラグインを使用するのを辞め、WordPress.comのAPIを使って表示する方法をご紹介します。

スポンサーリンク


Browser Shotsを使用していても過去記事修正不要

使い慣れたプラグインの利用を辞める時、面倒なのが過去記事の修正です。WordPress.comのAPIをBrowser Shotsの吐き出すクラス名に合わせた方法ですので、過去記事を修正する必要はありません。参考にしたのは超熟読しているブログ、かちびと.netさんです。

functions.phpへ記述

functions.phpは最重要ファイルですのでバックアップをとってくださいね!

//キャプチャ(幅150) browser-shot互換あり
function api_sc_shot ($attributes) {
extract(shortcode_atts(array(
'url' => '',
), $attributes));
$imageUrl = sc_shot ($url);
if ($imageUrl == '') {
return '';
} else {
return '<div class="browser-shot"><a href="' . $url . '" target="_blank" ><img src="' . $imageUrl . '" alt="' . $url . '" ></a></div>';
}
}
function sc_shot ($url = ''){
return 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) . '?w=150';
}
add_shortcode('browser-shot', 'api_sc_shot');

これでプラグインBrowser Shotsと同じショートコードでリンク付きの画像キャプチャを表示します。プラグインの利用を停止してもキャプチャが表示しているままの状態になっているはずです。ついでにtarget=”_blank”を入れたので別窓で開くようにしました。

[browser-shot url="http://shufulife.com/" ]

※[ ]は半角にて入力してください!!

おなじみのこんな感じ↓。

http://shufulife.com/

Memo

こちらのコードは画像の幅を150pxに指定しています。以前当サイトで紹介しているBrowser Shotsのコードに合わせていますので、キャプチャの幅を変えたい場合は?w=150の数字を変えてください。

CSSとサイト名の吐き出しについて

過去記事とまったく同じですので以下の記事を参考にしてください。CSSはSTINGER5に対応。サイト名の吐き出しはGoogleChromeの拡張機能Create Linkを利用しています。

まとめ

プラグインを修正するだけでも問題ないかとは思いますが、その修正を手間と感じる方はお試しください。

かちびと.netさんの記事にも記載がありますが、WordPress.comのAPIこのコードは非公開APIらしくいつまで使えるかわからないそうです。しかし、もし使えなくなってしまったらBrowser Shotsに戻せばいいって訳にはいかないのです。なぜならBrowser ShotsもこのAPIを使っているから。

WordPress関係の記事は別のブログにも書いています!

STNGER5 WordPress

Please comment!

  

Messege




1件のトラックバック