Browser Shotsのサムネイルを修正する

スポンサーリンク
スポンサーリンク

Browser Shots サムネイル修正

サムネイル付きのリンクが簡単に作成できるWordPressプラグイン「Browser Shots」で、サムネイルの表示がおかしくなる不具合を修正しました。

BrowserShotsのバージョン1.2以降では、コード内にサムネイルの縦幅指定が必要になりましたが、以前に作成したBrowserShotsのコードには縦幅の表記がないので、プラグインを更新するとサムネイルが縦に間延びして表示されてしまいます。

そこで、記事内の単語やURLを一括変換できる「Search Regex」を使って、BrowserShotsのコード内にサムネイルの縦幅指定「height=”160″」を追加して、表示の不具合を一気に修正しました。

heightの数値は、widthとの比率を考えて各自設定してください。いわしブログでは、画像などの縦横比率を3:2で設定しているので、width=”240″ height=”160″としています。

BrowserShotsのインストールと使い方はこちらをご覧ください。

ブログ記事をサムネイル画像付きで紹介 Browser ShotsとCreate Link
WordPressのプラグイン Browser Shotsと、Chromeの拡張機能 Create Linkを使えば、画像付きシェア用リンクが簡単に作成できるので、サイトやブログのサムネイル画像付きで記事を紹介することができます。
スポンサーリンク

BrowserShots サムネイル画像が縦に間延びする

ウェブサイトやブログを紹介するときに便利なWordPressプラグイン「Browser Shots」を使うと、サムネイル付きのリンクが簡単に作成できます。

いわしブログ内でも他のウェブサイトやブログを紹介するときは、BrowserShotsでサムネイル付きのリンクを作成しています。

しかし、BrowserShotsはバージョン1.2以降に仕様が変わり、サムネイル画像の横幅と縦幅の指定が必要になりました。以前はこんな感じでサムネイル画像が表示されていたのですが・・・

WordPressプラグイン BrowserShotsサムネイル画像

BrowserShotsのバージョン1.2以降は縦幅の指定がないと、サムネイルが縦に間延びして表示されてしまいます。サイト全体のキャプチャ範囲もおかしいですね。

Browser Shots バージョン1.2以降のサムネイル画像

修正は簡単で、BrowserShotsのコード内で横幅「width」の他に縦幅「height」を入れてやればOKです。でも、今まで記事内に作ったBrowserShotsのリンクは山のようにあるので、1つずつ修正するのは大変です。

そこで、記事内の単語やURLを一括変換できるWordPressプラグイン「Search Regex」を使って、BrowserShotsのコードを一気に修正しました。

Search Regexを使ってBrowserShotsのコードを修正

では、BrowserShotsのコードにサムネイルの縦幅指定「height=”160″」を追加して、表示の不具合を修正してみましょう。コードの一括修正は、記事内の単語やURLを一括変換できるWordPressプラグイン「Search Regex」を使います。

Search Regexは、WordPressで使用しているデータベース全体の中から、対象の単語を検索して一括変換できるので、効率よく文字列の置き換えができます。

Search Regexのインストールはこちらを参考にしてください。

Search Regexの使い方 記事中の文字列やコードを一括変換
記事内の単語やURL、コードを一括変換できるWordPressプラグイン「Search Regex」を紹介します。Search RegexはWordPressのデータベースから検索して一括変換できるので、効率よく単語やコードを置き換えることができます。

Browser Shotsのコードは、Chromeの拡張機能「Create Link」で作成します。コード部分はこんな感じですね。

[browser-shot url=”http://hogehoge.com/記事URL/” width=”240″]

いわしブログではBrowser Shotsのwidthを240で設定しています。この後にheight=”160″を追記します。

[browser-shot url=”http://hogehoge.com/記事URL/” width=”240″ height=”160″

この修正を1つずつやるのは大変なので、Search Regexで一気に修正します。

スポンサーリンク

Search Regexでコードを検索&修正

まずはSearch Regexを使って、BrowserShotsのコードを検索してみましょう。

ダッシュボード左メニューから「ツール」→「Search Regex」へ進み、記事内にあるBrowser Shotsコードの一部「browser-shot url=」を入れて検索します。

Search RegexでBrowser Shotsのコードを検索

「browser-shot url=」は、ブログ内に583もありました。この文字列はBrowser Shotsのコード以外で使われることはないので、検索結果に挙がっているコードは全て修正します。

Search RegexでBrowser Shotsのコードを検索

修正は「width」の後ろに「height」を追加します。コードの検索・修正は、スペースの有無などに注意しましょう。下のサンプルは全角文字が混じっているので、コピペせずに自分で入力してくださいね。

検索の文字列:  width=”240″]<div>
置き換える文字列: width=”240″ height=”160″]</div>

として、「Replace&Save」をクリックしてください。width=”240″だけだと、Browser Shotsのコード以外の文字列も検索結果に挙がってしまうので、width=”240″]</div>まで入力しています。

上記の文字列は自分のコードに合わせて修正してくださいね。

Search RegexでBrowser Shotsのコードを置き換え

475ヶ所が新しいコードに置き換わりました。でも、コードは全部で583あったので、残り108ヶ所はそのままですね。

Search Regex Browser Shotsのコード置き換え完了

当初はBrowser Shotsのwidthを200で設定していたため、width=”240″では検索に引っかからなかったようです。検索の文字列を width=”200″]</div> に変更して、再度修正します。

これでBrowser Shotsのサムネイルが全て正しく表示されるようになりました。

Browser Shots サムネイル表示

Browser Shotsのコードだけでなく、Create Linkの方も修正しておいてくださいね。「Configure」から作成するコードへ height=”160″ を追記すればOKです。

WordPress プラグインの更新はお早めに

いわしはBrowser Shotsのサムネイル表示がおかしくなったときに、しばらくの間プラグインを一旦元のバージョンに戻して使っていました。

WordPress 更新したプラグインを元のバージョンに戻す
WordPressで最新バージョンにアップデートしたプラグインがうまく動かないときに、元のバージョンに戻して修正する方法を解説します。※ WordPressプラグインの中には脆弱性を持つものがあり、その対処はプラグインの更新によって行われて

WordPressプラグインの中には脆弱性を持つものがあり、その対処はプラグインの更新によって行われています。古いバージョンのままプラグインを使い続けるのは危険なので、このような方法はあくまで一時的にとどめて、早急に更新することをお勧めします。

コメント

タイトルとURLをコピーしました