サイトのキャプチャをショートコードで生成してくれる「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 サイトタイトルをテキストから画像に置き換え

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

no image

パーマリンク・スラッグなどURL カスタマイズ

管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可

翻訳ファイルの子テーマ化

子テーマでfunctions.phpなどを変更していくと翻訳すべき項目にぶつかっていくと思います。例を挙げると_()の部分で、Wordpressが翻訳を行ってくれる部分です。 個人的には、日本語

no image

Google+ プラスワン(+1)ボタンの設置

Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式

no image

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

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

Twenty Fourteen 「投稿者」を非表示

TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて

「カテゴリー」ウィジェット カスタマイズ

「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加

Twenty Fifteen カスタマイズ

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

Twenty Twelve 投稿者情報を表示/非表示に

TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「

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

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

Comment

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

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

Message

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

*

PAGE TOP ↑