サイトのキャプチャをショートコードで生成してくれる「Browser Shots」

外部のサイトを紹介する際にそのサイトのキャプチャが添えられているとイメージがつかみやすくなりクリックのモチベーションが上がるような気がします。
今回は、ショートコード一行でサイトのスクリーンショットを埋め込んでくれるプラグイン「Browser Shots」を試してみました。また、そのキャプチャのリンクを別タブ(ウィンドウ)で開くようにしてみました。

プラグイン「Browser Shots」

ダウンロード
インストール・有効化すればあとはショートコードを用いてサイトのスクリーンショットを埋め込むことができます。
サンプル (バージョン 1.0)

// ショートコード
[browser-shot url="サイトURL" width="幅"]
// 例
[browser-shot url="http://wordpress.org/" width="600"]

別タブ(ウィンドウ)で開くようにする

フックしてやる方法

以下のコードで、target="_blank"を付与することができます。

// 子テーマのfunctions.php
function browser_shot_target_blank( $content){
    return str_replace( '<div class="browser-shot"><a href="', '<div class="browser-shot"><a target="_blank" href="', $content);
}
add_filter( 'the_content', 'browser_shot_target_blank', 9999);

コード修正

ソース自体を触る場合は以下
** プラグインアップグレードのたびに書き換えが必要になります。

// /wp-content/plugins/browser-shots/browser-shots.php 52~57行を以下に置き換え
        // Get screenshot
        $image_uri = $this->get_shot( $url, $width );

        if ( !empty( $image_uri ) ) {
            $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />';
            return '<div class="browser-shot"><a target="_blank" href="' . $url . '">' . $image . '</a></div>';
        }

WordPressにもともとあるAPI

もともとWordPressのサービスとしてこのキャプチャリング機能(API)は存在します。
実際、上記プラグインもこれを使ってします。ただし、URL部分をエンコードさせる必要があるため結構めんどくさいのは事実です。

http://s.wordpress.com/mshots/v1/「URL」?w=「画像幅」

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwordpress.org%2F?w=600

// キャプチャ
<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwordpress.org%2F?w=600" />
// リンク付きキャプチャ
<a target="_blank" href="http://wordpress.org/">
<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwordpress.org%2F?w=600" />
</a>


  • このエントリーをはてなブックマークに追加

関連記事

プラグイン関連のJSやCSSの読み込みをフィルター

プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず

Twenty Twelve "コメントをどうぞ"を消す

今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー

no image

アイキャッチにマウスオーバーすると投稿タイトルを表示

WordPressのフォーラムから定期的に流入があるため、対応をいくつか探ってみました。トピックは、「サムネイルにマウスオーバーするとタイトルが表示されるようにしたい」 ちなみに、投稿内のキャプ

Twenty Eleven カスタマイズ

目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

Lightbox (画像ポップアップ) プラグイン

WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig

Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと

no image

スライダー・ギャラリー プラグイン

WordPressにギャラリーが実装できるプラグインをまとめてみました。 順番はオススメ順です。 Simple Responsive Slider #ショートコード #テンプレート #ウ

no image

「編集(Edit)」リンクの非表示方法

ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ

Comment

  1. はじめまして。
    フィルターフックで導入しようと試みたのですが新規ウィンドウで開きませんでした。そのままfunctions.phpにコピペでは駄目なんでしょうか?

    • セバスチャンさん、コメントありがとうございます。
      コードが間違っていました。add_filterのpriorityを修正させて下さい。

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP ↑