男子ハックさんの日刊男子ハックでよく見るWebページの紹介リンク画像がカッコイイなぁと思いました。
聞いてみると、どうやらWordPressの隠れ機能で成り立っているようです。
隠れ機能とはどういう事かと言うと、本来のオープンに公開しているわけでは無く、WordPressの仕様で使っているとのこと。
コードを確認してみると、画像自体はWordPressのサーバーから引っ張ってきている様子。
<a href="URL" target="_blank"> <img src="http://s.wordpress.com/mshots/v1/URL" class="img_link" alt="URL" width="500"></a>
BM Shotsで簡単設置
この仕様のコードを簡単に設置するプラグインが『BM Shots』です。
プラグイン検索では出てこないので、以下のLinkよりダウンロードし、FTPにてプラグインのディレクトリにアップロードします。
WordPress Website Screenshot Plugin
このプラグインの使い方は、簡単で以下の様にショートコードを書けばいいだけ。
[browsershot url="http://masterpeace21.com/" width="XXXpx"]
簡単ですね!!
しかし、これでは配置が左寄りになってしまうので、CSSで編集出来るように以下のようにプラグインを編集しました。
プラグイン編集
ハイライトになっている所が編集してある所です。
/**
* Usage : [browsershot url="http://link-to-website" width="foo-value" target="anchor-target"]
*/
function bm_sc_mshot ($attributes, $content = '', $code = '') {
extract(shortcode_atts(array(
'url' => '',
'target' => '',
'width' => 500, //横幅指定//
), $attributes));
if (empty($url)) {
return;
}
$att = '';
$width = (int) $width;
if ($width <= 0) {
$width = 500; //横幅指定//
}
$imageUrl = bm_mshot ($url, $width);
$anchor_attributes = array (
'href' => $url,
);
if (!empty($target)) {
$anchor_attributes[] = $target;
}
foreach ($anchor_attributes as $k => $v) {
$att .= $k . '="' . $v . '" ';
}
if ($imageUrl == '') {
return '';
} else {
$image = '<img src="' . $imageUrl . '" class="img_link" alt="' . $url . '" width="' . $width . '" />'; //class指定//
return '<div class="browsershot mshot"><a ' . $att . ' target="_blank">' . $image . '</a></div>'; //target指定//
}
}
/**
*
*/
function bm_mshot ($url = '', $width = 500) { //横幅指定//
if ($url != '') {
return 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) . '?w=' . $width ;
} else {
return '';
}
}
add_shortcode('wcap', 'bm_sc_mshot'); //shortcode名変更//
?>
9,29,49:横幅のデフォルト？を個人的に好きな500pxに変更しました。これは各々好きな値でいいです。
40:imgに掛かるclassを指定してあげる事で、CSSで画像回りをレイアウト出来る様にしました。
41:targetを指定してあげる事で、リンクを別タブで開くようにしました。
59:shortcodeが若干長かったため、wcap(webcapture)という短いショートコードにしました。
CSSを追記
次にCSSを追記します。ここでは、画像を真ん中に配置してpadding5pxのdotted-borderを追加しました。
.img_link{
clear: both;
display: block;
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
border:1px dotted #ccc;
padding:5px;
}
これを使うと・・・
以下のコードを記載すると・・・(以下ではコードを上手く表示出来なかったのでwだけ全角)
[ｗcap url="http://masterpeace21.com/"]
こんな感じで出力されるようになります。
さらに快適に！！
さらに快適に使う方法がactyway.comさんのページにありました。
なんとChromeのプラグインであるCreateLinkというのを使えば便利との事。
このプラグインは現在開いているページを上手く事前に登録している型にクリップボードに出力してくれます。
例えば・・・
<a href="%url%">%htmlEscapedText%</a>
と型を決めておけば、勝手にLink付きのページタイトルをクリップボードにコピーしてくれるのです。
これを使って、以下の様に型を決めておけば簡単に取得ができるのです。
[ｗcap url="%url%"]
結果2クリックで出来る
わけです。
最初、コードを編集するのは手間かもしれませんが、いざ使いたい時にはサッと出来るので、かなぁ〜り便利ですよ！
