サイトのキャプチャをショートコードで生成してくれる「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>
関連記事
-
Twenty Fourteen カスタマイズ
「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent
-
Twenty Thirteen カスタマイズ
WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ
-
「カテゴリー」ウィジェット カスタマイズ
「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加
-
折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」
「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ
-
Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更
標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
テーマ 「Responsive」 カスタマイズ
デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ
-
投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ
ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手
-
ナビゲーションメニューに検索フォームを追加
メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく
-
"コメントを残す" 削除・文言を変更する方法
コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹
Comment
[…] サイトのキャプチャをショートコードで生成してくれる「Browser Shots」 […]
はじめまして。
フィルターフックで導入しようと試みたのですが新規ウィンドウで開きませんでした。そのままfunctions.phpにコピペでは駄目なんでしょうか?
セバスチャンさん、コメントありがとうございます。
コードが間違っていました。add_filterのpriorityを修正させて下さい。