サイトのキャプチャをショートコードで生成してくれる「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>


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

関連記事

Twenty Twelve サイトタイトルをテキストから画像に置き換え

ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの

テーマ ブックマーク 2013

2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top

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

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

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点

TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

no image

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

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

Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示

日付を表示する部分は、全てtwentyfourteen_posted_onに集約されています。該当部分をコメントアウトしたかたちで子テーマのfunctions.phpに追加して下さい。 「投稿日

Twenty Twelve "Open Sans"の使用を止

「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

Comment

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

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

Message

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

*

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

    PAGE TOP ↑