wpカスタマイズ 2014-11-08

【WP】ショートコードで任意のページのスクリーンショットを表示する方法

sd-screenshot

今回は、任意のページのスクリーンショットをショートコードで表示する方法のご紹介です。
WordPressには、Browser Shotsというスクリーンショットをショートコードで表示させるプラグインがあるのですが、こちらを利用してもいいと思いますが、スクリーンショットの為だけにプラグイン1つ導入するのもどうかな~と思いましたので、こちらの自作のショートコードをご紹介したいと思います。
最終的にやっていることは、同じですが、プラグインを利用するか、それともご自身でfunctions.phpにショートコードを登録して利用するかの違いです。

今回ご紹介するショートコードを利用すれば、下記のようにリンク付きでスクリーンショットとタイトルも表示します。画像のサイズも変更可能です。
ショートコードやCSSのスタイルも含めコピペで簡単に導入可能です。

上記のショートコードは、下記のようになります

[screenshot title="取得したスクリーンショットのタイトル" url="取得したいスクリーンショットのURL" alt="スクリーンショットのalt" width="スクリーンショットの幅"]

利用方法

利用方法はとても簡単で、functions.phpにショートコードを登録してCSSでレイアウトを整えたら、投稿画面にてショートコードを貼り付ければ、上記のようなスクリーンショットが表示されます。

functions.phpにショートコードの登録

まずは、ショートコードを登録しますので下記コードをfunctions.phpに貼り付けてください。
もし出力するHTMLなどを変更する場合は、変更をして下さい。

/*-------------------------------------------*/
/*スクリーンショットショートコード(リンク・タイトル付き)
/*-------------------------------------------*/
function wps_screenshot($atts, $content = null) {
        extract(shortcode_atts(array(
                        "screenshot" => 'http://s.wordpress.com/mshots/v1/',
                        "url" => 'http://',
                        "alt" => 'screenshot',
                        "width" => '150',
						"title" => 'title'
        ), $atts));
                return $screen = '<div class="screen-box clearfix"><div class="screen-img"><a href="'. $url .'" target="_blank" title="'.$title.'"><img src="' . $screenshot . '' . urlencode($url) . '?w=' . $width . '" alt="' . $alt . '" style="text-align:' . $align . ';"/></a></div><div class="screen-text"><p><a href="'. $url .'" target="_blank" title="'.$title.'">'. $title .'</a></p></div></div>';
}
add_shortcode("screenshot", "wps_screenshot");

レイアウトの調整

こちらは、ご自身のサイトに合うようにCSSを調整して下さい。
ご自身のサイトがレスポンシブならば、調整が必要と思います。

/*---------------------------------------------------------
  スクリーンショットスタイル
---------------------------------------------------------*/
.screen-box{
	padding:15px;
	border:1px solid #bfbfbf;
	width:70%;
	margin:30px auto 20px auto;
	background:#f1f1f1;
	line-height:1;
	}
.screen-img{
	float:left;
	margin-right:20px;
	}
.screen-img img{
	box-shadow: 0 0 5px rgba(0,0,0, 0.2);	
	}
.screen-text{
	line-height:1.8;
	}

ショートコードの挿入

それでは、最後に下記ショートコードを投稿画面にて貼り付ければ、無事にスクリーンショットが表示されます。

  • titleには、取得したいスクリーンショットのタイトルを入力
  • urlには、取得したいスクリーンショットのURLを入力
  • altには、取得したスクリーンショットのaltを入力
  • widthには、幅のサイズを入力します。
[screenshot title="取得したスクリーンショットのタイトル" url="取得したいスクリーンショットのURL" alt="スクリーンショットのalt" width="スクリーンショットの幅"]

コピペで簡単に導入出来ますので、別のサイトなどのスクリーンショットなどを表示したいと場合などは、試してみてはいかがでしょうか。
また、当サイトで配布している無料テーマには、こちらの機能をペーストして貼り付けるのではなくエディタにボタンを追加して挿入できるように実装する予定です。

当サイトで配布している無料 WordPressテーマ

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS Get-Ratio

黄金比や16:9などを計算してくれる画像比率計算サイト【Get Ratio】

NEXT large_4382008106

WordPressプラグイン【AmazonJS】シークレットアクセスキーではまってしまった・・