【WordPress】リンク先をサムネイル表示してくれるプラグインとその改造

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 162 follow us in feedly

まえがき

Googleのトップページ

Googleのトップページ

↑ これをやってくれるプラグインをご紹介。

今回は少し自分でカスタマイズをしてUIを向上。

おまけにMarsEditでのプラグインを使いやすくする設定も紹介します。

 

プラグインについて

Browser Shots

Browser Shots

ここからダウンロードが可能です。

WordPressの管理画面で検索しても出てこないみたいです。

 

ダウンロードしたフォルダを pluginsのフォルダにいれて、プラグインを有効にします。

 

使い方

とても簡単です。

基本的な使い方は↓

[※browser-shot url="http://link-to-website" width="600"]

※ ↑のコードの「※」は必要ありません

・url にはもちろんリンク先のURL

・width は画像の幅です。省略ができ、その際は600pxになります。

・alt サンプルコードにはのっていませんが

alt="画像の名前"

とすることで画像のalt属性を指定できます。

 

プラグインのカスタマイズ

少しこのプラグインに手を加えさせていただきました。

・リンク先を新規ウィンドウで開くようにする。

・リンク先のタイトルを決めれてかつ表示する(画像のaltと同じものにしてソース入力を削減)

・デフォルトの画像幅が600では大きすぎるので変更。

 

ソースコード

プラグインの「browser-shots.php」の「」

public function shortcode( $attributes, $content = '', $code = '' ) 

内を↓に変更

public function shortcode( $attributes, $content = '', $code = '' ) 
	{
		// Get attributes as parameters
		extract( shortcode_atts( array(
			'url' => '',
			'width' => 300,
			'alt' => ''
		), $attributes ) );
		
		// Sanitize
		$width = intval( $width );
		$url = esc_url( $url );
		$alt = ( empty($alt) ) ? $url : esc_attr($alt);
		
		// Get screenshot
		$image_uri = $this->get_shot( $url, $width );
		
		// ▼ 2013.7.12 編集
		if ( !empty( $image_uri ) ) {
			$image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />';
			return '
			<p style="text-align:center;"><a href="'.$url.'" target="_blank">'.$alt.'</a></p>
			<div><a href="' . $url . '"target="_blank">' . $image . '</a></div>
			';
		}
		// ▲ 2013.7.12 編集
		
		return '';
	}

 

これで 

[※browser-shot url="http://google.com" alt="Googleのトップページ"]

※ ↑のコードの「※」は必要ありません

とすることで本記事1番うえのGoogleのページのような表示になるはずです。

 

MarsEditの設定

MarsEditで入力を捗らせましょう。

[※browser-shot url="#askurl Enter a URL:#" alt="#asktext Enter Text:#"]

※ ↑のコードの「※」は必要ありません

こんなかんじのコードをショートカットに設定しましょう。

自分の場合だと「command option A」に設定しました。

Screeny Shot 2013 07 13 0 43 49

Screeny Shot 2013 07 13 0 44 12

こんな感じでリンク先と名前だけつければいい状態までもっていけるのでお勧めです。

 

関連記事

FuelPHPのユニットテスト時に環境変数で接続するDBを切り替える

まえがき さて、何をやりたいかというと。 ユニットテスト時にはユニット...

記事を読む

FuelPHP×PHPUnit×Jenkinsの環境を作るまでのメモ

まえがき かなり久しぶりのブログ更新になりますが、私は元気です。 忙し...

記事を読む

Screeny Shot 2013-08-01 14.59.04.png

【WordPress】プラグインを一個いれたらサイトが爆速になった嘘のようなホントの話

  まえがき 最近ブログが重くなったような気がしたので、ベンチマークを...

記事を読む

Screeny Shot 2013-07-01 2.45.52.png

ニコニコ動画マイリストrssをPHPとRubyで取得してみる

まえがき ニコニコ動画のマイリストをRSSで取得できるみたいなので試...

記事を読む

images-1

PEARライブラリphpDocumentor2を使って楽々ドキュメント作成

まえがき GWも終わって普段の生活に戻り5月病にかかった私ですが、 ...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑