指定のサイトのサムネイル画像を自動生成する、WordPressのBrowserShotsプラグイン導入した手順と、カスタマイズ箇所を書き留めたメモ。
プラグイン導入と使い方
プラグイン新規追加
1.WordPress管理画面の「プラグイン」→「新規追加」に移動して『Browser Shots』でキーワード検索
2.Browser Shotsプラグインをインストールして、有効化する
3.記事書く
記述例
・url=”” の中に表示させたいサイトのURL
・width=”” の中に表示させたい画像のサイズ
[browser-shot url="http://link-to-website" width="600"]
※カッコ[]は表示用の為全角ですが、使用する場合は半角で記述してください。
以上でプラグインの導入は終わりなんですが、いざ使ってみると使い勝手悪い部分がありましたので、プラグインのPHP側の処理を個人的に修正しました。
処理のカスタマイズ
修正した点
・画像のリンクを別ウィンドウで開くようにする
・画像の表示位置を指定できるようにする
修正手順
1.WordPress管理画面の「プラグイン」→「Browser Shots」→「編集」
2.修正したいファイルを右側の欄から選択して修正(今回は→「browser-shots/browser-shots.php」)
3.修正が完了したら、ページ下部の「ファイルを更新」ボタンをクリックして完了
修正内容
※実際のプラグイン編集ページでは、行番号は書かれてませんので、一度NoEditorなどのテキストエディタにペーストして修正した方が分かりやすいかと思います。
■画像のリンクが別ウィンドウで開いてくれない状態でしたので、別ウィンドウで開く処理を追加。
・57行目のaタグの中に「target=”_blank”」を追加する。
ファイル→「browser-shots/browser-shots.php」
▼修正前
if ( !empty( $image_uri ) ) { $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />'; return '<a href="' . $url . '">' . $image . '</a>'; }
▼修正後
if ( !empty( $image_uri ) ) { $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />'; return '<a href="' . $url . '" target="_blank">' . $image . '</a>'; }
■画像の表示位置を指定出来る処理を追加
画像の横に文字列を表示したい場合に使い勝手が効くようにしました。
・43行目の「’alt’ => ”」の語尾にカンマ(,)を追加する。
・44行目に「’align’ => ”」を追加する。
ファイル→「browser-shots/browser-shots.php」
▼修正前
extract( shortcode_atts( array( 'url' => '', 'width' => 600, 'alt' => '' ), $attributes ) );
▼修正後
extract( shortcode_atts( array( 'url' => '', 'width' => 600, 'alt' => '', 'align' => '' ), $attributes ) );
・56行目のimgタグの中に「align=”‘ . $align .'”」を追加する。
ファイル→「browser-shots/browser-shots.php」
▼修正前
if ( !empty( $image_uri ) ) { $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />'; return '<a href="' . $url . '" target="_blank">' . $image . '</a>'; }
▼修正後
if ( !empty( $image_uri ) ) { $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" align="' . $align . '" class="alignnone" />'; return '<a href="' . $url . '" target="_blank">' . $image . '</a>'; }
上記の修正によって、記事に書く際に下記の通り指定すれば画像表示位置を指定できるようになります。
修正後の記述例
・url=”” の中に表示させたいサイトのURL
・width=”” の中に表示させたい画像のサイズ
・align=”” の中に表示させたい位置を指定(top、right、bottom、left)
[browser-shot url="http://link-to-website" width="600" align="left"]
※カッコ[]は表示用の為全角ですが、使用する場合は半角で記述してください。
以上です。
記事編集履歴
▼ 2013.04.27 タイトル変更
「WordPressのBrowserShotsプラグイン導入」→ 「WordPressのBrowserShotsプラグイン導入と使い方解説とカスタマイズ」
▼ 2013.04.27 本文レイアウト変更
この記事を見た人にオススメの記事
3件コメントがあります。
[…] 参考サイト WordPressのBrowserShotsプラグイン導入と使い方解説とカスタマイズ […]
[…] Various Program Blog » Post Topic » WordPressのBrowserShotsプラグイン導入と使い方解説とカスタマイズ […]
[…] Various Program Blog » Post Topic » WordPressのBrowserShotsプラグイン導入と使い方解説とカスタマイズ […]
コメントする