(記事内リンクにPR含む場合があります)

【WordPress】Regenerate Thumbnailsでアイキャッチのサムネイル再生成!高速化にも貢献

かわいいアイキャッチ Webサイト高速化

かわいいアイキャッチ

WordPressプラグイン「Regenerate Thumbnails」はアイキャッチ画像のサムネイルのリサイズを簡単に実現できます。ブログの見栄えやテーマを変えたり、関連記事にサムネイルを設定した場合に便利です。

ゆめぴょんです。こんちはっ(^^)/

ブログで記事を探してる時に、内容を象徴するような画像や写真があればより好印象でクリックしたくなります。記事下やサイドバーの関連記事、人気記事、新着記事の一覧にもサムネイルがあると魅力が増します。

ブログのトップページ(ホーム)でも記事の一覧を表示することが多いです。この時もサムネイルが重要になります。しかしテーマを変えたりすると必要となるサムネイル画像のサイズも変わるのに、実際の画像サイズは自動で変更されません。

アイキャッチのサムネイル再生成で高速化

私はサイドバーの人気記事にサムネイルを表示するように設定した後、ずっとサムネイルをリサイズせずに放置していました。そしてある時、サイト測定ツールGTmetrixに指摘されてはじめて気づきました。

そしてサムネイルを再生成(リサイズ)してみると測定ツールのスコアも上がり、表示速度もわずかですが速くなりました。もっと早く気づくべきでした。

アイキャッチのサムネイルを作成する方法

アイキャッチのサムネイルが生成されるタイミングは、私の知る限りたった1つしかないと思っています。すなわち「投稿画面かメディアライブラリでアイキャッチをアップロードした時」です。

もしそれ以外にもあるよ!ということをご存知の方がいれば、ぜひ教えてくださいね。

ちなみにPicasaやFlickrなどの外部サービスから画像を貼り付けている場合は、アイキャッチが自動で生成されません。その場合でも自動でアイキャッチを作成してくれるWordPressプラグインが「Auto Post Thumbnail」です。

そして既に作成されたアイキャッチのサムネイルをリサイズしてくれるWordPressプラグインが、今回紹介する「Regenerate Thumbnails」です。

「Regenerate Thumbnails」を使う前に新しいサイズを設定

サムネイルのサイズを設定する方法は簡単です。WordPress管理画面の左メニュー「設定」→「メディア」でサムネイル、中サイズ、大サイズの3種類の大きさで設定できます。

これ以外の大きさも設定したい場合は、テーマファイルの「functions.php」に下の3行目のように記述すればいいです。よくわからない人は上の「メディア」で設定したサムネイルを利用することをオススメします。

[php]
add_theme_support( ‘post-thumbnails’ ); // これがないとアイキャッチ機能は使えない
set_post_thumbnail_size( 100, 100, false ); // サムネイルを設定。幅、高さ、切り抜き(true:トリミング。false:縦横比を維持。標準はfalse)
add_image_size( ‘name_is_free’, 60, 60, true ); // 新しいサイズの名称、幅、高さ、切り抜き(true:トリミング。false:縦横比を維持。標準はfalse)
the_post_thumbnail(‘name_is_free’); // 設定したサムネイルを表示。引数なしは標準サムネイル。imgタグは自動で生成される
[/php]

1、2、4行目は関連の関数です。今回は使わないけどおまけです!

「Regenerate Thumbnails」のインストールと設定方法

WordPress管理画面の左メニューの「プラグイン」→「新規追加」から「Regenerate Thumbnails」を検索。インストール後に有効化するのを忘れじゅに!

今回はいつもの「設定」ではなく「ツール」→「Regen. Thumbnails」をクリック。そしてサムネイルを更新したいタイミングで「Regenerate All Thumbnails」を押してください。

進行状況を示すバーがでてきます。終了するまでそのまま待ちましょう。スクリーンショットを取るのを忘れてしまいましたが、操作は何もなくてただ待つだけなので簡単です。

バーが100%になればサムネイルのリサイズが完了です。実際に表示されている画像のサイズをチェックして確かめてみてください。

ゆめぴょんでした。ちゃおっ!

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