サイトのキャプチャをショートコードで生成してくれる「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/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>
関連記事
-
-
"コメントを残す" 削除・文言を変更する方法
コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹
-
-
コメントフォーム・リストのカスタマイズ
コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ
-
-
Twenty Fourteen クレジットを非表示・変更方法
Twenty Fourteenにも最下部に「Proudly powered by WordPress」というコピーライトが表示されます。それを削除もしくは変更するには、footer.phpを編集して行
-
-
Twenty Twelve 投稿日・投稿者を非表示に
TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に
-
-
コメント欄停止・コメント削除
WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止
-
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
-
-
テーマ 「Responsive」 カスタマイズ
デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ
-
-
ie.cssの子テーマ化など Twenty Twelve 1.1での変更点
TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"
-
-
RSS/Atomフィード カスタマイズ
RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿:投稿のフィード @全てのページ サイトのコメント:
-
-
Twenty Twelve サイトタイトルをテキストから画像に置き換え
ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの
Comment
[…] サイトのキャプチャをショートコードで生成してくれる「Browser Shots」 […]
はじめまして。
フィルターフックで導入しようと試みたのですが新規ウィンドウで開きませんでした。そのままfunctions.phpにコピペでは駄目なんでしょうか?
セバスチャンさん、コメントありがとうございます。
コードが間違っていました。add_filterのpriorityを修正させて下さい。